You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
9.2 KiB
284 lines
9.2 KiB
<template>
|
|
<view id="recharge-balance">
|
|
<view class="content">
|
|
<!-- 我在类名里面写了样式，但是并不起作用，先用行内样式-->
|
|
<view class="balance-top" style="background:#FB5054 ">
|
|
<view class="title">
|
|
账户余额（元）
|
|
</view>
|
|
<view class="recharge-box">
|
|
<view class="money">
|
|
{{num/100}}
|
|
</view>
|
|
<view class="recharge" @tap="jump" style="display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width:50px;
|
|
height:24px;
|
|
border-radius:2px;
|
|
border:1px solid rgba(255,255,255,1);">
|
|
充值 >
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab-panel">
|
|
<block v-for="(item, index) in tabList" :key="index">
|
|
<view :id="index" :hidden="activeIndex != index" :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor + ' '" class="tab-title active" @tap="tabClick">{{item.name}}</view>
|
|
<view :id="index" :hidden="activeIndex == index" class="tab-title" @tap="tabClick">{{item.name}}</view>
|
|
</block>
|
|
</view>
|
|
<view class="tab-content">
|
|
<view class="tab-item" :hidden="activeIndex!=0">
|
|
<block v-for="(items, idx) in dataList[0]" :key="idx">
|
|
<view class="tab-item-content" v-for="(item, index) in dataList[0][idx]" :key="index">
|
|
<view class="text">
|
|
<view style="font-size: 14px; text-overflow:ellipsis;overflow:hidden;">{{item.note}}</view>
|
|
<view style="font-size: 10px;color: #A3A3A3">{{item.updated_at}}</view>
|
|
</view>
|
|
<view class="num">
|
|
+{{item.value/100}}
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="loadingbox" :hidden="!tabList[0].show">
|
|
{{showText}}
|
|
</view>
|
|
</view>
|
|
<view class="tab-item" :hidden="activeIndex!=1">
|
|
<block v-for="(item, idx) in dataList[1]" :key="idx" >
|
|
<view class="tab-item-content" v-for="(item, index) in dataList[1][idx]" :key="index">
|
|
<view class="text">
|
|
<view style="font-size: 14px; text-overflow:ellipsis;overflow:hidden;">{{item.note}}</view>
|
|
<view style="font-size: 10px;color: #A3A3A3">{{item.updated_at}}</view>
|
|
</view>
|
|
<view class="num">
|
|
{{item.value/100}}
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="loadingbox" :hidden="!tabList[1].show">
|
|
{{showText}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
<script>
|
|
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
tabList: [{
|
|
id: 0,
|
|
name: "收入",
|
|
init: false,
|
|
page: 0,
|
|
more: true,
|
|
show: false
|
|
}, {
|
|
id: 1,
|
|
name: "支出",
|
|
init: false,
|
|
page: 0,
|
|
more: true,
|
|
show: false
|
|
}],
|
|
token: "",
|
|
dataList: {
|
|
0: [],
|
|
1: []
|
|
},
|
|
num: "",
|
|
showText: '正在加载下一页数据',
|
|
config: ''
|
|
};
|
|
},
|
|
|
|
onReachBottom(e) {
|
|
var status = this.activeIndex;
|
|
var page = this.tabList[status].page + 1;
|
|
var tabList = `tabList[${status}]`;
|
|
|
|
if (this.tabList[status].more) {
|
|
this.setData({
|
|
[`${tabList}.show`]: true
|
|
});
|
|
var token = this.token;
|
|
this.queryBalanceList(token, status, page);
|
|
} else {
|
|
wx.showToast({
|
|
icon: 'error',
|
|
title: '再拉也没有啦'
|
|
});
|
|
}
|
|
},
|
|
|
|
onShow() {// let app =getApp();
|
|
// app.isBirthday().then(()=>{
|
|
// if(this.$cookieStorage.get("birthday_gift")){
|
|
// var giftData=this.$cookieStorage.get("birthday_gift").data;
|
|
// new app.ToastPannel().__page.showText(giftData);
|
|
// }
|
|
// });
|
|
},
|
|
|
|
onLoad(e) {
|
|
// 第三方平台配置颜色
|
|
var bgConfig = this.$cookieStorage.get('globalConfig') || '';
|
|
this.setData({
|
|
config: bgConfig
|
|
}); // var status=0,page=1;
|
|
// this.queryBalanceList(token);
|
|
|
|
var status = e.type ? e.type : 0;
|
|
var page = this.tabList[status].page;
|
|
pageLogin(getUrl(), token => {
|
|
this.setData({
|
|
'token': token
|
|
});
|
|
this.queryBalanceList(token, status, page);
|
|
this.queryUserSum(token);
|
|
});
|
|
},
|
|
|
|
components: {},
|
|
props: {},
|
|
methods: {
|
|
jump() {
|
|
wx.navigateTo({
|
|
url: '/pages/recharge/index/index'
|
|
});
|
|
},
|
|
|
|
tabClick(e) {
|
|
// console.log(e.currentTarget.id);
|
|
var status = e.currentTarget.id;
|
|
this.setData({
|
|
activeIndex: status
|
|
});
|
|
|
|
if (!this.tabList[status].init) {
|
|
var page = this.tabList[status].page;
|
|
wx.showLoading({
|
|
title: "加载中",
|
|
mask: true
|
|
});
|
|
this.queryBalanceList(this.token, status, page);
|
|
}
|
|
},
|
|
|
|
result(res, status) {
|
|
if (res.status) {
|
|
var list;
|
|
var page = res.meta.pagination;
|
|
var current_page = page.current_page;
|
|
var total_pages = page.total_pages;
|
|
var tabList = `tabList[${status}]`;
|
|
list = res.data;
|
|
// this.setData({
|
|
// [`dataList.${status}[${current_page - 1}]`]: list,
|
|
// [`${tabList}.init`]: true,
|
|
// [`${tabList}.page`]: current_page,
|
|
// [`${tabList}.more`]: current_page < total_pages,
|
|
// [`${tabList}.show`]: false
|
|
// });
|
|
|
|
this.dataList[status][current_page - 1]=res.data;
|
|
this.tabList[status].init=true;
|
|
this.tabList[status].page=current_page;
|
|
this.tabList[status].more=current_page < total_pages;
|
|
this.tabList[status].show=false;
|
|
|
|
}
|
|
},
|
|
|
|
queryBalanceList(token, status, page) {
|
|
var type = status ? 'consume' : 'recharge';
|
|
var params = type ? {
|
|
type
|
|
} : {};
|
|
params.page = page;
|
|
this.$http.get({
|
|
api: 'api/users/balance/list',
|
|
header: {
|
|
Authorization: token
|
|
},
|
|
data: params
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
this.result(res, status);
|
|
} else {
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '数据请求失败',
|
|
success: res => {}
|
|
});
|
|
}
|
|
|
|
wx.hideLoading();
|
|
}).catch(rej => {
|
|
wx.showToast({
|
|
title: "请求失败",
|
|
image: '../../../static/error.png'
|
|
});
|
|
wx.hideLoading();
|
|
});
|
|
},
|
|
|
|
queryUserSum(token) {
|
|
this.$http.get({
|
|
api: "api/users/balance/sum",
|
|
header: {
|
|
Authorization: token
|
|
}
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
this.setData({
|
|
"num": res.data.sum
|
|
});
|
|
} else {
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '数据请求失败',
|
|
success: res => {}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
setData: function (obj) {
|
|
let that = this;
|
|
let keys = [];
|
|
let val, data;
|
|
Object.keys(obj).forEach(function (key) {
|
|
keys = key.split('.');
|
|
val = obj[key];
|
|
data = that.$data;
|
|
keys.forEach(function (key2, index) {
|
|
if (index + 1 == keys.length) {
|
|
that.$set(data, key2, val);
|
|
} else {
|
|
if (!data[key2]) {
|
|
that.$set(data, key2, {});
|
|
}
|
|
}
|
|
|
|
data = data[key2];
|
|
});
|
|
});
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {}
|
|
};
|
|
</script>
|
|
<style>
|
|
#recharge-balance .content{height:100%;overflow:auto;box-sizing:border-box}#recharge-balance .content .balance-top{color:#FFF;padding:20px 15px;background:#CDA76E}#recharge-balance .content .balance-top .title{font-size:12px}#recharge-balance .content .balance-top .recharge-box{display:flex;align-items:center;margin-top:20px;font-size:14px}#recharge-balance .content .tab-content,#recharge-balance .content .tab-panel{margin-top:10px;background-color:#FFF}#recharge-balance .content .balance-top .recharge-box .money{flex:1;font-size:30px}#recharge-balance .content .tab-panel{display:flex;box-sizing:border-box}#recharge-balance .content .tab-panel .tab-title{height:44px;width:50%;line-height:44px;text-align:center;box-sizing:border-box}#recharge-balance .content .tab-panel .tab-title.active{color:#CDA76E;border-bottom:2px solid #CDA76E}#recharge-balance .content .tab-content .tab-item-content{box-sizing:border-box;padding-left:12px;padding-right:12px;display:flex;line-height:60px;height:60px;border-bottom:1px solid #d9d9d9;justify-content:space-between}#recharge-balance .content .tab-content .tab-item-content .num{color:#ff2741}#recharge-balance .content .tab-content .tab-item-content .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:30px;flex:1}#recharge-balance .loadingbox{text-align:center;padding:5px 0}
|
|
</style>
|