s-coupon-select.vue
3.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!-- 订单确认的优惠劵选择弹窗 -->
<template>
<su-popup
:show="show"
type="bottom"
round="20"
@close="emits('close')"
showClose
backgroundColor="#f2f2f2"
>
<view class="model-box">
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
<scroll-view
class="model-content"
scroll-y
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<!--可使用的优惠券区域-->
<view class="subtitle ss-m-l-20">可使用优惠券</view>
<view
v-for="(item, index) in state.couponInfo.filter((coupon) => coupon.match)"
:key="index"
>
<s-coupon-list :data="item" type="user" :disabled="false">
<template #default>
<label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
<radio
color="var(--ui-BG-Main)"
style="transform: scale(0.8)"
:checked="state.couponId === item.id"
@tap.stop="radioChange(item.id)"
/>
</label>
</template>
</s-coupon-list>
</view>
<!--不可使用的优惠券区域-->
<view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
<view v-for="item in state.couponInfo.filter((coupon) => !coupon.match)" :key="item.id">
<s-coupon-list :data="item" type="user" :disabled="true">
<template v-slot:reason>
<view class="ss-flex ss-m-t-24">
<view class="reason-title"> 不可用原因：</view>
<view class="reason-desc">{{ item.mismatchReason || '未达到使用门槛' }}</view>
</view>
</template>
</s-coupon-list>
</view>
</scroll-view>
</view>
<view class="modal-footer ss-flex">
<button class="confirm-btn ss-reset-button" @tap="onConfirm">确认</button>
</view>
</su-popup>
</template>
<script setup>
import { computed, reactive } from 'vue';
const props = defineProps({
modelValue: {
// 优惠劵列表
type: Object,
default() {},
},
show: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['confirm', 'close']);
const state = reactive({
couponInfo: computed(() => props.modelValue), // 优惠劵列表
couponId: undefined, // 选中的优惠劵编号
});
// 选中优惠劵
function radioChange(couponId) {
if (state.couponId === couponId) {
state.couponId = undefined;
} else {
state.couponId = couponId;
}
}
// 确认优惠劵
const onConfirm = () => {
emits('confirm', state.couponId);
};
</script>
<style lang="scss" scoped>
:deep() {
.uni-checkbox-input {
background-color: var(--ui-BG-Main);
}
}
.model-box {
height: 60vh;
}
.title {
font-size: 36rpx;
height: 80rpx;
font-weight: bold;
color: #333333;
}
.subtitle {
font-size: 26rpx;
font-weight: 500;
color: #333333;
}
.model-content {
height: 54vh;
}
.modal-footer {
width: 100%;
height: 120rpx;
background: #fff;
}
.confirm-btn {
width: 710rpx;
margin-left: 20rpx;
height: 80rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
border-radius: 40rpx;
color: #fff;
}
.reason-title {
font-weight: 600;
font-size: 20rpx;
line-height: 26rpx;
color: #ff0003;
}
.reason-desc {
font-weight: 600;
font-size: 20rpx;
line-height: 26rpx;
color: #434343;
}
</style>