添加积分兑换

Liuyi

2024-11-21 9857f8cdadf9bbda695a689f42e0e8cecfefab3f

 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>