<script setup>
|
import { onMounted, ref } from 'vue';
|
import { pointsExchangeApi } from '../../../api/index.js'
|
|
const pointExchangeList = ref([
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{goodsName:'纸巾',integralAmount:1232,receiveStatusName:'已领取',exchangeDate:'2024-11-13 14:46:40',receiveDate:'2024-11-13 14:46:40'},
|
{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}).then((res) =>{
|
// pointExchangeList.value = res.data.list
|
})
|
}
|
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-left">
|
<text class="item-methods">兑换商品：{{item.goodsName}}</text>
|
<view class="item-status">
|
<text>领取状态：</text>
|
<text>{{item.receiveStatusName}}</text>
|
</view>
|
<text class="item-time">兑换时间：{{item.exchangeDate}}</text>
|
<text 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>
|
</view>
|
</block>
|
</view>
|
<view v-else class="nodata">
|
<image src="../../../static/images/pointMall/noRecord.svg" alt=""></image>
|
<text>暂无记录</text>
|
</view>
|
</view>
|
</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-bottom:10rpx;
|
margin-bottom:10rpx;
|
justify-content:space-between;
|
align-items:flex-end;
|
display: flex;
|
.item-left{
|
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;
|
}
|
.item-time{
|
font-weight: 300;
|
font-size:26rpx;
|
color: #909090;
|
}
|
.item-status{
|
margin-bottom:20rpx;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
</style>
|
