214 lines
5.3 KiB
Vue
214 lines
5.3 KiB
Vue
<template>
|
||
<view class="detail-content">
|
||
<u-section title="充值记录" :subTitle="`总数 ${total}`"
|
||
color="#a3d4fe" fontSize="40" :arrow="false" subColor="#cbe7fb" />
|
||
<scroll-view :scroll-top="scrollTop" :scrollY="true" class="rechargeList"
|
||
scroll-with-animation @scroll="scroll">
|
||
<u-collapse :itemStyle="{borderTopRightRadius: '10rpx', border: '2rpx solid #eee',
|
||
borderTopLeftRadius: '10rpx',marginTop: '30rpx'}" :arrow="false" :headStyle="{color:'#b3a0da',
|
||
borderTopLeftRadius: '10rpx', cursor: 'pointer', borderTopRightRadius: '10rpx'}"
|
||
:bodyStyle="{minHeight: '100rpx',backgroundColor: '#fbfbfb',}">
|
||
<u-collapse-item v-for="(item, index) in rechargeList" :key="item.id">
|
||
<template slot="title">
|
||
<view class="recharge-item-title">
|
||
<view class="cit-left">
|
||
{{ index+1 }}. 钻石充值
|
||
<text :class="item.result ? 'citl-green' : 'citl-red'">
|
||
{{ item.addOrSub === 'sub' ? '- ' : '+ ' }}{{ options[item.buyType-1] }}
|
||
</text>
|
||
</view>
|
||
<view class="cit-right">
|
||
{{ dateFormat(item.createTime) }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="recharge-item-content">
|
||
{{ item.orderType || '钻石充值' }} {{ options[item.buyType-1] }}钻 {{ item.amount }}￥ —{{ item.result || '支付失败' }}
|
||
</view>
|
||
</u-collapse-item>
|
||
<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
|
||
</u-collapse>
|
||
</scroll-view>
|
||
<view class="recharge-tips">
|
||
<view class="tips-green"><view class="tip-green"></view>充值成功</view>
|
||
<view class="tips-red"><view class="tip-red"></view>充值失败</view>
|
||
</view>
|
||
<view @click="goTop">
|
||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
||
:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
export default {
|
||
data(){
|
||
return{
|
||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||
isFinish: 'nomore',
|
||
form: {
|
||
size: 20,
|
||
current: 1
|
||
},
|
||
// 滚动顶部
|
||
scrollTop: 0,
|
||
oldScrollTop: 0,
|
||
// 充值记录
|
||
rechargeList: [],
|
||
// 总数
|
||
total: 0,
|
||
// 额度选项
|
||
options: [5,10,20,30,50,100],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods:{
|
||
// 滚动回顶部
|
||
goTop() {
|
||
this.scrollTop = this.oldScrollTop;
|
||
this.$nextTick(()=>{
|
||
this.scrollTop = 0;
|
||
});
|
||
},
|
||
// 滚动监听
|
||
scroll(e){
|
||
this.oldScrollTop = e.detail.scrollTop;
|
||
},
|
||
// 时间格式化
|
||
dateFormat(time){
|
||
let date = new Date(time);
|
||
let month = date.getMonth()+1,
|
||
day = date.getDate(),
|
||
hour = date.getHours(),
|
||
minute = date.getMinutes(),
|
||
second = date.getSeconds();
|
||
return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
|
||
},
|
||
// 加载更多
|
||
getMore(){
|
||
if(this.isFinish === 'nomore') return;
|
||
this.form.current++;
|
||
this.getRechargeList();
|
||
},
|
||
// 获取充值记录列表
|
||
async getRechargeList(){
|
||
this.isFinish = 'loading';
|
||
let res = await this.$api.getOrders(this.form);
|
||
if(res?.success){
|
||
const { records, size, total, current } = res.data;
|
||
if(current === 1) this.rechargeList = records;
|
||
else this.rechargeList.push(...records);
|
||
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||
this.total = total;
|
||
}else{
|
||
this.$refs.uToast.show({type:'error',title: "充值记录获取失败!"});
|
||
this.isFinish = 'loadmore';
|
||
}
|
||
},
|
||
// 初始化
|
||
init(){
|
||
const { id } = JSON.parse(this.$store.state.user_message);
|
||
if(!id) return;
|
||
this.form = {size: 20,current: 1,memberId: id};
|
||
this.getRechargeList();
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.detail-content{
|
||
width: 800rpx;
|
||
height: 100vh;
|
||
padding: 50rpx 50rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
.rechargeList{
|
||
margin: 30rpx 0;
|
||
width: 100%;
|
||
height: 88vh;
|
||
.recharge-item-title{
|
||
width: 100%;
|
||
margin: 0 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.cit-left{
|
||
max-width: 50%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text{
|
||
margin-left: 20rpx;
|
||
}
|
||
.citl-green{
|
||
color: #49cc90;
|
||
}
|
||
.citl-red{
|
||
color: #f93e3e;
|
||
}
|
||
}
|
||
}
|
||
.recharge-item-content{
|
||
margin: 10rpx 30rpx;
|
||
color: #888888;
|
||
}
|
||
}
|
||
.recharge-tips{
|
||
display: flex;
|
||
align-items: center;
|
||
.tips-green{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #49cc90;
|
||
margin-right: 20rpx;
|
||
.tip-green{
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 10rpx;
|
||
background-color: #49cc90;
|
||
}
|
||
}
|
||
.tips-red{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #f93e3e;
|
||
.tip-red{
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 10rpx;
|
||
background-color: #f93e3e;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.u-back-top{
|
||
cursor: pointer;
|
||
&:hover{
|
||
box-shadow: 0 0 20rpx #9989bb;
|
||
}
|
||
&:active{
|
||
box-shadow: 0 0 10rpx #9989bb;
|
||
}
|
||
}
|
||
::v-deep .u-more-text{
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.8;
|
||
}
|
||
&:active{
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
::v-deep .u-collapse-head{
|
||
background-color: #eee;
|
||
&:hover{
|
||
opacity: 0.8;
|
||
}
|
||
&:active{
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
</style> |