Commit b4df8231 authored by chicheng's avatar chicheng Committed by 李驰骋

票账管理页面调整

parent 0fb8942c
...@@ -5,42 +5,37 @@ ...@@ -5,42 +5,37 @@
<image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image> <image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image>
</view> </view>
<view class="main"> <view class="main">
<view class="list-wrapper" :style="scrollHeight"> <scroll-view :style='scrollHeight' class="scroll-area" scroll-y="true" lower-threshold='150'
<list class="list" scrollable loadmoreoffset='1' show-scrollbar='false' @loadmore="scrolltolower"> @scrolltolower='scrolltolower'>
<list class="scroll-area view" loadmoreoffset='100' show-scrollbar='false' @loadmore="scrolltolower">
<cell class="list-cell" v-for="(item,index) in lists" :key="index"> <cell class="list-cell" v-for="(item,index) in lists" :key="index">
<view class="listview"> <view class="middle view planout-block-item">
<view class="cell-list"> <view class="text-block">
<view class="middle view planout-block-item"> <text class="middle-date">开票方编号</text>
<view class="item-block item-block-code"> <text class="middle-date-des">{{item.billto_bp}}</text>
<text class="item-block-label">开票方编号:{{item.billto_bp}}</text> </view>
</view> <view class="text-block">
<view class="item-block item-block-name"> <text class="middle-date">客户名称</text>
<text class="item-block-label item-block__label">{{item.billto_name}}</text> <text class="middle-date-des">{{item.billto_name}}</text>
</view> </view>
<view class="item-block item-block-date"> <view class="text-block">
<text class="detal-item-label">发生日期:{{item.posting_date}}</text> <text class="middle-date">发生日期</text>
</view> <text class="middle-date-des">{{item.posting_date}}</text>
</view>
<view class="block-detal block-detal-last"> <view class="text-block">
<view class="block-detal-item"> <text class="middle-date">货款金额</text>
<text class="detal-item-label">货款金额</text> <text class="middle-date-des">{{item.goods_amount}}</text>
<text class="detal-item-value">{{item.goods_amount}}</text> </view>
</view> <view class="text-block">
<view class="block-detal-item"> <text class="middle-date">随货保证金</text>
<text class="detal-item-label">随货保证金</text> <text class="middle-date-des">{{item.forward_amount}}</text>
<text class="detal-item-value">{{item.forward_amount}}</text> </view>
</view> <view class="text-block text-block-last">
<view class="block-detal-item block-detal-item-last"> <text class="middle-date">经销商保证金</text>
<text class="detal-item-label">经销商保证金</text> <text class="middle-date-des">{{item.dealing_amount}}</text>
<text class="detal-item-value">{{item.dealing_amount}}</text>
</view>
</view>
</view>
</view> </view>
</view> </view>
<view class="empty-block"> <view class="empty-block"></view>
</view>
</cell> </cell>
<cell> <cell>
<view class="loading-more" v-if='lists.length>0'> <view class="loading-more" v-if='lists.length>0'>
...@@ -51,7 +46,7 @@ ...@@ -51,7 +46,7 @@
</view> </view>
</cell> </cell>
</list> </list>
</view> </scroll-view>
</view> </view>
</view> </view>
</template> </template>
...@@ -93,7 +88,7 @@ ...@@ -93,7 +88,7 @@
}, },
scrollHeight() { scrollHeight() {
return { return {
'height': `${this.sysinfo.safeArea.height -58}px`, 'height': `${this.sysinfo.safeArea.height - 180 - 44}px`
} }
}, },
...mapState(['sysinfo', 'userInfo', 'userBpData']) ...mapState(['sysinfo', 'userInfo', 'userBpData'])
...@@ -174,98 +169,78 @@ ...@@ -174,98 +169,78 @@
/* #endif */ /* #endif */
.lists { .lists {
flex: 1; position: relative;
background: #F2F3F5; flex-direction: column;
overflow-y: scroll;
background: #f0f4f5;
overflow-x: hidden;
} }
.header-bg { .header-bg {
position: absolute; height: 284rpx;
left: 0; margin-top: -88rpx;
right: 0;
height: 382rpx;
} }
.header-bg-img { .header-bg-img {
width: 750rpx; width: 750rpx;
height: 382rpx;
} }
.main { .main {
flex: 1; position: relative;
padding: 0 32rpx;
margin-top: 100rpx;
}
.list-wrapper {
flex: 1;
}
.list {
flex: 1;
}
.listview {
flex-direction: column; flex-direction: column;
background-color: #FFFFFF; margin-top: -164rpx;
border-radius: 10rpx; padding: 0 16rpx;
margin-bottom: 24rpx;
padding: 24rpx;
} }
.cell-list { .scroll-area {
flex-direction: column; overflow-y: scroll;
} }
.planout-block-item { .view {
flex-direction: column; flex-direction: column;
} }
.item-block { .middle {
flex-direction: row; background-color: #fff;
align-items: center; border-radius: 16rpx;
margin-bottom: 16rpx; padding: 32rpx 64rpx 32rpx 48rpx;
}
.item-block-code {
justify-content: space-between;
}
.item-block-label {
font-size: 28rpx;
color: #333333;
} }
.item-block__label { .text-block {
font-weight: bold; display: flex;
font-size: 32rpx; overflow: hidden;
height: 96rpx;
margin-bottom: 14rpx;
border-bottom: 1px solid #f4f5f6;
} }
.item-block-date { .text-block-last {
margin-bottom: 24rpx; margin-bottom: 0;
border-bottom: 0;
} }
.detal-item-label { .middle-date {
font-size: 24rpx; flex: 2;
color: #999999; font-size: 28rpx;
line-height: 96rpx;
color: #333;
} }
.block-detal { .middle-date-des {
flex-direction: row; flex: 3;
background-color: #F8F8F8; font-size: 28rpx;
padding: 24rpx; line-height: 96rpx;
border-radius: 8rpx; height: 96rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #888;
} }
.block-detal-item { .planout-block-item {
flex: 1; flex: 1;
align-items: center; width: 750rpx;
} margin-bottom: 26rpx;
.detal-item-value {
font-size: 28rpx;
color: #333333;
margin-top: 8rpx;
font-weight: bold;
} }
.loading-more { .loading-more {
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="text-block" v-if="condition.option === 'BT'" key="start-date"> <view class="text-block" v-if="condition.option === 'BT'">
<text class="middle-date">开始日期</text> <text class="middle-date">开始日期</text>
<view class="middle-date-des"> <view class="middle-date-des">
<view class="picker-year"> <view class="picker-year">
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="text-block text-block-last" v-if="condition.option === 'BT'" key="end-date"> <view class="text-block text-block-last" v-if="condition.option === 'BT'">
<text class="middle-date">结束日期</text> <text class="middle-date">结束日期</text>
<view class="middle-date-des"> <view class="middle-date-des">
<view class="picker-year"> <view class="picker-year">
...@@ -69,43 +69,44 @@ ...@@ -69,43 +69,44 @@
<text class="btn-text">查询</text> <text class="btn-text">查询</text>
</button> </button>
</view> </view>
<list class="scroll-area view" scrollable loadmoreoffset='100' show-scrollbar='false' @loadmore="scrolltolower"> <scroll-view :style='scrollHeight' class="scroll-area" scroll-y="true" lower-threshold='150'
<cell class="list-cell" v-for="(item,index) in lists" :key='index'> @scrolltolower='scrolltolower'>
<view class="middle view planout-block-item"> <list class="scroll-area view" loadmoreoffset='100' show-scrollbar='false' @loadmore="scrolltolower">
<view class="text-block"> <cell class="list-cell" v-for="(item,index) in lists" :key='index'>
<text class="middle-date middle-date-select">客户编码</text> <view class="middle view planout-block-item">
<text class="middle-date-des middle-date-des-select">{{item.billto_bp}}</text> <view class="text-block">
</view> <text class="middle-date middle-date-select">客户编码</text>
<view class="text-block"> <text class="middle-date-des middle-date-des-select">{{item.billto_bp}}</text>
<text class="middle-date middle-date-select">客户名称</text> </view>
<text class="middle-date-des middle-date-des-select">{{item.billto_name}}</text> <view class="text-block">
</view> <text class="middle-date middle-date-select">客户名称</text>
<view class="text-block"> <text class="middle-date-des middle-date-des-select">{{item.billto_name}}</text>
<text class="middle-date middle-date-select">上账日期</text> </view>
<text class="middle-date-des middle-date-des-select">{{item.posting_date}}</text> <view class="text-block">
<text class="middle-date middle-date-select">上账日期</text>
<text class="middle-date-des middle-date-des-select">{{item.posting_date}}</text>
</view>
<view class="text-block">
<text class="middle-date middle-date-select">摘要</text>
<text class="middle-date-des middle-date-des-select">{{item.zy}}</text>
</view>
<view class="text-block text-block-last">
<text class="middle-date middle-date-select">金额</text>
<text class="middle-date-des middle-date-des-select">{{item.forward_amount}}</text>
</view>
</view> </view>
<view class="text-block"> <view class="empty-block"></view>
<text class="middle-date middle-date-select">摘要</text> </cell>
<text class="middle-date-des middle-date-des-select">{{item.zy}}</text> <cell>
<view class="loading-more" v-if='lists.length>0'>
<text class="loading-more-text">-- 到底了 --</text>
</view> </view>
<view class="text-block text-block-last"> <view class="loading-more" v-else>
<text class="middle-date middle-date-select">金额</text> <text class="loading-more-text">暂无数据</text>
<text class="middle-date-des middle-date-des-select">{{item.forward_amount}}</text>
</view> </view>
</view> </cell>
<view class="empty-block"></view> </list>
</cell> </scroll-view>
<cell>
<view class="loading-more" v-if='lists.length>0'>
<text class="loading-more-text" v-if="lists.length >= page.totalCount && page.totalCount > 0">-- 到底了 --</text>
<text class="loading-more-text" v-else-if="isLoading">加载中...</text>
<text class="loading-more-text" v-else>上拉加载更多</text>
</view>
<view class="loading-more" v-else>
<text class="loading-more-text">暂无数据</text>
</view>
</cell>
</list>
</view> </view>
</view> </view>
...@@ -128,7 +129,6 @@ ...@@ -128,7 +129,6 @@
loadingText: '加载中...', loadingText: '加载中...',
refreshing: false, refreshing: false,
isOpened: 'none', isOpened: 'none',
isLoading: false, // 添加加载状态,防止重复请求
// 日期查询选项:是、介于、小于等于、大于等于 // 日期查询选项:是、介于、小于等于、大于等于
dateOptions: [ dateOptions: [
{ label: '是', value: 'EQ' }, { label: '是', value: 'EQ' },
...@@ -162,6 +162,11 @@ ...@@ -162,6 +162,11 @@
'height': `${this.sysinfo.safeArea.height }px`, 'height': `${this.sysinfo.safeArea.height }px`,
} }
}, },
scrollHeight() {
return {
'height': `${this.sysinfo.safeArea.height - 180 - 44}px`,
}
},
...mapState(['sysinfo', 'userInfo', 'userBpData']) ...mapState(['sysinfo', 'userInfo', 'userBpData'])
}, },
created() { created() {
...@@ -189,31 +194,19 @@ ...@@ -189,31 +194,19 @@
search() { search() {
this.lists = []; this.lists = [];
this.page.page = 1; this.page.page = 1;
this.page.totalCount = 0; // 重置总数
this.queryData(1); this.queryData(1);
}, },
scrolltolower() { scrolltolower() {
// 防止重复请求 if (this.lists.length >= this.page.totalCount) {
if (this.isLoading) {
return;
}
// 判断是否已加载完所有数据
if (this.lists.length >= this.page.totalCount && this.page.totalCount > 0) {
return; return;
} }
this.page.page++; this.page.page++;
this.queryData(this.page.page); this.queryData(this.page.page);
}, },
async queryData(pageNo) { async queryData(pageNo) {
// 防止重复请求
if (this.isLoading) {
return;
}
this.isLoading = true;
// 构建查询条件对象,与PC端格式保持一致 // 构建查询条件对象,与PC端格式保持一致
const allConditions = {} const allConditions = {}
// 处理日期条件,根据选项类型构建不同的查询条件(属性名小写,与PC端保持一致) // 处理日期条件,根据选项类型构建不同的查询条件(属性名小写,与PC端保持一致)
if (this.condition.option === 'BT') { if (this.condition.option === 'BT') {
// 介于:需要开始日期和结束日期 // 介于:需要开始日期和结束日期
...@@ -236,7 +229,7 @@ ...@@ -236,7 +229,7 @@
}] }]
} }
} }
// 处理客户条件(如果存在) // 处理客户条件(如果存在)
if (this.condition.customer && this.condition.customer.length > 0) { if (this.condition.customer && this.condition.customer.length > 0) {
const customer = this.condition.customer.map(v => ({ const customer = this.condition.customer.map(v => ({
...@@ -248,12 +241,12 @@ ...@@ -248,12 +241,12 @@
// 字段名使用小写,与PC端保持一致 // 字段名使用小写,与PC端保持一致
allConditions.customer = customer allConditions.customer = customer
} }
// 获取用户编号和角色信息,参考 ticket-order.nvue 的方式 // 获取用户编号和角色信息,参考 ticket-order.nvue 的方式
const userCode = this.userInfo?.code || '' const userCode = this.userInfo?.code || ''
// 从 userBpData 获取第一个角色的 ROLE_ID // 从 userBpData 获取第一个角色的 ROLE_ID
const roleId = this.userBpData?.ROLES && this.userBpData.ROLES.length > 0 const roleId = this.userBpData?.ROLES && this.userBpData.ROLES.length > 0
? this.userBpData.ROLES[0].ROLE_ID ? this.userBpData.ROLES[0].ROLE_ID
: '' : ''
let params = { let params = {
user_bp: userCode, user_bp: userCode,
...@@ -261,41 +254,22 @@ ...@@ -261,41 +254,22 @@
...allConditions, ...allConditions,
page: pageNo, page: pageNo,
pagesize: this.page.pagesize, pagesize: this.page.pagesize,
totalCount: pageNo === 1 ? 0 : this.page.totalCount, // 第一页时重置totalCount totalCount: this.page.totalCount,
is_result: 1, is_result: 1,
sort: [] sort: []
} }
uni.showLoading({
try { title: '加载中'
if (pageNo === 1) { });
uni.showLoading({ const res = await apiGetMarketSupportFee(params);
title: '加载中' uni.hideLoading();
}); if (res && res.data) {
}
const res = await apiGetMarketSupportFee(params);
if (pageNo === 1) { if (pageNo === 1) {
uni.hideLoading(); this.lists = res.data || [];
} else {
this.lists = this.lists.concat(res.data || []);
} }
this.page.totalCount = res?.TOTALCOUNT || res?.totalCount || res?.Total || this.page.totalCount;
if (res && res.data) {
if (pageNo === 1) {
this.lists = res.data || [];
} else {
this.lists = this.lists.concat(res.data || []);
}
// 更新总数,优先使用后端返回的总数
const totalCount = res?.TOTALCOUNT || res?.totalCount || res?.Total || 0;
if (totalCount > 0) {
this.page.totalCount = totalCount;
}
}
} catch (error) {
console.error('查询失败', error);
if (pageNo === 1) {
uni.hideLoading();
}
} finally {
this.isLoading = false;
} }
} }
} }
...@@ -341,10 +315,8 @@ ...@@ -341,10 +315,8 @@
.main { .main {
position: relative; position: relative;
flex-direction: column; flex-direction: column;
flex: 1;
margin-top: -164rpx; margin-top: -164rpx;
padding: 0 16rpx; padding: 0 16rpx;
min-height: 0;
} }
.middle { .middle {
...@@ -503,7 +475,7 @@ ...@@ -503,7 +475,7 @@
} }
.scroll-area { .scroll-area {
flex: 1; overflow-y: scroll;
} }
.list-cell { .list-cell {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment