fix: 活码下载，搜索下拉框修改

src/components/common/links.vue

@@ -10,9 +10,10 @@
       <div class="link__divider"></div>
       <div class="links__qr">
         <div style="text-align:center">
-          <vue-qr id="qrImg" :text="src" :size="102" :margin="5"></vue-qr>
+          <vue-qr v-if="sourceType" id="qrImg" :text="src" :size="102" :margin="5"></vue-qr>
+          <img v-else :src="src" class="imgs" />
         </div>
-        <el-button class="links__qr--btn" v-show="src" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadImg">二维码下载</el-button>
+        <el-button class="links__qr--btn" v-show="src" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="download">二维码下载</el-button>
       </div>
     </div>
   </el-dialog>
@@ -37,6 +38,10 @@ export default {
     imageName: {
       type: String,
       default: ''
+    },
+    sourceType: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -60,7 +65,13 @@ export default {
     close() {
       this.$emit('update:show', false);
     },
-
+    download() {
+      if (this.sourceType) {
+        this.downloadImg();
+      } else {
+        this.downloadCodeImg(this.src);
+      }
+    },
     downloadImg() {
       const qrcode = document.getElementById('qrImg');
       let img = qrcode.getElementsByTagName('img')[0];
@@ -69,6 +80,35 @@ export default {
       link.setAttribute('href', url);
       link.setAttribute('download', `${this.imageName}.png`);
       link.click();
+    },
+    downloadCodeImg(url) {
+      let image = new Image(); //创建图片对象
+      image.setAttribute('crossOrigin', 'anonymous'); //设置允许跨域
+      image.src = url; //赋值src
+      image.onload = () => {
+        //等待图片加载完成创建canvas
+        let canvas = document.createElement('canvas');
+        //将图片绘制到canvas画布上
+        canvas.width = image.width;
+        canvas.height = image.height;
+        let ctx = canvas.getContext('2d');
+        ctx.drawImage(image, 0, 0, image.width, image.height);
+        //获取图片文件格式  jpg/jpeg/png
+        let ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase();
+        //导出画布快照  此时已越过跨域限制成功取到图片数据
+        let dataURL = canvas.toDataURL('image/' + ext);
+        //创建a标签
+        const a = document.createElement('a');
+        // 赋值a标签download属性值，标明该a标签提供下载功能，同时该属性指定了下载时的文件名称
+        a.download = this.imageName;
+        //赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
+        a.href = dataURL;
+        //添加a标签到dom中
+        document.body.appendChild(a);
+        //触发a标签点击事件 触发下载
+        a.click();
+        //下载完成 删除多余的a标签  保持页面原有元素不动
+      };
     }
   }
 };
@@ -121,4 +161,8 @@ export default {
     margin-right: 8px;
   }
 }
+.imgs {
+  width: 102px;
+  height: 105px;
+}
 </style>

src/views/salesleads/actCodeManage/staffActCode/views/act-code-table.vue

@@ -11,11 +11,23 @@
           <el-option label="成员所属门店" :value="1"></el-option>
           <el-option label="关联导购" :value="2"></el-option>
         </el-select>
-        <el-select v-model="inFields.storeSelect" v-if="storeSelect == 1" filterable remote placeholder="请输入门店名称/code" :remote-method="remoteMethods" :loading="selectLoading" v-loadmore="onLoadmoreStore" @change="searchList" style="margin-left: -4px; width:196px;" clearable>
+        <!-- <el-select v-model="inFields.storeSelect" v-if="storeSelect == 1" filterable remote placeholder="请输入门店名称/code" :remote-method="remoteMethods" :loading="selectLoading" v-loadmore="onLoadmoreStore" @change="searchList" style="margin-left: -4px; width:196px;" clearable>
           <el-option v-for="item in shopList" :key="item.storeId" :label="item.storeName" :value="item.storeId"> </el-option>
         </el-select>
         <el-select v-model="inFields.clerkSelect" v-if="storeSelect == 2" filterable remote placeholder="请输入成员名称/code" :loading="selectLoading" @change="searchList" style="margin-left: -4px; width:196px;" clearable>
           <el-option v-for="item in memberList" :key="item.clerkId" :label="item.clerkName" :value="item.clerkId"> </el-option>
+        </el-select> -->
+        <el-select v-model="inFields.storeSelect" v-if="storeSelect == 1" filterable remote placeholder="请输入门店名称/code" :remote-method="remoteMethods" :loading="selectLoading" @change="searchList" style="margin-left: -4px; width:196px;" clearable @keyup.native="toInput" v-loadmore="onLoadmoreStore" popper-class="s-select" @clear="searchListShop">
+          <el-option v-for="item in shopList" :key="item.storeId" :label="item.storeName" :value="item.storeId">
+            <p class="sname">{{ item.storeName }}</p>
+            <p class="scode">{{ item.storeCode }}</p>
+          </el-option>
+        </el-select>
+        <el-select v-model="inFields.clerkSelect" v-if="storeSelect == 2" filterable remote placeholder="请输入成员名称/code" :remote-method="remoteMethodShop" :loading="selectLoading" @change="searchList" style="margin-left: -4px; width:196px;" clearable @keyup.native="toInputs" popper-class="s-select">
+          <el-option v-for="item in memberList" :key="item.clerkId" :label="item.clerkName" :value="item.clerkId">
+            <p class="sname">{{ item.clerkName }}</p>
+            <p class="scode">{{ item.clerkCode }}</p>
+          </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -150,13 +162,14 @@
         <el-button type="primary" @click="batchOK">确 定</el-button>
       </div>
     </el-dialog>
-    <links :src="wxQrcode" :show.sync="show" :imageName="imageName" />
+    <links :src="wxQrcode" :show.sync="show" :imageName="imageName" :sourceType="false" />
   </section>
 </template>
 
 <script>
 import { actCodeListApi } from '@/api/actCode.js';
 import links from '@/components/common/links';
+import { _debounce } from '@/common/js/public';
 import { deleteRequest, getRequest, postRequest, postJsonRequest } from '@/api/api';
 export default {
   name: 'actCodeTable',
@@ -168,7 +181,7 @@ export default {
       inserted(el, binding) {
         const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
         SELECTDOWN_DOM.addEventListener('scroll', function() {
-          const CONDITION = this.scrollHeight + this.scrollTop >= this.clientHeight;
+          const CONDITION = this.clientHeight + this.scrollTop >= this.scrollHeight;
           if (CONDITION) {
             binding.value();
           }
@@ -248,7 +261,6 @@ export default {
           text: '编辑',
           visible: row => {
             if (!this.$getButtonLimit(this.$buttonCode.editActCode) || row.statusFlag == 2) {
-              // if (row.statusFlag == 2) {
               return false;
             } else {
               return true;
@@ -265,7 +277,6 @@ export default {
           text: '下载活码',
           visible: row => {
             if (!this.$getButtonLimit(this.$buttonCode.downActCode) || row.hmType == 1 || row.statusFlag != 1) {
-              // if (row.hmType == 1 || row.statusFlag != 1) {
               return false;
             } else {
               return true;
@@ -276,7 +287,7 @@ export default {
           },
           handler: row => {
             this.wxQrcode = row.wxQrcode;
-            this.imageName = `${row.hmId}_${row.name}`;
+            this.imageName = `${row.hmId}_${row.hmName}`;
             this.show = true;
           }
         },
@@ -284,7 +295,6 @@ export default {
           text: '作废',
           visible: row => {
             if (this.$getButtonLimit(this.$buttonCode.delActCode) && row.statusFlag != 2 && row.hmType == 2 && row.clerkCode == '') {
-              // if (row.statusFlag != 2) {
               return true;
             }
           },
@@ -333,7 +343,8 @@ export default {
         pageSize: 20,
         total: 1
       },
-      name: '1',
+      name: '',
+      // 门店
       storeParam: {
         searchParam: '',
         pageSize: 20,
@@ -347,10 +358,7 @@ export default {
     };
   },
   created() {
-    // this.getTableList();
     this.searchGroup();
-    this.getStraff();
-    this.getStore();
   },
   activated() {
     if (this.$route.meta.refresh) {
@@ -373,11 +381,19 @@ export default {
     this.getTableList();
   },
   methods: {
+    toInput: _debounce(function(e, value) {
+      this.getStore();
+    }, 500),
+    toInputs: _debounce(function(e, value) {
+      this.getStraff();
+    }, 500),
     storeMemberSe(e) {
       if (e == 1) {
         this.inFields.clerkSelect = '';
+        this.memberList = [];
       } else if (e == 2) {
         this.inFields.storeSelect = '';
+        this.shopList = [];
       }
     },
     onLoadmoreStore() {
@@ -406,6 +422,16 @@ export default {
         this.shopList = [];
       }
     },
+    // 导购
+    remoteMethodShop(query) {
+      if (query !== '') {
+        this.name = query;
+        this.memberList = [];
+        this.getStraff();
+      } else {
+        this.memberList = [];
+      }
+    },
     // 获取导购列表数据
     async getStraff() {
       await postRequest(`/api-plug/search-clerk?type=2`, { name: this.name }).then(res => {
@@ -497,6 +523,9 @@ export default {
       this.inFields.orderByField = `${this.sortColumn} ${this.sortType}`;
       this.getTableList();
     },
+    searchListShop() {
+      this.shopList = [];
+    },
     searchList() {
       this.pageParam.pageNo = 1;
       this.getTableList();
@@ -649,4 +678,19 @@ export default {
     // }
   }
 }
+.s-select {
+  .el-select-dropdown__item {
+    height: 57px;
+    padding-top: 9px;
+    .sname {
+      margin-bottom: 3px;
+      line-height: 20px;
+      font-size: 14px;
+    }
+    .scode {
+      line-height: 17px;
+      font-size: 12px;
+    }
+  }
+}
 </style>

src/views/salesleads/components/welcomesItem.vue

@@ -56,9 +56,9 @@
         </div>
       </el-form-item>
     </div>
-    <div v-if="welcomeType == 1 && welcomeContent != ''">
+    <div v-if="welcomeType == 1 && welcomeContent != ''" class="phone">
       <p class="welcomeTitle">欢迎语预览</p>
-      <previewWelcome :welcomeContent="welcomeContent" :mediaList="welcomeMediaList" class="phone"></previewWelcome>
+      <previewWelcome :welcomeContent="welcomeContent" :mediaList="welcomeMediaList"></previewWelcome>
     </div>
   </div>
 </template>
@@ -112,7 +112,6 @@ export default {
     };
   },
   mounted() {
-    console.log(this.welcomeType, 'welcomeType');
     this.getWelcomeTable();
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState == 'visible') {
@@ -233,7 +232,7 @@ export default {
 }
 .welcomeTitle {
   // text-align: center;
-  margin-left: 197px;
+  margin-left: 118px;
   margin-bottom: 26px;
   margin-top: 6px;
   font-weight: 500;
@@ -241,11 +240,6 @@ export default {
   font-size: 14px;
   font-family: PingFangSC-Medium, PingFang SC;
 }
-.phone {
-  .iphone {
-    margin-left: 60px !important;
-  }
-}
 .welcomeTable {
   width: 720px;
   height: 429px;
@@ -291,4 +285,9 @@ export default {
 .flexBox + .flexBox {
   margin-top: 10px;
 }
+.phone {
+  .iphone {
+    margin-left: 40px;
+  }
+}
 </style>