xx

src/views/marketing/VoucherHistory.vue

@@ -46,8 +46,8 @@
         <el-table-column prop="user_id" label="用户ID" width="100" />
         <el-table-column prop="username" label="用户名" width="150" />
         <el-table-column prop="email" label="邮箱" min-width="200" />
-        <el-table-column prop="discount_id" label="代金券ID" width="120" />
-        <el-table-column prop="discount_name" label="代金券名称" min-width="180" />
+        <el-table-column prop="discount_id" label="代金券ID" width="120" v-if="!codeId" />
+        <el-table-column prop="discount_name" label="代金券名称" min-width="180" v-if="!codeId" />
         <el-table-column label="优惠金额" width="120">
           <template #default="{ row }">
             <span class="amount">¥{{ row.discount_amount ? (row.discount_amount / 100).toFixed(2) : '0.00' }}</span>
@@ -133,74 +133,10 @@
       </template>
     </el-dialog>
     <!-- 用户选择弹窗 -->
-    <el-dialog
-      v-model="userSelectorVisible"
-      title="选择用户"
-      width="800px"
-      class="user-selector-dialog"
-    >
-      <!-- 搜索栏 -->
-      <div class="selector-search">
-        <el-input
-          v-model="userSearchParams.key"
-          placeholder="搜索用户名或ID"
-          clearable
-          @keyup.enter="searchUsers"
-          style="width: 300px; margin-right: 12px"
-        >
-          <template #prefix>
-            <el-icon><Search /></el-icon>
-          </template>
-        </el-input>
-        <el-button type="primary" @click="searchUsers">
-          <el-icon><Search /></el-icon>
-          搜索
-        </el-button>
-        <el-button @click="resetUserSearch">重置</el-button>
-      </div>
-
-      <!-- 用户表格 -->
-      <el-table
-        v-loading="userSelectorLoading"
-        :data="userSelectorList"
-        highlight-current-row
-        @current-change="handleUserSelectChange"
-        style="width: 100%; margin-top: 16px"
-        :height="400"
-      >
-        <el-table-column type="index" label="序号" width="60" />
-        <el-table-column prop="UserId" label="用户ID" width="100" />
-        <el-table-column prop="UserName" label="用户名" min-width="150" />
-        <el-table-column prop="Email" label="邮箱" min-width="180" />
-        <el-table-column label="状态" width="100">
-          <template #default="{ row }">
-            <el-tag :type="row.Status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.Status === 1 ? '正常' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <el-pagination
-        v-model:current-page="userSearchParams.page"
-        v-model:page-size="userSearchParams.count"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="userSelectorTotal"
-        @size-change="handleUserSelectorSizeChange"
-        @current-change="handleUserSelectorPageChange"
-        background
-        class="selector-pagination"
-      />
-
-      <template #footer>
-        <el-button @click="userSelectorVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmUserSelection" :disabled="!selectedUserTemp">
-          确定选择
-        </el-button>
-      </template>
-    </el-dialog>
+    <UserSelector
+      v-model:visible="userSelectorVisible"
+      @select="confirmUserSelection"
+    />
 
     <!-- 统计卡片 -->
     <el-row :gutter="20" style="margin-top: 20px">
@@ -237,20 +173,36 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onMounted, computed, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh, Download } from '@element-plus/icons-vue'
 import { getUserVoucherHistory, getDiscountCodeList } from '@/api/admin/discount'
 import { getUserList } from '@/api/admin/user'
+import UserSelector from '@/components/UserSelector/index.vue'
+
+const props = defineProps({
+  codeId: {
+    type: [String, Number],
+    default: ''
+  }
+})
 
 // 查询参数
 const queryParams = reactive({
   user_id: undefined,
+  code_id: props.codeId || undefined,
   id: '',
   page: 1,
   count: 10
 })
 
+watch(() => props.codeId, (newVal) => {
+  if (newVal) {
+    queryParams.code_id = newVal
+    fetchHistoryList()
+  }
+})
+
 // 状态数据
 const loading = ref(false)
 const historyList = ref([])
