feat: 卡券模块页面初始化及接口联调

src/api/coupon/cardManage/index.js

@@ -0,0 +1,44 @@
+import request from "@/utils/request";
+
+// 查询列表
+export function getList(query) {
+  return request({
+    url: "/card/coupons/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询详情  /card/coupons/{id}
+export function getDetail(id) {
+  return request({
+    url: `/card/coupons/${id}`,
+    method: "get",
+  });
+}
+
+// 新增  /card/coupons
+export function add(data) {
+  return request({
+    url: "/card/coupons",
+    method: "post",
+    data,
+  });
+}
+
+// 修改
+export function update(data) {
+  return request({
+    url: "/card/coupons",
+    method: "put",
+    data,
+  });
+}
+
+// 删除
+export function del(ids) {
+  return request({
+    url: `/card/coupons/${ids}`,
+    method: "delete",
+  });
+}

src/api/coupon/cardPsdManage/index.js

@@ -0,0 +1,44 @@
+import request from "@/utils/request";
+
+// 查询列表  /card/password/list
+export function getList(query) {
+  return request({
+    url: "/card/password/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询详情  /card/password/{id}
+export function getDetail(id) {
+  return request({
+    url: `/card/password/${id}`,
+    method: "get",
+  });
+}
+
+// 新增  /card/coupons
+export function add(data) {
+  return request({
+    url: "/card/password",
+    method: "post",
+    data,
+  });
+}
+
+// 修改
+export function update(data) {
+  return request({
+    url: "/card/password",
+    method: "put",
+    data,
+  });
+}
+
+// 删除
+export function del(ids) {
+  return request({
+    url: `/card/password/${ids}`,
+    method: "delete",
+  });
+}

src/api/coupon/exchangeRecord/index.js

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 查询列表
+export function getList(query) {
+  return request({
+    url: "/card/redeption/list",
+    method: "get",
+    params: query,
+  });
+}

src/components/SelectCoupon/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <div>
+    <!-- 表单筛选 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      inline
+      v-show="showSearch"
+      label-width="auto"
+    >
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="卡券名称">
+            <el-input
+              v-model="queryParams.title"
+              placeholder="请输入卡券名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="类型">
+            <el-select
+              v-model="queryParams.type"
+              placeholder="请选择状态"
+              clearable
+            >
+              <el-option
+                v-for="dict in dict.type.coupon_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="创建时间">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 按钮组 -->
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getTableList"
+      ></right-toolbar>
+    </el-row>
+    <!-- 表格 -->
+    <!-- @selection-change="handleSelectionChange" -->
+    <el-table
+      class="singleTable"
+      ref="singleTable"
+      v-loading="loading"
+      :data="tableList"
+      row-key="couponNumber"
+      @select="handleSelect"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="卡券名称" align="center" prop="title" />
+      <el-table-column label="类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.coupon_type" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="额度" align="center" prop="quota" />
+      <el-table-column label="图片" align="center" prop="pic" width="100">
+        <template slot-scope="scope">
+          <image-preview :src="scope.row.pic" :width="50" :height="50" />
+        </template>
+      </el-table-column>
+      <el-table-column label="卡券编号" align="center" prop="couponNumber" />
+      <el-table-column label="卡密总数" align="center" prop="couponNumber" />
+      <el-table-column
+        label="已兑换卡密数"
+        align="center"
+        prop="couponNumber"
+      />
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <!-- <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleDetail(scope.row)"
+            >查看</el-button
+          >
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getTableList"
+    />
+    <div class="footer">
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      <el-button @click="handleCancel">取 消</el-button>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="dlgVisible"
+      append-to-body
+      width="40%"
+    >
+      <AddAndEdit
+        :loading="dlgLoading"
+        :data="formData"
+        :dlgType="3"
+        @cancel="dlgVisible = false"
+      ></AddAndEdit>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getList, getDetail } from "@/api/coupon/cardManage";
+import AddAndEdit from "@/views/coupon/cardManage/components/addAndEdit.vue";
+export default {
+  components: { AddAndEdit },
+  dicts: ["coupon_type"],
+  props: {
+    selectedIds: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        type: "",
+        descripiton: "",
+      },
+      // 时间
+      dateRange: [],
+      // 状态组
+      typeOption: [
+        { value: "1", label: "单选" },
+        { value: "2", label: "多选" },
+      ],
+      // 表格相关
+      loading: false,
+      tableList: [],
+      selectedRow: [],
+      total: 0,
+      //  弹窗相关
+      title: "",
+      dlgVisible: false,
+      formData: {},
+      dlgLoading: false,
+    };
+  },
+  // created() {
+  //   this.getTableList();
+  // },
+  watch: {
+    selectedIds: {
+      handler(newVal) {
+        console.log(newVal);
+        this.getTableList();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    // 用户勾选
+    handleSelect(selection, row) {
+      console.log(111, selection, row);
+      if (selection.length > 1) {
+        // selection超过一个时说明之前已选中了一个，需要先清空选择再选中现在点击的
+        this.$refs.singleTable.clearSelection();
+        this.$refs.singleTable.toggleRowSelection(row, true);
+      }
+      this.selectedRow = [row];
+    },
+    // 确认选择
+    handleConfirm() {
+      this.$emit("confirm", this.selectedRow);
+      this.handleCancel();
+    },
+    // 关闭弹窗
+    handleCancel() {
+      this.$emit("close");
+      // 清空选择
+      // this.$refs.singleTable.clearSelection();
+    },
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getTableList();
+    },
+    // 重置
+    resetQuery() {
+      this.dateRange = [];
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        type: "",
+        descripiton: "",
+      };
+      this.getTableList();
+    },
+    // 表格选中
+    // handleSelectionChange(selection) {
+    //   console.log("表格选中值", selection);
+    //   this.selectedRow = selection;
+    // },
+    // 查看
+    handleDetail(row) {
+      this.title = "查看";
+      this.dlgVisible = true;
+      this.dlgLoading = true;
+      getDetail(row.id)
+        .then((res) => {
+          if (res.code === 200) {
+            this.formData = { ...res.data, categoryName: row.categoryName };
+          }
+        })
+        .finally(() => (this.dlgLoading = false));
+    },
+    // 查询列表
+    getTableList() {
+      let params = this.addDateRange(this.queryParams, this.dateRange);
+      this.loading = true;
+      return getList(params)
+        .then((res) => {
+          if (res.code === 200) {
+            this.tableList = res.rows;
+            this.total = res.total;
+            this.$nextTick(() => {
+              this.tableList.forEach((row) => {
+                if (this.selectedIds === row.couponNumber) {
+                  // console.log(222);
+                  this.$refs.singleTable.toggleRowSelection(row, true);
+                }
+              });
+            });
+          }
+        })
+        .finally(() => (this.loading = false));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .singleTable {
+  thead .el-checkbox {
+    display: none;
+  }
+}
+.footer {
+  text-align: right;
+  margin-top: 40px;
+}
+</style>

src/utils/index.js

@@ -1,18 +1,25 @@
-import { parseTime } from './ruoyi'
+import { parseTime } from "./ruoyi";
 
 /**
  * 表格时间格式化
  */
 export function formatDate(cellValue) {
   if (cellValue == null || cellValue == "") return "";
-  var date = new Date(cellValue) 
-  var year = date.getFullYear()
-  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
-  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
-  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+  var date = new Date(cellValue);
+  var year = date.getFullYear();
+  var month =
+    date.getMonth() + 1 < 10
+      ? "0" + (date.getMonth() + 1)
+      : date.getMonth() + 1;
+  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+  var minutes =
+    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+  var seconds =
+    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+  return (
+    year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
+  );
 }
 
 /**
@@ -21,40 +28,40 @@ export function formatDate(cellValue) {
  * @returns {string}
  */
 export function formatTime(time, option) {
-  if (('' + time).length === 10) {
-    time = parseInt(time) * 1000
+  if (("" + time).length === 10) {
+    time = parseInt(time) * 1000;
   } else {
-    time = +time
+    time = +time;
   }
-  const d = new Date(time)
-  const now = Date.now()
+  const d = new Date(time);
+  const now = Date.now();
 
-  const diff = (now - d) / 1000
+  const diff = (now - d) / 1000;
 
   if (diff < 30) {
-    return '刚刚'
+    return "刚刚";
   } else if (diff < 3600) {
     // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
+    return Math.ceil(diff / 60) + "分钟前";
   } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
+    return Math.ceil(diff / 3600) + "小时前";
   } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
+    return "1天前";
   }
   if (option) {
-    return parseTime(time, option)
+    return parseTime(time, option);
   } else {
     return (
       d.getMonth() +
       1 +
-      '月' +
+      "月" +
       d.getDate() +
-      '日' +
+      "日" +
       d.getHours() +
-      '时' +
+      "时" +
       d.getMinutes() +
-      '分'
-    )
+      "分"
+    );
   }
 }
 
@@ -63,18 +70,18 @@ export function formatTime(time, option) {
  * @returns {Object}
  */
 export function getQueryObject(url) {
-  url = url == null ? window.location.href : url
-  const search = url.substring(url.lastIndexOf('?') + 1)
-  const obj = {}
-  const reg = /([^?&=]+)=([^?&=]*)/g
+  url = url == null ? window.location.href : url;
+  const search = url.substring(url.lastIndexOf("?") + 1);
+  const obj = {};
+  const reg = /([^?&=]+)=([^?&=]*)/g;
   search.replace(reg, (rs, $1, $2) => {
-    const name = decodeURIComponent($1)
-    let val = decodeURIComponent($2)
-    val = String(val)
-    obj[name] = val
-    return rs
-  })
-  return obj
+    const name = decodeURIComponent($1);
+    let val = decodeURIComponent($2);
+    val = String(val);
+    obj[name] = val;
+    return rs;
+  });
+  return obj;
 }
 
 /**
@@ -83,14 +90,14 @@ export function getQueryObject(url) {
  */
 export function byteLength(str) {
   // returns the byte length of an utf8 string
-  let s = str.length
+  let s = str.length;
   for (var i = str.length - 1; i >= 0; i--) {
-    const code = str.charCodeAt(i)
-    if (code > 0x7f && code <= 0x7ff) s++
-    else if (code > 0x7ff && code <= 0xffff) s += 2
-    if (code >= 0xDC00 && code <= 0xDFFF) i--
+    const code = str.charCodeAt(i);
+    if (code > 0x7f && code <= 0x7ff) s++;
+    else if (code > 0x7ff && code <= 0xffff) s += 2;
+    if (code >= 0xdc00 && code <= 0xdfff) i--;
   }
-  return s
+  return s;
 }
 
 /**
@@ -98,13 +105,13 @@ export function byteLength(str) {
  * @returns {Array}
  */
 export function cleanArray(actual) {
-  const newArray = []
+  const newArray = [];
   for (let i = 0; i < actual.length; i++) {
     if (actual[i]) {
-      newArray.push(actual[i])
+      newArray.push(actual[i]);
     }
   }
-  return newArray
+  return newArray;
 }
 
 /**
@@ -112,13 +119,13 @@ export function cleanArray(actual) {
  * @returns {Array}
  */
 export function param(json) {
-  if (!json) return ''
+  if (!json) return "";
   return cleanArray(
-    Object.keys(json).map(key => {
-      if (json[key] === undefined) return ''
-      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+    Object.keys(json).map((key) => {
+      if (json[key] === undefined) return "";
+      return encodeURIComponent(key) + "=" + encodeURIComponent(json[key]);
     })
-  ).join('&')
+  ).join("&");
 }
 
 /**
@@ -126,21 +133,21 @@ export function param(json) {
  * @returns {Object}
  */
 export function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  const search = decodeURIComponent(url.split("?")[1]).replace(/\+/g, " ");
   if (!search) {
-    return {}
+    return {};
   }
-  const obj = {}
-  const searchArr = search.split('&')
-  searchArr.forEach(v => {
-    const index = v.indexOf('=')
+  const obj = {};
+  const searchArr = search.split("&");
+  searchArr.forEach((v) => {
+    const index = v.indexOf("=");
     if (index !== -1) {
-      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
-      obj[name] = val
+      const name = v.substring(0, index);
+      const val = v.substring(index + 1, v.length);
+      obj[name] = val;
     }
-  })
-  return obj
+  });
+  return obj;
 }
 
 /**
@@ -148,9 +155,9 @@ export function param2Obj(url) {
  * @returns {string}
  */
 export function html2Text(val) {
-  const div = document.createElement('div')
-  div.innerHTML = val
-  return div.textContent || div.innerText
+  const div = document.createElement("div");
+  div.innerHTML = val;
+  return div.textContent || div.innerText;
 }
 
 /**
@@ -160,21 +167,21 @@ export function html2Text(val) {
  * @returns {Object}
  */
 export function objectMerge(target, source) {
-  if (typeof target !== 'object') {
-    target = {}
+  if (typeof target !== "object") {
+    target = {};
   }
   if (Array.isArray(source)) {
-    return source.slice()
+    return source.slice();
   }
-  Object.keys(source).forEach(property => {
-    const sourceProperty = source[property]
-    if (typeof sourceProperty === 'object') {
-      target[property] = objectMerge(target[property], sourceProperty)
+  Object.keys(source).forEach((property) => {
+    const sourceProperty = source[property];
+    if (typeof sourceProperty === "object") {
+      target[property] = objectMerge(target[property], sourceProperty);
     } else {
-      target[property] = sourceProperty
+      target[property] = sourceProperty;
     }
-  })
-  return target
+  });
+  return target;
 }
 
 /**
@@ -183,18 +190,18 @@ export function objectMerge(target, source) {
  */
 export function toggleClass(element, className) {
   if (!element || !className) {
-    return
+    return;
   }
-  let classString = element.className
-  const nameIndex = classString.indexOf(className)
+  let classString = element.className;
+  const nameIndex = classString.indexOf(className);
   if (nameIndex === -1) {
-    classString += '' + className
+    classString += "" + className;
   } else {
     classString =
       classString.substr(0, nameIndex) +
-      classString.substr(nameIndex + className.length)
+      classString.substr(nameIndex + className.length);
   }
-  element.className = classString
+  element.className = classString;
 }
 
 /**
@@ -202,10 +209,10 @@ export function toggleClass(element, className) {
  * @returns {Date}
  */
 export function getTime(type) {
-  if (type === 'start') {
-    return new Date().getTime() - 3600 * 1000 * 24 * 90
+  if (type === "start") {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90;
   } else {
-    return new Date(new Date().toDateString())
+    return new Date(new Date().toDateString());
   }
 }
 
@@ -216,38 +223,38 @@ export function getTime(type) {
  * @return {*}
  */
 export function debounce(func, wait, immediate) {
-  let timeout, args, context, timestamp, result
+  let timeout, args, context, timestamp, result;
 
-  const later = function() {
+  const later = function () {
     // 据上一次触发时间间隔
-    const last = +new Date() - timestamp
+    const last = +new Date() - timestamp;
 
     // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
     if (last < wait && last > 0) {
-      timeout = setTimeout(later, wait - last)
+      timeout = setTimeout(later, wait - last);
     } else {
-      timeout = null
+      timeout = null;
       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
       if (!immediate) {
-        result = func.apply(context, args)
-        if (!timeout) context = args = null
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
       }
     }
-  }
+  };
 
-  return function(...args) {
-    context = this
-    timestamp = +new Date()
-    const callNow = immediate && !timeout
+  return function (...args) {
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
     // 如果延时不存在，重新设定延时
-    if (!timeout) timeout = setTimeout(later, wait)
+    if (!timeout) timeout = setTimeout(later, wait);
     if (callNow) {
-      result = func.apply(context, args)
-      context = args = null
+      result = func.apply(context, args);
+      context = args = null;
     }
 
-    return result
-  }
+    return result;
+  };
 }
 
 /**
@@ -258,18 +265,18 @@ export function debounce(func, wait, immediate) {
  * @returns {Object}
  */
 export function deepClone(source) {
-  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'deepClone')
+  if (!source && typeof source !== "object") {
+    throw new Error("error arguments", "deepClone");
   }
-  const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
-    if (source[keys] && typeof source[keys] === 'object') {
-      targetObj[keys] = deepClone(source[keys])
+  const targetObj = source.constructor === Array ? [] : {};
+  Object.keys(source).forEach((keys) => {
+    if (source[keys] && typeof source[keys] === "object") {
+      targetObj[keys] = deepClone(source[keys]);
     } else {
-      targetObj[keys] = source[keys]
+      targetObj[keys] = source[keys];
     }
-  })
-  return targetObj
+  });
+  return targetObj;
 }
 
 /**
@@ -277,16 +284,16 @@ export function deepClone(source) {
  * @returns {Array}
  */
 export function uniqueArr(arr) {
-  return Array.from(new Set(arr))
+  return Array.from(new Set(arr));
 }
 
 /**
  * @returns {string}
  */
 export function createUniqueString() {
-  const timestamp = +new Date() + ''
-  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
-  return (+(randomNum + timestamp)).toString(32)
+  const timestamp = +new Date() + "";
+  const randomNum = parseInt((1 + Math.random()) * 65536) + "";
+  return (+(randomNum + timestamp)).toString(32);
 }
 
 /**
@@ -296,7 +303,7 @@ export function createUniqueString() {
  * @returns {boolean}
  */
 export function hasClass(ele, cls) {
-  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
 }
 
 /**
@@ -305,7 +312,7 @@ export function hasClass(ele, cls) {
  * @param {string} cls
  */
 export function addClass(ele, cls) {
-  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+  if (!hasClass(ele, cls)) ele.className += " " + cls;
 }
 
 /**
@@ -315,76 +322,94 @@ export function addClass(ele, cls) {
  */
 export function removeClass(ele, cls) {
   if (hasClass(ele, cls)) {
-    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
-    ele.className = ele.className.replace(reg, ' ')
+    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+    ele.className = ele.className.replace(reg, " ");
   }
 }
 
 export function makeMap(str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
+  const map = Object.create(null);
+  const list = str.split(",");
   for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
+    map[list[i]] = true;
   }
-  return expectsLowerCase
-    ? val => map[val.toLowerCase()]
-    : val => map[val]
+  return expectsLowerCase ? (val) => map[val.toLowerCase()] : (val) => map[val];
 }
- 
-export const exportDefault = 'export default '
+
+export const exportDefault = "export default ";
 
 export const beautifierConf = {
   html: {
-    indent_size: '2',
-    indent_char: ' ',
-    max_preserve_newlines: '-1',
+    indent_size: "2",
+    indent_char: " ",
+    max_preserve_newlines: "-1",
     preserve_newlines: false,
     keep_array_indentation: false,
     break_chained_methods: false,
-    indent_scripts: 'separate',
-    brace_style: 'end-expand',
+    indent_scripts: "separate",
+    brace_style: "end-expand",
     space_before_conditional: true,
     unescape_strings: false,
     jslint_happy: false,
     end_with_newline: true,
-    wrap_line_length: '110',
+    wrap_line_length: "110",
     indent_inner_html: true,
     comma_first: false,
     e4x: true,
-    indent_empty_lines: true
+    indent_empty_lines: true,
   },
   js: {
-    indent_size: '2',
-    indent_char: ' ',
-    max_preserve_newlines: '-1',
+    indent_size: "2",
+    indent_char: " ",
+    max_preserve_newlines: "-1",
     preserve_newlines: false,
     keep_array_indentation: false,
     break_chained_methods: false,
-    indent_scripts: 'normal',
-    brace_style: 'end-expand',
+    indent_scripts: "normal",
+    brace_style: "end-expand",
     space_before_conditional: true,
     unescape_strings: false,
     jslint_happy: true,
     end_with_newline: true,
-    wrap_line_length: '110',
+    wrap_line_length: "110",
     indent_inner_html: true,
     comma_first: false,
     e4x: true,
-    indent_empty_lines: true
-  }
-}
+    indent_empty_lines: true,
+  },
+};
 
 // 首字母大小
 export function titleCase(str) {
-  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
+  return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
 }
 
 // 下划转驼峰
 export function camelCase(str) {
-  return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase())
+  return str.replace(/_[a-z]/g, (str1) => str1.substr(-1).toUpperCase());
 }
 
 export function isNumberStr(str) {
-  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
+  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);
+}
+
+// 通过时间戳加随机数生成随机数（目前用于卡券模块卡密页面生成卡号）
+export function createRandomNumberByTime() {
+  // 获取当前时间戳
+  const timestamp = Date.now();
+  const number = Math.floor(Math.random() * 100) % 100;
+  return timestamp + "" + number;
+}
+
+// 生成随机数（目前用于卡券模块卡密页面生成卡号）
+export function createRandomNumberForPsd() {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+  const length = 4
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    result += characters[randomIndex];
+  }
+
+  return result;
 }
