From 98155cd4ddc282503d5edbaa5aca605534f6a3a2 Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Tue, 2 Apr 2024 18:17:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9A=E9=82=80=E8=AF=B7?=
 =?UTF-8?q?=E7=A0=81=E7=AE=A1=E7=90=86=EF=BC=88=E5=A2=9E=E5=8A=A0=E3=80=81?=
 =?UTF-8?q?=E4=BD=9C=E5=BA=9F=E3=80=81=E5=AF=BC=E5=87=BA=E3=80=81=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E4=B8=8B=E8=BD=BD=EF=BC=89=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=EF=BC=9A=E5=85=91=E6=8D=A2=E7=A0=81=E3=80=81=E9=82=80=E8=AF=B7?=
 =?UTF-8?q?=E7=A0=81=20-=20=E7=82=B9=E5=87=BB=E5=AF=BC=E5=87=BA=E4=BD=86?=
 =?UTF-8?q?=E5=AE=9E=E9=99=85=E5=8D=B4=E6=89=A7=E8=A1=8C=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E7=9A=84=E9=97=AE=E9=A2=98=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=9A=E5=85=91=E6=8D=A2=E7=A0=81=E3=80=81=E9=82=80?=
 =?UTF-8?q?=E8=AF=B7=E7=A0=81=20-=20=E4=BA=8C=E7=BB=B4=E7=A0=81=E6=89=AB?=
 =?UTF-8?q?=E7=A0=81=E5=86=85=E5=AE=B9=E4=BC=98=E5=8C=96=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=B1=BB=E5=9E=8B=E5=8C=BA=E5=88=86=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=9A=E5=85=91=E6=8D=A2=E7=A0=81=E3=80=81=E9=82=80?=
 =?UTF-8?q?=E8=AF=B7=E7=A0=81=20-=20=E5=AF=BC=E5=87=BA=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=B7=BB=E5=8A=A0=E4=BA=8C=E7=BB=B4=E7=A0=81?=
 =?UTF-8?q?=E5=85=B7=E4=BD=93=E5=86=85=E5=AE=B9=E4=BF=A1=E6=81=AF=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=85=91=E6=8D=A2?=
 =?UTF-8?q?=E7=A0=81=E3=80=81=E9=82=80=E8=AF=B7=E7=A0=81=20-=20=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E4=B8=BA=E9=9A=8F=E6=9C=BA=E7=94=9F=E6=88=90=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=9A=E8=BF=9B=E5=85=A5=E9=A1=BA=E5=BA=8F=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E7=9A=84=E6=AD=A5=E9=AA=A4=EF=BC=8C=E7=84=B6=E5=90=8E?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E6=8A=A5=E9=94=99=EF=BC=8C=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=A4=B1=E8=B4=A5=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.js                        |  23 +-
 src/router/modules/user.js             |   9 +
 src/views/user/member/exchangeCode.vue |  13 +-
 src/views/user/member/inviteCode.vue   | 438 +++++++++++++++++++++++++
 4 files changed, 474 insertions(+), 9 deletions(-)
 create mode 100644 src/views/user/member/inviteCode.vue

diff --git a/src/api/user.js b/src/api/user.js
index 3f9cf34..1483701 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -468,9 +468,26 @@ export function exchangeCodeCancelForm() {
 export function exchangeCodeUpdate(data) {
   return request.post('user/exchangeCode/updateCode',data)
 }
-
-
-
+// 邀请码 - 列表获取
+export function inviteCodeList(data) {
+  return request.get('user/inviteCode/getList', data)
+}
+// 邀请码 - 批次列表获取
+export function inviteCodeBatchList() {
+  return request.get('user/inviteCode/getBatchList')
+}
+// 邀请码 - 添加表单
+export function inviteCodeEditForm() {
+  return request.get('user/inviteCode/editForm')
+}
+// 邀请码 - 作废
+export function inviteCodeCancelForm() {
+  return request.get('user/inviteCode/cancelForm')
+}
+// 邀请码 - 修改兑换码
+export function inviteCodeUpdate(data) {
+  return request.post('user/inviteCode/updateCode',data)
+}
 
 
 
diff --git a/src/router/modules/user.js b/src/router/modules/user.js
index f3cb035..95369f0 100644
--- a/src/router/modules/user.js
+++ b/src/router/modules/user.js
@@ -132,6 +132,15 @@ const userRouter =
             },
             component: () => import('@/views/user/member/exchangeCode')
           },
