<script setup>
|
import { onMounted, ref } from 'vue';
|
import { pointsExchangeApi } from '../../../api/index.js'
|
const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
|
const pointExchangeList = ref([
|
// {goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
])
|
async function searchPoints(){
|
await pointsExchangeApi({limit:10000,page:1,userId:userInfo.id}).then((res) =>{
|
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()
|
})
|
|
</script>
|
<template>
|
<view class="container">
|
<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-box">
|
<view class="item-row1">
|
<text>兑换商品：</text>
|
<text class="goods-name">{{item.goodsName}}</text>
|
</view>
|
<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>
|
</view>
|
<view v-else class="nodata">
|
<image src="../../../static/images/pointMall/noRecord.svg" alt=""></image>
|
<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>
|
|
<style lang="scss" scoped>
|
|
.container{
|
width:100%;
|
height:100vh;
|
.content{
|
width:100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to bottom,#fef7da,#FFF);
|
padding:50rpx 32rpx 100rpx;
|
box-sizing: border-box;
|
.main{
|
width:99%;
|
height:calc(100% - 50rpx);
|
background: rgba(255,255,255,0.8);
|
box-shadow: 0 0 6rpx 2rpx #fbd1a2;
|
border-radius:20rpx;
|
margin: 0 auto;
|
padding:28rpx 48rpx;
|
box-sizing: border-box;
|
overflow: scroll;
|
.item{
|
width:100%;
|
height:260rpx;
|
border-bottom:1rpx solid #D8D8D8;
|
box-sizing:border-box;
|
padding:20rpx 0 10rpx;
|
margin-bottom:10rpx;
|
.item-box{
|
width:100%;
|
height:100%;
|
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-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-row3{
|
display: flex;
|
.points{
|
display: flex;
|
align-items: center;
|
.points-img{
|
width:40rpx;
|
height:40rpx;
|
margin-left:5rpx;
|
}
|
.points-value{
|
color: #efab22;
|
}
|
}
|
}
|
.item-row4{
|
width:100%;;
|
.time{
|
font-weight: 300;
|
font-size:26rpx;
|
color: #909090;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
}
|
}
|
}
|
.nodata{
|
width:100%;
|
height:1200rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding-bottom:400rpx;
|
box-sizing: border-box;
|
flex-direction: column;
|
image{
|
width:300rpx;
|
height:300rpx;
|
}
|
text{
|
color:#fbd1a2;
|
}
|
}
|
}
|
.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>
|
