422 lines
9.5 KiB
Vue
422 lines
9.5 KiB
Vue
<template>
|
||
<view class="purse_log_warp">
|
||
<Header :leftTitle="$t('mine.purse.mine_purse_log.title')" left-path-type="navigateTo"
|
||
left-path="/pages/mine_package/mine_purse/mine_purse" />
|
||
|
||
<view class="info_warp">
|
||
<view v-if="form.category === 'raffle' || form.category === 'vcoin'">
|
||
<view class="info_title_warp">
|
||
<view :class="selInfo === item.key ? 'info_title_item_warp info_title_item_sel_warp' : 'info_title_item_warp'"
|
||
v-for="item in infoList" :key="item.key" @click="selectInfo(item)">
|
||
<text>{{ item.name }}</text>
|
||
<view class="info_title_item_sel_but_warp" v-if="selInfo === item.key"></view>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
|
||
|
||
|
||
<view v-if="form.category === 'vcoin' || form.category === 'bonus' || form.category === 'expend'">
|
||
<view class="info_center_warp">
|
||
<view class="info_center_warp-item" v-for="item in source">
|
||
<view class="info_center_warp-item-top">{{ headerData[item.key] }}</view>
|
||
|
||
<view class="info_center_warp-item-bottom">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="info_list_warp-mine">
|
||
<scroll-view scroll-y="true" @scrolltolower="loadMore(selInfo)" style="height:calc(100vh - 300rpx)">
|
||
<view v-for="item in orderList" :key="item.id" class="purse_info_item-mine"
|
||
v-if="orderList && orderList.length !== 0">
|
||
<view class="purse_info_left">
|
||
<!-- <up-image :src="item.type === 1? '/static/mine/purse_sf.png' : '/static/mine/purse_xf.png'" width="40" height="40" bgColor="#f1f6ff00"></up-image> -->
|
||
<up-image src="/static/mine/purse_sf.png" width="32" height="32" bgColor="#f1f6ff00"></up-image>
|
||
<view class="purse_data_warp">
|
||
<view class="purse_info_name">{{ getValue(BALANCE_TYPE, item.type) }}</view>
|
||
<view class="purse_info_value">{{ formatDate(item.ctdate) }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="ipurse_nfo_right">
|
||
<view class="purse_info_title">{{ handleAmount(item.amount) }}</view>
|
||
<view class="purse_info_value">{{ item.remark }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="not_order_warp">
|
||
<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/not_order.png" width="80" height="80"
|
||
bgColor="#f1f6ff00"></up-image>
|
||
<view class="not_order_msg_warp">暂无记录～</view>
|
||
</view>
|
||
<view v-if="loading" style="text-align: center;">加载中...</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Header from '@/components/header.vue';
|
||
import { getAcctFlow, getAcctMiningStat, getAcctContribution, getAcctFlowList } from '@/api/finance.js';
|
||
import { getValue, BALANCE_TYPE } from '@/utils/enumUtils.js';
|
||
import { formatDate, handleAmount } from '@/utils/index.js';
|
||
|
||
export default {
|
||
computed: {
|
||
BALANCE_TYPE() {
|
||
return BALANCE_TYPE;
|
||
}
|
||
},
|
||
components: { Header },
|
||
|
||
data() {
|
||
return {
|
||
infoList: [
|
||
{
|
||
name: "活期账户",
|
||
key: "cur"
|
||
},
|
||
{
|
||
name: "锁定账户",
|
||
key: "lock"
|
||
},
|
||
{
|
||
name: "预存款账户",
|
||
key: "pre"
|
||
},
|
||
|
||
],
|
||
source: [],
|
||
headerData: {},
|
||
selInfo: "cur",
|
||
form: {
|
||
id: 0,
|
||
page: 1,
|
||
pageSize: 15,
|
||
category: null,
|
||
},
|
||
orderList: [],
|
||
lockId: 0,
|
||
curId: 0,
|
||
preId: 0,
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
const category = option.category;
|
||
if (category && category !== 0) {
|
||
this.form.category = category;
|
||
}
|
||
const lockId = option.lockId;
|
||
const curId = option.curId;
|
||
const preId = option.preId;
|
||
|
||
|
||
// 分红金额
|
||
if (category === 'bonus') {
|
||
this.source = [
|
||
{
|
||
name: "今日分红数量",
|
||
key: "cur"
|
||
},
|
||
{
|
||
name: "总分红数量",
|
||
key: "lock"
|
||
},
|
||
{
|
||
name: "平台总分红",
|
||
key: "lock"
|
||
},
|
||
{
|
||
name: "分红资金池剩余",
|
||
key: "lock"
|
||
},
|
||
];
|
||
}
|
||
|
||
// TBC
|
||
if (category === 'vcoin') {
|
||
this.onGetAcctMiningStat();
|
||
|
||
this.source = [
|
||
{
|
||
name: "商城总挖矿数量",
|
||
key: "mallTotalMiningSum"
|
||
},
|
||
{
|
||
name: "已兑换数量",
|
||
key: "exchangeNumber"
|
||
},
|
||
];
|
||
|
||
}
|
||
|
||
// 贡献值 expend
|
||
if (category === 'expend') {
|
||
this.onGetAcctContribution();
|
||
this.source = [
|
||
{
|
||
name: "今日贡献值",
|
||
key: "todayValue"
|
||
},
|
||
{
|
||
name: "总贡献值",
|
||
key: "totalValue"
|
||
},
|
||
{
|
||
name: "今日商城贡献值",
|
||
key: "todayMallValue"
|
||
},
|
||
{
|
||
name: "我的占比",
|
||
key: "ratio"
|
||
},
|
||
];
|
||
}
|
||
|
||
|
||
if (lockId && lockId !== 'null') {
|
||
this.lockId = lockId;
|
||
// this.selectInfo(this.infoList[1]);
|
||
}
|
||
|
||
if (curId && curId !== 'null') {
|
||
this.curId = curId;
|
||
this.selectInfo(this.infoList[0]);
|
||
}
|
||
if (preId && preId !== 'null') {
|
||
this.preId = preId;
|
||
}
|
||
|
||
|
||
this.onGetAcctFlowList();
|
||
},
|
||
methods: {
|
||
getValue,
|
||
formatDate,
|
||
handleAmount,
|
||
|
||
// 流水挖矿统计
|
||
async onGetAcctMiningStat() {
|
||
const resp = await getAcctMiningStat();
|
||
console.log("流水挖矿统计", resp);
|
||
if (resp && resp.bizcode === 100) {
|
||
this.headerData = resp.data || {};
|
||
} else {
|
||
return [];
|
||
}
|
||
},
|
||
|
||
// 流水贡献值
|
||
async onGetAcctContribution() {
|
||
const resp = await getAcctContribution();
|
||
console.log("流水贡献值", resp);
|
||
if (resp && resp.bizcode === 100) {
|
||
if (resp.data.ratio) {
|
||
resp.data.ratio = resp.data.ratio * 100 + '%';
|
||
}
|
||
this.headerData = resp.data || {};
|
||
|
||
} else {
|
||
return [];
|
||
}
|
||
},
|
||
|
||
// 查询账户流水
|
||
// async onGetAcctFlowList() {
|
||
// const resp = await getAcctFlowList(this.form);
|
||
// console.log("查询账户流水", resp);
|
||
// if (resp && resp.bizcode === 100) {
|
||
// this.orderList = resp.data || [];
|
||
// } else {
|
||
// return [];
|
||
// }
|
||
// },
|
||
|
||
|
||
|
||
selectInfo(item) {
|
||
this.orderList = [];
|
||
this.form.page = 1;
|
||
this.selInfo = item.key;
|
||
let id = 0;
|
||
if (item.key === "cur") {
|
||
id = this.curId;
|
||
}
|
||
if (item.key === "lock") {
|
||
id = this.lockId;
|
||
}
|
||
if (item.key === "pre") {
|
||
id = this.preId;
|
||
}
|
||
|
||
this.form.id = id;
|
||
this.loadData();
|
||
},
|
||
|
||
// 加载数据的方法
|
||
async loadData() {
|
||
if (this.loading) return; // 如果正在加载，则不重复加载
|
||
this.loading = true; // 设置加载状态为true
|
||
try {
|
||
// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
|
||
const newData = await this.fetchData(this.form.page, this.form.pageSize);
|
||
this.orderList = [...this.orderList, ...newData]; // 将新数据添加到列表中
|
||
this.form.page++; // 页码加1
|
||
} catch (error) {
|
||
console.error('加载数据失败:', error);
|
||
} finally {
|
||
this.loading = false; // 设置加载状态为false
|
||
}
|
||
},
|
||
|
||
// 列表数据
|
||
async fetchData(page, pageSize) {
|
||
if (!this.form.id || this.form.id === 0) {
|
||
return [];
|
||
}
|
||
const params = {
|
||
id: this.form.id,
|
||
category: this.form.category,
|
||
page,
|
||
pageSize,
|
||
}
|
||
console.log("params", params);
|
||
const resp = await getAcctFlowList(params);
|
||
console.log("列表数据---1", resp);
|
||
if (resp && resp.bizcode === 100) {
|
||
const data = resp.data && resp.data.entitys || [];
|
||
return data
|
||
} else {
|
||
return [];
|
||
}
|
||
},
|
||
// 当滚动到底部时触发的方法
|
||
loadMore(selInfo) {
|
||
let id = 0;
|
||
if (selInfo === "cur") {
|
||
id = this.curId;
|
||
}
|
||
if (selInfo === "lock") {
|
||
id = this.lockId;
|
||
}
|
||
this.form.id = id;
|
||
this.loadData(); // 加载更多数据
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.purse_log_warp {
|
||
height: calc(100vh - 58rpx);
|
||
overflow-y: hidden;
|
||
|
||
.info_title_warp {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 50rpx;
|
||
|
||
|
||
.info_title_item_warp {
|
||
font-size: 32rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.info_title_item_sel_warp {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #7934F6;
|
||
font-weight: 500;
|
||
|
||
.info_title_item_sel_but_warp {
|
||
background: $app-bt-bj;
|
||
border-radius: 4rpx;
|
||
width: 80rpx;
|
||
height: 6rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.line {
|
||
width: 100vw;
|
||
height: 12rpx;
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
.info_center_warp {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 32rpx;
|
||
|
||
.info_center_warp-item {
|
||
.info_center_warp-item-top {
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
|
||
.info_center_warp-item-bottom {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.info_list_warp-mine {
|
||
padding: 44rpx 32rpx;
|
||
|
||
.purse_info_item-mine {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border: 0;
|
||
height: 128rpx;
|
||
margin-bottom: 0;
|
||
padding: 0;
|
||
|
||
.purse_data_warp {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-left: 20rpx;
|
||
|
||
.purse_info_name {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.purse_info_value {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
|
||
|
||
.purse_info_title {
|
||
font-weight: bold;
|
||
font-size: 32px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.purse_info_left .ipurse_nfo_right {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|