feat: 优化代码
This commit is contained in:
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="purse_log_warp">
|
||||
<Header :leftTitle="$t('mine.purse.mine_purse_log.title')" left-path-type="navigateTo"
|
||||
left-path="/pages/mine/mine_purse/mine_purse" />
|
||||
<view class="info_warp">
|
||||
<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="info_list_warp" v-if="form.category === 'raffle'">
|
||||
<winningRecord heightRef="calc(100vh - 246rpx)"/>
|
||||
</view> -->
|
||||
<view class="info_list_warp">
|
||||
<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"
|
||||
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="40" height="40" 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="/static/common/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 winningRecord from '@/components/winning_record.vue';
|
||||
import { getAcctFlow } 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: { winningRecord, Header },
|
||||
data() {
|
||||
return {
|
||||
infoList: [
|
||||
{
|
||||
name: "活期账户",
|
||||
key: "cur"
|
||||
},
|
||||
{
|
||||
name: "锁定账户",
|
||||
key: "lock"
|
||||
},
|
||||
],
|
||||
selInfo: "cur",
|
||||
form: {
|
||||
id: 0,
|
||||
page: 1,
|
||||
pageSize: 15,
|
||||
category: null,
|
||||
},
|
||||
orderList: [],
|
||||
lockId: 0,
|
||||
curId: 0,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const category = option.category;
|
||||
if (category && category !== 0) {
|
||||
this.form.category = category;
|
||||
}
|
||||
const lockId = option.lockId;
|
||||
const curId = option.curId;
|
||||
if (lockId && lockId !== 'null') {
|
||||
this.lockId = lockId;
|
||||
// this.selectInfo(this.infoList[1]);
|
||||
}
|
||||
if (curId && curId !== 'null') {
|
||||
this.curId = curId;
|
||||
this.selectInfo(this.infoList[0]);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getValue,
|
||||
formatDate,
|
||||
handleAmount,
|
||||
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;
|
||||
}
|
||||
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 getAcctFlow(params);
|
||||
console.log("resp", 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);
|
||||
padding: 30rpx;
|
||||
overflow-y: hidden;
|
||||
|
||||
.info_title_warp {
|
||||
display: flex;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.info_title_item_warp {
|
||||
margin-right: 40rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.info_title_item_sel_warp {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.info_title_item_sel_but_warp {
|
||||
background: $app-bt-bj;
|
||||
border-radius: 4rpx;
|
||||
width: 80rpx;
|
||||
height: 8rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
|
||||
.info_list_warp {
|
||||
margin-top: 30rpx;
|
||||
// height: calc(100vh - 500rpx);
|
||||
// overflow-y: auto;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user