mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-18 17:05:54 +08:00
028f32a73c
- 将iView组件统一替换为TDesign组件 - 优化表单、表格、弹窗等交互样式 - 修复路由重复添加问题 - 更新依赖版本 - 调整布局间距与响应式 - 修复表单重置方法兼容性 - 统一消息提示组件
323 lines
10 KiB
Vue
323 lines
10 KiB
Vue
<template>
|
||
<div>
|
||
<t-card style="margin-bottom: 12px">
|
||
<t-form :data="searchForm" layout="inline" :labelWidth="70" class="search-form" @submit="handleSearch">
|
||
<t-form-item label="会员名称" name="memberName">
|
||
<t-input v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
|
||
</t-form-item>
|
||
<t-form-item label="审核状态" name="applyStatus">
|
||
<t-select v-model="searchForm.applyStatus" clearable style="width: 240px">
|
||
<t-option value="APPLY" label="申请中" />
|
||
<t-option value="VIA_AUDITING" label="审核通过" />
|
||
<t-option value="FAIL_AUDITING" label="审核拒绝" />
|
||
<t-option value="SUCCESS" label="提现成功" />
|
||
<t-option value="ERROR" label="提现失败" />
|
||
</t-select>
|
||
</t-form-item>
|
||
<t-form-item label="申请时间">
|
||
<t-date-picker v-model="selectDate" mode="date" range enableTimePicker clearable format="YYYY-MM-DD HH:mm:ss" @change="selectDateRange" style="width: 240px" />
|
||
</t-form-item>
|
||
<t-form-item>
|
||
<t-button theme="primary" @click="handleSearch">搜索</t-button>
|
||
<t-button variant="outline" style="margin-left: 8px" @click="handleReset">重置</t-button>
|
||
</t-form-item>
|
||
</t-form>
|
||
</t-card>
|
||
<t-card>
|
||
<t-table class="mt_10" :loading="loading" :columns="columns" :data="data" ref="table" rowKey="id"></t-table>
|
||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||
<t-pagination :current="searchForm.pageNumber" :total="Number(total)" :pageSize="searchForm.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
|
||
</div>
|
||
</t-card>
|
||
|
||
<t-drawer :visible="roleModalVisible" :header="modalTitle" placement="right" size="500px" @close="roleModalVisible = false">
|
||
<div class="drawer-content">
|
||
<div>申请编号：{{ showList.sn }}</div>
|
||
<div>用户名称：{{ showList.memberName }}</div>
|
||
<div class="drawer-row"><span>申请金额：</span><priceColorScheme :value="showList.applyMoney" :color="$mainColor" /></div>
|
||
<div>提现状态：{{ showList.applyStatus | paramTypeFilter }}</div>
|
||
<div>申请时间：{{ showList.createTime }}</div>
|
||
<div>
|
||
<t-textarea v-model="audit" placeholder="审核备注" />
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div v-if="showList.applyStatus == 'APPLY'" style="display: flex; justify-content: flex-end">
|
||
<t-button variant="text" @click="submitRole(false)">拒绝</t-button>
|
||
<t-button theme="primary" :loading="submitLoading" style="margin-left: 8px" @click="submitRole(true)">通过</t-button>
|
||
</div>
|
||
</template>
|
||
</t-drawer>
|
||
|
||
<t-drawer :visible="queryModalVisible" :header="modalTitle" placement="right" size="500px" @close="queryModalVisible = false">
|
||
<div class="drawer-content">
|
||
<div>申请编号：{{ showList.sn }}</div>
|
||
<div>用户名称：{{ showList.memberName }}</div>
|
||
<div class="drawer-row"><span>申请金额：</span><priceColorScheme :value="showList.applyMoney" :color="$mainColor" /></div>
|
||
<div>提现状态：{{ showList.applyStatus | paramTypeFilter }}</div>
|
||
<div>申请时间：{{ showList.createTime }}</div>
|
||
<div>审核时间：{{ showList.inspectTime }}</div>
|
||
<div>审核备注：{{ showList.inspectRemark || '暂无备注' }}</div>
|
||
</div>
|
||
<template #footer>
|
||
<div style="display: flex; justify-content: flex-end">
|
||
<t-button variant="text" @click="queryModalVisible = false">返回</t-button>
|
||
</div>
|
||
</template>
|
||
</t-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUserWithdrawApply, withdrawApply } from "@/api/member";
|
||
import { MessagePlugin } from "tdesign-vue";
|
||
|
||
export default {
|
||
name: "withdrawApply",
|
||
data() {
|
||
return {
|
||
modalTitle: "",
|
||
loading: true,
|
||
audit: "",
|
||
roleModalVisible: false,
|
||
queryModalVisible: false,
|
||
searchForm: {
|
||
pageNumber: 1,
|
||
pageSize: 20,
|
||
sort: "createTime",
|
||
order: "desc",
|
||
startDate: "",
|
||
endDate: "",
|
||
memberName: "",
|
||
applyStatus: "",
|
||
},
|
||
selectDate: [],
|
||
submitLoading: false,
|
||
showList: {},
|
||
columns: [
|
||
{
|
||
title: "申请编号",
|
||
colKey: "sn",
|
||
align: "left",
|
||
tooltip: true,
|
||
},
|
||
{
|
||
title: "用户名称",
|
||
colKey: "memberName",
|
||
align: "left",
|
||
tooltip: true,
|
||
},
|
||
{
|
||
title: "申请金额",
|
||
colKey: "applyMoney",
|
||
align: "left",
|
||
width: 120,
|
||
cell: (h, params) => {
|
||
return h("priceColorScheme", { props: { value: params.row.applyMoney, color: this.$mainColor } });
|
||
},
|
||
},
|
||
{
|
||
title: "提现状态",
|
||
align: "left",
|
||
colKey: "applyStatus",
|
||
width: 120,
|
||
cell: (h, params) => {
|
||
const status = params.row.applyStatus;
|
||
const map = {
|
||
APPLY: { theme: "warning", label: "申请中" },
|
||
VIA_AUDITING: { theme: "success", label: "审核通过" },
|
||
SUCCESS: { theme: "primary", label: "提现成功" },
|
||
ERROR: { theme: "danger", label: "提现失败" },
|
||
FAIL_AUDITING: { theme: "danger", label: "审核拒绝" },
|
||
};
|
||
const cfg = map[status] || { theme: "default", label: status };
|
||
return h("t-tag", { props: { theme: cfg.theme, variant: "light", size: "small" } }, [cfg.label]);
|
||
},
|
||
},
|
||
{
|
||
title: "申请时间",
|
||
colKey: "createTime",
|
||
align: "left",
|
||
width: 170,
|
||
},
|
||
{
|
||
title: "审核时间",
|
||
colKey: "inspectTime",
|
||
align: "left",
|
||
width: 170,
|
||
},
|
||
{
|
||
title: "操作",
|
||
colKey: "action",
|
||
width: 120,
|
||
align: "center",
|
||
fixed: "right",
|
||
cell: (h, params) => {
|
||
if (params.row.applyStatus === "APPLY") {
|
||
return h("div", { class: "ops" }, [
|
||
h(
|
||
"a",
|
||
{
|
||
style: { color: "#2d8cf0", cursor: "pointer", textDecoration: "none" },
|
||
on: {
|
||
click: () => {
|
||
this.showList = {};
|
||
this.roleModalVisible = true;
|
||
this.modalTitle = "审核";
|
||
this.showList = params.row;
|
||
this.audit = "";
|
||
},
|
||
},
|
||
},
|
||
"审核"
|
||
),
|
||
]);
|
||
} else {
|
||
return h("div", { class: "ops" }, [
|
||
h(
|
||
"a",
|
||
{
|
||
style: { color: "#2d8cf0", cursor: "pointer", textDecoration: "none" },
|
||
on: {
|
||
click: () => {
|
||
this.showList = {};
|
||
this.queryModalVisible = true;
|
||
this.modalTitle = "查看";
|
||
this.showList = params.row;
|
||
},
|
||
},
|
||
},
|
||
"查看"
|
||
),
|
||
]);
|
||
}
|
||
},
|
||
},
|
||
],
|
||
data: [],
|
||
total: 0,
|
||
};
|
||
},
|
||
filters: {
|
||
paramTypeFilter(val) {
|
||
if (val === "APPLY") {
|
||
return "申请中";
|
||
} else if (val === "VIA_AUDITING") {
|
||
return "审核通过(提现成功)";
|
||
} else if (val === "FAIL_AUDITING") {
|
||
return "审核拒绝";
|
||
} else if (val === "ERROR") {
|
||
return "提现失败";
|
||
} else if (val === "SUCCESS") {
|
||
return "提现成功";
|
||
} else {
|
||
return "未知状态";
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
submitRole(res) {
|
||
const params = { applyId: this.showList.id, result: res, remark: this.audit };
|
||
if (res === false && params.remark === "") {
|
||
MessagePlugin.error("审核备注不能为空");
|
||
return;
|
||
}
|
||
this.submitLoading = true;
|
||
withdrawApply(params)
|
||
.then((r) => {
|
||
this.submitLoading = false;
|
||
if (r === true) {
|
||
MessagePlugin.success("操作成功");
|
||
this.roleModalVisible = false;
|
||
this.getDataList();
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.submitLoading = false;
|
||
});
|
||
},
|
||
init() {
|
||
this.getDataList();
|
||
},
|
||
changePage(v) {
|
||
this.searchForm.pageNumber = v;
|
||
this.getDataList();
|
||
},
|
||
changePageSize(v) {
|
||
this.searchForm.pageSize = v;
|
||
this.getDataList();
|
||
},
|
||
onPaginationChange(info) {
|
||
if (info && typeof info.pageSize !== "undefined" && info.pageSize !== this.searchForm.pageSize) {
|
||
this.changePageSize(info.pageSize);
|
||
}
|
||
if (info && typeof info.current !== "undefined") {
|
||
this.changePage(info.current);
|
||
}
|
||
},
|
||
handleSearch() {
|
||
this.searchForm.pageNumber = 1;
|
||
this.searchForm.pageSize = 20;
|
||
this.getDataList();
|
||
},
|
||
handleReset() {
|
||
this.searchForm.pageNumber = 1;
|
||
this.searchForm.pageSize = 20;
|
||
this.selectDate = [];
|
||
this.searchForm.startDate = "";
|
||
this.searchForm.endDate = "";
|
||
this.searchForm.memberName = "";
|
||
this.searchForm.applyStatus = "";
|
||
this.getDataList();
|
||
},
|
||
selectDateRange(v) {
|
||
if (v) {
|
||
this.searchForm.startDate = v[0];
|
||
this.searchForm.endDate = v[1];
|
||
}
|
||
},
|
||
getDataList() {
|
||
this.loading = true;
|
||
getUserWithdrawApply(this.searchForm)
|
||
.then((res) => {
|
||
this.loading = false;
|
||
if (res.success) {
|
||
this.data = res.result.records;
|
||
this.total = res.result.total;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.ops a {
|
||
color: #2d8cf0;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
.ops span {
|
||
display: inline-block;
|
||
margin: 0 8px;
|
||
color: #dcdee2;
|
||
}
|
||
.drawer-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.drawer-content > div {
|
||
margin: 12px 0;
|
||
}
|
||
.drawer-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|
||
|