挂账增加
This commit is contained in:
GaoHao
474
pageCreditBuyer/creditDetail.vue
Normal file
474
pageCreditBuyer/creditDetail.vue
Normal file
@@ -0,0 +1,474 @@
|
||||
<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 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 { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { creditBuyerOrderList, creditBuyerOrderSummary } from '@/http/yskApi/credit.js'
|
||||
import { reactive, ref, computed, getCurrentInstance } from 'vue';
|
||||
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: 3,
|
||||
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.content]
|
||||
pageData.totalElements = res.totalElements
|
||||
})
|
||||
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
|
||||
console.log(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
|
||||
getList()
|
||||
// gettableData() day如日期不能是1 7 30 就回报错
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 状态选择
|
||||
*/
|
||||
function changeNowStatusIndex(i,item) {
|
||||
pageData.statusIndex = i
|
||||
pageData.showStatus = false
|
||||
pageData.statusTitle = item.label
|
||||
pageData.query.status = item.value
|
||||
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>
|
||||
Reference in New Issue
Block a user