caimei-applets-store/pages/views/share-buy/components/share-buy-product-info/share-buy-product-info.vue

<template>
    <view class="product-info">
        <view class="product">
            <image class="cover" :src="goodsData.productImage" mode="widthFix"></image>
            <view class="product-content">
                <view class="name" v-text="goodsData.productName"></view>
                <view class="unit">规格：{{ goodsData.unit }}</view>
                <view class="tags">
                    <view class="tag pt">{{ goodsData.memberNum }}人拼团价</view>
                </view>
                <view class="row">
                    <view class="price">￥{{ goodsData.price | priceFormat }}</view>
                    <view class="delete" v-if="goodsData.normalPrice">单买价￥{{ goodsData.normalPrice | priceFormat }}</view>
                </view>
            </view>
        </view>
        <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>
</template>

<script>
export default {
    name: 'share-buy-product-info',
    props: {
        goodsData: {
            type: Object,
            default: () => {}
        }
    }
}
</script>

<style lang="scss" scoped>
.product-info {
    background-color: #fff;
    .product {
        @extend .cm-flex-between;
        padding: 50rpx 24rpx 60rpx;
        .cover {
            width: 180rpx;
            height: 180rpx;
            border-radius: 12rpx;
            box-sizing: border-box;
            border: 1rpx dashed #e1e1e1;
        }

        .content {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            margin-left: 16rpx;
        }

        .name {
            @include ellipsis(2);
            width: 500rpx;
            min-height: 68rpx;
            font-size: 26rpx;
            color: #333333;
        }

        .tip {
            margin-top: 80rpx;
            font-size: 26rpx;
            color: #f83c6c;
        }

        .unit {
            min-height: 28rpx;
            font-size: 20rpx;
            color: #999999;
        }

        .tags {
            min-height: 30rpx;
        }

        .buy-num {
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 26rpx;
        }

        .row {
            @extend .cm-flex-center;
            justify-content: flex-start;

            .price {
                font-size: 26rpx;
                font-weight: 600;
                color: #f83c6c;
            }

            .delete {
                font-size: 20rpx;
                color: #999;
                margin-left: 32rpx;
            }
        }
    }

    .service {
        @extend .cm-flex-around;
        color: #ff457b;
        width: 750rpx;
        height: 72rpx;
        background: #fff8fd;
        box-sizing: border-box;

        .iconfont {
            font-size: 24rpx;
            line-height: 24rpx;
            text {
                color: #ff457b;
                margin-left: 4rpx;
            }
        }
    }
}
</style>