czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 挂账管理更新，邀请列表更新，店铺配置更新

Browse Source
This commit is contained in:
YeMingfei666
2025-03-10 18:33:42 +08:00
parent 34068cf8dd
commit 89fe9b7639
31 changed files with 3292 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

475
src/views/data/credit/detail.vue Normal file
View File

@@ -0,0 +1,475 @@
<!-- 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>