优化

2025-10-24 14:19:01 +08:00
parent 99881f4d97
commit f518d3d76a
8 changed files with 331 additions and 79 deletions
--- a/src/views/user/list/components/user-coupon-dialog.vue
+++ b/src/views/user/list/components/user-coupon-dialog.vue
@@ -1,72 +1,53 @@
 <template>
 	<div>
-		<el-dialog title="优惠券" v-model="visible" width="80%">
+		<el-dialog title="优惠券" v-model="visible" width="1200px">
 			<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-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-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-button type="primary" @click="handleSearch" :loading="loading">搜索</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 style="width: 100%" :data="tableData" stripe border v-loading="loading">
+				<el-table-column prop="id" label="券ID" width="80" />
+				<el-table-column prop="name" label="券名称" width="250" />
 				<!-- <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="操作">
+				<el-table-column prop="createTime" label="领取时间" width="250" />
+				<el-table-column prop="useTime" label="使用时间" width="250" />
+				<el-table-column prop="source" label="领取来源" width="150" />
+				<el-table-column prop="status" 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>
+						<el-tag disable-transitions :type="status.find(item => item.value === scope.row.status).type">
+							{{status.find(item => item.value === scope.row.status).label}}
+						</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="80" fixed="right">
+					<template #default="scope">
+						<!-- <el-button link type="primary" @click="">查看</el-button> -->
+						<el-popconfirm title="确认要失效吗？" @confirm="deleteCoupon(scope.row)">
+							<template #reference>
+								<el-button type="danger" link icon="EditPen">失效</el-button>
+							</template>
+						</el-popconfirm>
 					</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"
-			/>
+			<div style="margin-top: 14px;display: flex;justify-content: flex-end;">
+				<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" />
+			</div>
 		</el-dialog>
 	</div>
 </template>
@@ -75,12 +56,12 @@
 import couponApi from "@/api/market/coupon";

 import { ref, reactive } from "vue";
