160 lines
3.9 KiB
Vue
160 lines
3.9 KiB
Vue
<template>
|
|
<view class="credit_search">
|
|
<up-input
|
|
shape='circle'
|
|
border="none"
|
|
v-model="pageData.query.paymentMethod"
|
|
type="text"
|
|
placeholder="支付方式"
|
|
prefixIcon="search"
|
|
prefixIconStyle="font-size: 26px;color: #666"
|
|
style='width: 100%;padding: 24rpx;'
|
|
></up-input>
|
|
<view class="search" @tap="inputEvent">搜索</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="content_list" v-if="pageData.list.length > 0">
|
|
<view class="list_cell" v-for="(item,index) in pageData.list" :key="item.id">
|
|
<view><text class="paymentMethod">{{item.paymentMethod}}</text><text class="repaymentAmount">￥{{item.repaymentAmount}}</text></view>
|
|
<view style="align-items: flex-start;"><text class="remark">{{item.remark||'-'}}</text><text class="createTime" style="flex-shrink: 0;">{{item.createTime}}</text></view>
|
|
</view>
|
|
</view>
|
|
<view v-else style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 300rpx;">
|
|
<image src="./bg.png" style="width: 325rpx;height: 335rpx;" mode=""></image>
|
|
<view style="font-size: 28rpx;color: #999;margin-top: 20rpx;">暂无数据</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
|
|
|
import { creditRePaymentRecord } from '@/http/api/buyer.js';
|
|
const pageData = reactive({
|
|
query: {
|
|
page: 1,
|
|
size: 10,
|
|
creditBuyerId: null,
|
|
orderId: null,
|
|
paymentMethod: ''
|
|
},
|
|
totalElements: 0,
|
|
list: []
|
|
})
|
|
|
|
onLoad((options) => {
|
|
console.log(options)
|
|
if ( options.id ) {
|
|
pageData.query.creditBuyerId = options.id;
|
|
}
|
|
if ( options.orderId ) {
|
|
pageData.query.orderId = options.orderId;
|
|
}
|
|
getList()
|
|
})
|
|
// 监听，触底事件。 查询下一页
|
|
onReachBottom(() => {
|
|
console.log(pageData.query.page)
|
|
if( pageData.query.page * pageData.query.size < pageData.totalElements) {
|
|
pageData.query.page++
|
|
getList();
|
|
}
|
|
});
|
|
/**
|
|
* 获取还款记录列表
|
|
*/
|
|
async function getList() {
|
|
let params = {
|
|
creditBuyerId: pageData.query.creditBuyerId,
|
|
paymentMethod: pageData.query.paymentMethod,
|
|
size: pageData.query.size,
|
|
page: pageData.query.page
|
|
}
|
|
if ( pageData.query.orderId ) {
|
|
params.orderId = pageData.query.orderId
|
|
}
|
|
creditRePaymentRecord(params).then(res => {
|
|
pageData.list = [...pageData.list,...res.records]
|
|
pageData.totalElements = res.totalRow
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 挂账人/手机号筛选
|
|
*/
|
|
function inputEvent(d) {
|
|
pageData.query.paymentMethod = pageData.query.paymentMethod.replace(/\s*/g, "");
|
|
pageData.query.page = 1;
|
|
pageData.list = [];
|
|
getList()
|
|
}
|
|
</script>
|
|
<style>
|
|
page{
|
|
background: #F9F9F9;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.credit_search {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 32rpx 28rpx;
|
|
>view:nth-child(1) {
|
|
width: 100%;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
background: #F9F9F9;
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
|
|
}
|
|
.search{
|
|
width: 116rpx;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.content {
|
|
padding: 32rpx 28rpx 150rpx 28rpx;
|
|
.content_list{
|
|
padding: 40rpx 24rpx 8rpx 24rpx;
|
|
background-color: #fff;
|
|
border-radius: 18rpx;
|
|
.list_cell{
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
padding-bottom: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
>view{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.paymentMethod,.repaymentAmount{
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.remark,.createTime{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
.list_cell:last-child{
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |