From 9857f8cdadf9bbda695a689f42e0e8cecfefab3f Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期四, 21 十一月 2024 17:08:07 +0800
Subject: [PATCH] 添加积分兑换
---
pages/pointsMall/pointsExchangeRecord/index.vue | 198 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 151 insertions(+), 47 deletions(-)
diff --git a/pages/pointsMall/pointsExchangeRecord/index.vue b/pages/pointsMall/pointsExchangeRecord/index.vue
index 58ca621..29d3eef 100644
--- a/pages/pointsMall/pointsExchangeRecord/index.vue
+++ b/pages/pointsMall/pointsExchangeRecord/index.vue
@@ -10,6 +10,42 @@
pointExchangeList.value = res.data.list
})
}
+ //兑换码相关
+ const popupCode = ref()
+ const codeValue = ref('')
+ const codeGoodsName = ref('')
+ //点击兑换
+ function showConvertCode(redeemCode,goodsName){
+ codeValue.value = redeemCode
+ popupCode.value.open()
+ codeGoodsName.value = goodsName
+ }
+ //弹窗改变事件
+ let codeInterVal
+ async function popupChange(e){
+ console.log('tanchuan',e)
+ if(e.show == true){
+ console.log('打开弹窗')
+ codeInterVal = setInterval(async() =>{
+ await searchPoints()
+ pointExchangeList.value.forEach((item) =>{
+ if(item.redeemCode == codeValue.value){
+ if(item.receiveStatus == 1){
+ clearInterval(codeInterVal)
+ popupCode.value.close()
+ uni.showToast({
+ title:'领取成功!'
+ })
+ }
+ }
+ })
+ },2000)
+ }else if(e.show == false){
+ console.log('关闭弹窗')
+ clearInterval(codeInterVal)
+ await searchPoints()
+ }
+ }
onMounted(async() =>{
await searchPoints()
})
@@ -17,23 +53,38 @@
</script>
<template>
<view class="container">
- <point-navbar title='兑换记录'></point-navbar>
+ <point-navbar title='兑换订单'></point-navbar>
<view class="content">
<view class="main" v-if="pointExchangeList.length > 0">
<block v-for="(item,index) in pointExchangeList">
<view class="item">
- <view class="item-left">
- <text class="item-methods">兑换商品：{{item.goodsName}}</text>
- <view class="item-status">
- <text>领取状态：</text>
- <text>{{item.receiveStatusView}}</text>
+ <view class="item-box">
+ <view class="item-row1">
+ <text>兑换商品：</text>
+ <text class="goods-name">{{item.goodsName}}</text>
</view>
- <text class="item-time">兑换时间：{{item.exchangeDate}}</text>
- <text v-if="item.receiveStatus == 1" class="item-time">领取时间：{{item.receiveDate}}</text>
- </view>
- <view class="item-right">
- <text class="money">-{{item.integralAmount}}</text>
- <image src="../../../static/images/pointMall/advert/money1.svg"></image>
+ <view class="item-row2">
+ <view class="status">
+ <text>领取状态：</text>
+ <text class="status-value">{{item.receiveStatusView}}</text>
+ </view>
+ <view class="advert-code" v-if="item.receiveStatus == 0" @click="showConvertCode(item.redeemCode,item.goodsName)">
+ <text>出示兑换码</text>
+ </view>
+ </view>
+ <view class="item-row3">
+ <view>积分消耗：</view>
+ <view class="points">
+ <text class="points-value">-{{item.integralAmount}}</text>
+ <image class="points-img" src="../../../static/images/pointMall/advert/money1.svg"></image>
+ </view>
+ </view>
+ <view class="item-row4">
+ <view class="time">
+ <text class="time-value">兑换时间：{{item.exchangeDate}}</text>
+ <text v-if="item.receiveStatus == 1" class="time-value">领取时间：{{item.receiveDate}}</text>
+ </view>
+ </view>
</view>
</view>
</block>
@@ -43,6 +94,16 @@
<text>暂无记录</text>
</view>
</view>
+ <uni-popup ref="popupCode" @change="popupChange" type="center" background-color="#fff" border-radius="10px">
+ <view class="convert-code">
+ <text class="code-title">兑换码</text>
+ <view class="code-value">
+ <!-- <l-qrcode :value="codeValue" size="260rpx" color="rgb(12, 15, 36)"></l-qrcode> -->
+ <text>{{codeValue}}</text>
+ </view>
+ <text>商品名称：{{codeGoodsName}}</text>
+ </view>
+ </uni-popup>
</view>
</template>
@@ -72,46 +133,68 @@
height:260rpx;
border-bottom:1rpx solid #D8D8D8;
box-sizing:border-box;
- padding-bottom:10rpx;
+ padding:20rpx 0 10rpx;
margin-bottom:10rpx;
- justify-content:space-between;
- align-items:flex-end;
- display: flex;
- .item-left{
+ .item-box{
+ width:100%;
height:100%;
- display:flex;
- flex-direction:column;
- justify-content:flex-end;
- align-items: flex-start;
- font-weight:500;
- font-size: 32rpx;
- color: #59544e;
- .item-methods{
- margin-bottom:20rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content:space-around;
+ font-weight:500;
+ font-size: 32rpx;
+ color: #5f5b57;
+ .item-row1{
+ width:100%;
+ .goods-name{
+ color: #4b4845;
+ }
}
- .item-time{
- font-weight: 300;
- font-size:26rpx;
- color: #909090;
+ .item-row2{
+ width:100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .status-value{
+ color: #e2ac21;
+ }
+ .advert-code{
+ width: 200rpx;
+ height:55rpx;
+ background: linear-gradient(to right,#efa339,#fbc671);
+ border-radius:30rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #FFF;
+ letter-spacing:1rpx;
+ font-size: 30rpx;
+ }
}
- .item-status{
- margin-bottom:20rpx;
+ .item-row3{
+ display: flex;
+ .points{
+ display: flex;
+ align-items: center;
+ .points-img{
+ width:40rpx;
+ height:40rpx;
+ margin-left:5rpx;
+ }
+ .points-value{
+ color: #efab22;
+ }
+ }
}
- }
- .item-right{
- height:100%;
- display:flex;
- justify-content:flex-end;
- align-items:flex-end;
- image{
- width:40rpx;
- height:40rpx;
- margin-left:5rpx;
- }
- .money{
- font-weight: 500;
- font-size: 32rpx;
- color: #efab22;
+ .item-row4{
+ width:100%;;
+ .time{
+ font-weight: 300;
+ font-size:26rpx;
+ color: #909090;
+ display: flex;
+ flex-direction: column;
+ }
}
}
}
@@ -134,5 +217,26 @@
}
}
}
+ .convert-code{
+ width: 550rpx;
+ height: 550rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content:space-evenly;
+ padding:10rpx 0;
+ box-sizing: border-box;
+ .code-title{
+ font-weight:600;
+ }
+ .code-value{
+ padding: 30rpx;
+ border:1rpx solid #e2e2e2;
+ box-sizing: border-box;
+ border-radius:10rpx;
+ font-weight:600;
+ letter-spacing:1rpx;
+ }
+ }
}
</style>
--
Gitblit v1.9.3