@@ -261,15 +213,6 @@ const currentDetail = ref({})
 const discountOptions = ref([])
 const selectorType = ref('query') 
 const userSelectorVisible = ref(false)
-const userSelectorList = ref([])
-const userSelectorTotal = ref(0)
-const userSearchParams = reactive({
-  key: '',
-  page: 1,
-  count: 10
-})
-const selectedUserTemp = ref(null)
-const userSelectorLoading = ref(false)
 const UserOptions = ref([])
 
 // 格式化日期
@@ -371,86 +314,41 @@ const resetUserSearch = () => {
   // fetchUserSelectorList()
 }
 
+
+// 打开查询用户选择器
+const openQueryUserSelector = () => {
+  selectorType.value = 'query'
+  userSelectorVisible.value = true
+}
+// 打开编辑用户选择器
+const openEditUserSelector = () => {
+  selectorType.value = 'edit'
+  userSelectorVisible.value = true
+}
+
 // 确认用户选择
-const confirmUserSelection = () => {
-  if (!selectedUserTemp.value) {
+const confirmUserSelection = (user) => {
+  if (!user) {
     ElMessage.warning('请选择一个用户')
     return
   }
   
   if (selectorType.value === 'query') {
     // 查询表单选择
-    queryParams.user_id = selectedUserTemp.value.UserId
+    queryParams.user_id = user.UserId
   } else {
     // 编辑表单选择
-    editForm.user_id = selectedUserTemp.value.UserId
+    editForm.user_id = user.UserId
   }
   
   // 将选中的用户添加到 UserOptions 中（如果不存在）
-  if (!UserOptions.value.find(u => u.UserId === selectedUserTemp.value.UserId)) {
-    UserOptions.value.push(selectedUserTemp.value)
+  if (!UserOptions.value.find(u => u.UserId === user.UserId)) {
+    UserOptions.value.push(user)
   }
   
   userSelectorVisible.value = false
   ElMessage.success('用户选择成功')
 }
-// 打开查询用户选择器
-const openQueryUserSelector = () => {
-  selectorType.value = 'query'
-  userSelectorVisible.value = true
-  selectedUserTemp.value = null
-  userSearchParams.key = ''
-  userSearchParams.page = 1
-  fetchUserSelectorList()
-}
-// 打开编辑用户选择器
-const openEditUserSelector = () => {
-  selectorType.value = 'edit'
-  userSelectorVisible.value = true
-  selectedUserTemp.value = null
-  userSearchParams.key = ''
-  userSearchParams.page = 1
-  fetchUserSelectorList()
-}
-
-// 用户选择变化
-const handleUserSelectChange = (row) => {
-  selectedUserTemp.value = row
-}
-// 搜索用户
-const searchUsers = () => {
-  userSearchParams.page = 1
-  fetchUserSelectorList()
-}
-
-// 用户选择器分页
-const handleUserSelectorSizeChange = (size) => {
-  userSearchParams.count = size
-  fetchUserSelectorList()
-}
-
-const handleUserSelectorPageChange = (page) => {
-  userSearchParams.page = page
-  fetchUserSelectorList()
-}
-
-// 获取用户选择器列表
-const fetchUserSelectorList = async () => {
-  userSelectorLoading.value = true
-  try {
-    const res = await getUserList(userSearchParams)
-    console.log('用户选择器列表:', res.data)
-    if (res.data.code === 200) {
-      userSelectorList.value = res.data.data?.data || []
-      userSelectorTotal.value = res.data.data?.all_count || 0
-    }
-  } catch (error) {
-    console.error('获取用户列表失败:', error)
-    ElMessage.error('获取用户列表失败')
-  } finally {
-    userSelectorLoading.value = false
-  }
-}
 
 // 查询
 const handleQuery = () => {
@@ -461,7 +359,7 @@ const handleQuery = () => {
 // 重置查询
 const resetQuery = () => {
   queryParams.user_id = undefined
-  queryParams.discount_id = undefined
+  queryParams.code_id = undefined
   queryParams.id = ''
   queryParams.page = 1
   fetchHistoryList()