dl_mer_uniapp/pages/users/user_bill/index.vue

189 lines
5.1 KiB
Vue
Raw Normal View History

2025-03-04 16:03:38 +08:00
<template>
<view :data-theme="theme">
<view class='bill-details'>
<view class='nav acea-row'>
<view class='item' :class='type==="all" ? "on":""' @click='changeType("all")'>全部</view>
<view class='item' :class='type==="expenditure" ? "on":""' @click='changeType("expenditure")'>支出</view>
<view class='item' :class='type==="recharge" ? "on":""' @click='changeType("recharge")'>充值</view>
<view class='item' :class='type==="income" ? "on":""' @click='changeType("income")'>收入</view>
</view>
<view class='sign-record'>
<view class='list borderPad' v-for="(item,index) in userBillList" :key="index">
<view class='item'>
<view class='data'>{{item.month}}</view>
<view class='listn borRadius14'>
<view class="itemn" v-for="(vo,indexn) in item.list" :key="indexn">
<view class='acea-row row-between-wrapper'>
<view>
<view class='name line1'>{{vo.balance}}</view>
<view>{{vo.createTime}}</view>
</view>
<view class='num font_color' v-if="vo.type == 1">+{{vo.amount}}</view>
<view class='num' v-else>-{{vo.amount}}</view>
</view>
<view class="remark">说明{{vo.remark}}</view>
</view>
</view>
</view>
</view>
<view class='loadingicon acea-row row-center-wrapper'>
<text class='loading iconfont icon-jiazai'
:hidden='loading==false'></text>{{userBillList.length > 0?loadTitle:''}}
</view>
<view v-if="userBillList.length == 0 && !loading">
<emptyPage title="暂无账单的记录哦~" :imgSrc="urlDomain+'crmebimage/presets/noJilu.png'"></emptyPage>
</view>
</view>
</view>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
getBillList
} from '@/api/user.js';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
import emptyPage from '@/components/emptyPage.vue';
let app = getApp();
export default {
components: {
emptyPage
},
data() {
return {
urlDomain: this.$Cache.get("imgHost"),
loadTitle: '加载更多',
loading: true,
loadend: false,
page: 1,
limit: 12,
type: 'all',
userBillList: [],
theme: app.globalData.theme,
};
},
computed: mapGetters(['isLogin']),
onShow() {
if (this.isLogin) {
this.getUserBillList();
} else {
toLogin();
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.type = options.type;
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
this.getUserBillList();
},
methods: {
/**
* 获取账户明细
*/
getUserBillList: function() {
let that = this;
if (that.loadend) return;
that.loading = true;
that.loadTitle = "";
let data = {
page: that.page,
limit: that.limit,
type: that.type
}
getBillList(data).then(function(res) {
let list = res.data.list ? res.data.list : [],
loadend = res.data.totalPage <= that.page;
for (let i = 0; i < list.length; i++) {
let time1 = list[i].month;
let array1 = list[i].list;
let isEquals = false;
for (let j = 0; j < that.userBillList.length; j++) {
let time2 = that.userBillList[j].month;
let array2 = that.userBillList[j].list;
if (time1 == time2) {
array2.push.apply(array2, array1);
that.userBillList[j].list = array2;
isEquals = true;
break;
}
}
if (!isEquals) {
that.userBillList.push({
month: time1,
list: array1
})
}
}
that.$set(that, 'userBillList', that.userBillList);
that.page += 1;
that.loadend = loadend;
that.loadTitle = loadend ? "哼😕~我也是有底线的~" : "加载更多";
that.loading = false;
}, function(res) {
that.loadTitle = '加载更多';
that.loading = false;
});
},
/**
* 切换导航
*/
changeType: function(type) {
this.type = type;
this.loadend = false;
this.page = 1;
this.$set(this, 'userBillList', []);
this.getUserBillList();
},
}
}
</script>
<style scoped lang='scss'>
.remark {
font-size: 24rpx;
margin-top: 10rpx;
}
.bill-details .nav {
background-color: #fff;
height: 90rpx;
width: 100%;
line-height: 90rpx;
}
.bill-details .nav .item {
flex: 1;
text-align: center;
font-size: 30rpx;
color: #282828;
}
.bill-details .nav .item.on {
@include main_color(theme);
@include tab_border_bottom(theme);
}
.font_color {
color: #E93323 !important;
}
</style>