add: 优化

src/api/coupon/index.js

@@ -136,10 +136,20 @@ export function shopRecharge(data) {
 		data
 	});
 }
+
 // 智慧充值 配置信息获取
 export function shopRechargeGet() {
 	return request({
 		url: `${Market_BaseUrl + "/admin/shopRecharge"}`,
 		method: 'get'
 	});
+}
+
+// 获取店铺用户列表
+export function getShopUserList(params) {
+	return request({
+		url: `${Account_BaseUrl + "/admin/shopUser/getPage"}`,
+		method: 'get',
+		params
+	});
 }

src/views/marketing_center/components/getDetailDialog.vue

@@ -4,10 +4,22 @@
 			<div>
 				<el-form :model="querForm" inline>
 					<el-form-item label="搜索">
-						<el-input
+						<el-select
-							v-model="querForm.search"
+							v-model="querForm.userId"
 							placeholder="用户昵称/用户ID/用户手机"
-						></el-input>
+							filterable
+							remote
+							reserve-keyword
+							:remote-method="remoteMethod"
+							:loading="loading"
+						>
+							<el-option
+								v-for="item in options"
+								:key="item.id"
+								:label="item.nickName"
+								:value="item.id"
+							/>
+						</el-select>
 					</el-form-item>
 					<el-form-item label="状态">
 						<el-select
@@ -32,10 +44,12 @@
 							start-placeholder="开始日期"
 							end-placeholder="结束日期"
 							@clear="querForm.time = []"
+							@change="datePickerChange"
 						/>
 					</el-form-item>
 					<el-form-item label-width="0">
 						<el-button type="primary" @click="searchHandle">搜索</el-button>
+						<el-button @click="resetHandle">重置</el-button>
 					</el-form-item>
 				</el-form>
 			</div>
@@ -47,7 +61,7 @@
 					v-loading="tableData.loading"
 					height="64vh"
 				>
-					<el-table-column label="用户ID" prop="id" width="80"></el-table-column>
+					<el-table-column label="用户ID" prop="userId" width="80"></el-table-column>
 					<el-table-column label="用户名称" prop="name" width="200">
 						<template #default="scope">
 							<div class="user_info">
@@ -117,8 +131,9 @@
 </template>
 
 <script setup>
+import _ from "lodash";
 import { ref, reactive } from "vue";
-import { couponRecord, deleteRecord } from "@/api/coupon/index.js";
+import { couponRecord, deleteRecord, getShopUserList } from "@/api/coupon/index.js";
 
 const dialogVisible = ref(false);
 const row = ref(null);
@@ -141,12 +156,32 @@ const statusList = ref([
 	},
 ]);
 
+const loading = ref(false);
+const options = ref([]);
 const querForm = reactive({
-	search: "",
 	status: "",
+	userId: "",
 	time: [],
 });
 
+// 远程搜索用户列表
+const remoteMethod = _.debounce(async function (query) {
+	try {
+		if (query) {
+			loading.value = true;
+			const res = await getShopUserList({
+				key: query,
+				page: 1,
+				size: 100,
+			});
+			options.value = res.records;
+		}
+	} catch (error) {
+		console.error(error);
+	}
+	loading.value = false;
+}, 200);
+
 // 搜索
 function searchHandle() {
 	tableData.page = 1;
@@ -154,6 +189,17 @@ function searchHandle() {
 	couponRecordAjax();
 }
 
+// 重置
+function resetHandle() {
+	querForm.userId = "";
+	querForm.status = "";
+	querForm.time = [];
+	options.value = [];
+	tableData.page = 1;
+	tableData.pageSize = 10;
+	couponRecordAjax();
+}
+
 const tableData = reactive({
 	loading: false,
 	page: 1,
@@ -174,6 +220,12 @@ function handleCurrentChange(e) {
 	couponRecordAjax();
 }
 
+function datePickerChange(e) {
+	if (!e) {
+		querForm.time = [];
+	}
+}
+
 // 已领取详情
 async function couponRecordAjax() {
 	try {
@@ -181,9 +233,8 @@ async function couponRecordAjax() {
 		const res = await couponRecord({
 			page: tableData.page,
 			size: tableData.pageSize,
-			search: querForm.search,
 			status: querForm.status,
-			userId: "",
+			userId: querForm.userId,
 			id: "",
 			shopId: row.value.shopId,
 			couponId: row.value.id,