75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<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> |