-const status = [
-	{ label: "全部", value: "" },
-	{ label: "未使用", value: 0 },
-	{ label: "已使用", value: 1 },
-	{ label: "已过期", value: 2 },
-];
+const status = reactive([
+	{ label: "全部", value: "", type: 'info' },
+	{ label: "未使用", value: 0, type: 'warning' },
+	{ label: "已使用", value: 1, type: 'info' },
+	{ label: "已过期", value: 2, type: 'info' },
+]);
 const visible = ref(false);
 const form = reactive({
 	status: 0,
@@ -105,12 +86,24 @@ function open(data) {
 function close() {
 	visible.value = false;
 }
-function getList() {
-	couponApi.getRecordByUser({ ...form, ...pagination }).then((res) => {
-		console.log(res);
+
+function handleSearch() {
+	getList()
+}
+
+const loading = ref(false)
+async function getList() {
+	try {
+		loading.value = true
+		const res = await couponApi.getRecordByUser({ ...form, ...pagination })
 		tableData.value = res.records;
 		pagination.total = res.totalRow;
-	});
+	} catch (error) {
+		console.log(error);
+	}
+	setTimeout(() => {
+		loading.value = false
+	}, 300);
 }

 function deleteCoupon(row) {
--- a/src/views/user/list/config/content.ts
+++ b/src/views/user/list/config/content.ts
@@ -104,9 +104,11 @@ const contentConfig: IContentConfig<any> = {
          name: "more",
          text: "更多",
          options: [
+            // { label: '增减积分', command: 'change-points' },
            { label: '增减余额', command: 'change-money' },
            { label: '充值记录', command: 'charge-list' },
            { label: '赠送券', command: 'give-coupon' },
+            { label: '账号禁用/开启', command: 'user-disabld' },
          ]
        },
      ],
--- a/src/views/user/list/index.vue
+++ b/src/views/user/list/index.vue
@@ -32,15 +32,19 @@
 			@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'">
+				<el-link :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
 					{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
-				</el-tag>
+				</el-link>
 			</template>
 			<template #options="scope">
 				{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
 			</template>
 			<template #bol="scope">
-				{{ scope.row[scope.prop] ? "是" : "否" }}
+				<el-tag disable-transitions type="primary" v-if="scope.row.isVip" @click="showVipInfoHandle(scope.row)"
+					style="cursor: pointer;">
+					{{ scope.row.memberLevelName }}
+				</el-tag>
+				<span v-else>否</span>
 			</template>
 			<template #gender="scope">
 				<el-tag :type="scope.row[scope.prop] == null
@@ -97,6 +101,46 @@
 		<UserCouponDialog ref="userCouponDialogRef"></UserCouponDialog>
 		<!-- 赠送券 -->
 		<GiveCoupon ref="GiveCouponRef"></GiveCoupon>
+		<el-dialog :title="`账号${userRow.status == 0 ? '开启' : '禁用'}`" width="600px" v-model="visible">
+			<span>确定要{{ userRow.status == 0 ? '开启' : '禁用' }}【{{ userRow.nickName }} / {{ userRow.phone }}】账号吗？</span>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="visible = false">取 消</el-button>
+					<el-button type="primary" @click="handleOk" :loading="confirmLoading">确 定</el-button>
+				</div>
+			</template>
+		</el-dialog>
+		<!-- 会员详情 -->
+		<el-dialog title="会员详情" width="600px" v-model="vipDialogVisable">
+			<div class="vip_info">
+				<div class="top">
+					<el-avatar :src="currentVipInfo.headImg" :size="60" shape="square"></el-avatar>
+					<div class="info">
+						<div class="name">{{ currentVipInfo.nickName }}</div>
+						<div class="id">ID：{{ currentVipInfo.id }}</div>
+					</div>
+				</div>
+				<div class="btm">
+					<div class="row">
+						<span class="row_t">会员等级：</span>
+						<span class="row_b">{{ currentVipInfo.memberLevelName }}</span>
+					</div>
+					<div class="row">
+						<span class="row_t">开通时间：</span>
+						<span class="row_b">{{ currentVipInfo.startTime }}</span>
+					</div>
+					<div class="row">
+						<span class="row_t">到期时间：</span>
+						<span class="row_b" style="color: #FF2F2F;">{{ currentVipInfo.endTime }}</span>
+					</div>
+					<div class="row">
+						<span class="row_t">成长值</span>
+						<span class="row_b" style="margin-left: 6px;">{{ currentVipInfo.experience }}</span>
+						<span class="tips">（距离{{ currentVipInfo.nextMemberLevelName }}还差{{ currentVipInfo.nextExperience }}）</span>
+					</div>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 </template>

@@ -112,6 +156,7 @@ import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
 import shopUserApi from "@/api/account/shopUser";
 import { useRoute } from 'vue-router'
+import { ElNotification } from 'element-plus'
 const editMoneyModalRef = ref(null);
 const userCouponDialogRef = ref(null);
 const GiveCouponRef = ref(null);
@@ -196,6 +241,61 @@ function handleToolbarClick(name) {
 	}
 }

+// 账号禁用 start
+const userRow = ref('')
+const visible = ref(false)
+const confirmLoading = ref(false)
+
+async function handleOk() {
+	try {
+		confirmLoading.value = true
+		const shopId = localStorage.getItem('shopId')
+		let state = 0
+		if (userRow.value.status == 0) {
+			state = 1
+		} else {
+			state = 0
+		}
+		await shopUserApi.edit(shopId, { id: userRow.value.id, status: state })
+		searchQueryClick()
+		ElNotification({
+			title: '注意',
+			message: `${userRow.value.status == 0 ? '开启' : '禁用'}成功`,
+			type: 'success'
+		})
+	} catch (error) {
+		console.log(error);
+	}
+	setTimeout(() => {
+		confirmLoading.value = false
+		visible.value = false
+	}, 300);
+}
+// 账号禁用 end
+
+// 会员详情 start
+const vipDialogVisable = ref(false)
+const currentVipInfo = ref('')
+const currentVipUser = ref('')
+function showVipInfoHandle(row) {
+	currentVipUser.value = { ...row }
+	vipDialogVisable.value = true
+	getUserVipInfo()
+}
+
+// 获取会员详情
+async function getUserVipInfo() {
+	try {
+		const res = await shopUserApi.vipInfo({ id: currentVipUser.value.id })
+		currentVipInfo.value = res
+		console.log('getUserVipInfo===', res);
+
+	} catch (error) {
+		console.log(error);
+	}
+}
+// 会员详情 end
+
 // 赠送券
 function toGiveCoupon() { }
 // 其他操作列
@@ -219,6 +319,11 @@ async function handleOperatClick(data) {
 			GiveCouponRef.value.open(row);
 			return;
 		}
+		if (data.command === 'user-disabld') {
+			userRow.value = { ...row }
+			visible.value = true
+			return
+		}
 		return;
 	}
 }
@@ -270,4 +375,48 @@ onMounted(() => {
 		}
 	}
 }
+
+.vip_info {
+	.top {
+		padding: 14px;
+		background-color: #f5f5f5;
+		display: flex;
+		align-items: center;
+
+		.info {
+			padding-left: 10px;
+			display: flex;
+			flex-direction: column;
+
+			.name {
+				font-size: 16px;
+				color: #333;
+			}
+
+			.id {
+				font-size: 14px;
+				color: #666;
+			}
+		}
+	}
+
+	.btm {
+		margin-top: 14px;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-template-rows: repeat(auto, 1fr);
+		grid-column-gap: 14px;
+		grid-row-gap: 14px;
+
+		.row {
+			.row_t {
+				color: #666;
+			}
+
+			.row_b {
+				color: #333;
+			}
+		}
+	}
+}
 </style>