From 8d1b812ec85a20189c797f21b0892b9b9fb5a516 Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Sun, 3 Mar 2024 11:41:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E6=98=BE=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/member/exchangeCode.vue | 118 ++++++++++++++++---------
 1 file changed, 76 insertions(+), 42 deletions(-)

diff --git a/src/views/user/member/exchangeCode.vue b/src/views/user/member/exchangeCode.vue
index 286fb86..3128f47 100644
--- a/src/views/user/member/exchangeCode.vue
+++ b/src/views/user/member/exchangeCode.vue
@@ -2,6 +2,15 @@
   <div class="divBox">
     <!--主要内容-->
     <el-card class="box-card">
+
+      <div>
+        <canvas
+          id="QRCode_header"
+          ref="canvas"
+          title="扫描二维码"
+        ></canvas>
+      </div>
+
       <!--顶部搜索栏-->
       <div slot="header" class="clearfix">
         <div class="container">
@@ -18,9 +27,10 @@
             </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="warning" @click="activateExchangeCode">激活</el-button>
-          <el-button size="small" type="info" @click="exports">导出</el-button>
+          <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="info" @click="exports">导出兑换码</el-button>
+          <el-button size="small" type="info" @click="exports('down')">下载二维码</el-button>
         </div>
       </div>
       <!--表格信息-->
@@ -45,7 +55,7 @@
             激活时间 / 使用时间
           </template>
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.status == 0" type="info">待激活</el-tag>
+            <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 />
@@ -53,7 +63,7 @@
               </el-tag>
             </template>
             <template v-else-if="scope.row.status == 2">
-              <el-tag type="primary">
+              <el-tag type="success">
                 已使用<br />
                 {{scope.row.use_time}}
               </el-tag>
@@ -78,9 +88,9 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" min-width="280" fixed="right" align="center">
+        <el-table-column label="二维码" min-width="100" align="center">
           <template slot-scope="scope">
-            <el-button type="info" size="small" @click="seeQrCode(scope.row)">二维码</el-button>
+            <div :ref="'qrCodeImg'+scope.row.id" class="qr-code-img"></div>
           </template>
         </el-table-column>
       </el-table>
@@ -96,17 +106,11 @@
           @current-change="pageUserChange"
         />
       </div>
+
+
+
+
     </el-card>
-
-    <!--二维码弹框-->
-    <el-dialog title="二维码" :visible.sync="isShow" width="300px">
-      <div ref="qrcode" class="qrcode"></div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="isShow = false">取 消</el-button>
-      </span>
-    </el-dialog>
-
-
   </div>
 </template>
 
@@ -134,13 +138,10 @@ export default {
         total: 0,
       },
       batch_list: {},
-
-      isShow: true,
     };
   },
   watch: {},
   mounted() {
-    this.isShow = false;
     this.getList();
     this.getBatchList();
   },
@@ -154,6 +155,20 @@ export default {
         _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 QRCode(_this.$refs[refName], {
+              text: item.exchange_code, // 需要转换为二维码的内容
+              width: 80,
+              height: 80,
+              colorDark: '#000000',
+              colorLight: '#ffffff',
+              correctLevel: QRCode.CorrectLevel.H,
+            });
+          })
+        });
       }).catch((res) => {
         _this.listLoading = false;
         _this.$message.error(res.message);
@@ -185,7 +200,7 @@ export default {
       this.$modalForm(exchangeCodeActivateForm()).then(() => this.getList(''));
     },
     // 导出 - 导出信息
-    async exports(){
+    async exports(type = 'excel'){
       let _this = this;
       // 获取全部列表
       let params = Object.assign({}, _this.tableFrom);
@@ -194,7 +209,9 @@ export default {
       params.is_export = 1;
       let exportData = await this.exportsAllList(params);
 
-      createWorkBook(exportData.header || {}, exportData.title || {}, exportData.list || {}, exportData.foot || '',exportData.filename || '');
+
+      if(type == 'excel') createWorkBook(exportData.header || {}, exportData.title || {}, exportData.list || {}, exportData.foot || '',exportData.filename || '');
+      else _this.downloadQrCode(exportData);
     },
     // 导出 - 获取全部信息列表
     exportsAllList(params, exportData = {}){
@@ -227,20 +244,39 @@ export default {
         });
       })
     },
-    // 生成二维码
-    seeQrCode(url) {
-      let img = '';
-      this.isShow = true;
-      this.$refs.qrcode.innerHTML = '';
-      new QRCode(this.$refs.qrcode, {
-        text: url, // 需要转换为二维码的内容
-        width: 160,
-        height: 160,
-        colorDark: '#000000',
-        colorLight: '#ffffff',
-        correctLevel: QRCode.CorrectLevel.H,
+    // 二维码下载
+    downloadQrCode(exportData){
+      let _this = this;
+      let list = exportData.list || {};
+      // 循环处理
+      let opts = {
+        errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例
+        type: "image/png",//生成的二维码类型
+        quality: 0.3,//二维码质量
+        margin: 5,//二维码留白边距
+        width: 200,//宽
+        height: 200,//高
+        text: "",//二维码内容
+        color: {
+          light: "#eaeaea"//背景色
+        }
+      };
+      Object.values(list).forEach( item => {
+        opts.text = item[2];
+        QRCode.Drawing(_this.$refs.canvas, opts, function (error) {
+          console.log(error)
+          if(error){
+            console.log('加载失败！');
+          }
+        });
       });
-    },
+
+      console.log(exportData)
+
+
+
+
+    }
 
 
   },
@@ -248,13 +284,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.qrcode{
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
+.qr-code-img{
+  width: 90px!important;
+  height: 90px!important;
+  padding-top: 5px;
+  padding-left: 5px;
 }
 /deep/ .el-table .cell{
   padding: 0!important;