<template>
    <view class="bfff">
        <view class="price-box df aic jcsb py10"> <!-- 价格 -->
            <view class="price">￥<text>{{ commodity.price }}</text></view>
            <!-- 已售 -->
            <view class="sold">已售{{ commodity.sales ? commodity.sales + '+' : 0 }}</view>
        </view>
        <!-- 优惠 -->
        <JyGuidance :title="title" icon="right" path="/page/shop/shop"></JyGuidance>
        <!-- 商品名称 -->
        <view class="name t2hd">{{ commodity.productName }}</view>
        <!-- 优惠标签 -->
        <view class="df fdr jcfs aic mtb20" v-if="commodity.coupons.length > 0">
            <uni-tag class="uni-tag" :inverted="true" :text="item.couponName" type="warning" size="small"
                v-for="(item, index) in commodity.coupons" :key="index" />
        </view>
        <JyGuidance :titleStyle="titleStyle" title="全场包邮 · 发货时间 · 全场包邮" icon="right" path="/page/shop/shop">
        </JyGuidance>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import JyGuidance from '../jy-guidance'
const props = defineProps({
    // 优惠卷
    commodity: {
        type: Object,
        default: () => { { } }
    }
})
const title = [{
    text: '1元无门槛优惠卷'
}, {
    text: '你们定义输入标签'
}]
const titleStyle = {
    'color': '#666666',
    'font-size': '24rpx'
}
const welfare = ref([{
    text: '好评率超98%同款'
}, {
    text: '同款热销'
}])
</script>
<style lang="scss" scoped>
.price {
    color: #FF7F37;
    font-weight: 500;
    font-size: $uni-font-size-sm;

    text {
        font-size: 56rpx;
    }
}

.uni-tag {
    margin: 0 6rpx;
}

.sold {
    color: $uni-text-color-grey;
    font-size: $uni-font-size-sm;
    margin-left: 20rpx;
}

.name {

    font-weight: 600;
    margin: 20rpx 0rpx;
    color: #3D3D3D;
    font-size: 28rpx;
    font-weight: normal;
}
</style>