fix: 功能优化完善!分期明细自动定位,账单按未结清查询。
This commit is contained in:
@@ -141,9 +141,10 @@ const data = reactive({
|
|||||||
},
|
},
|
||||||
queryParams: {
|
queryParams: {
|
||||||
creditCardId: null,
|
creditCardId: null,
|
||||||
name: '',
|
name: '',
|
||||||
type: '',
|
type: '',
|
||||||
}
|
billState: '0' // 默认未出账单
|
||||||
|
}
|
||||||
})
|
})
|
||||||
const { queryBankCardLendParams, queryParams} = toRefs(data)
|
const { queryBankCardLendParams, queryParams} = toRefs(data)
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||||
|
|
||||||
<view class="search-view">
|
<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>
|
</u-input>
|
||||||
<view class="summary-btn" @click="handleUpdateInterest()">
|
<view class="summary-btn" @click="handleUpdateInterest()">
|
||||||
<uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
|
<uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
|
||||||
@@ -18,9 +18,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-sticky>
|
</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">
|
<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="item-header">
|
||||||
<view class="header-row">
|
<view class="header-row">
|
||||||
<view class="card-icon">
|
<view class="card-icon">
|
||||||
@@ -96,6 +96,8 @@ const status = ref('loadmore')
|
|||||||
const postingStateList = ref([])
|
const postingStateList = ref([])
|
||||||
const settingPickShow = ref(false)
|
const settingPickShow = ref(false)
|
||||||
const settingColumns = ref([])
|
const settingColumns = ref([])
|
||||||
|
const scrollIntoView = ref('')
|
||||||
|
const firstUnpaidIndex = ref(-1)
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
form: {},
|
form: {},
|
||||||
queryParams: {
|
queryParams: {
|
||||||
@@ -137,10 +139,52 @@ function getList() {
|
|||||||
} else {
|
} else {
|
||||||
status.value = 'nomore'
|
status.value = 'nomore'
|
||||||
}
|
}
|
||||||
|
// 查找最近一条未入账的数据
|
||||||
|
scrollToFirstUnpaid()
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
status.value = 'nomore'
|
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() {
|
function getDict() {
|
||||||
// 交易类型
|
// 交易类型
|
||||||
getDicts('posting_state').then(res => {
|
getDicts('posting_state').then(res => {
|
||||||
@@ -272,6 +316,12 @@ page {
|
|||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
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 {
|
.item-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -433,4 +483,13 @@ page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes highlight {
|
||||||
|
0%, 100% {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -48,8 +48,8 @@
|
|||||||
|
|
||||||
<view class="card-body">
|
<view class="card-body">
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">分期日期</text>
|
<text class="info-label">分期期数</text>
|
||||||
<text class="info-value">{{ item.installmentDate }}</text>
|
<text class="info-value">{{ item.period }}期</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<text class="info-label">已还期数</text>
|
<text class="info-label">已还期数</text>
|
||||||
@@ -141,8 +141,8 @@ const data = reactive({
|
|||||||
name: null,
|
name: null,
|
||||||
type: '2',
|
type: '2',
|
||||||
bankCardLendId: null,
|
bankCardLendId: null,
|
||||||
state: ''
|
state: '0' // 默认未结清
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const { queryBankCardLendParams, queryParams} = toRefs(data)
|
const { queryBankCardLendParams, queryParams} = toRefs(data)
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||||
|
|
||||||
<view class="search-view">
|
<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>
|
</u-input>
|
||||||
<view class="summary-btn" @click="handleUpdateInterest()">
|
<view class="summary-btn" @click="handleUpdateInterest()">
|
||||||
<uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
|
<uni-icons type="checkmarkempty" size="18" color="#667eea"></uni-icons>
|
||||||
@@ -18,9 +18,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-sticky>
|
</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">
|
<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="item-header">
|
||||||
<view class="header-row">
|
<view class="header-row">
|
||||||
<view class="card-icon">
|
<view class="card-icon">
|
||||||
@@ -97,6 +97,8 @@ const status = ref('loadmore')
|
|||||||
const postingStateList = ref([])
|
const postingStateList = ref([])
|
||||||
const settingPickShow = ref(false)
|
const settingPickShow = ref(false)
|
||||||
const settingColumns = ref([])
|
const settingColumns = ref([])
|
||||||
|
const scrollIntoView = ref('')
|
||||||
|
const firstUnpaidIndex = ref(-1)
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
form: {},
|
form: {},
|
||||||
queryParams: {
|
queryParams: {
|
||||||
@@ -112,9 +114,9 @@ const { queryParams,form} = toRefs(data)
|
|||||||
onLoad((option) => {
|
onLoad((option) => {
|
||||||
queryParams.value.installmentHistoryId = option.id
|
queryParams.value.installmentHistoryId = option.id
|
||||||
queryParams.value.name = option.name
|
queryParams.value.name = option.name
|
||||||
getDict()
|
getDict()
|
||||||
getList()
|
getList()
|
||||||
});
|
});
|
||||||
|
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
if (isShow.value) {
|
if (isShow.value) {
|
||||||
@@ -138,10 +140,52 @@ function getList() {
|
|||||||
} else {
|
} else {
|
||||||
status.value = 'nomore'
|
status.value = 'nomore'
|
||||||
}
|
}
|
||||||
|
// 查找第一条未还款的数据
|
||||||
|
scrollToFirstUnpaid()
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
status.value = 'nomore'
|
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() {
|
function getDict() {
|
||||||
// 交易类型
|
// 交易类型
|
||||||
getDicts('repayment_state').then(res => {
|
getDicts('repayment_state').then(res => {
|
||||||
@@ -282,6 +326,12 @@ page {
|
|||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
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 {
|
.item-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -463,4 +513,13 @@ page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes highlight {
|
||||||
|
0%, 100% {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -143,8 +143,8 @@ const data = reactive({
|
|||||||
name: null,
|
name: null,
|
||||||
type: '3',
|
type: '3',
|
||||||
bankCardLendId: null,
|
bankCardLendId: null,
|
||||||
state: ''
|
state: '0' // 默认未结清
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const { queryBankCardLendParams, queryParams} = toRefs(data)
|
const { queryBankCardLendParams, queryParams} = toRefs(data)
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
|
|||||||
@@ -119,8 +119,9 @@ const data = reactive({
|
|||||||
queryParams: {
|
queryParams: {
|
||||||
name: null,
|
name: null,
|
||||||
type: '4',
|
type: '4',
|
||||||
bankCardLendId: null
|
bankCardLendId: null,
|
||||||
}
|
state: '0' // 默认未结清
|
||||||
|
}
|
||||||
})
|
})
|
||||||
const { filterPanel, queryBankCardLendParams, queryParams} = toRefs(data)
|
const { filterPanel, queryBankCardLendParams, queryParams} = toRefs(data)
|
||||||
const windowHeight = computed(() => {
|
const windowHeight = computed(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user