feat: 附件下载页面联系客服弹窗

src/web/staticres/frontRouter/pc/fileHistory/js/index-pc.js

@@ -96,8 +96,13 @@ var fileRecorder = new Vue({
         total: 0, // 总页数
         list: [] // 返回的数据
       },
+      kefu: {
+        qr: '',
+        name: ''
+      },
       helpDialog: false,
-      tipDialog: false
+      tipDialog: false,
+      kefuDialog: false,
     }
   },
   computed: {
@@ -153,11 +158,29 @@ var fileRecorder = new Vue({
           if (res && res.data) {
             for (var key in res.data) {
               _this.$set(_this.userPower, key, res.data[key])
+              _this.calcKefuInfo()
             }
           }
         }
       })
     },
+    calcKefuInfo: function () {
+      var customers = this.userPower.customers
+      if (!$.isArray(customers)) {
+        return
+      }
+      var target;
+      for (var i = 0; i < customers.length; i++) {
+        if (customers[i].remark.indexOf('成功') > -1) {
+          target = customers[i]
+          break
+        }
+      }
+      if (target) {
+        this.kefu.qr = target.wxer
+        this.kefu.name = target.remark
+      }
+    },
     cellClick (row, column, cell, event) {
       console.log(row, column, cell, event)
       if (column.label === '附件') {
@@ -317,6 +340,10 @@ var fileRecorder = new Vue({
         // vm.showSuccess = true
       })
     },
+    // 显示专属客服弹窗
+    showZhuanShuKfDialog () {
+      this.kefuDialog = true
+    },
     concatKf () {
       if (goTemplateData.inIframe) {
         window.$BRACE.$emit('open-customer')

src/web/staticres/frontRouter/pc/seeBuyerHistory/css/index-pc.css

@@ -394,3 +394,46 @@
     color: #1d1d1d;
     line-height: 22px;
 }
+
+.kefu-qr-dialog .el-dialog__body {
+    width: 100%;
+    background: url(/common-module/file-pack/images/dialog-bg.png) no-repeat;
+    background-position-y: 100%;
+    background-size: 100%;
+    color: #171826;
+}
+
+.kefu-qr-dialog .content-container {
+    text-align: center;
+}
+.kefu-qr-dialog .img-conatainer {
+    margin: 0 auto;
+    width: 180px;
+}
+.img-conatainer img {
+    display: block;
+    width: 100%;
+}
+.kefu-qr-dialog .content-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    line-height: 20px;
+}
+.kefu-qr-dialog .content-footer {
+    font-size: 12px;
+    line-height: 24px;
+}
+.wx-icon {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+}
+.kefu-qr-dialog .wx-icon {
+    margin-right: 6px;
+}
+.kefu-qr-dialog .wx-icon img {
+    display: block;
+    width: 100%;
+}

src/web/templates/frontRouter/pc/fileHistory/sess/index.html

@@ -134,7 +134,7 @@
                 <p class="desc-row desc-title">不够用这么办？你有以下两种途径补充余额</p>
                 <div class="desc-row">
                   <p class="desc-title">1. 服务升级</p>
-                  <p class="desc-text">您当前是大会员用户，目前不享有附件下载权益。您可以联系客服进行服务升级后获得。<span class="highlight-text pointer" @click="concatKf">联系客服></span></p>
+                  <p class="desc-text">您当前是大会员用户，目前不享有附件下载权益。您可以联系客服进行服务升级后获得。<span class="highlight-text pointer" @click="showZhuanShuKfDialog">联系客服></span></p>
                 </div>
                 <div class="desc-row">
                   <p class="desc-title">2. 兑换</p>
@@ -226,16 +226,19 @@
       </div>
     </div>
     <el-dialog
-      :visible.sync="helpDialog"
-      :show-close="false"
-      custom-class="custom-dialog"
-      width="380"
+      :visible.sync="kefuDialog"
+      custom-class="custom-dialog kefu-qr-dialog"
+      width="260"
       center>
-      <div>
-        每购买1个省,每月可查看<i>5个</i>采购单位画像，<i>上限为80个</i>，每月1号上月余额清零重新计算。
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="helpDialog = false">我知道了</el-button>
+      <div class="content-container">
+        <div class="content-header">
+          <span class="wx-icon"><img src="/images/wx2.png" alt=""></span>
+          <span v-text="kefu.name"></span>
+        </div>
+        <div class="img-conatainer">
+          <img :src="kefu.qr" alt="">
+        </div>
+        <p class="content-footer">微信扫一扫</p>
       </div>
     </el-dialog>
     <el-dialog