qimall/backend/views/components/common/diy/style-components/goods-info/style1.php

<template id="goods-info-style1">
    <div class="goods-info-style1">
        <div class="goods-card">
            <div class="price-box" flex="main:justify cross:center">
                <div style="flex: 1;">
                    <div class="price-line" flex="cross:bottom" v-if="getShowTags('price')">
                        <div class="price">
                            ￥<span class="amount">88</span>
                        </div>
                        <div class="origin-price">￥99</div>
                    </div>
                </div>
                <div class="goods-share" flex="cross:center">
                    <div class="share-item" flex="dir:top main:center cross:center" v-if="getShowTags('share')">
                        <i class="iconfont icon-QR_code share-icons"></i>
                        <div class="share-title">分享</div>
                    </div>
                    <div class="share-item" flex="dir:top main:center cross:center" v-if="getShowTags('collect')">
                        <i class="iconfont icon-shoucang1 share-icons"></i>
                        <div class="share-title">收藏</div>
                    </div>
                </div>
            </div>
            <div v-if="getShowTags('memberPrice')" class="member-price-container">
                <span>
                    <img src="resources/img/decorate/commodity-group/mp.png">
                </span>
                <span class="member-price-title">会员价</span>
                <span class="member-price-title">￥73<span>
            </div>
            <div class="goods-title" v-if="getShowTags('title')">商品标题</div>
            <div class="goods-subtitle" v-if="getShowTags('subtitle')">商品副标题</div>
            <div v-if="addonsFields.length > 0">
                <div v-for="(value, index) in addonsFields">
                    <div v-if="getShowTags(value['type'])" class="addons-fields-style">
                        <span>{{value.prefix_text}}{{value.name}}{{value.value}}</span>
                    </div>
                </div>
            </div>
            <div class="addons-fields-style" v-if="getShowTags('scoreDeduct')">
                可用积分抵扣25元
            </div>
            <div class="goods-express" flex>
                <div class="express-item" v-if="getShowTags('sale')">销量：22</div>
                <div class="express-item" v-if="!global_goods_need&&getShowTags('stock')">库存：22</div>
            </div>
            <div class=" goods-cell-item goods-line-item" flex="cross:center" v-if="!global_goods_need&&getShowTags('coupon')">
                <div class="cell-title">领券</div>
                <div class="cell-cont" flex>
                    <div class="cell-coupon">满25立减9.9元</div>
                    <div class="cell-coupon">满50立减10元</div>
                </div>
            </div>
            <div v-if="!global_goods_need" class="goods-cell-item" flex="cross:center">
                <div class="cell-title">已选</div>
                <div class="cell-cont">默认</div>
                <i class="el-icon-arrow-right"></i>
            </div>
            <!-- 商品标签 -->
            <div v-if="getShowTags('shopTag')" class="goods-cell-item" flex="cross:center">
                <div class="cell-title">商品标签</div>
                <div class="shopLabelContent">
                    <div class="shopLabel" v-for="(item, index) in shopTags" :key="index">
                        <span class="label-text">{{item}}</span>
                    </div>
                </div>
            </div>
            <div class="goods-cell-item" flex="cross:center" v-if="!global_goods_need &&getShowTags('serve')">
                <div class="cell-title">服务</div>
                <div class="cell-cont" flex>
                    <div class="serve-item" v-for="(it, i) in serveList" :key="i">
                        <i class="el-icon-circle-check cell-color-r"></i>
                        <span>{{ it }}</span>
                    </div>
                </div>
            </div>
            <!-- 商品说明 -->
            <div class="goods-cell-desc" v-if="getShowTags('goodsDesc')">
                <div class="cell-title">商品说明</div>
                <div class="cell-cont">
                    <div class="desc-item">
                        药品名称：文本内容文本内容文本内容文本内
                    </div>
                    <div class="desc-item">
                        药品编码：5631441360230
                    </div>
                    <div class="desc-item">
                        医药编码：文本内容文本内容文本内容文本内容文本内容...
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('goods-info-style1', {
        name: "goods-info-style1",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            goodsData: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#goods-info-style1',
        data() {
            return {
                shopTags: ["标签1", "标签2", "标签3", "标签4", "标签5", "标签6", "标签7", "标签8", "标签9", "标签10"],
                serveList: ['7天包退换', '全国包邮'],
                global_goods_need: 0,
                addonsFields: []
            }
        },
        mounted() {
            this.getDetail()
            this.getAddonsFields()
        },
        methods: {
            getShowTags(name) {
                let arr = this.goodsData.checkList
                let i = arr.findIndex(item => item == name)
                return i == -1 ? false : true
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'mall/decorate/setting',
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        if (!isEmpty(e.data.data) && e.data.data.global_goods_need) {
                            this.global_goods_need = e.data.data.global_goods_need

                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getAddonsFields() {
                request({
                    params: {
                        r: 'mall/diy/get-addons-fields',
                        type: 'goods_detail'
                    },
                    method: 'get',
                }).then(e => {
                    this.dialogLoading = false;
                    if (e.data.code === 0) {
                        if (e.data.data.length > 0) {
                            let self = this;
                            e.data.data.forEach(function(value, index, arr) {
                                self.addonsFields.push({
                                    name: value['name'],
                                    type: value['type'],
                                    prefix_text: value['prefix_text'],
                                    value: '25.00'
                                })
                            })
                        }
                    }
                }).catch(e => {
                    console.log(e);
                });
            }
        }
    });
</script>

<style scoped>
    .cell-color-r {
        color: #DB0505;
    }

    .goods-card {
        position: relative;
        width: 100%;
        background-color: #fff;
        /* margin: auto;
        margin-top: -20px;
        border-radius: 5px; */
        padding: 10px 12px 5px;
    }

    .goods-info-style1 .price-line {
        font-size: 16px;
        /* padding-bottom: 18px; */
    }

    .goods-info-style1 .price-line .price {
        font-weight: 700;
        color: #DB0505;
    }

    .goods-info-style1 .price-line .price .amount {
        font-size: 28px;
    }

    .goods-info-style1 .price-line .origin-price {
        color: #999;
        text-decoration: line-through;
        padding-left: 10px;
        padding-bottom: 5px;
    }

    .goods-info-style1 .goods-title {
        font-size: 16px;
        font-weight: 700;
        padding: 8px 0;
    }

    .goods-info-style1 .goods-subtitle {
        font-size: 14px;
        color: #b0b3bf;
        /* padding-bottom: 8px; */
    }

    .goods-info-style1 .goods-express {
        position: relative;
        line-height: 36px;
        color: #b0b3bf;
        font-size: 12px;
    }

    .goods-info-style1 .goods-express .express-item {
        width: 33.3%;
    }

    .goods-info-style1 .goods-express:before {
        position: absolute;
        content: "";
        left: -12px;
        right: -12px;
        top: 0;
        border-top: 1px dashed #ededed;
    }

    .goods-line-item {
        position: relative;
    }

    .goods-cell-item .cell-title {
        color: #808080;
        font-size: 12px;
        font-weight: 700;
    }

    .goods-cell-item .cell-cont {
        flex: 1;
        margin-left: 20px;
        padding: 15px 0;
        font-size: 14px;
    }

    .goods-cell-item .cell-cont .cell-coupon {
        padding: 2px 12px;
        font-size: 12px;
        color: #fff;
        border-radius: 12px;
        margin-right: 8px;
        flex-shrink: 0;
        background-color: #DB0505;
    }

    .goods-line-item:before {
        position: absolute;
        content: "";
        left: -12px;
        right: -12px;
        bottom: 0;
        border-top: 1px solid #ededed;
    }


    .goods-cell-item .shopLabelContent {
        display: flex;
        margin-left: 2.5px;
        /* 设置容器宽度为300px，当内容超出容器宽度时显示横向滚动条 */
        max-width: 300px;
        /* 当内容超出容器宽度时显示横向滚动条 */
        overflow-x: auto;
        /* 防止标签换行 */
        white-space: nowrap;
        /* 隐藏滚动条 - 兼容火狐 */
        scrollbar-width: none;
        /* 隐藏滚动条 - 兼容IE */
        -ms-overflow-style: none;
    }

    /* 隐藏滚动条 - 兼容WebKit浏览器 */
    .goods-cell-item .shopLabelContent::-webkit-scrollbar {
        display: none;
    }

    .goods-cell-item .shopLabelContent .shopLabel {
        font-size: 12px;
        color: #DB0505;
        padding: 2px 4px;
        border-radius: 5px;
        border: 0.5px solid #DB0505;
        margin: 0 2.5px;
    }

    .goods-cell-item .shopLabelContent .shopLabel .label-text {
        font-size: 12px;
    }

    .goods-cell-item .cell-cont .serve-item {
        margin-right: 20px;
        color: #535353;
    }

    .goods-share {
        /* position: absolute;
        top: 15px;
        right: 5px; */
    }

    .goods-share .share-item {
        height: 45px;
        width: 45px;
        color: #333;
        border-radius: 50%;
        background: #f5f5f5;
        margin-right: 5px;
    }

    .share-icons {
        font-weight: 700;
    }

    .share-title {
        font-size: 11px;
        transform: scale(0.7);
    }

    .member-price-container {
        display: flex;
        align-items: center;
    }

    .member-price-title {
        font-size: 16px;
        padding-left: 3px;
    }

    div.addons-fields-style {
        color: gray;
        padding-top: 6px;
    }

    .goods-cell-desc:before {
        position: absolute;
        content: "";
        left: -12px;
        right: -12px;
        bottom: 105px;
        border-top: 5px solid #ededed;
    }

    .goods-cell-desc:after {
        position: absolute;
        content: "";
        left: -12px;
        right: -12px;
        bottom: 0;
        border-top: 5px solid #ededed;
    }

    .goods-cell-desc {
        position: relative;
        padding: 16px 0;
    }

    .goods-cell-desc .cell-title {
        color: #333333;
        text-align: left;
        font-size: 28rpx;
        font-weight: 600;
    }

    .goods-cell-desc .desc-item {
        width: 686rpx;
        height: 39rpx;
        opacity: 1;
        color: #999999;
        text-align: left;
        font-size: 26rpx;
        font-weight: 400;
        font-family: "SF Pro Text";
        line-height: 39rpx;
    }
</style>