caimei-applets-store/pages/views/goods/components/goods-info/goods-info.vue

<template>
    <view class="goods-info" v-if="productData">
        <view class="row">
            <!-- 名称 -->
            <view class="name" v-text="productData.name"></view>
            <!-- 分割线 -->
            <view class="dashed"></view>
            <!-- 分享 -->
            <button class="share" @click="$emit('share')">
                <text class="iconfont icon-fenxiang"></text>
                <text class="text">分享</text>
            </button>
        </view>
        <view class="row" v-if="tagList.length > 0">
            <!-- 标签 -->
            <view class="goods-tags">
                <view class="tag" v-for="(item, index) in tagList" :key="index">{{ item }}</view>
            </view>
        </view>
        <view class="row" v-if="recommend">
            <!-- 备注 -->
            <view class="remark" v-text="recommend"></view>
        </view>
        <tui-divider :height="48"></tui-divider>
        <view class="row">
            <!-- 服务 -->
            <view class="service">
                <view class="iconfont icon-wuyoushouhou"><text>无忧退货</text></view>
                <view class="iconfont icon-wuyoushouhou"><text>快速退款</text></view>
                <view class="iconfont icon-wuyoushouhou"><text>正品保证</text></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'goods-info',
    props: {
        productData: {
            type: Object,
            default: () => null
        }
    },
    computed: {
        tagList() {
            return this.productData.tagsList || []
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-info {
    padding: 24rpx;
    background-color: #fff;
    .row {
        @extend .cm-flex-between;

        &:nth-child(2) {
            margin-top: 10rpx;
            margin-bottom: 28rpx;
        }
    }
    .name {
        width: 540rpx;
        min-height: 96rpx;
        padding-right: 16rpx;
        font-size: 34rpx;
        line-height: 48rpx;
        color: #333333;
    }
    .dashed {
        height: 80rpx;
        border-right: 1rpx dashed #b2b2b2;
    }
    .share {
        @extend .cm-flex-center;
        flex-direction: column;
        line-height: 1;
        background: transparent;
        width: 80rpx;
        height: 100rpx;
        padding: 0;
        margin: 0;
        &::after {
            display: none;
        }

        .iconfont {
            font-size: 50rpx;
            color: #ff457b;
        }
        .text {
            font-size: 22rpx;
            color: #999999;
        }
    }
    .goods-tags {
        @extend .cm-flex-center;
        justify-content: flex-start;
        flex-wrap: wrap;

        .tag {
            padding: 0 8rpx;
            margin-right: 20rpx;
            height: 34rpx;
            background: #fff3f7;
            border-radius: 6rpx;
            font-size: 20rpx;
            color: #ff457b;
            line-height: 34rpx;
        }
    }
    .remark {
        font-size: 24rpx;
        color: #333333;
        &::before {
            content: '备注：';
            color: #666;
        }
    }
    .service {
        @extend .cm-flex-center;
        justify-content: flex-start;
        .iconfont {
            margin-right: 40rpx;
            font-size: 22rpx;
            color: #ff457b;

            &:last-child {
                margin-right: 0;
            }

            text {
                margin-left: 8rpx;
                color: #999999;
            }
        }
    }
}
</style>