qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 功能优化完善！分期明细自动定位，账单按未结清查询。

Browse Source
This commit is contained in:
tianyongbao
2025-11-25 07:49:23 +08:00
parent 76780aca82
commit 3f607f74e2
6 changed files with 140 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/work/bill/creditCardBill/list.vue
View File

@@ -141,9 +141,10 @@ const data = reactive({
},
queryParams: {
creditCardId: null,
name: '',
type: '',
}
name: '',
type: '',
billState: '0' // 默认未出账单
}
})
const { queryBankCardLendParams, queryParams} = toRefs(data)
onLoad(() => {

65
src/pages/work/bill/creditInstallmentHistory/details.vue
View File

@@ -10,7 +10,7 @@
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
<view class="search-view">
<u-input v-model="queryParams.name" border="false" disabled ="false" type="select" v-show="true" class="search-input">
<u-input v-model="queryParams.name" border="false" :disabled="true" type="select" v-show="true" class="search-input">
</u-input>
<view class="summary-btn" @click="handleUpdateInterest()">
<uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
@@ -18,9 +18,9 @@
</view>
</view>
</u-sticky>
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100" :scroll-into-view="scrollIntoView">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="list-item" :class="index === firstUnpaidIndex ? 'highlight-item' : ''" :id="'item-' + index">
<view class="item-header">
<view class="header-row">
<view class="card-icon">
@@ -96,6 +96,8 @@ const status = ref('loadmore')
const postingStateList = ref([])
const settingPickShow = ref(false)
const settingColumns = ref([])
const scrollIntoView = ref('')
const firstUnpaidIndex = ref(-1)
const data = reactive({
form: {},
queryParams: {
@@ -137,10 +139,52 @@ function getList() {
} else {
status.value = 'nomore'
}
// 查找最近一条未入账的数据
scrollToFirstUnpaid()
}).catch(() => {
status.value = 'nomore'
})
}
// 滚动到最近一条未入账的数据
function scrollToFirstUnpaid() {
// 查找所有未入账的记录
const unpaidRecords = listData.value
.map((item, index) => ({ ...item, originalIndex: index }))
.filter(item => item.postingState !== '1')
if (unpaidRecords.length === 0) return
// 获取当前日期
const now = new Date()
// 找到距离当前日期最近的未入账记录
let closestRecord = unpaidRecords[0]
let minDiff = Math.abs(new Date(unpaidRecords[0].repaymentDate) - now)
unpaidRecords.forEach(record => {
const recordDate = new Date(record.repaymentDate)
const diff = Math.abs(recordDate - now)
if (diff < minDiff) {
minDiff = diff
closestRecord = record
}
})
const index = closestRecord.originalIndex
firstUnpaidIndex.value = index
// 延迟执行，确保 DOM 渲染完成
setTimeout(() => {
scrollIntoView.value = 'item-' + index
// 3秒后移除高亮效果
setTimeout(() => {
firstUnpaidIndex.value = -1
scrollIntoView.value = ''
}, 3000)
}, 800)
}
function getDict() {
// 交易类型
getDicts('posting_state').then(res => {
@@ -272,6 +316,12 @@ page {
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
&.highlight-item {
animation: highlight 2s ease-in-out;
box-shadow: 0 0 20rpx rgba(102, 126, 234, 0.6);
}
.item-header {
display: flex;
@@ -433,4 +483,13 @@ page {
}
}
}
@keyframes highlight {
0%, 100% {
background-color: #fff;
}
50% {
background-color: rgba(102, 126, 234, 0.1);
}
}
</style>

8
src/pages/work/bill/creditInstallmentHistory/list.vue
View File

@@ -48,8 +48,8 @@
<view class="card-body">
<view class="info-item">
<text class="info-label">分期日期</text>
<text class="info-value">{{ item.installmentDate }}</text>
<text class="info-label">分期期数</text>
<text class="info-value">{{ item.period }}期</text>
</view>
<view class="info-item">
<text class="info-label">已还期数</text>
@@ -141,8 +141,8 @@ const data = reactive({
name: null,
type: '2',
bankCardLendId: null,
state: ''
}
state: '0' // 默认未结清
}
})
const { queryBankCardLendParams, queryParams} = toRefs(data)
onLoad(() => {

71
src/pages/work/bill/onlineLendHistory/details.vue
View File

@@ -10,7 +10,7 @@
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
<view class="search-view">
<u-input v-model="queryParams.name" border="false" disabled ="false" type="select" v-show="true" class="search-input">
<u-input v-model="queryParams.name" border="false" :disabled="true" type="select" v-show="true" class="search-input">
</u-input>
<view class="summary-btn" @click="handleUpdateInterest()">
<uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
@@ -18,9 +18,9 @@
</view>
</view>
</u-sticky>
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100" :scroll-into-view="scrollIntoView">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="list-item" :class="index === firstUnpaidIndex ? 'highlight-item' : ''" :id="'item-' + index">
<view class="item-header">
<view class="header-row">
<view class="card-icon">
@@ -97,6 +97,8 @@ const status = ref('loadmore')
const postingStateList = ref([])
const settingPickShow = ref(false)
const settingColumns = ref([])
const scrollIntoView = ref('')
const firstUnpaidIndex = ref(-1)
const data = reactive({
form: {},
queryParams: {
@@ -112,9 +114,9 @@ const { queryParams,form} = toRefs(data)
onLoad((option) => {
queryParams.value.installmentHistoryId = option.id
queryParams.value.name = option.name
getDict()
getList()
});
getDict()
getList()
});
onShow(() => {
if (isShow.value) {
@@ -138,10 +140,52 @@ function getList() {
} else {
status.value = 'nomore'
}
// 查找第一条未还款的数据
scrollToFirstUnpaid()
}).catch(() => {
status.value = 'nomore'
})
}
// 滚动到最近一条未还款的数据
function scrollToFirstUnpaid() {
// 查找所有未还款的记录
const unpaidRecords = listData.value
.map((item, index) => ({ ...item, originalIndex: index }))
.filter(item => item.postingState !== '1')
if (unpaidRecords.length === 0) return
// 获取当前日期
const now = new Date()
// 找到距离当前日期最近的未还款记录
let closestRecord = unpaidRecords[0]
let minDiff = Math.abs(new Date(unpaidRecords[0].repaymentDate) - now)
unpaidRecords.forEach(record => {
const recordDate = new Date(record.repaymentDate)
const diff = Math.abs(recordDate - now)
if (diff < minDiff) {
minDiff = diff
closestRecord = record
}
})
const index = closestRecord.originalIndex
firstUnpaidIndex.value = index
// 延迟执行，确保 DOM 渲染完成
setTimeout(() => {
scrollIntoView.value = 'item-' + index
// 3秒后移除高亮效果
setTimeout(() => {
firstUnpaidIndex.value = -1
scrollIntoView.value = ''
}, 3000)
}, 800)
}
function getDict() {
// 交易类型
getDicts('repayment_state').then(res => {
@@ -282,6 +326,12 @@ page {
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
&.highlight-item {
animation: highlight 2s ease-in-out;
box-shadow: 0 0 20rpx rgba(102, 126, 234, 0.6);
}
.item-header {
display: flex;
@@ -463,4 +513,13 @@ page {
}
}
}
@keyframes highlight {
0%, 100% {
background-color: #fff;
}
50% {
background-color: rgba(102, 126, 234, 0.1);
}
}
</style>

4
src/pages/work/bill/onlineLendHistory/list.vue
View File

@@ -143,8 +143,8 @@ const data = reactive({
name: null,
type: '3',
bankCardLendId: null,
state: ''
}
state: '0' // 默认未结清
}
})
const { queryBankCardLendParams, queryParams} = toRefs(data)
onLoad(() => {

5
src/pages/work/bill/peopleLendHistory/list.vue
View File

@@ -119,8 +119,9 @@ const data = reactive({
queryParams: {
name: null,
type: '4',
bankCardLendId: null
}
bankCardLendId: null,
state: '0' // 默认未结清
}
})
const { filterPanel, queryBankCardLendParams, queryParams} = toRefs(data)
const windowHeight = computed(() => {