- 

src/views/coupon/cardManage/components/addAndEdit.vue

@@ -0,0 +1,140 @@
+<template>
+  <div v-loading="loading">
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="卡券名称" prop="title">
+        <el-input v-model="form.title" placeholder="请输入卡券名称" />
+      </el-form-item>
+      <el-form-item label="类型" prop="type">
+        <el-select
+          v-model="form.type"
+          placeholder="请选择类型"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="dict in dict.type.coupon_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="额度" prop="quota">
+        <el-input-number
+          style="width: 100%"
+          v-model="form.quota"
+          :precision="2"
+          :step="1"
+          :min="0"
+          :max="9999"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="使用说明" prop="description">
+        <el-input
+          type="textarea"
+          :rows="4"
+          v-model="form.description"
+          placeholder="请输入使用说明"
+        />
+      </el-form-item>
+      <el-form-item label="图片" prop="pic">
+        <image-upload :limit="1" v-model="form.pic" />
+      </el-form-item>
+    </el-form>
+    <div style="text-align: right">
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      <el-button @click="handleCancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  dicts: ["coupon_type"],
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    const validQuota = (rule, value, callback) => {
+      // console.log("rule-", rule, "value-", value);
+      if (value <= 0) {
+        callback(new Error("卡券额度不能为0"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      form: {
+        title: "",
+        type: "",
+        quota: "",
+        description: "",
+        pic: "",
+      },
+      rules: {
+        title: [{ required: true, trigger: "blur", message: "请输入卡券名称" }],
+        type: [{ required: true, trigger: "change", message: "请选择类型" }],
+        quota: [
+          { required: true, trigger: "blur", message: "请输入额度" },
+          { required: true, validator: validQuota, trigger: "blur" },
+        ],
+        description: [
+          { required: true, trigger: "blur", message: "请输入使用说明" },
+        ],
+        pic: [{ required: true, trigger: "blur", message: "请上传图片" }],
+      },
+    };
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        if (newVal) {
+          this.form = {
+            id: newVal.id || "",
+            title: newVal.title || "",
+            type: newVal.type || "",
+            quota: newVal.quota || "",
+            description: newVal.description || "",
+            pic: newVal.pic || "",
+          };
+          this.$nextTick(() => {
+            this.$refs.form && this.$refs.form.clearValidate();
+          });
+        }
+      },
+    },
+  },
+  methods: {
+    // 确定
+    handleConfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit("confirm", this.form);
+        }
+      });
+    },
+    // 取消
+    handleCancel() {
+      this.form = {
+        title: "",
+        type: "",
+        quota: "",
+        description: "",
+        pic: "",
+      };
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate();
+      });
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/coupon/cardManage/index.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="app-container">
+    <!-- 表单筛选 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      inline
+      v-show="showSearch"
+      label-width="80px"
+    >
+      <el-form-item label="卡券名称">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入卡券名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in dict.type.coupon_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 100%"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <!-- 按钮组 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="selectedRow.length < 1"
+          @click="handleDelete"
+          >删除</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getTableList"
+      ></right-toolbar>
+    </el-row>
+    <!-- 表格 -->
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="卡券名称" align="center" prop="title" />
+      <el-table-column label="类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.coupon_type" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="额度" align="center" prop="quota" />
+      <el-table-column label="图片" align="center" prop="pic" width="100">
+        <template slot-scope="scope">
+          <image-preview :src="scope.row.pic" :width="50" :height="50" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="使用说明"
+        align="center"
+        prop="description"
+        show-overflow-tooltip
+      />
+      <el-table-column label="卡券编号" align="center" prop="couponNumber" />
+      <el-table-column label="卡密总数" align="center" prop="couponNumber" />
+      <el-table-column
+        label="已兑换卡密数"
+        align="center"
+        prop="couponNumber"
+      />
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleUpdate(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >上架/下架</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getTableList"
+    />
+    <!-- 新增编辑弹窗 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="dlgVisible"
+      append-to-body
+      width="30%"
+    >
+      <AddAndEdit
+        :loading="dlgLoading"
+        :data="formData"
+        @confirm="handleConfirm"
+        @cancel="handleCancel"
+      ></AddAndEdit>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getList, getDetail, add, update, del } from "@/api/coupon/cardManage";
+import AddAndEdit from "./components/addAndEdit.vue";
+export default {
+  name: "CardManage",
+  dicts: ["coupon_type"],
+  components: {
+    AddAndEdit,
+  },
+  data() {
+    return {
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        title: "",
+        type: "",
+      },
+      // 时间
+      dateRange: [],
+      // 表格相关
+      loading: false,
+      tableList: [],
+      selectedRow: [],
+      total: 0,
+      //  弹窗相关
+      title: "",
+      dlgVisible: false,
+      formData: {},
+      dlgLoading: false,
+    };
+  },
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getTableList();
+    },
+    // 重置
+    resetQuery() {
+      this.dateRange = [];
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        title: "",
+        type: "",
+      };
+      this.getTableList();
+    },
+    // 新增
+    handleAdd() {
+      this.title = "新增";
+      this.dlgVisible = true;
+      this.formData = {};
+    },
+    // 修改
+    handleUpdate(row) {
+      this.title = "编辑";
+      this.dlgVisible = true;
+      this.dlgLoading = true;
+      // const id = row.id || this.selectedRow[0].id;
+      getDetail(row.id)
+        .then((res) => {
+          if (res.code === 200) {
+            this.formData = res.data;
+          }
+        })
+        .finally(() => (this.dlgLoading = false));
+    },
+    // 弹窗确认
+    handleConfirm(val) {
+      if (val.id) {
+        update(val).then((res) => {
+          if (res.code === 200) {
+            this.$modal.msgSuccess("编辑成功");
+            this.handleCancel();
+            this.getTableList();
+          }
+        });
+      } else {
+        add(val).then((res) => {
+          if (res.code === 200) {
+            this.$modal.msgSuccess("新增成功");
+            this.handleCancel();
+            this.getTableList();
+          }
+        });
+      }
+    },
+    // 弹窗取消
+    handleCancel() {
+      this.dlgVisible = false;
+    },
+    // 删除
+    handleDelete(row) {
+      const selectIds = this.selectedRow.map((item) => item.id);
+      const ids = row.id || selectIds;
+      this.$modal
+        .confirm("是否确认删除数据？")
+        .then(function () {
+          return del(ids);
+        })
+        .then(() => {
+          this.getTableList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    // 表格选中
+    handleSelectionChange(selection) {
+      this.selectedRow = selection;
+    },
+    // 查询列表
+    getTableList() {
+      let params = this.addDateRange(this.queryParams, this.dateRange);
+      this.loading = true;
+      getList(params)
+        .then((res) => {
+          if (res.code === 200) {
+            this.tableList = res.rows;
+            this.total = res.total;
+          }
+        })
+        .finally(() => (this.loading = false));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/coupon/cardPsdManage/components/addAndEdit.vue

@@ -0,0 +1,222 @@
+<template>
+  <div v-loading="loading">
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="卡号" prop="cardNumber">
+        <el-input
+          disabled
+          v-model="form.cardNumber"
+          placeholder="点击按钮生成卡号"
+        />
+        <el-button
+          size="small"
+          type="primary"
+          style="margin-top: 10px"
+          @click="createCardNumber"
+        >
+          生成卡号
+        </el-button>
+      </el-form-item>
+      <el-form-item label="密码" prop="cardPassword">
+        <el-input
+          disabled
+          v-model="form.cardPassword"
+          placeholder="点击按钮生成密码"
+        />
+        <el-button
+          size="small"
+          type="primary"
+          @click="createPsd"
+          style="margin-top: 10px"
+        >
+          生成密码
+        </el-button>
+      </el-form-item>
+      <el-form-item label="到期时间" prop="expirationDate">
+        <el-date-picker
+          v-model="form.expirationDate"
+          style="width: 100%"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择到期时间"
+          type="datetime"
+          :picker-options="pickerOptions"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item label="所属卡券" prop="couponId">
+        <el-input
+          v-model="form.coupon"
+          placeholder="点击选择所属卡券"
+          @focus="selectCoupon"
+        />
+      </el-form-item>
+    </el-form>
+    <div style="text-align: right">
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      <el-button @click="handleCancel">取 消</el-button>
+    </div>
+
+    <!-- 选择卡券弹窗 -->
+    <el-dialog title="选择卡券" :visible.sync="dlgVisible" append-to-body>
+      <SelectCoupon
+        :selectedIds="selectedIds"
+        @close="handleClose"
+        @confirm="handleSelect"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createRandomNumberByTime, createRandomNumberForPsd } from "@/utils";
+import SelectCoupon from "@/components/SelectCoupon";
+export default {
+  dicts: ["coupon_type"],
+  components: { SelectCoupon },
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // 卡券弹窗相关参数
+      dlgVisible: false,
+      selectedIds: "",
+      form: {
+        cardNumber: "",
+        cardPassword: "",
+        expirationDate: "",
+        couponId: "",
+        couponNumber: "",
+        couponTitle: "",
+        coupon: "",
+      },
+      rules: {
+        cardNumber: [
+          { required: true, trigger: "blur", message: "请生成卡号" },
+        ],
+        cardPassword: [
+          { required: true, trigger: "blur", message: "请生成密码" },
+        ],
+        expirationDate: [
+          { required: true, trigger: "blur", message: "请选择到期时间" },
+        ],
+      },
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 8.64e7;
+        },
+        shortcuts: [
+          {
+            text: "明天",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() + 3600 * 1000 * 24);
+              picker.$emit("pick", date);
+            },
+          },
+          {
+            text: "一周后",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", date);
+            },
+          },
+          {
+            text: "一个月后",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", date);
+            },
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        if (newVal) {
+          this.form = {
+            id: newVal.id || "",
+            cardNumber: newVal.cardNumber || "",
+            cardPassword: newVal.cardPassword || "",
+            expirationDate: newVal.expirationDate || "",
+            couponId: newVal.couponId || "",
+            couponNumber: newVal.couponNumber || "",
+            couponTitle: newVal.couponTitle || "",
+            coupon:
+              newVal.couponNumber && newVal.couponTitle
+                ? `${newVal.couponTitle}(${newVal.couponNumber})`
+                : "",
+          };
+          this.$nextTick(() => {
+            this.$refs.form && this.$refs.form.clearValidate();
+          });
+        }
+      },
+    },
+  },
+  methods: {
+    // 确认选择卡券
+    handleSelect(val) {
+      console.log(val);
+      this.form.coupon = `${val[0].title}(${val[0].couponNumber})`;
+      this.form.couponId = val[0].id;
+      this.form.couponNumber = val[0].couponNumber;
+      this.form.couponTitle = val[0].title;
+    },
+    // 选择卡券
+    selectCoupon() {
+      this.dlgVisible = true;
+      this.selectedIds = this.form.couponNumber;
+    },
+    // 关闭卡券弹窗
+    handleClose() {
+      this.dlgVisible = false;
+      this.selectedIds = "";
+    },
+    // 生成卡号
+    createCardNumber() {
+      // console.log(createRandomNumberByTime());
+      this.form.cardNumber = createRandomNumberByTime();
+    },
+    // 生成密码
+    createPsd() {
+      this.form.cardPassword = createRandomNumberForPsd();
+    },
+    // 确定
+    handleConfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit("confirm", this.form);
+        }
+      });
+    },
+    // 取消
+    handleCancel() {
+      this.form = {
+        cardNumber: "",
+        cardPassword: "",
+        expirationDate: "",
+        couponId: "",
+        couponNumber: "",
+        couponTitle: "",
+        coupon: "",
+      };
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate();
+      });
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/coupon/cardPsdManage/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 表单筛选 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      inline
+      v-show="showSearch"
+      label-width="80px"
+    >
+      <el-form-item label="卡券编号">
+        <el-input
+          v-model="queryParams.couponNumber"
+          placeholder="请输入卡券编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="卡券名称">
+        <el-input
+          v-model="queryParams.couponTitle"
+          placeholder="请输入卡券名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <!-- 按钮组 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="selectedRow.length < 1"
+          @click="handleDelete"
+          >删除</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getTableList"
+      ></right-toolbar>
+    </el-row>
+    <!-- 表格 -->
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="卡号" align="center" prop="cardNumber" />
+      <el-table-column label="密码" align="center" prop="cardPassword" />
+      <el-table-column label="到期时间" align="center" prop="expirationDate" />
+      <el-table-column label="卡券编号" align="center" prop="couponNumber" />
+      <el-table-column label="卡密名称" align="center" prop="couponTitle" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getTableList"
+    />
+    <!-- 新增编辑弹窗 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="dlgVisible"
+      append-to-body
+      width="30%"
+    >
+      <AddAndEdit
+        :loading="dlgLoading"
+        :data="formData"
+        @confirm="handleConfirm"
+        @cancel="handleCancel"
+      ></AddAndEdit>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getList,
+  getDetail,
+  add,
+  update,
+  del,
+} from "@/api/coupon/cardPsdManage";
+import AddAndEdit from "./components/addAndEdit.vue";
+export default {
+  name: "CardPsdManage",
+  dicts: ["coupon_type"],
+  components: {
+    AddAndEdit,
+  },
+  data() {
+    return {
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        title: "",
+        type: "",
+      },
+      // 时间
+      dateRange: [],
+      // 表格相关
+      loading: false,
+      tableList: [],
+      selectedRow: [],
+      total: 0,
+      //  弹窗相关
+      title: "",
+      dlgVisible: false,
+      formData: {},
+      dlgLoading: false,
+    };
+  },
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getTableList();
+    },
+    // 重置
+    resetQuery() {
+      this.dateRange = [];
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        title: "",
+        type: "",
+      };
+      this.getTableList();
+    },
+    // 新增
+    handleAdd() {
+      this.title = "新增";
+      this.dlgVisible = true;
+      this.formData = {};
+    },
+    // 修改
+    handleUpdate(row) {
+      this.title = "编辑";
+      this.dlgVisible = true;
+      this.dlgLoading = true;
+      // const id = row.id || this.selectedRow[0].id;
+      getDetail(row.id)
+        .then((res) => {
+          if (res.code === 200) {
+            this.formData = res.data;
+          }
+        })
+        .finally(() => (this.dlgLoading = false));
+    },
+    // 弹窗确认
+    handleConfirm(val) {
+      if (val.id) {
+        update(val).then((res) => {
+          if (res.code === 200) {
+            this.$modal.msgSuccess("编辑成功");
+            this.handleCancel();
+            this.getTableList();
+          }
+        });
+      } else {
+        add(val).then((res) => {
+          if (res.code === 200) {
+            this.$modal.msgSuccess("新增成功");
+            this.handleCancel();
+            this.getTableList();
+          }
+        });
+      }
+    },
+    // 弹窗取消
+    handleCancel() {
+      this.dlgVisible = false;
+    },
+    // 删除
+    handleDelete(row) {
+      const selectIds = this.selectedRow.map((item) => item.id);
+      const ids = row.id || selectIds;
+      this.$modal
+        .confirm("是否确认删除数据？")
+        .then(function () {
+          return del(ids);
+        })
+        .then(() => {
+          this.getTableList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    // 表格选中
+    handleSelectionChange(selection) {
+      this.selectedRow = selection;
+    },
+    // 查询列表
+    getTableList() {
+      let params = this.addDateRange(this.queryParams, this.dateRange);
+      this.loading = true;
+      getList(params)
+        .then((res) => {
+          if (res.code === 200) {
+            this.tableList = res.rows;
+            this.total = res.total;
+          }
+        })
+        .finally(() => (this.loading = false));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/coupon/exchangeRecord/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="app-container">
+    <!-- 表单筛选 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      inline
+      v-show="showSearch"
+      label-width="100px"
+    >
+      <el-form-item label="卡券编号">
+        <el-input
+          v-model="queryParams.couponNumber"
+          placeholder="请输入卡券编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="卡券名称">
+        <el-input
+          v-model="queryParams.couponTitle"
+          placeholder="请输入卡券名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="卡密卡号">
+        <el-input
+          v-model="queryParams.cardNumber"
+          placeholder="请输入卡密卡号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户昵称">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户昵称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户手机号">
+        <el-input
+          v-model="queryParams.userTel"
+          placeholder="请输入用户手机号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="兑换时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 100%"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <!-- 按钮组 -->
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getTableList"
+      ></right-toolbar>
+    </el-row>
+    <!-- 表格 -->
+    <el-table v-loading="loading" :data="tableList">
+      <el-table-column label="卡券编号" align="center" prop="couponNumber" />
+      <el-table-column label="卡券名称" align="center" prop="couponTitle" />
+      <el-table-column label="卡密卡号" align="center" prop="cardNumber" />
+      <el-table-column label="用户名" align="center" prop="userName" />
+      <el-table-column label="用户手机号" align="center" prop="userTel" />
+      <el-table-column label="兑换时间" align="center" prop="createTime" />
+    </el-table>
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getTableList"
+    />
+  </div>
+</template>
+
+<script>
+import { getList } from "@/api/coupon/exchangeRecord";
+export default {
+  name: "ExchangeRecord",
+  components: {},
+  data() {
+    return {
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        couponNumber: "",
+        couponTitle: "",
+        cardNumber: "",
+        userName: "",
+        userTel: "",
+      },
+      // 时间
+      dateRange: [],
+      // 表格相关
+      loading: false,
+      tableList: [],
+      total: 0,
+    };
+  },
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getTableList();
+    },
+    // 重置
+    resetQuery() {
+      this.dateRange = [];
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        couponNumber: "",
+        couponTitle: "",
+        cardNumber: "",
+        userName: "",
+        userTel: "",
+      };
+      this.getTableList();
+    },
+    // 查询列表
+    getTableList() {
+      let params = this.addDateRange(this.queryParams, this.dateRange);
+      this.loading = true;
+      getList(params)
+        .then((res) => {
+          if (res.code === 200) {
+            this.tableList = res.rows;
+            this.total = res.total;
+          }
+        })
+        .finally(() => (this.loading = false));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>