142 lines
2.9 KiB
Vue
142 lines
2.9 KiB
Vue
<template>
|
||
<view class="components-coupons">
|
||
<image class="coupons__cover" :src="data.image" mode="widthFix"/>
|
||
|
||
<view class="coupons__section flex jc-between ai-center">
|
||
<view>有效期至：
|
||
<text>{{ data.endTime }}</text>
|
||
</view>
|
||
<view class="coupons__tag coupons__tag-expire" v-if="data.status===2">已到期</view>
|
||
<view class="coupons__tag" @click="goGoods()" v-if="data.status===0 && !radioModel">去使用</view>
|
||
<view @click="selectCoupon">
|
||
<radio :value="data.id" :checked="data.checked" color="#FF564A" v-if="radioModel && data.status===0"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="coupons__rules">
|
||
<view class="coupons__rules-title" @click="changeRules()">使用规则
|
||
<image :class="{'open':isOpen}" :src="webUrl+'/20231125220409665027.png'" mode="scaleToFill"/>
|
||
</view>
|
||
<view
|
||
:class="isOpen ? 'auto-height' : ''"
|
||
class="coupon-html"
|
||
>
|
||
<rich-text :nodes="data.description" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Coupons",
|
||
props: {
|
||
data: Object,
|
||
radioModel: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
checked: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
isOpen: false
|
||
}
|
||
},
|
||
methods: {
|
||
changeRules() {
|
||
this.isOpen = !this.isOpen
|
||
},
|
||
goGoods() {
|
||
uni.switchTab({url: '/pages/home/landMark'})
|
||
// this.$global.navToGoods(this.data.productId)
|
||
},
|
||
selectCoupon() {
|
||
if (!this.radioModel) return
|
||
this.$emit('change', this.data.id)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.components-coupons {
|
||
width: 686rpx;
|
||
box-sizing: border-box;
|
||
border: 2rpx solid #FF564A;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.coupons__cover {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.coupons__section {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 18rpx 20rpx 16rpx 16rpx;
|
||
font-size: 32rpx;
|
||
line-height: 1;
|
||
|
||
text {
|
||
color: #EA1C1C;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.coupons__tag {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 120rpx;
|
||
height: 52rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 8rpx;
|
||
border: 2px solid #0DC5C5;
|
||
color: #0DC5C5;
|
||
font-size: 32rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.coupons__tag-expire {
|
||
border: 2rpx solid #BFBFBF;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.coupons__rules {
|
||
padding: 0 20rpx 20rpx 16rpx;
|
||
|
||
.coupons__rules-title {
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
|
||
image {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
.open {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.coupon-html {
|
||
height: 80rpx;
|
||
overflow: hidden;
|
||
transition: all .3s;
|
||
&.auto-height {
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |