分销员PC端二维码

src/views/school-center/userManager/PartnerManagement.vue

@@ -300,7 +300,7 @@
               <a-tabs name="tab" ref="tabs" @tabClick="handleTabClick">
                 <a-tab-pane :key="item" :name="item" v-for="item in fxyList">
                   <span slot="tab">{{ modifyFormFXY.name+item }}</span>
-                  <div id="qrcodeImg"></div>
+                  <div :id="qrcode + item" ref="qrcode"></div>
                 </a-tab-pane>
               </a-tabs>
             </a-modal>
@@ -333,6 +333,7 @@
             STable,
             treeList,
             treecheck,
+            QRCode,
         },
         data: function () {
             return {
@@ -399,6 +400,8 @@
                   fxs:"",
                 },
                 fxyList:[],
+                qrcode:"qrcode",
+                qrcodeLink:"https://dx.dianyuanjiangli.com/mobile/#/hhr/home?id=",
                 autoCompleteResult:[],
                 subNameList: [],
                 substList: [],
@@ -714,6 +717,33 @@
                     }
                 })
             },
+            // TODO 生成二维码
+            qrcodeImg(qWidth, qHeight, qText, id) {
+              let qrcode = new QRCode(id, {
+                width: qWidth,
+                height: qHeight,
+                text: qText,
+              });
+            },
+            newQrcodeImg(data){
+              let link = this.qrcodeLink + this.modifyFormFXY.id + "&sell=" + data;
+              let id = this.qrcode + data;
+              let that = this;
+              that.$nextTick(function() {
+                  setTimeout(() => {
+                    that.qrcodeImg(124, 124, link,id);
+                  });
+              });
+            },
+            removeInnerHTML(){
+              let qrcodeLen = this.$refs.qrcode.length
+              if(qrcodeLen>0){
+                let i=0;
+                for (i=0;i<qrcodeLen;i++){
+                  this.$refs.qrcode[i].innerHTML = "";
+                }
+              }
+            },
             // TODO 调整分销员
             modifyFXY(data) {
               this.titleName = "分销员配置";
@@ -721,18 +751,23 @@
               this.modifyFormFXY.name = data.name;
               this.modifyFormFXY.fxs = data.fxs
               this.fxyList = data.fxs==""?[]:data.fxs.split(",");
+              if(this.fxyList.length != ""){
+                this.newQrcodeImg(this.fxyList[0]);
+              }
               this.modifyvisibleFXY = true;
             },
             handleTabsAdd(){
-              this.fxyList.length
               if(this.fxyList.length>=5){
                   this.$message.info("分销商不得超过5个",2);
                   return;
               }
               let i=1;
               for (i=1;i<=5;i++){
-                if(this.fxyList.indexOf(i) == -1){
+                let srt = this.fxyList.toString();
+                if(srt.indexOf(i.toString()) == -1){
                   this.fxyList.push(i);
+                  this.removeInnerHTML();
+                  this.newQrcodeImg(i);
                   break;
                 }
               }
@@ -741,7 +776,10 @@
             },
             handleTabClick(name){
               this.$refs.tabs.activeKey = name;
+              this.removeInnerHTML();
+              this.newQrcodeImg(name);
             },
+
             handleTabRemove(){
               let index = this.fxyList.indexOf(this.$refs.tabs.activeKey);
               this.fxyList.splice(index,1);
@@ -758,8 +796,10 @@
             createFXYOk(){
               this.modifyvisibleFXY = false;
               this.search();
+              this.removeInnerHTML();
             },
             createCancel(){
+                this.removeInnerHTML();
                 this.addUser=false;
                 this.addFormtable.setFieldsValue({
                     account: '',