|
|
<template>
|
|
|
<!-- 20221101 -->
|
|
|
<view class="money-list-page">
|
|
|
<!-- 页面内容 -->
|
|
|
<view class="page-content padding-bottom-20">
|
|
|
|
|
|
<view class="jc-header-title">
|
|
|
|
|
|
<view class="bg-main-gradient">
|
|
|
|
|
|
<!-- 我的余额数据 -->
|
|
|
<view class="padding-30" style="height: 190rpx;">
|
|
|
<view class="line-height-40 text-30 text-ff">账户余额（元）</view>
|
|
|
<view class="margin-top-10 height-80 flex align-center justify-between">
|
|
|
<view class="text-bold text-ff" style="font-size: 66rpx;">{{money}}</view>
|
|
|
<view class="width-150 line-height-60-border-ff radius-30 text-center text-26 text-ff"
|
|
|
@click="go('/pages/money/recharge')">
|
|
|
充值
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 组件：标签 -->
|
|
|
<view class="line-height-header border-bottom-ed bg-ff">
|
|
|
<ty-tab-equally :active.sync="tabIndex" :list="navList" @click="tabChange"></ty-tab-equally>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 余额明细列表 -->
|
|
|
<view class="list-block">
|
|
|
<ty-list-list :status="load_status">
|
|
|
<view v-for="(item,index) in list" :key="index" :class="index == list.length - 1 ? '' : 'border-bottom-ed'"
|
|
|
class="padding-30 flex align-center justify-between bg-ff">
|
|
|
<view class="">
|
|
|
<view class="text-28 text-33">{{item.show_text}}</view>
|
|
|
<view class="text-24 text-98">{{item.show_create_time}}</view>
|
|
|
</view>
|
|
|
<view class="text-right">
|
|
|
<view class="text-28">{{item.money > 0 ? '+' : ''}}{{item.money}}</view>
|
|
|
<view class="text-24 text-98">余额：{{item.after_money}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</ty-list-list>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 页面浮层 -->
|
|
|
<view class="page-layer">
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import money from "./api/money.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// tab标签
|
|
|
navList: ['全部', '收入', '支出'],
|
|
|
// tab标签选中index
|
|
|
tabIndex: 0,
|
|
|
// 我的余额
|
|
|
money: '',
|
|
|
// 列表加载状态
|
|
|
load_status: '',
|
|
|
// 列表
|
|
|
list: {}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
onShow() {
|
|
|
// 获取我的余额
|
|
|
this.loadData()
|
|
|
|
|
|
// 获取余额明细列表
|
|
|
this.loadList(1)
|
|
|
},
|
|
|
|
|
|
onReachBottom() {
|
|
|
// 获取余额明细列表
|
|
|
this.loadList(0)
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
/**
|
|
|
* 标签栏切换
|
|
|
* @param {Object} e
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
tabChange(e) {
|
|
|
this.loadList(1)
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 获取余额明细列表
|
|
|
* @param {int} isFirstPage 是否第一页 0--不是 1--是
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
loadList(isFirstPage) {
|
|
|
money.listLog(this, isFirstPage, this.tabIndex)
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 获取我的余额
|
|
|
* @date 2022-11-01
|
|
|
*/
|
|
|
loadData(){
|
|
|
money.getMyMoney().then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.money = res.data.my.money
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.back {
|
|
|
position: absolute;
|
|
|
left: 30rpx;
|
|
|
top: 0;
|
|
|
}
|
|
|
|
|
|
.list-block{
|
|
|
margin-top: calc(190rpx + 88rpx);
|
|
|
}
|
|
|
</style>
|
