微信客服配置

src/components/customerService/floatingBar.vue

@@ -7,8 +7,8 @@
         <img src="../../assets/customerService/customerService.png" alt="">
         <span>客服</span>
       </div>
-      <div class="aiSupport flex f-c a-c " @click="wechatService" v-if="display&&supportStaffUrl !== null">
-        <!-- <img src="../../assets/customerService/customerService.png" alt=""> -->
+      <div class="humanAgent flex f-c a-c " @click="wechatService" v-if="display">
+        <img src="../../assets/customerService/weChatAgent.png" alt="" style="width: 30px;height: 30px;">
         <span>微信</span>
         <span>客服</span>
       </div>
@@ -17,7 +17,7 @@
           <img :src="wechatPictureUrl" alt="" style="width: 130px;height:130px;">
           <span style="font-size: 14px;color: #333;margin-top: 5px;">微信扫码咨询</span>
         </div>
-        <div class="humanAgent flex f-c j-c a-c" slot="reference" >
+        <div class="humanAgent flex f-c j-c a-c" slot="reference">
           <img src="../../assets/customerService/Frame.png" alt="">
           <span>掌柜</span>
           <span>客服</span>
@@ -43,9 +43,9 @@ export default {
       qrcode: null,
       qrcodeWidth: "130",
       qrcodeHeight: "130",
-      wechatPictureUrl:"",
-      display:"",
-      supportStaffUrl:''
+      wechatPictureUrl: "",
+      display: "",
+      supportStaffUrl: null,
     }
   },
   // 生命周期函数