+          {
+            path: 'inviteCode',
+            name: 'inviteCode',
+            meta: {
+              title: '邀请码',
+              noCache: true
+            },
+            component: () => import('@/views/user/member/inviteCode')
+          },
         ]
       },
     ]
diff --git a/src/views/user/member/exchangeCode.vue b/src/views/user/member/exchangeCode.vue
index 5b1694e..15cfa7e 100644
--- a/src/views/user/member/exchangeCode.vue
+++ b/src/views/user/member/exchangeCode.vue
@@ -22,7 +22,7 @@
           <el-button size="small" type="success" @click="addExchangeCode">添加兑换码</el-button>
           <el-button size="small" type="warning" @click="activateExchangeCode">分配给商户</el-button>
           <el-button size="small" type="danger" @click="cancelExchangeCode">作废兑换码</el-button>
-          <el-button size="small" type="info" @click="exports">导出兑换码</el-button>
+          <el-button size="small" type="info" @click="exports('excel')">导出兑换码</el-button>
           <el-button size="small" type="info" @click="exports('down')">下载二维码</el-button>
         </div>
       </div>
@@ -167,7 +167,7 @@ export default {
           Object.values(res.data.list).forEach(item => {
             let refName = 'qrCodeImg'+item.id;
             new QRCodeOld(_this.$refs[refName], {
-              text: item.exchange_code, // 需要转换为二维码的内容
+              text: item.qr_code_text, // 需要转换为二维码的内容
               width: 80,
               height: 80,
               colorDark: '#000000',
@@ -262,14 +262,14 @@ export default {
       // 生成下载数据
       const data = [];
       for (const item of list) {
-        const base64 = await this.textQrcodeToBase64(item[2]);
+        const base64 = await this.textQrcodeToBase64(item[3]);
         data.push({
           name: item[2],
           value: base64,
         });
       }
       // 下载
-      this.dataUrlZip(data);
+      this.dataUrlZip(data, exportData.filename || 'qrcodes');
     },
     /**
      * 将字符串生成二维码并且转成base64
@@ -300,8 +300,9 @@ export default {
     /**
      * 将base64字符串以png格式装进jszip, 然后下载保存到本地
      * @param {Array} data {value: base64字符串, name: 二维码的名字}
+     * @param fileName
      */
-    dataUrlZip(data) {
+    dataUrlZip(data, fileName) {
       const zip = new JSZip();
 
       for (const item of data) {
@@ -313,7 +314,7 @@ export default {
 
       // 以二进制形式保存、并且通过file-saver下载到本地
       zip.generateAsync({ type: "blob" }).then( (content) =>{
-        FileSaver.saveAs(content, "qrcodes.zip");
+        FileSaver.saveAs(content, fileName + ".zip");
       });
     },
     // 点击修改兑换码
diff --git a/src/views/user/member/inviteCode.vue b/src/views/user/member/inviteCode.vue
new file mode 100644
index 0000000..21ee118
--- /dev/null
+++ b/src/views/user/member/inviteCode.vue
@@ -0,0 +1,438 @@
+<template>
+  <div class="divBox">
+    <!--主要内容-->
+    <el-card class="box-card">
+      <!--顶部搜索栏-->
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form inline size="small" label-width="80px">
+            <el-form-item label="">
+              <el-select v-model="tableFrom.status" class="selWidth" clearable>
+                <el-option label="未激活" :value="0"></el-option>
+                <el-option label="已激活" :value="1"></el-option>
+                <el-option label="已使用" :value="2"></el-option>
+                <el-option label="已作废" :value="3"></el-option>
+              </el-select>
+              <el-select v-if="Object.values(batch_list).length > 0" v-model="tableFrom.batch_unique" class="selWidth" clearable>
+                <el-option v-for="(item,index) in batch_list" :label="index" :value="item"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-button size="small" type="primary" @click="getList(1)">搜索</el-button>
+          <el-button size="small" type="success" @click="addExchangeCode">添加兑换码</el-button>
+          <el-button size="small" type="danger" @click="cancelExchangeCode">作废兑换码</el-button>
+          <el-button size="small" type="info" @click="exports('excel')">导出兑换码</el-button>
+          <el-button size="small" type="info" @click="exports('down')">下载二维码</el-button>
+        </div>
+      </div>
+      <!--表格信息-->
+      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
+        <el-table-column label="ID" prop="id" min-width="80" align="center"/>
+        <el-table-column label="归属批次" min-width="130" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.batch_title }}<br />
+            {{ scope.row.batch_unique }}
+          </template>
+        </el-table-column>
+        <el-table-column label="兑换码" min-width="150" align="center">
+          <template slot-scope="scope">
+            <el-tooltip v-if="scope.row.status == 0" class="item" effect="dark" content="点击修改兑换码" placement="top-start">
+              <el-button type="info" size="small" icon="el-icon-edit" @click="updateExchangeCode(scope.row)">
+                {{ scope.row.exchange_code }}
+              </el-button>
+            </el-tooltip>
+            <el-tag v-else-if="scope.row.status == 1" type="primary" effect="dark">{{ scope.row.exchange_code }}</el-tag>
+            <el-tag v-else-if="scope.row.status == 2" type="success" effect="dark">{{ scope.row.exchange_code }}</el-tag>
+            <el-tag v-else-if="scope.row.status == 3" type="danger" effect="dark">{{ scope.row.exchange_code }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" min-width="150" align="center">
+          <template slot="header" slot-scope="scope">
+            状态<br />
+            激活时间 / 使用时间
+          </template>
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status == 0" type="info">{{ scope.row.mer_id > 0 ? '待激活' : '待分配'  }}</el-tag>
+            <template v-else-if="scope.row.status == 1">
+              <el-tag type="primary">
+                已激活<br />
+                {{scope.row.activate}}
+              </el-tag>
+            </template>
+            <template v-else-if="scope.row.status == 2">
+              <el-tag type="success">
+                已使用<br />
+                {{scope.row.use_time}}
+              </el-tag>
+            </template>
+            <template v-else-if="scope.row.status == 3">
+              <el-tag type="danger">已作废</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="激活用户" min-width="230" align="center">
+          <template slot-scope="scope">
+            <div class="user-content" v-if="scope.row.activateUser">
+              <div class="user-avatar">
+                <img :src="scope.row.activateUser.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.activateUser.nickname }}</div>
+                <div class="agent-type-text">
+                  <el-tag type="info" effect="dark" size="small">{{ scope.row.activateUser.uid }}</el-tag>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="添加时间" prop="create_time" min-width="130" align="center"/>
+        <el-table-column label="绑定会员卡" prop="svip_name" min-width="100" align="center"/>
+        <el-table-column label="使用人员" min-width="230" align="center">
+          <template slot-scope="scope">
+            <div class="user-content" v-if="scope.row.useUser">
+              <div class="user-avatar">
+                <img :src="scope.row.useUser.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.useUser.nickname }}</div>
+                <div class="agent-type-text">
+                  <el-tag type="info" effect="dark" size="small">{{ scope.row.useUser.uid }}</el-tag>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="二维码" min-width="100" align="center">
+          <template slot-scope="scope">
+            <div :ref="'qrCodeImg'+scope.row.id" class="qr-code-img"></div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页-->
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleUserSizeChange"
+          @current-change="pageUserChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {inviteCodeBatchList, inviteCodeCancelForm, inviteCodeEditForm, inviteCodeList, inviteCodeUpdate} from "@/api/user";
+import createWorkBook from "@/utils/newToExcel";
+import QRCodeOld from "qrcodejs2";
+import QRCode from "qrcode";
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+
+export default {
+  name: "preSaleProductList",
+  components: {},
+  data() {
+    return {
+      moren: require("@/assets/images/f.png"),
+      // 列表
+      listLoading: false,
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        status: '',
+        batch_unique: '',
+      },
+      tableData: {
+        data: [],
+        total: 0,
+      },
+      batch_list: {},
+    };
+  },
+  watch: {},
+  mounted() {
+    this.getList();
+    this.getBatchList();
+  },
+  methods: {
+    // 列表
+    getList(num = ''){
+      let _this = this;
+      _this.listLoading = true;
+      _this.tableFrom.page = num ? num : _this.tableFrom.page;
+      inviteCodeList(_this.tableFrom).then((res) => {
+        _this.tableData.data = res.data.list;
+        _this.tableData.total = res.data.count;
+        _this.listLoading = false;
+        // 循环显示二维码
+        _this.$nextTick(function () {
+          Object.values(res.data.list).forEach(item => {
+            let refName = 'qrCodeImg'+item.id;
+            new QRCodeOld(_this.$refs[refName], {
+              text: item.qr_code_text, // 需要转换为二维码的内容
+              width: 80,
+              height: 80,
+              colorDark: '#000000',
+              colorLight: '#ffffff',
+              correctLevel: QRCodeOld.CorrectLevel.H,
+            });
+          })
+        });
+      }).catch((res) => {
+        _this.listLoading = false;
+        _this.$message.error(res.message);
+      });
+    },
+    pageUserChange(page) {
+      this.tableFrom.page = page;
+      this.getList('');
+    },
+    handleUserSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getList('');
+    },
+    // 批次列表
+    getBatchList(){
+      let _this = this;
+      inviteCodeBatchList().then((res) => {
+        _this.batch_list = res.data || {};
+      }).catch((res) => {
+        _this.$message.error(res.message);
+      });
+    },
+    // 添加
+    addExchangeCode(){
+      this.$modalForm(inviteCodeEditForm()).then(() => this.getList(''));
+    },
+    // 作废
+    cancelExchangeCode(){
+      this.$modalForm(inviteCodeCancelForm()).then(() => this.getList(''));
+    },
+    // 导出 - 导出信息
+    async exports(type = 'excel'){
+      let _this = this;
+      // 获取全部列表
+      let params = Object.assign({}, _this.tableFrom);
+      params.page = 1;
+      params.limit = 20;
+      params.is_export = 1;
+      let exportData = await this.exportsAllList(params);
+
+      if(type == 'excel') createWorkBook(exportData.header || {}, exportData.title || {}, exportData.list || {}, exportData.foot || '',exportData.filename || '');
+      else _this.downloadQrCode(exportData);
+    },
+    // 导出 - 获取全部信息列表
+    exportsAllList(params, exportData = {}){
+      let _this = this;
+      return new Promise((resolve, reject) => {
+        inviteCodeList(params).then((res) => {
+          let data = res.data || {};
+          if(params.page == 1){
+            exportData.title = data.title || {};
+            exportData.header = data.header || {};
+            exportData.filename = data.filename || '';
+          }
+          // 计算是否存在下一页  并且合并数组
+          let totalPage = Math.ceil(data.count / params.limit);
+          let exportList = exportData.list || {};
+          exportData.list = Object.values(exportList).concat(data.list);
+          if(params.page < totalPage){
+            // 存在下一页
+            params.page++;
+            _this.exportsAllList(params, exportData).then(res => {
+              return resolve(res)
+            });
+          }else{
+            // 不存在下一页
+            return resolve(exportData)
+          }
+        }).catch((res) => {
+          console.log('错误',res)
+          return resolve(list)
+        });
+      })
+    },
+    // 二维码下载
+    async downloadQrCode(exportData){
+      let _this = this;
+      let list = exportData.list || {};
+      // 生成下载数据
+      const data = [];
+      for (const item of list) {
+        const base64 = await this.textQrcodeToBase64(item[3]);
+        data.push({
+          name: item[2],
+          value: base64,
+        });
+      }
+      // 下载
+      this.dataUrlZip(data, exportData.filename || 'qrcodes');
+    },
+    /**
+     * 将字符串生成二维码并且转成base64
+     * @param {要生成二维码的字符串} text
+     * @returns
+     */
+    textQrcodeToBase64(text) {
+      return new Promise((res, rej) => {
+        QRCode.toDataURL(
+          text, // 二维码字符串
+          {
+            type: "image/png", // 生成dataurl图片格式
+            width: 200, // 二维码宽度
+            quality: 0.8, // 质量
+            margin: 1, // 白边大小
+            color: {
+              dark: "#000", // 暗色颜色
+              light: "#fff", // 亮色颜色
+            },
+          },
+          (err, dataUrl)=> {
+            if (err) rej(err);
+            res(dataUrl.substring(22)); // substring(22)是去掉图片base64头
+          }
+        );
+      });
+    },
+    /**
+     * 将base64字符串以png格式装进jszip, 然后下载保存到本地
+     * @param {Array} data {value: base64字符串, name: 二维码的名字}
+     * @param fileName
+     */
+    dataUrlZip(data, fileName) {
+      const zip = new JSZip();
+
+      for (const item of data) {
+        const { value, name } = item;
+        zip.file(name + ".png", value, {
+          base64: true,
+        });
+      }
+
+      // 以二进制形式保存、并且通过file-saver下载到本地
+      zip.generateAsync({ type: "blob" }).then( (content) =>{
+        FileSaver.saveAs(content, fileName + ".zip");
+      });
+    },
+    // 点击修改兑换码
+    updateExchangeCode(info){
+      let _this = this;
+      _this.$prompt(`当前兑换码：${info.exchange_code}`, {
+        confirmButtonText: "提交修改",
+        cancelButtonText: "取消修改",
+        inputErrorMessage: "请输入新的兑换码",
+        inputType: "text",
+        inputPlaceholder: "请输入新的兑换码",
+        inputValidator: value => {
+          if (!value) return "输入不能为空";
+          if(value.length > 10) return "兑换码长度不能超过10个字符";
+
+          const regex = /^[A-Za-z0-9]+$/;
+          if (!regex.test(value)) return "请输入英文字母或者数字";
+        }
+      }).then(({value}) => {
+        let params = {
+          id: info.id,
+          new_exchange_code: value
+        };
+        inviteCodeUpdate(params).then(res => {
+          _this.$message.success(res.message)
+
+          _this.getList()
+        }).catch((err) => {
+          _this.$message.error(err.message)
+        });
+      }).catch(() => {});
+    }
+
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.qr-code-img{
+  width: 90px!important;
+  height: 90px!important;
+  padding-top: 5px;
+  padding-left: 5px;
+}
+/deep/ .el-table .cell{
+  padding: 0!important;
+}
+.selWidth{
+  margin-bottom: 10px!important;
+}
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    max-width: calc(100% - var(--user-content-height-));
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      width: 100%;
+      height: 25px;
+      line-height: 25px;
+      text-align: left;
+      font-size: 15px;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      .user-id{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        height: 18px;
+        line-height: 20px;
+        font-size: 13px;
+        padding: 0 5px;
+        border-radius: 5px;
+        margin-left: 10px;
+        width: max-content!important;
+      }
+    }
+    .user-id{
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+</style>