jiuyiUniapp/jiuyi/pages/shop/commodity/components/jy-commodity-content/index.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>