476 lines
13 KiB
Vue
476 lines
13 KiB
Vue
<!-- eslint-disable vue/valid-v-bind -->
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<el-form :model="query" inline label-position="left">
|
|
<el-form-item>
|
|
<el-radio-group v-model="timeValue" @change="timeChange">
|
|
<el-radio-button label="">全部</el-radio-button>
|
|
<el-radio-button label="0">今天</el-radio-button>
|
|
<el-radio-button label="-1">昨天</el-radio-button>
|
|
<el-radio-button label="-7">最近7天</el-radio-button>
|
|
<el-radio-button label="-30">最近30天</el-radio-button>
|
|
<el-radio-button label="week">本周</el-radio-button>
|
|
<el-radio-button label="month">本月</el-radio-button>
|
|
<el-radio-button label="custom">自定义</el-radio-button>
|
|
</el-radio-group>
|
|
<el-date-picker
|
|
v-if="timeValue == 'custom'"
|
|
v-model="query.createdAt"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
<template>
|
|
<el-form-item>
|
|
<el-select v-model="query.status" placeholder="全部状态" clearable style="width: 140px">
|
|
<el-option
|
|
v-for="item in statusList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="search">查询</el-button>
|
|
<el-button @click="resetHandle">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="head-container">
|
|
<div class="collect_wrap">
|
|
<div v-for="(item, index) in payCountList" :key="index" class="item">
|
|
<div class="icon_wrap" :style="{ backgroundColor: `rgba(${item.color},0.5)` }">
|
|
<el-icon :color="`rgba(${item.color},1)`" :size="18">
|
|
<InfoFilled v-if="item.icon == 'info'" />
|
|
<Check v-if="item.icon == 'check'" />
|
|
<Warning v-if="item.icon == 'warning'" />
|
|
<Plus v-if="item.icon == 'plus'" />
|
|
</el-icon>
|
|
</div>
|
|
<div class="info">
|
|
<div class="m">￥{{ item.amount }}</div>
|
|
<div class="t">{{ item.label }}{{ index == 0 ? item.count + "笔" : "" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-table v-loading="tableData.loading" :data="tableData.data">
|
|
<el-table-column label="创建日期" prop="createTime" />
|
|
<el-table-column label="订单号" prop="orderId" />
|
|
<el-table-column label="应付金额" prop="payAmount">
|
|
<template v-slot="scope">{{ "￥" + scope.row.payAmount || "-" }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="已付款金额" prop="paidAmount">
|
|
<template v-slot="scope">{{ "￥" + scope.row.paidAmount || "-" }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="待付款金额" prop="unpaidAmount">
|
|
<template v-slot="scope">{{ "￥" + scope.row.unpaidAmount || "-" }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" prop="salesAmount">
|
|
<template v-slot="scope">
|
|
{{
|
|
scope.row.status == "unpaid"
|
|
? "未付款"
|
|
: scope.row.status == "partial"
|
|
? "部分支付"
|
|
: scope.row.status == "paid"
|
|
? "已付款"
|
|
: ""
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="付款方式" prop="lastPaymentMethod">
|
|
<template v-slot="scope">{{ scope.row.lastPaymentMethod }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" prop="remark">
|
|
<template v-slot="scope">{{ scope.row.remark }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="付款时间" prop="lastPaymentTime" />
|
|
<el-table-column label="操作" width="200">
|
|
<template v-slot="scope">
|
|
<el-button
|
|
type="text"
|
|
:style="{ color: repaymentMethod == 'total' ? '#999' : '' }"
|
|
@click="openDialog(scope.row, 'payment')"
|
|
>
|
|
付款
|
|
</el-button>
|
|
<el-button type="text" @click="openDialog(scope.row, 'paymentRecord')">
|
|
账单付款记录
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-pagination
|
|
:total="tableData.total"
|
|
:current-page="query.page"
|
|
:page-size="query.size"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@current-change="paginationChange"
|
|
@size-change="sizeChange"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 还款 -->
|
|
<creditRepayment ref="creditRepayment" @success="resetHandle" />
|
|
|
|
<!-- 还款记录 -->
|
|
<creditRepaymentRecord ref="creditRepaymentRecord" @success="resetHandle" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import creditRepayment from "./components/detail/credit_repayment.vue";
|
|
import creditRepaymentRecord from "./components/detail/credit_RePaymentRecord.vue";
|
|
import dayjs from "dayjs";
|
|
import creditOrderApi from "@/api/order/credit-order";
|
|
export default {
|
|
components: { creditRepayment, creditRepaymentRecord },
|
|
filters: {},
|
|
data() {
|
|
return {
|
|
timeValue: "",
|
|
resetQuery: null,
|
|
repaymentMethod: "",
|
|
statusList: [
|
|
{ label: "未付款", value: "unpaid" },
|
|
{ label: "部分支付", value: "partial" },
|
|
{ label: "已付款", value: "paid" },
|
|
],
|
|
query: {
|
|
page: 1,
|
|
size: 10,
|
|
creditBuyerId: "",
|
|
createdAt: [],
|
|
status: "",
|
|
},
|
|
tableData: {
|
|
data: [],
|
|
loading: false,
|
|
total: 0,
|
|
},
|
|
downloadLoading: false,
|
|
payCountList: [
|
|
{ label: "总交易", icon: "info", color: "201, 120, 236", amount: 0, count: 0 },
|
|
{ label: "已支付金额", icon: "check", color: "70, 181, 24", amount: 0 },
|
|
{ label: "待支付金额", icon: "plus", color: "248, 110, 16", amount: 0 },
|
|
{ label: "待支付笔数", icon: "warning", color: "254, 180, 38", amount: 0 },
|
|
],
|
|
payCountTotal: 0,
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log(this.$route.query);
|
|
this.query.creditBuyerId = this.$route.query.id;
|
|
this.repaymentMethod = this.$route.query.repaymentMethod;
|
|
this.resetQuery = { ...this.query };
|
|
// repaymentMethod
|
|
this.getTableData();
|
|
// this.tbShopCategoryGet()
|
|
},
|
|
methods: {
|
|
search() {
|
|
this.query.page = 1;
|
|
this.getTableData();
|
|
},
|
|
/**
|
|
* 获取明细数据
|
|
*/
|
|
async getTableData() {
|
|
this.tableData.loading = true;
|
|
try {
|
|
this.creditDetailSummary();
|
|
// eslint-disable-next-line prefer-const
|
|
let params = {
|
|
page: this.query.page,
|
|
size: this.query.size,
|
|
status: this.query.status,
|
|
creditBuyerId: this.query.creditBuyerId,
|
|
};
|
|
if (this.query.createdAt.length > 0) {
|
|
params.beginDate = this.query.createdAt[0].substring(0, 10);
|
|
params.endDate = this.query.createdAt[1].substring(0, 10);
|
|
}
|
|
// eslint-disable-next-line prefer-const
|
|
let res = await creditOrderApi.page(params);
|
|
this.tableData.loading = false;
|
|
this.tableData.data = res.records;
|
|
this.tableData.total = res.totalRow * 1;
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 获取明细统计
|
|
*/
|
|
async creditDetailSummary() {
|
|
try {
|
|
// eslint-disable-next-line prefer-const
|
|
let params = {
|
|
page: this.query.page,
|
|
size: this.query.size,
|
|
status: this.query.status,
|
|
creditBuyerId: this.query.creditBuyerId,
|
|
};
|
|
if (this.query.createdAt.length > 0) {
|
|
params.beginDate = this.query.createdAt[0].substring(0, 10);
|
|
params.endDate = this.query.createdAt[1].substring(0, 10);
|
|
}
|
|
// eslint-disable-next-line prefer-const
|
|
let res = await creditOrderApi.summary(params);
|
|
this.payCountList[0].amount = res.payAmountTotal;
|
|
this.payCountList[0].count = res.count;
|
|
this.payCountList[1].amount = res.paidAmountTotal;
|
|
this.payCountList[2].amount = res.unpaidAmountTotal;
|
|
this.payCountList[3].amount = res.unpaidCount;
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 操作
|
|
*/
|
|
openDialog(row, type) {
|
|
if (type === "payment" && this.repaymentMethod === "order") {
|
|
this.$refs.creditRepayment.show(
|
|
{ creditBuyerId: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod },
|
|
row
|
|
);
|
|
} else if (type === "paymentRecord") {
|
|
this.$refs.creditRepaymentRecord.show(
|
|
{ id: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod },
|
|
row.orderId
|
|
);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 切换时间
|
|
* @param e
|
|
*/
|
|
timeChange(e) {
|
|
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
|
|
switch (e) {
|
|
case "":
|
|
// 全部
|
|
this.query.createdAt = [];
|
|
break;
|
|
case "0":
|
|
// 今天
|
|
this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
|
|
break;
|
|
case "-1":
|
|
// 昨天
|
|
this.query.createdAt = [
|
|
dayjs().add(-1, "d").format(format[0]),
|
|
dayjs().add(-1, "d").format(format[1]),
|
|
];
|
|
break;
|
|
case "-7":
|
|
// 最近7天
|
|
this.query.createdAt = [
|
|
dayjs().add(-7, "d").format(format[0]),
|
|
dayjs().format(format[1]),
|
|
];
|
|
break;
|
|
case "-30":
|
|
// 最近7天
|
|
this.query.createdAt = [
|
|
dayjs().add(-30, "d").format(format[0]),
|
|
dayjs().format(format[1]),
|
|
];
|
|
break;
|
|
case "week":
|
|
// 本周
|
|
this.query.createdAt = [
|
|
dayjs().startOf("week").format(format[0]),
|
|
dayjs().endOf("week").format(format[1]),
|
|
];
|
|
break;
|
|
case "month":
|
|
// 本周
|
|
this.query.createdAt = [
|
|
dayjs().startOf("month").format(format[0]),
|
|
dayjs().endOf("month").format(format[1]),
|
|
];
|
|
break;
|
|
case "custom":
|
|
// 自定义
|
|
this.query.createdAt = [];
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 重置查询
|
|
*/
|
|
resetHandle() {
|
|
this.timeValue = "";
|
|
this.query = { ...this.resetQuery };
|
|
this.getTableData();
|
|
},
|
|
|
|
/**
|
|
* 分页大小改变
|
|
* @param e
|
|
*/
|
|
sizeChange(e) {
|
|
console.log(e);
|
|
this.query.size = e;
|
|
this.getTableData();
|
|
},
|
|
|
|
/**
|
|
* 分页回调
|
|
* @param e
|
|
*/
|
|
paginationChange(e) {
|
|
this.query.page = e;
|
|
this.getTableData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.collect_wrap {
|
|
display: flex;
|
|
gap: 14px;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
background-size: 100% 100%;
|
|
width: 255px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 7px 7px 7px 7px;
|
|
|
|
.icon_wrap {
|
|
$size: 34px;
|
|
$border: 6px;
|
|
width: $size;
|
|
height: $size;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--bg-color);
|
|
border-radius: 50%;
|
|
position: relative;
|
|
> div {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
width: $size + $border;
|
|
height: $size + $border;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: var(--bg-color);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 32px;
|
|
position: absolute;
|
|
left: 1px;
|
|
right: 0;
|
|
top: 1px;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 10px;
|
|
|
|
.m {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.t {
|
|
font-size: 12px;
|
|
color: #999;
|
|
padding-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.refund {
|
|
color: #ff9731;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table_order_info {
|
|
.order_no {
|
|
color: #999;
|
|
}
|
|
|
|
.type {
|
|
color: #e6a23c;
|
|
}
|
|
}
|
|
|
|
.goods_info {
|
|
.row {
|
|
display: flex;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.cover {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 10px;
|
|
|
|
.sku {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|