优化

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>