添加：兑换码显示二维码

src/views/user/member/exchangeCode.vue

@@ -52,12 +52,37 @@
                 {{scope.row.activate}}
               </el-tag>
             </template>
-            <el-tag v-else-if="scope.row.status == 2" type="success">已使用</el-tag>
+            <template v-else-if="scope.row.status == 2">
+              <el-tag type="primary">
+                已使用<br />
+                {{scope.row.use_time}}
+              </el-tag>
+            </template>
           </template>
         </el-table-column>
         <el-table-column label="添加时间" prop="create_time" min-width="130" align="center"/>
         <el-table-column label="绑定商户" prop="mer_name" min-width="100" 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.user">
+              <div class="user-avatar">
+                <img :src="scope.row.user.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.user.nickname }}</div>
+                <div class="agent-type-text">
+                  <el-tag type="info" effect="dark" size="small">{{ scope.row.user.uid }}</el-tag>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="280" fixed="right" align="center">
+          <template slot-scope="scope">
+            <el-button type="info" size="small" @click="seeQrCode(scope.row)">二维码</el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <!--分页-->
       <div class="block">
@@ -73,12 +98,22 @@
       </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>
 
 <script>
 import {exchangeCodeActivateForm, exchangeCodeBatchList, exchangeCodeEditForm, exchangeCodeList} from "@/api/user";
 import createWorkBook from "@/utils/newToExcel";
+import QRCode from "qrcodejs2";
 
 export default {
   name: "preSaleProductList",
@@ -99,10 +134,13 @@ export default {
         total: 0,
       },
       batch_list: {},
+
+      isShow: true,
     };
   },
   watch: {},
   mounted() {
+    this.isShow = false;
     this.getList();
     this.getBatchList();
   },
@@ -189,15 +227,107 @@ 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,
+      });
+    },
+
+
   },
 };
 </script>
 
 <style scoped lang="scss">
+.qrcode{
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
 /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>