@@ -54,23 +54,27 @@ export default {
   },
   // 方法函数
   methods: {
-
+    //获取微信客服跳转链接
+    wechatService() {
+      this.$api.aiSupport.getWechatCustomer().then((res) => {
+        if (res.code == '200') {
+          this.supportStaffUrl = res.msg;
+          window.open(this.supportStaffUrl, '_blank');
+        }
+      });
+    },
     aiSupportClick() {
       this.$refs.modalDialog.setBackupVisible(true);
     },
     wechat() {
       this.$api.aiSupport.wechatpicture().then((res) => {
+        console.log(res)
         if (res.code == '200') {
-          this.display=res.data.display;
-          this.wechatPictureUrl=process.env.APP_BASE_URL+ res.data.wechatPictureUrl;
-          this.supportStaffUrl = res.data.supportStaffUrl
-          console.log(this.supportStaffUrl.length);
+          this.display = res.data.display;
+          this.wechatPictureUrl = process.env.APP_BASE_URL + res.data.wechatPictureUrl;
         }
       });
     },
-    wechatService(){
-      window.open(this.supportStaffUrl, '_blank');
-    },
     //二维码生成插件
     creatQrCode(text) {
       // 查找并删除旧的二维码DOM元素
@@ -101,6 +105,7 @@ export default {
     padding: 5px;
   }
 }
+
 #qrCode {
   display: inline-block;
   margin: 0 auto;
@@ -115,17 +120,18 @@ export default {
   background-color: #fff;
   padding: 6px;
 }
+
 .floatingBar {
   width: auto;
   position: fixed;
-  bottom: 7%;
+  bottom: 5%;
   right: 0;
   z-index: 99;
   background: #FFFFFF;
   box-shadow: 6px 6px 12px 0px rgba(0, 70, 128, 0.08);
   border-radius: 4px 0px 0px 4px;
   border: 1px solid #F1F3F6;
-  padding: 8px 6px;
+  padding: 6px;
   box-sizing: border-box;
 
   .aiSupport {
@@ -157,7 +163,7 @@ export default {
     background: #fff;
     border-radius: 4px 4px 4px 4px;
     padding: 4px 2px;
-    margin-top: 10px;
+
     span {
       color: #202D45;
       font-size: 12px;

src/http/moudules/service/aiSupport.js

@@ -16,3 +16,17 @@ export const wechatpicture= () => {
 
   })
 }
+// 获取客服列表
+export const customerList= () => {
+  return axios({
+      url: "/wechat/customer/list",
+      method: "post",
+  })
+}
+//获取跳转链接
+export const getWechatCustomer= () => {
+  return axios({
+      url: "/sys/qy/wechat/find/wechatCustomer",
+      method: "post",
+  })
+}

src/views/Sys/PublicizeImg.vue

@@ -7,7 +7,7 @@
           <div>
             <!-- 左侧树形结构 -->
             <el-tree :data="ztreeNodes" :props="{ children: 'children', label: 'name' }" node-key="id"
-                     :default-expanded-keys="['9']" @node-click="onZTreeClick"></el-tree>
+              :default-expanded-keys="['9']" @node-click="onZTreeClick"></el-tree>
           </div>
         </SplitArea>
         <!-- 左侧树End -->
@@ -35,19 +35,17 @@
                 </el-col>
                 <el-col :span="5">
                   <el-form-item label="状态">
-                    <el-select style="width:200px" clearable v-model="pageData.status"
-                               placeholder="请选择">
-                      <el-option v-for="val in user_statusoptions" :label="val.label"
-                                 :value="val.value" :key="val.id"></el-option>
+                    <el-select style="width:200px" clearable v-model="pageData.status" placeholder="请选择">
+                      <el-option v-for="val in user_statusoptions" :label="val.label" :value="val.value"
+                        :key="val.id"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="5">
                   <el-form-item label="领导人">
-                    <el-select size="small" style="width:215px" clearable filterable
-                               v-model="pageData.leaderId" placeholder="请选择">
-                      <el-option v-for="item in searchLeaderOptions" :key="item.id" :label="item.name"
-                                 :value="item.name">
+                    <el-select size="small" style="width:215px" clearable filterable v-model="pageData.leaderId"
+                      placeholder="请选择">
+                      <el-option v-for="item in searchLeaderOptions" :key="item.id" :label="item.name" :value="item.name">
                       </el-option>
                     </el-select>
                   </el-form-item>
@@ -61,7 +59,7 @@
             </el-form>
           </el-row>
           <kt-common-table permsEdit="sys:backline:edit" :data="pageResult" :columns="columns" editButtonName="配置图片"
-                           :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit">
+            :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit">
           </kt-common-table>
 
         </SplitArea>
@@ -70,27 +68,22 @@
     </el-main>
 
     <!-- 新增修改界面 -->
-    <el-dialog width="20%" :visible.sync="dialogVisible" :close-on-click-modal="false"
-               @close="closeDialog" v-dialogDrag>
-      <div>
-        上传图片：
-        <el-upload
-          action="#"
-          style="display:inline-block"
-          list-type="picture-card"
-          :auto-upload="false"
-          accept=".png, .jpg, .jpeg"
-          :show-file-list="false"
-          :on-change="drivingupload">
-          <img v-if="qrCodeImage" :src="qrCodeImage" class="avatar">
-          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-        </el-upload>
-      </div>
-      <div>
-        上传客服：
-        <el-input v-model="supportStaffUrl" placeholder="请输入客服链接"></el-input>
-
-      </div>
+    <el-dialog width="30%" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="closeDialog" v-dialogDrag>
+      <el-form ref="customerInfo" :model="customerInfo" label-width="80px">
+        <el-form-item label="上传图片">
+          <el-upload action="#" style="display:inline-block" list-type="picture-card" :auto-upload="false"
+            accept=".png, .jpg, .jpeg" :show-file-list="false" :on-change="drivingupload">
+            <img v-if="qrCodeImage" :src="qrCodeImage" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="客服列表">
+          <el-select v-model="customerInfo.openKfId" placeholder="请选择活动区域" @change="customerChange">
+            <el-option v-for="(item, index) in customerList" :key="index" :label="item.name"
+              :value="item.open_kfid"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
       <!-- <a href="https://work.weixin.qq.com/kfid/kfcf52bd389cde8a421">https://work.weixin.qq.com/kfid/kfcf52bd389cde8a421</a> -->
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="dialogVisible = false">取 消</el-button>
@@ -142,7 +135,7 @@ export default {
       searchLeaderOptions: {},
       columns: [
         // 数据列
-        {prop: "deptId", label: "部门编码", minWidth: 80, sortable: false},
+        { prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
         {
           prop: "pdeptName",
           label: "机构名称",
@@ -150,17 +143,17 @@ export default {
           sortable: false,
         },
 
-        {prop: "deptName", label: "部门名称", minWidth: 80, sortable: false},
+        { prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
 
-        {prop: "userId", label: "工号", minWidth: 80, sortable: false},
-        {prop: "name", label: "姓名", minWidth: 120, sortable: false},
+        { prop: "userId", label: "工号", minWidth: 80, sortable: false },
+        { prop: "name", label: "姓名", minWidth: 120, sortable: false },
         {
           prop: "sex",
           label: "性别",
           minWidth: 50,
           sortable: false,
         },
-        {prop: "mobile", label: "联系电话", minWidth: 100, sortable: false},
+        { prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
         {
           prop: "roleId",
           label: "角色",
@@ -179,13 +172,41 @@ export default {
           sortable: false,
         },
       ],
-      supportStaffUrl:''
+      supportStaffUrl: '',
+      customerList: [],
+      customerInfo: {
+        openKfName:"",
+        openKfId:"",
+      },
     };
   },
   created() {
-    this.searchLeaderFun()
+    this.searchLeaderFun();
+    this.getCustomerServiceList();
   },
   methods: {
+    //获取客服列表
+    getCustomerServiceList() {
+      this.$api.aiSupport.customerList().then((res) => {
+        if (res.code == '200') {
+          this.customerList = res.data;
+          this.$message({
+            type: 'success',
+            message: res.msg,
+          });
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
+    },
+    //
+    customerChange(val) {
+      let info = this.customerList.find(ele => ele.open_kfid == val);
+      this.customerInfo.openKfName = info.name;
+    },
     drivingupload(file, fileList) {
       let fileRaw = file.raw;
       this.qrCodeImage = window.URL.createObjectURL(fileRaw);
@@ -202,7 +223,7 @@ export default {
     },
     searchLeaderFun() {
       this.$api.user
-        .findBackListByDeptId({deptId: this.deptId})
+        .findBackListByDeptId({ deptId: this.deptId })
         .then((res) => {
           this.searchLeaderOptions = res.data;
         });
@@ -304,15 +325,14 @@ export default {
       let data = {
         wechatpicture: this.CarFrontFile.id,
         wechatPictureUrl: this.CarFrontFile.url,
-        supportStaffUrl:this.supportStaffUrl,
         userId: this.formData.userId,
         userName: this.formData.name,
+        ...this.customerInfo,
       }
       this.$api.role
         .pictureSave(data)
         .then((res) => {
           if (res.code == "200") {
-            this.supportStaffUrl = ''
             this.$message({
               message: res.msg || '操作成功',
               type: 'success'