nk-shop2.0/pages/redpacket/redpacket.vue

292 lines
7.2 KiB
Vue
Raw Normal View History

2024-01-20 18:27:30 +08:00
<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 class="footer">
<view>已选 {{ changeRed.id!=-1?1:0 }} , 可减 <text class="red_i">¥</text> <text class="red_c">50</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]
}
],
changeRed: {
type: -1,
id: -1,
},
}
},
onLoad(option) {
const eventChannel = this.getOpenerEventChannel();
// 监听acceptDataFromOpenerPage事件获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('changeRedPacketInfo', (data) => {
console.log(data)
})
},
onShow() {},
methods: {
change(e, i) {
console.log(e, i);
if(this.changeRed.type==e&&this.changeRed.id==i){
this.changeRed = {
type: -1,
id: -1
}
}else this.changeRed = {
type: e,
id: i
}
},
comfirm(){
uni.$emit('changeRedPacket', { id: 1 });
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>