313 lines
8.7 KiB
Vue
313 lines
8.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="">
|
|||
|
|
<!-- <block v-for="(item, index) in info">
|
|||
|
|
<block v-if="item.type==1">
|
|||
|
|
<view class="type_name">无门槛实物通用补贴<text class="n_count">(2张)</text></view>
|
|||
|
|
<view class="r_list" v-for="(e, i) in item.list">
|
|||
|
|
<view class="r_item" @click="change(index, i)">
|
|||
|
|
<image class="r_bg" src="/static/active/red_packet.webp"></image>
|
|||
|
|
<view class="r_body">
|
|||
|
|
<view class="r_count">
|
|||
|
|
<view class="rc_count">
|
|||
|
|
<text class="rc_icon">￥</text>240
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="r_content">
|
|||
|
|
<view class="r_name">现金抵扣补贴</view>
|
|||
|
|
<view>仅限平台指定商家商品可使用</view>
|
|||
|
|
<view>有效期至 2026.01.15 24:00:00</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="r_icon">
|
|||
|
|
<u-icon v-if="changeRed.type == index && changeRed.id == i" name="checkmark-circle-fill" color="#FFF3CC" size="56rpx"></u-icon>
|
|||
|
|
<u-icon v-else name="checkmark-circle" color="#FFF3CC" size="56rpx"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
<block v-if="item.type==2">
|
|||
|
|
<view class="type_name">不可使用补贴<text class="n_count">(2张)</text></view>
|
|||
|
|
<view class="none_list" v-for="(e, i) in item.list">
|
|||
|
|
<view class="r_body">
|
|||
|
|
<view class="r_count">
|
|||
|
|
<view class="rc_count">
|
|||
|
|
<text class="rc_icon">￥</text>200
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="r_content">
|
|||
|
|
<view class="r_name">现金抵扣补贴</view>
|
|||
|
|
<view>仅限平台指定商家商品可使用</view>
|
|||
|
|
<view>有效期至 2026.01.15 24:00:00</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-line dashed color="#999999"></u-line>
|
|||
|
|
<view class="n_tips">本单不可用原因：未在平台指定店铺使用</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</block> -->
|
|||
|
|
|
|||
|
|
<view style="height: 30rpx;"></view>
|
|||
|
|
<view class="r_list" v-for="(item, i) in list" :key="i">
|
|||
|
|
<view class="r_item" @click="change(item)">
|
|||
|
|
<image class="r_bg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/ad7c4202403081750326208.webp"></image>
|
|||
|
|
<view class="r_body">
|
|||
|
|
<view class="r_count">
|
|||
|
|
<view class="rc_count">
|
|||
|
|
<text class="rc_icon">￥</text>{{item.balance}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="r_content">
|
|||
|
|
<view class="r_name">{{item.coupon_title}}</view>
|
|||
|
|
<view>{{item.describe}}</view>
|
|||
|
|
<view>有效期至 {{item.end_time}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="r_icon">
|
|||
|
|
<u-icon v-if="changeRed&&changeRed.coupon_user_id==item.coupon_user_id" name="checkmark-circle-fill" color="#FFF3CC" size="56rpx"></u-icon>
|
|||
|
|
<!-- <u-icon v-else name="checkmark-circle" color="#FFF3CC" size="56rpx"></u-icon> -->
|
|||
|
|
<view v-else style="height: 50rpx;width: 50rpx;border-radius: 50%;border: 5rpx solid #FFF3CC;"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="footer">
|
|||
|
|
<view>
|
|||
|
|
<text>已选 {{ changeRed?1:0 }} 张</text>
|
|||
|
|
<view v-if="changeRed&&changeRed.coupon_title.includes('抵扣补贴')" style="font-size: 24rpx;margin-left: 10rpx;color: #ed4c3a;">(使用补贴后此订单将不参与任何补贴活动)</view>
|
|||
|
|
<view v-if="changeRed&&changeRed.coupon_title.includes('通用补贴')" style="font-size: 24rpx;margin-left: 10rpx;color: #ed4c3a;">(使用补贴后此订单将不参与用户消费补贴活动)</view>
|
|||
|
|
<!-- , 可减 <text class="red_i">¥</text> <text class="red_c">0</text> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" @click="comfirm">确定</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
info: [
|
|||
|
|
{
|
|||
|
|
type: 1, // 是否可以使用
|
|||
|
|
name: '无门槛实物通用补贴',
|
|||
|
|
list: [1, 2]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 1, // 是否可以使用
|
|||
|
|
name: '现金抵扣补贴',
|
|||
|
|
list: [1,2,3]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 2, // 是否可以使用, 2不可以使用
|
|||
|
|
name: '不可使用补贴',
|
|||
|
|
list: [1]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
list: [],
|
|||
|
|
changeRed: null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
const eventChannel = this.getOpenerEventChannel();
|
|||
|
|
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
|
|||
|
|
eventChannel.on('changeRedPacketInfo', (data) => {
|
|||
|
|
console.log(data);
|
|||
|
|
this.list = data;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onShow() {},
|
|||
|
|
methods: {
|
|||
|
|
change(e, i) {
|
|||
|
|
console.log(e, i);
|
|||
|
|
if(this.changeRed&&this.changeRed.coupon_user_id==e.coupon_user_id)this.changeRed = null;
|
|||
|
|
else this.changeRed = e;
|
|||
|
|
},
|
|||
|
|
comfirm(){
|
|||
|
|
uni.$emit('changeRedPacket', this.changeRed?.coupon_user_id||'');
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
uni.stopPullDownRefresh()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page{
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
.type_name{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
.n_count{
|
|||
|
|
color: #7A7A7A;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.r_list {
|
|||
|
|
padding: 0 20rpx 20rpx 20rpx;
|
|||
|
|
|
|||
|
|
.r_item {
|
|||
|
|
height: 156rpx;
|
|||
|
|
width: 710rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.r_bg {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r_body {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.r_count {
|
|||
|
|
flex: 2;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #A46F32;
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
|
|||
|
|
.rc_count {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rc_icon {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r_content {
|
|||
|
|
flex: 4;
|
|||
|
|
color: #FFF3CC;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 18rpx 10rpx 18rpx 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.r_name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
view{
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden; /* 隐藏超出宽度的文本 */
|
|||
|
|
white-space: nowrap; /* 不换行 */
|
|||
|
|
text-overflow: ellipsis; /* 文本末尾显示省略号 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r_icon {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.none_list{
|
|||
|
|
margin: 0 20rpx 20rpx 20rpx;
|
|||
|
|
background-color: #E2E2E2;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
|
|||
|
|
.r_body {
|
|||
|
|
height: 156rpx;
|
|||
|
|
width: 710rpx;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.r_count {
|
|||
|
|
flex: 2;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
|
|||
|
|
.rc_count {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rc_icon {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r_content {
|
|||
|
|
flex: 5;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 18rpx 10rpx 18rpx 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.r_name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
view{
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden; /* 隐藏超出宽度的文本 */
|
|||
|
|
white-space: nowrap; /* 不换行 */
|
|||
|
|
text-overflow: ellipsis; /* 文本末尾显示省略号 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.n_tips{
|
|||
|
|
padding: 10rpx 30rpx 20rpx 30rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer{
|
|||
|
|
height: 130rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
background-color: #F6F6F6;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
.red_i{
|
|||
|
|
color: #FF421D;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
.red_c{
|
|||
|
|
color: #FF421D;
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
}
|
|||
|
|
.btn{
|
|||
|
|
width: 128rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
background-color: #EC693F;
|
|||
|
|
border-radius: 34rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|