159 lines
3.2 KiB
Vue
159 lines
3.2 KiB
Vue
<template>
|
||
<view class="components-coupons">
|
||
<image
|
||
:src="data.image"
|
||
class="coupons__cover"
|
||
mode="widthFix"
|
||
/>
|
||
<view class="coupons__section flex jc-between ai-center">
|
||
<view>有效期至：
|
||
<text>{{ data.endTime }}</text>
|
||
</view>
|
||
<!-- status: 0-未使用，1-已使用，2-已过期 -->
|
||
<view
|
||
v-if="data.status === 2"
|
||
class="coupons__tag coupons__tag-expire"
|
||
>已到期</view>
|
||
<view
|
||
v-if="data.status === 0 && !radioModel"
|
||
class="coupons__tag coupons__tag-expire"
|
||
>不可用</view>
|
||
<view @click="selectCoupon">
|
||
<radio
|
||
v-if="radioModel && data.status === 0"
|
||
:value="data.id"
|
||
:checked="data.checked"
|
||
color="#FF564A"
|
||
/>
|
||
</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: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 是否显示选择框
|
||
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
|
||
},
|
||
selectCoupon() {
|
||
if (!this.radioModel) return
|
||
// 已选中则可以取消选中
|
||
this.$emit('change', this.data.checked ? '' : 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> |