475 lines
13 KiB
Vue
475 lines
13 KiB
Vue
<template>
|
|
<view class="credit_search">
|
|
<view class="time-wrapper">
|
|
<view v-for="(v, i) in pageData.timeList" :key="i" class="timelistbox">
|
|
<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value == pageData.selected }">
|
|
{{v.label}}
|
|
</view>
|
|
<view class="xian" v-if="v.value == pageData.selected "> </view>
|
|
</view>
|
|
</view>
|
|
<view class="search_status" @tap="pageData.showStatus = !pageData.showStatus" >
|
|
<view class="title">{{pageData.statusTitle}}</view>
|
|
<view class="select">
|
|
<text style="margin-right: 12rpx;">筛选</text>
|
|
<up-icon name="arrow-down-fill" color="#666" :size="14"></up-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view :style="{height:pageData.showStatus?statusHeight:0}" class="tranistion statusList overflow-hide">
|
|
<view @tap="changeNowStatusIndex(index,item)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
|
v-for="(item,index) in pageData.statusList" :key="index">
|
|
<view :class="{'color-main':pageData.statusIndex===index}">{{item.label}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<view class="statistics">
|
|
<view class="statistics_cell" v-for="(item,index) in pageData.payCountList" :key="index">
|
|
<view class="statistics_cell_value"><text style="font-size: 24rpx;">￥</text>{{item.amount}}</view>
|
|
<view class="statistics_cell_label" v-if="index == 0">{{item.label}}<text style="color: #318AFE;">{{item.count}}</text>笔</view>
|
|
<text class="statistics_cell_label" v-else>{{item.label}}</text>
|
|
<text class="statistics_cell_xian" v-if="index < 3"></text>
|
|
</view>
|
|
</view>
|
|
<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 class="amount">
|
|
<view><view class="payAmount"><text>￥</text>{{item.payAmount || '0'}}</view><text class="amount_label">应付金额</text></view>
|
|
<view><view class="paidAmount"><text>￥</text>{{item.paidAmount || '0'}}</view><text class="amount_label">已付款金额</text></view>
|
|
<view><view class="unpaidAmount"><text>￥</text>{{item.unpaidAmount || '0'}}</view><text class="amount_label">待付款金额</text></view>
|
|
</view>
|
|
<view class="cell_list">
|
|
<view><text class="cell_label">创建日期</text><text class="cell_value">{{item.createTime || '-'}}</text></view>
|
|
<view><text class="cell_label">订单号</text><text class="cell_value">{{item.orderId || '-'}}</text></view>
|
|
<view><text class="cell_label">备注</text><text class="cell_value">{{item.remark || '-'}}</text></view>
|
|
<view><text class="cell_label">付款时间</text><text class="cell_value">{{item.lastPaymentTime || '-'}}</text></view>
|
|
</view>
|
|
<view class="bottomBox">
|
|
<view class="btn record" @tap="toUrl('PAGES_CREDIT_BUYER_REPAYMENTRECORD',{id: pageData.query.creditBuyerId, orderId: item.id})">账单付款记录</view>
|
|
<view class="btn payment" @tap="repaymentOpen(item)" :style="{ backgroundColor: pageData.repaymentMethod == 'total' ? '#999' :''}">付款</view>
|
|
</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>
|
|
<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
|
|
<my-repayment ref="repayment" @affirm="affirm"></my-repayment>
|
|
<view class="shade" v-show="pageData.showStatus" @tap="pageData.showStatus=false"></view>
|
|
</template>
|
|
<script setup>
|
|
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
|
import { reactive, ref, computed, getCurrentInstance } from 'vue';
|
|
import go from '@/commons/utils/go.js';
|
|
import myRepayment from './components/my-repayment';
|
|
import datePickerview from './components/my-date-pickerview.vue'
|
|
import dayjs from 'dayjs' //时间格式库
|
|
import { creditBuyerOrderList, creditBuyerOrderSummary } from '@/api/buyer.js';
|
|
const pageData = reactive({
|
|
showStatus: false,
|
|
statusList:[
|
|
{ label: '全部状态', value: '' },
|
|
{ label: '未付款', value: 'unpaid' },
|
|
{ label: '部分支付', value: 'partial' },
|
|
{ label: '已付款', value: 'paid' }
|
|
],
|
|
payCountList: [
|
|
{ label: '总交易', amount: 0, count: 0 },
|
|
{ label: '已支付金额', amount: 0 },
|
|
{ label: '待支付金额', amount: 0 },
|
|
{ label: '待支付笔数', amount: 0 }
|
|
],
|
|
timeList: [
|
|
{ label: '今天', value: 'today' },
|
|
{ label: '昨天', value: 'yesterday' },
|
|
{ label: '本周', value: 'circumference' },
|
|
{ label: '本月', value: 'moon' },
|
|
{ label: '自定义', value: 'custom' }
|
|
],
|
|
statusIndex: 0,
|
|
statusTitle: '全部状态',
|
|
selected: '',
|
|
query: {
|
|
page: 1,
|
|
size: 10,
|
|
creditBuyerId: null,
|
|
orderId: null,
|
|
status: ''
|
|
},
|
|
start: "",
|
|
end: "",
|
|
repaymentMethod: 'order',
|
|
list: []
|
|
})
|
|
let statusHeight = computed(() => {
|
|
return 30 * pageData.statusList.length + 40 + 'px'
|
|
})
|
|
const currentInstance = getCurrentInstance()
|
|
let repayment = ref(null)
|
|
|
|
onLoad((options) => {
|
|
if ( options.id ) {
|
|
pageData.query.creditBuyerId = options.id;
|
|
}
|
|
if ( options.repaymentMethod ) {
|
|
pageData.repaymentMethod = options.repaymentMethod;
|
|
}
|
|
|
|
getList()
|
|
})
|
|
// 监听，触底事件。 查询下一页
|
|
onReachBottom(() => {
|
|
console.log(pageData.query.page)
|
|
if( pageData.query.page * pageData.query.size < pageData.totalElements) {
|
|
pageData.query.page++
|
|
getList();
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* 获取还款记录列表
|
|
*/
|
|
async function getList() {
|
|
let beginDate, endDate;
|
|
if (pageData.selected == 'today') {
|
|
beginDate = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
|
|
endDate = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
|
|
} else if (pageData.selected == 'yesterday') {
|
|
beginDate = formatTime() + ' 00:00:00'
|
|
endDate = formatTime() + ' 23:59:59'
|
|
} else if (pageData.selected == 'circumference') {
|
|
var now = new Date();
|
|
var nowTime = now.getTime();
|
|
var day = now.getDay();
|
|
var oneDayTime = 24 * 60 * 60 * 1000;
|
|
//显示周一
|
|
var MondayTime = nowTime - (day - 1) * oneDayTime;
|
|
//显示周日
|
|
var SundayTime = nowTime + (7 - day) * oneDayTime;
|
|
beginDate = dayjs(MondayTime).format('YYYY-MM-DD 00:00:00')
|
|
endDate = dayjs(SundayTime).format('YYYY-MM-DD 23:59:59')
|
|
} else if (pageData.selected == 'moon') {
|
|
beginDate = dayjs().startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
|
|
endDate = dayjs().endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
|
|
} else if (pageData.selected == 'custom') {
|
|
let s = pageData.start.substring(0, pageData.start.indexOf(' '))
|
|
let e = pageData.end.substring(0, pageData.end.indexOf(' '))
|
|
beginDate = s + ' 00:00:00'
|
|
endDate = e + ' 23:59:59'
|
|
}
|
|
|
|
let params = {
|
|
creditBuyerId: pageData.query.creditBuyerId,
|
|
status: pageData.query.status,
|
|
size: pageData.query.size,
|
|
page: pageData.query.page
|
|
}
|
|
if ( beginDate && endDate) {
|
|
params.beginDate = beginDate.substring(0, 10);
|
|
params.endDate = endDate.substring(0, 10);
|
|
}
|
|
creditBuyerOrderList(params).then(res => {
|
|
pageData.list = [...pageData.list,...res.records]
|
|
pageData.totalElements = res.totalRow
|
|
})
|
|
creditBuyerOrderSummary(params).then(res => {
|
|
pageData.payCountList[0].amount = res.payAmountTotal
|
|
pageData.payCountList[0].count = res.count
|
|
pageData.payCountList[1].amount = res.paidAmountTotal
|
|
pageData.payCountList[2].amount = res.unpaidAmountTotal
|
|
pageData.payCountList[3].amount = res.unpaidCount
|
|
})
|
|
}
|
|
function changeTime(e) {
|
|
pageData.selected = e
|
|
if (e == 'custom') {
|
|
currentInstance.ctx.$refs.datePicker.toggle()
|
|
} else {
|
|
pageData.query.page = 1;
|
|
pageData.list = [];
|
|
getList()
|
|
}
|
|
}
|
|
function datePickerConfirm(e) {
|
|
pageData.start = e.start
|
|
pageData.end = e.end
|
|
pageData.query.page = 1;
|
|
pageData.list = [];
|
|
getList()
|
|
}
|
|
|
|
/**
|
|
* 状态选择
|
|
*/
|
|
function changeNowStatusIndex(i,item) {
|
|
pageData.statusIndex = i
|
|
pageData.showStatus = false
|
|
pageData.statusTitle = item.label
|
|
pageData.query.status = item.value
|
|
pageData.query.page = 1;
|
|
pageData.list = [];
|
|
getList()
|
|
}
|
|
let repaymentOpen = (item) => {
|
|
if ( item.repaymentMethod == 'total' ) {
|
|
return;
|
|
}
|
|
repayment.value.open({creditBuyerId:pageData.query.creditBuyerId,order:item});
|
|
}
|
|
let affirm = (item) => {
|
|
pageData.query.page = 1;
|
|
pageData.list = [];
|
|
getList()
|
|
}
|
|
let toUrl = (url, d) => {
|
|
go.to(url, d)
|
|
}
|
|
// 获取当前时间
|
|
function getdate() {
|
|
const dt = new Date();
|
|
const y = dt.getFullYear();
|
|
const m = (dt.getMonth() + 1 + "").padStart(2, "0");
|
|
const d = (dt.getDate() + "").padStart(2, "0");
|
|
const hh = (dt.getHours() + "").padStart(2, "0");
|
|
const mm = (dt.getMinutes() + "").padStart(2, "0");
|
|
const ss = (dt.getSeconds() + "").padStart(2, "0");
|
|
return `${y}-${m}-${d}`;
|
|
}
|
|
// 获取昨天时间
|
|
const formatTime = () => {
|
|
let strDate = getdate()
|
|
let dateFormat = new Date(strDate);
|
|
dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
|
|
dateFormat = new Date(dateFormat);
|
|
let y = dateFormat.getFullYear()
|
|
let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
|
|
let d = dateFormat.getDate().toString().padStart(2, '0')
|
|
return `${y}-${m}-${d}`
|
|
}
|
|
</script>
|
|
<style>
|
|
page{
|
|
background: #F9F9F9;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.credit_search {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
padding: 32rpx 0 12rpx 0;
|
|
position: fixed;
|
|
top: 0rpx;
|
|
left: 0;
|
|
z-index: 9;
|
|
.search_status{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24rpx;
|
|
padding: 0 28rpx;
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.select{
|
|
width: 116rpx;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
|
|
.time-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 32rpx;
|
|
padding: 16rpx 28rpx 0 28rpx;
|
|
background-color: #fff;
|
|
border-bottom: 2rpx solid #F0F0F0;
|
|
.timelistbox {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.time-item {
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
padding-bottom: 22rpx;
|
|
font-weight: 400;
|
|
|
|
}
|
|
|
|
.xian {
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background-color: #318AFE;
|
|
// position: absolute;
|
|
// left: 16rpx;
|
|
// bottom: 0;
|
|
}
|
|
.time-selected {
|
|
color: #318afe;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
.statusList {
|
|
position: fixed;
|
|
top: 212rpx;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
>view{
|
|
margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
.shade{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
z-index: 1;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.content {
|
|
padding: 245rpx 28rpx 32rpx 28rpx;
|
|
.statistics{
|
|
padding: 38rpx 0;
|
|
background-color: #fff;
|
|
border-radius: 18rpx;
|
|
margin-bottom: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.statistics_cell{
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
.statistics_cell_value{
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
.statistics_cell_label{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
.statistics_cell_xian{
|
|
width: 0rpx;
|
|
height: 38rpx;
|
|
border: 1rpx solid #E5E5E5;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
.content_list{
|
|
.list_cell{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 32rpx;
|
|
background-color: #fff;
|
|
border-radius: 18rpx;
|
|
padding: 32rpx 24rpx;
|
|
.amount{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
background: #F9F9F9;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
margin-bottom: 32rpx;
|
|
padding: 32rpx 0;
|
|
>view{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
.payAmount{
|
|
color: #333333;
|
|
}
|
|
.paidAmount{
|
|
color: #318AFE;
|
|
}
|
|
.unpaidAmount{
|
|
color: #F02C45;
|
|
}
|
|
>view>text{
|
|
font-size: 24rpx;
|
|
}
|
|
.amount_label{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-top: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
.cell_list{
|
|
display: flex;
|
|
flex-direction: column;
|
|
>view{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
}
|
|
.bottomBox{
|
|
padding-top: 24rpx;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.btn{
|
|
padding: 8rpx 32rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
}
|
|
.record{
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
border: 2rpx solid #3189FD;
|
|
color: #3189FD;
|
|
margin-right: 24rpx;
|
|
}
|
|
.payment{
|
|
color: #FFFFFF;
|
|
background: #3189FD;
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |