caimei-applets-hehe/components/cm-module/cm-order-prodcut/cm-order-prodcut.vue

<template>
    <view class="cm-order-prodcut">
        <image :src="goodsData.productImage" class="cover"></image>
        <view class="content">
            <view class="title">{{ goodsData.name}}</view>
            <view class="unit">规格：{{ goodsData.productUnit }}</view>
            <view class="tags">
                <view class="tag type1">促销</view>
                <view class="tag type1">自营</view>
                <view class="tag type3">拼团价</view> 
                <view class="tag type2">活动价</view>
                <view class="tag type2">优惠券</view>
            </view>
            <view class="price"> 
                <text>￥{{ goodsData.price | formatPrice }}</text> 
                <text class="delete">单买价:￥400.00</text> 
            </view>
        </view>
        <text class="count" v-if="countVisible">×{{ goodsData.num }}</text>
    </view>
</template>

<script>
export default {
    props:{
        countVisible: {
            type: Boolean,
            default: true
        },
        goodsData: {
            type: Object,
            default:()=>{}
        }
    },
    filters:{
      formatPrice(price){
          if(!price) return ''
          return Number(price).toFixed(2)
      }  
    },
    data() {
        return {}
    }
}
</script>

<style lang="scss" scoped>
/* scss中可以用mixin来扩展 */
@mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

.cm-order-prodcut {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    
    overflow: hidden;

    .count{
        position: absolute;
        font-size: 26rpx;
        color: #333333;
        right: 24rpx;
        bottom: 0;
    }


    .cover {
        display: block;
        width: 180rpx;
        height: 180rpx;
        border-radius: 8rpx;
        box-sizing: border-box;
        border: 1px solid #F7F7F7;
    }

    .content {
        flex: 1;
        margin-left: 24rpx;
        .title {
            @include ellipsis(2);
            font-size: 26rpx;
            color: #333333;
            text-align: justify;
            line-height: 1.6;
            height: 80rpx;
        }
        .unit {
            margin-bottom: 8rpx;
            font-size: 20rpx;
            color: #999999;
        }
        .price {
            margin-top: 4rpx;
            font-size: 26rpx;
            color: #ff457b;
            .delete {
                margin-left: 32rpx;
                font-size: 20rpx;
                color: #999999;
            }
        }

        .tags {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            height: 30rpx;
            .tag {
                margin-right: 8rpx;
                font-size: 22rpx;
                height: 30rpx;
                line-height: 30rpx;
                text-align: center;
                
                &.type1{
                    padding: 0 8rpx;
                    background: #f83c6c;
                    border-radius: 4rpx;
                    color: #fff;
                }
                
                &.type2 {
                    width: 80rpx;
                    color: #f83c6c;
                    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
                        no-repeat;
                    background-size: contain;
                }
                &.type3 {
                    width: 80rpx;
                    background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
                    color: #fff;
                    border-radius: 4rpx;
                }
            }
        }
    }
}
</style>