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> |