add: 用户列表增加优惠券列表

src/views/user/list/components/user-coupon-dialog.vue

@@ -0,0 +1,114 @@
+<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>
+
+        <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-button :underline="false" type="danger" size="mini">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-model:current-page="pagination.currentPage"
+        v-model:page-size="pagination.pageSize"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="getList"
+        @size-change="getList"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+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 visible = ref(false);
+const form = reactive({
+  status: 0,
+  name: "",
+  date: "",
+  userId: "",
+  page: 1,
+});
+
+function open(data) {
+  console.log(data);
+  data.userId = form.userId;
+  form.page = 1;
+  visible.value = true;
+  getList();
+}
+function close() {
+  visible.value = false;
+}
+function getList() {
+  couponApi.getDetail(form).then((res) => {
+    console.log(res);
+    tableData.value = res.records;
+    pagination.total = res.totalRow;
+  });
+}
+
+const tableData = ref([]);
+const pagination = ref({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+});
+defineExpose({
+  open,
+  close,
+});
+</script>

src/views/user/list/config/content.ts

@@ -56,6 +56,14 @@ const contentConfig: IContentConfig<any> = {
       templet: "custom",
       slotName: "mobile",
     },
+    {
+      label: "优惠券",
+      align: "center",
+      prop: "coupon",
+      width: 140,
+      templet: "custom",
+      slotName: "coupon",
+    },
     {
       label: "余额",
       align: "center",

src/views/user/list/index.vue

@@ -86,6 +86,15 @@
           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>
 
     <!-- 新增 -->
@@ -108,10 +117,14 @@
       @formDataChange="formDataChange"
       @submit-click="handleSubmitClick"
     ></page-modal>
+
+    <!-- 用户优惠券详情 -->
+    <UserCouponDialog ref="userCouponDialogRef"></UserCouponDialog>
   </div>
 </template>
 
 <script setup >
+import UserCouponDialog from "./components/user-coupon-dialog.vue";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
@@ -121,6 +134,12 @@ import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
 import shopUserApi from "@/api/account/shopUser";
 const editMoneyModalRef = ref(null);
+const userCouponDialogRef = ref(null);
+
+//查看用户优惠券
+function handleViewCoupon(row) {
+  userCouponDialogRef.value.open(row);
+}
 const {
   searchRef,
   contentRef,