156 lines
4.0 KiB
Vue
156 lines
4.0 KiB
Vue
<template>
|
||
<view class="order-page">
|
||
<NavCom title="积分使用记录"></NavCom>
|
||
<view style="padding-top: 300rpx;" v-if="list.length === 0">
|
||
<empty></empty>
|
||
</view>
|
||
<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower" v-if="list.length > 0">
|
||
<view class="list" v-for="(item,index) in list" :key="index">
|
||
<view class="title">订单号：{{item.orderNo}}</view>
|
||
<view class="sub">使用类型：{{typeObj[item.type]}}</view>
|
||
<view class="sub">使用时间：{{formatDateTime(item.createdAt)}}</view>
|
||
<view class="point">
|
||
<image src="@/static/mine/jf.png" mode="" class="point-img"></image>
|
||
{{item.points}}
|
||
</view>
|
||
<!-- <view class="header">
|
||
|
||
<view class="header-item"><view class="item-title">订单号：</view>{{item.orderNo}}</view>
|
||
<view class="header-item" style="margin: 12rpx 0;"><view class="item-title">使用类型：</view>{{typeObj[item.type]}}</view>
|
||
<view class="header-item"><view class="item-title">使用时间：</view>{{item.createdAt}}</view>
|
||
</view>
|
||
<view class="list-right">{{item.points}}</view> -->
|
||
</view>
|
||
<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import { userPoint } from '@/API/user.js'
|
||
import NavCom from '@/pages/components/nav.vue'
|
||
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
list:[],
|
||
type:'',
|
||
page:1,
|
||
typeObj:{
|
||
'BOX_RECOVERY':'盲盒回收',
|
||
'MALL_PURCHASE':'商城购买',
|
||
'GIFT':'系统赠送'
|
||
},
|
||
total:0
|
||
}
|
||
},
|
||
components:{NavCom},
|
||
onLoad(opation){
|
||
this.getUserPoint()
|
||
},
|
||
methods:{
|
||
formatDateTime(value) {
|
||
if (!value) return '';
|
||
const date = new Date(value);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
getUserPoint(){
|
||
uni.showLoading()
|
||
userPoint({page:this.page,size:10}).then(res => {
|
||
uni.hideLoading()
|
||
this.total = res.data.total
|
||
if(this.page > 1){
|
||
this.list = [...this.list,...res.data.content]
|
||
}else{
|
||
this.list = res.data.content
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
scrolltolower(){
|
||
if(this.total == this.list.length){
|
||
return
|
||
}
|
||
this.page += 1
|
||
this.getUserPoint()
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
.order-page{
|
||
.scroll-list-view{
|
||
padding-top: 130rpx;
|
||
height: 100vh;
|
||
|
||
.list{
|
||
width: 710rpx;
|
||
margin: 0rpx 20rpx;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
position: relative;
|
||
.title{
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.sub{
|
||
margin-top: 15rpx;
|
||
font-size: 20rpx;
|
||
color: #888888;
|
||
}
|
||
.point{
|
||
width: 130rpx;
|
||
position: absolute;
|
||
right: 38rpx;
|
||
bottom: 18rpx;
|
||
font-weight: 300;
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
display: flex;
|
||
align-items: center;
|
||
.point-img{
|
||
margin-right: 8rpx;
|
||
width: 30rpx;
|
||
height: 31rpx;
|
||
}
|
||
}
|
||
.header{
|
||
.header-item{
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.item-title{
|
||
width: 140rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
.list-right{
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |