add: 优化

This commit is contained in:
gyq
2025-09-29 09:01:52 +08:00
parent 205aeb1320
commit 312fd8d1bc
7 changed files with 1563 additions and 1162 deletions

View File

@@ -1,74 +1,74 @@
<template>
<div>
<el-dialog title="优惠券" v-model="visible" width="80%">
<el-form :inline="true" :model="form">
<el-form-item label="券名称">
<el-input v-model="form.name" placeholder="请输入券名称"></el-input>
</el-form-item>
<div>
<el-dialog title="优惠券" v-model="visible" width="80%">
<el-form :inline="true" :model="form">
<el-form-item label="券名称">
<el-input v-model="form.name" placeholder="请输入券名称"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="form.status" placeholder="请选择" style="width: 140px">
<el-option
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="领取时间">
<el-date-picker
v-model="form.date"
type="daterange"
value-format="yyyy-MM-dd"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
<el-form-item label="状态">
<el-select v-model="form.status" placeholder="请选择" style="width: 140px">
<el-option
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="领取时间">
<el-date-picker
v-model="form.date"
type="daterange"
value-format="yyyy-MM-dd"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
<el-table
style="width: 100%"
:data="tableData"
:columns="columns"
:pagination="pagination"
:row-key="getRowKey"
>
<el-table-column prop="id" label="券ID" />
<el-table-column prop="name" label="券名称" />
<!-- <el-table-column prop="type" label="券类型" /> -->
<el-table-column prop="createTime" label="领取时间" />
<el-table-column prop="useTime" label="使用时间" />
<el-table-column prop="source" label="领取来源" />
<el-table-column label="操作">
<template #default="scope">
<el-link :underline="false" type="primary" size="mini">查看</el-link>
<el-link
:underline="false"
type="danger"
class="ml-4"
@click="deleteCoupon(scope.row)"
size="mini"
>
删除
</el-link>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.size"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="getList"
@size-change="getList"
/>
</el-dialog>
</div>
<el-table
style="width: 100%"
:data="tableData"
:columns="columns"
:pagination="pagination"
:row-key="getRowKey"
>
<el-table-column prop="id" label="券ID" />
<el-table-column prop="name" label="券名称" />
<!-- <el-table-column prop="type" label="券类型" /> -->
<el-table-column prop="createTime" label="领取时间" />
<el-table-column prop="useTime" label="使用时间" />
<el-table-column prop="source" label="领取来源" />
<el-table-column label="操作">
<template #default="scope">
<el-link :underline="false" type="primary" size="mini">查看</el-link>
<el-link
:underline="false"
type="danger"
class="ml-4"
@click="deleteCoupon(scope.row)"
size="mini"
>
删除
</el-link>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.size"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="getList"
@size-change="getList"
/>
</el-dialog>
</div>
</template>
<script setup>
@@ -76,57 +76,57 @@ import couponApi from "@/api/market/coupon";
import { ref, reactive } from "vue";
const status = [
{ label: "全部", value: "" },
{ label: "未使用", value: 0 },
{ label: "已使用", value: 1 },
{ label: "已过期", value: 2 },
{ label: "全部", value: "" },
{ label: "未使用", value: 0 },
{ label: "已使用", value: 1 },
{ label: "已过期", value: 2 },
];
const visible = ref(false);
const form = reactive({
status: 0,
name: "",
date: "",
userId: "",
page: 1,
status: 0,
name: "",
date: "",
shopUserId: "",
page: 1,
});
const tableData = ref([]);
const pagination = reactive({
total: 0,
size: 10,
page: 1,
total: 0,
size: 10,
page: 1,
});
function open(data) {
console.log(data);
form.userId = data.userId;
pagination.page = 1;
visible.value = true;
getList();
console.log(data);
form.shopUserId = data.id;
pagination.page = 1;
visible.value = true;
getList();
}
function close() {
visible.value = false;
visible.value = false;
}
function getList() {
couponApi.getDetail({ ...form, ...pagination }).then((res) => {
console.log(res);
tableData.value = res.records;
pagination.total = res.totalRow;
});
couponApi.getRecordByUser({ ...form, ...pagination }).then((res) => {
console.log(res);
tableData.value = res.records;
pagination.total = res.totalRow;
});
}
function deleteCoupon(row) {
couponApi
.delete({
id: row.id,
})
.then((res) => {
if (res.code === 200) {
ElMessage.success("删除成功");
getList();
}
});
couponApi
.delete({
id: row.id,
})
.then((res) => {
if (res.code === 200) {
ElMessage.success("删除成功");
getList();
}
});
}
defineExpose({
open,
close,
open,
close,
});
</script>
</script>

View File

@@ -1,131 +1,137 @@
<template>
<div class="app-container">
<!-- 列表 -->
<!-- 搜索 -->
<page-search
ref="searchRef"
:search-config="searchConfig"
@query-click="searchQueryClick"
@reset-click="handleResetClick"
/>
<div class="head-container">
<div class="card">
<!-- <div class="title">统计数据</div> -->
<div class="row">
<div class="item">
<div class="t">用户数量</div>
<div class="n">{{ summary.userTotal || 0 }}</div>
</div>
<div class="item">
<div class="t">用户总余额</div>
<div class="n">{{ summary.balanceTotal || 0 }}</div>
</div>
<div class="item">
<div class="t">充值金额</div>
<div class="n">{{ summary.chargeTotal || 0 }}</div>
</div>
<div class="item u-flex u-col-center">
<el-button type="success" @click="toCharge()">充值记录</el-button>
<!-- <el-button type="danger" @click="toCharge('cost')">消费记录</el-button> -->
</div>
</div>
</div>
</div>
<!-- 列表 -->
<page-content
ref="contentRef"
:content-config="contentConfig"
@add-click="handleAddClick"
@edit-click="handleEditClick"
@export-click="handleExportClick"
@search-click="handleSearchClick"
@toolbar-click="handleToolbarClick"
@operat-click="handleOperatClick"
@filter-change="handleFilterChange"
>
<template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
</el-tag>
</template>
<template #options="scope">
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
</template>
<template #bol="scope">
{{ scope.row[scope.prop] ? "是" : "否" }}
</template>
<template #gender="scope">
<el-tag
:type="
scope.row[scope.prop] == null
? 'info'
: scope.row[scope.prop] == 1
? 'success'
: 'warning'
"
>
{{ scope.row[scope.prop] === null ? "未知" : scope.row[scope.prop] == 1 ? "男" : "女" }}
</el-tag>
</template>
<template #user="scope">
<div class="flex align-center">
<el-avatar :src="scope.row.headImg" />
<span class="u-line-1 u-m-l-6" style="max-width: 90px">
{{ scope.row.nickName }}
</span>
</div>
</template>
<template #link="scope">
<el-link>{{ scope.row[scope.prop] }}</el-link>
</template>
<template #mobile="scope">
<el-text>{{ scope.row[scope.prop] }}</el-text>
<copy-button
v-if="scope.row[scope.prop]"
:text="scope.row[scope.prop]"
style="margin-left: 2px"
/>
</template>
<div class="app-container">
<!-- 列表 -->
<!-- 搜索 -->
<page-search
ref="searchRef"
:search-config="searchConfig"
@query-click="searchQueryClick"
@reset-click="handleResetClick"
/>
<div class="head-container">
<div class="card">
<!-- <div class="title">统计数据</div> -->
<div class="row">
<div class="item">
<div class="t">用户数量</div>
<div class="n">{{ summary.userTotal || 0 }}</div>
</div>
<div class="item">
<div class="t">用户总余额</div>
<div class="n">{{ summary.balanceTotal || 0 }}</div>
</div>
<div class="item">
<div class="t">充值金额</div>
<div class="n">{{ summary.chargeTotal || 0 }}</div>
</div>
<div class="item u-flex u-col-center">
<el-button type="success" @click="toCharge()">充值记录</el-button>
<!-- <el-button type="danger" @click="toCharge('cost')">消费记录</el-button> -->
</div>
</div>
</div>
</div>
<!-- 列表 -->
<page-content
ref="contentRef"
:content-config="contentConfig"
@add-click="handleAddClick"
@edit-click="handleEditClick"
@export-click="handleExportClick"
@search-click="handleSearchClick"
@toolbar-click="handleToolbarClick"
@operat-click="handleOperatClick"
@filter-change="handleFilterChange"
>
<template #status="scope">
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
</el-tag>
</template>
<template #options="scope">
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
</template>
<template #bol="scope">
{{ scope.row[scope.prop] ? "是" : "否" }}
</template>
<template #gender="scope">
<el-tag
:type="
scope.row[scope.prop] == null
? 'info'
: scope.row[scope.prop] == 1
? 'success'
: 'warning'
"
>
{{
scope.row[scope.prop] === null
? "未知"
: scope.row[scope.prop] == 1
? "男"
: "女"
}}
</el-tag>
</template>
<template #user="scope">
<div class="flex align-center">
<el-avatar :src="scope.row.headImg" />
<span class="u-line-1 u-m-l-6" style="max-width: 90px">
{{ scope.row.nickName }}
</span>
</div>
</template>
<template #link="scope">
<el-link>{{ scope.row[scope.prop] }}</el-link>
</template>
<template #mobile="scope">
<el-text>{{ scope.row[scope.prop] }}</el-text>
<copy-button
v-if="scope.row[scope.prop]"
:text="scope.row[scope.prop]"
style="margin-left: 2px"
/>
</template>
<template #coupon="scope">
<div>
1
<el-link :underline="false" type="primary" @click="handleViewCoupon(scope.row)">
查看详情
</el-link>
</div>
</template>
</page-content>
<template #coupon="scope">
<div>
{{ scope.row.couponNum }}
<el-link :underline="false" type="primary" @click="handleViewCoupon(scope.row)">
查看详情
</el-link>
</div>
</template>
</page-content>
<!-- 新增 -->
<page-modal
ref="addModalRef"
:modal-config="addModalConfig"
@submit-click="handleSubmitClick"
></page-modal>
<!-- 新增 -->
<page-modal
ref="addModalRef"
:modal-config="addModalConfig"
@submit-click="handleSubmitClick"
></page-modal>
<!-- 编辑 -->
<page-modal
ref="editModalRef"
:modal-config="editModalConfig"
@submit-click="handleSubmitClick"
></page-modal>
<!-- 用户余额修改 -->
<page-modal
ref="editMoneyModalRef"
:modal-config="editMoneyModalConfig"
@formDataChange="formDataChange"
@submit-click="handleSubmitClick"
></page-modal>
<!-- 编辑 -->
<page-modal
ref="editModalRef"
:modal-config="editModalConfig"
@submit-click="handleSubmitClick"
></page-modal>
<!-- 用户余额修改 -->
<page-modal
ref="editMoneyModalRef"
:modal-config="editMoneyModalConfig"
@formDataChange="formDataChange"
@submit-click="handleSubmitClick"
></page-modal>
<!-- 用户优惠券详情 -->
<UserCouponDialog ref="userCouponDialogRef"></UserCouponDialog>
<!-- 赠送券 -->
<GiveCoupon ref="GiveCouponRef"></GiveCoupon>
</div>
<!-- 用户优惠券详情 -->
<UserCouponDialog ref="userCouponDialogRef"></UserCouponDialog>
<!-- 赠送券 -->
<GiveCoupon ref="GiveCouponRef"></GiveCoupon>
</div>
</template>
<script setup >
<script setup>
import UserCouponDialog from "./components/user-coupon-dialog.vue";
import GiveCoupon from "./components/give-coupon.vue";
import usePage from "@/components/CURD/usePage";
@@ -141,143 +147,146 @@ const userCouponDialogRef = ref(null);
const GiveCouponRef = ref(null);
//查看用户优惠券
function handleViewCoupon(row) {
userCouponDialogRef.value.open(row);
userCouponDialogRef.value.open(row);
}
const {
searchRef,
contentRef,
addModalRef,
editModalRef,
handleQueryClick,
handleResetClick,
// handleAddClick,
// handleEditClick,
handleSubmitClick,
handleExportClick,
handleSearchClick,
handleFilterChange,
searchRef,
contentRef,
addModalRef,
editModalRef,
handleQueryClick,
handleResetClick,
// handleAddClick,
// handleEditClick,
handleSubmitClick,
handleExportClick,
handleSearchClick,
handleFilterChange,
} = usePage();
function searchQueryClick(e) {
handleQueryClick(e);
// 获取统计数据
getSummary();
handleQueryClick(e);
// 获取统计数据
getSummary();
}
const summary = reactive({
userTotal: 0,
chargeTotal: 0,
balanceTotal: 0.0,
userTotal: 0,
chargeTotal: 0,
balanceTotal: 0.0,
});
const router = useRouter();
// 跳转页面
function toCharge(params) {
console.log(params);
router.push({ path: "/user/charge-list", query: { ...params } });
console.log(params);
router.push({ path: "/user/charge-list", query: { ...params } });
}
async function getSummary(e) {
// 获取统计数据
const res = await shopUserApi.getSummary(e);
console.log(res);
Object.assign(summary, res);
// 获取统计数据
const res = await shopUserApi.getSummary(e);
console.log(res);
Object.assign(summary, res);
}
// 修改金额表单类型
function formDataChange(type, val) {
if (type == "type") {
if (val == 1) {
editMoneyModalConfig.formItems[4].options = addOptions;
} else {
editMoneyModalConfig.formItems[4].options = reduceOptions;
}
}
if (type == "type") {
if (val == 1) {
editMoneyModalConfig.formItems[4].options = addOptions;
} else {
editMoneyModalConfig.formItems[4].options = reduceOptions;
}
}
}
// 新增
async function handleAddClick() {
addModalRef.value?.setModalVisible();
// 加载部门下拉数据源
// addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
addModalRef.value?.setModalVisible();
// 加载部门下拉数据源
// addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
// addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
}
// 编辑
async function handleEditClick(row) {
editModalRef.value?.handleDisabled(false);
editModalRef.value?.setModalVisible();
// 根据id获取数据进行填充
// const data = await VersionApi.getFormData(row.id);
editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
editModalRef.value?.handleDisabled(false);
editModalRef.value?.setModalVisible();
// 根据id获取数据进行填充
// const data = await VersionApi.getFormData(row.id);
editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
}
// 其他工具栏
function handleToolbarClick(name) {
console.log(name);
if (name === "custom1") {
ElMessage.success("点击了自定义1按钮");
}
console.log(name);
if (name === "custom1") {
ElMessage.success("点击了自定义1按钮");
}
}
// 赠送券
function toGiveCoupon() {}
// 其他操作列
async function handleOperatClick(data) {
const row = data.row;
if (data.name == "more") {
if (data.command === "change-money") {
editMoneyModalRef.value.setModalVisible();
editMoneyModalRef.value.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
return;
}
if (data.command === "charge-list") {
console.log(data);
toCharge({ userId: data.row.userId });
return;
}
if (data.command === "give-coupon") {
GiveCouponRef.value.open(row);
return;
}
return;
}
const row = data.row;
if (data.name == "more") {
if (data.command === "change-money") {
editMoneyModalRef.value.setModalVisible();
editMoneyModalRef.value.setFormData({
...row,
headImg: row.headImg ? [row.headImg] : "",
});
return;
}
if (data.command === "charge-list") {
console.log(data);
toCharge({ userId: data.row.userId });
return;
}
if (data.command === "give-coupon") {
GiveCouponRef.value.open(row);
return;
}
return;
}
}
onMounted(() => {
getSummary(searchRef.value.getQueryParams());
getSummary(searchRef.value.getQueryParams());
});
</script>
<style scoped lang="scss">
.align-center {
align-items: center;
align-items: center;
}
.card {
background-color: #f5f5f5;
padding: 0 14px;
background-color: #f5f5f5;
padding: 0 14px;
.title {
font-size: 22px;
padding-top: 14px;
}
.title {
font-size: 22px;
padding-top: 14px;
}
.row {
display: flex;
padding: 20px 0;
.row {
display: flex;
padding: 20px 0;
.item {
flex: 1;
.item {
flex: 1;
.t {
text-align: center;
color: #555;
}
.t {
text-align: center;
color: #555;
}
.n {
color: #000;
font-size: 20px;
font-weight: bold;
padding-top: 6px;
text-align: center;
}
}
}
.n {
color: #000;
font-size: 20px;
font-weight: bold;
padding-top: 6px;
text-align: center;
}
}
}
}
</style>