客服管理

package-lock.json

         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/api/kefu/tencentim.js

     url: '/api/tencent/usersig', 
     method: 'get',
   })
-}
+}
+export function GetAllMembers() {
+  return request({
+    url: '/api/members/all', 
+    method: 'get',
+  })
+}
+

src/scrm_pages/contactBox/index.vue

 
                 newMsg = newMsgList[j];
                 formId = newMsg.getSession().id();
-                if (formId.indexOf("AdminKeFu")<0) {
-                    continue;
-                }else {
+                if (formId.indexOf("AdminKeFu")>-1) {
+                    
                     if (newMsg.getSession().id() == this.selToID) {//为当前聊天对象的消息
                         this.addMsg(newMsg);
                     }
                     msgList.push(newMsg.elems[0].content.text);
+                }else if(formId.indexOf("User")>-1){
+                    this.$message.success("有的新的消息，请到客服管理查看")
                 }
                 
             }

src/scrm_pages/kefu/index.vue

     <div class="position">
       <bread-crumb :crumbs='crumbs'></bread-crumb>
     </div>
-    <div class="app-container">
-        <div class="customer_plate white-bg">
-            <div class="aside">
-                <div class="customer_search clearfix">
-                <div class="super_searchbox">
-                    <span class="search_icon"></span>
-                    <input type="text" class="cus_search_input" v-model="searchname" placeholder="请输入客户名称">
-                </div>
-                </div>
-                <div class="client_list_box">
-                <div class="client_list">
-                    <ul class="users-list">
-                    <li v-for="(patient, key) in patientsMap" v-show="searchname == '' || (patient.name.indexOf(searchname)>=0)" :class="thisPatient && patient.user_id==thisPatient.user_id?'Active':''" :key="key" :id="'sessDiv_User_'+patient.user_id" class="item" :data-username="patient.name" @click="chooseThisUser(patient)">
-                        <span :id="'badgeDiv_User_'+patient.user_id" class="circle-count" style="" v-show="patient.unread_msg_count"><i class="count">{{patient.unread_msg_count}}</i></span>
-                        <figure :id="'faceImg_User_'+patient.user_id" class="session-pic"><img :src="patient.avatar"></figure>
-                        <h3 :id="'nameDiv_User_'+patient.user_id" class="nick">{{patient.name}}</h3>
-                        <!-- <span class="square-close" title="退出接待" :data-toid="'User_'+patient.user_id">×</span> -->
-                    </li>
-                    </ul>
-                </div>
-                </div>
+    <div class="app-container"  
+      v-loading="loading"
+      :element-loading-text="loadingtext">
+
+      <div class="customer_plate white-bg">
+        <div class="aside">
+          <div class="customer_search clearfix">
+            <div class="super_searchbox">
+              <span class="search_icon"></span>
+              <input type="text" class="cus_search_input" v-model="searchname" placeholder="请输入客户名称">
             </div>
+          </div>
+          <div class="client_list_box">
+            <div class="client_list">
+              <ul class="users-list">
+                <li v-for="(customer, key) in customersMap" v-show="searchname == '' || (customer.name.indexOf(searchname)>=0)" :class="thisCustomer && customer.user_id==thisCustomer.user_id?'Active':''" :key="key" :id="'sessDiv_User_'+customer.user_id" class="item" :data-username="customer.name" @click="chooseThisUser(customer)">
+                  <span :id="'badgeDiv_User_'+customer.user_id" class="circle-count" style="" v-show="customer.unread_msg_count"><i class="count">{{customer.unread_msg_count}}</i></span>
+                  <figure :id="'faceImg_User_'+customer.user_id" class="session-pic"><img :src="customer.avatar"></figure>
+                  <h3 :id="'nameDiv_User_'+customer.user_id" class="nick">{{customer.name}}</h3>
+                  <!-- <span class="square-close" title="退出接待" :data-toid="'User_'+customer.user_id">×</span> -->
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
 
-            <div class="left_content">
-                <div class="conversation-admin">
-                <span class="nickname">
-                    <span></span>
-                </span>
-                </div>
-                <div class="message-list-wrap">
-                <div class="message-list-item">
-                    <ul class="message-list">
-                    
-                    <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="message-item clearfix">
-                        <div class="time"><span v-html="messageitem.time"></span></div>
-                        <div class="user " :class="messageitem.float">
-                            <figure class="bg-pic circle-bg-pic">
-                            <div class="bg-pic-content">
-                                <img :src="messageitem.avatar">
-                            </div>
-                            </figure>
+        <div class="left_content">
+          <div class="conversation-admin">
+            <span class="nickname">
+              <span></span>
+            </span>
+          </div>
+          <div class="message-list-wrap">
+            <div class="message-list-item">
+              <ul class="message-list">
+              
+                <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="message-item clearfix">
+                    <div class="time"><span v-html="messageitem.time"></span></div>
+                    <div class="user " :class="messageitem.float">
+                      <figure class="bg-pic circle-bg-pic">
+                        <div class="bg-pic-content">
+                          <img :src="messageitem.avatar">
                         </div>
-                        <div class="message-body " :class="messageitem.float"><div class="inner" v-html="messageitem.message"></div></div>
-                    </li>
-
-                    </ul>
-                </div>
-                <div class="no_session">
-                    <span class="no_session_pic"></span>
-                    <p class="no_session_txt">没有选中会话哦！</p>
-                </div>
-                </div>
-                <div class="send_box" v-loading="loadingbox" :element-loading-text="loadingboxtext">
-                <div class="inputer_actions">
-                    <!-- <div class="face">
-                    <span class="face_icon" @click="showEmotionDialog"></span>
-                    </div> -->
-                    <div class="picture">
-                    <span class="picture_icon" @click="selectPicClick"></span>
-                    </div>
-                </div>
-                <div id="wl_faces_box" class="wl_faces_box" v-bind:style="{left:'0px', display:facesBoxDisplay}">
-                    <div class="wl_faces_content">
-                    <div class="title">
-                        <ul>
-                        <li class="title_name">常用表情</li>
-                        <li class="wl_faces_close">
-                            <span @click="facesBoxDisplay='none'">&nbsp;</span>
-                        </li>
-                        </ul>
+                      </figure>
                     </div>
-                    <div id="wl_faces_main" class="wl_faces_main">
-                        <ul id="emotionUL">
-                        <li v-for="(emotion, key) in emotionList" :key="key" @click="chooseThisFace(emotion)">
-                            <img :src="emotion.src" :id="emotion.id" alt="" style="cursor:pointer;">
-                        </li>
-                        </ul>
-                    </div>
-                    </div>
-                    <div class="wlf_icon"></div>
-                </div>
-                <div class="inputer-area">
-                    <textarea
-                    maxlength="500" v-model="message"
-                    class="message-textarea transparent-txta"
-                    placeholder
-                    id="message"
-                    ></textarea>
-                </div>
-                <div class="send_box_btn">
-                    <button class="send_btn" id="sendMessaeg" @click="sendMessage">发送</button>
+                    <div class="message-body " :class="messageitem.float"><div class="inner" v-html="messageitem.message"></div></div>
+                </li>
+
+              </ul>
+            </div>
+            <div class="no_session">
+              <span class="no_session_pic"></span>
+              <p class="no_session_txt">没有选中会话哦！</p>
+            </div>
+          </div>
+          <div class="send_box" v-loading="loadingbox" :element-loading-text="loadingboxtext">
+            <div class="inputer_actions">
+              <!-- <div class="face">
+                <span class="face_icon" @click="showEmotionDialog"></span>
+              </div> -->
+              <div class="picture">
+                <span class="picture_icon" @click="selectPicClick"></span>
+              </div>
+            </div>
+            <div id="wl_faces_box" class="wl_faces_box" v-bind:style="{left:'0px', display:facesBoxDisplay}">
+              <div class="wl_faces_content">
+                <div class="title">
+                  <ul>
+                    <li class="title_name">常用表情</li>
+                    <li class="wl_faces_close">
+                      <span @click="facesBoxDisplay='none'">&nbsp;</span>
+                    </li>
+                  </ul>
                 </div>
+                <div id="wl_faces_main" class="wl_faces_main">
+                  <ul id="emotionUL">
+                    <li v-for="(emotion, key) in emotionList" :key="key" @click="chooseThisFace(emotion)">
+                      <img :src="emotion.src" :id="emotion.id" alt="" style="cursor:pointer;">
+                    </li>
+                  </ul>
                 </div>
+              </div>
+              <div class="wlf_icon"></div>
+            </div>
+            <div class="inputer-area">
+              <textarea
+                maxlength="500" v-model="message"
+                class="message-textarea transparent-txta"
+                placeholder
+                id="message"
+              ></textarea>
             </div>
+            <div class="send_box_btn">
+              <button class="send_btn" id="sendMessaeg" @click="sendMessage">发送</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <el-dialog title="发送图片" :visible.sync="dialogPicModal">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="选择">
+            <input type="file" name="filebox" id="upd_pic" @change="fileOnChange(this)">
+
+          </el-form-item>
+          <el-form-item label="预览">
+          <img :src="dialogImageUrl"  alt="" style="width:100%">
+          </el-form-item>
+          <el-form-item label="进度">
+            <el-progress :text-inside="true" :stroke-width="18" :percentage="percentage" status="success"></el-progress>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="uploadPic">发送</el-button>
         </div>
+      </el-dialog>
+
+
     </div>
   </div>
 </template>
 
 <script>
-  import BreadCrumb from '../components/bread-crumb'
+import BreadCrumb from '../components/bread-crumb'
+import {getusersig,GetAllMembers} from "@/api/kefu/tencentim";
+
+// let webim = require('../../../static/im/sdk/sdk/webim');
+import webim from 'webim-tencent'
+// let webim = webimSDK.webim;
+let selType =  webim.SESSION_TYPE.C2C;
+let reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数
+var msgList = [];
+var getPrePageC2CHistroyMsgInfoMap = {};
+var kgetPrePageC2CHistroyMsgInfoMap = {};
+
   export default {
     name: 'commentList',
     components:{
           { path: false, name: '客服管理' },
           { path: false, name: '咨询管理' }
         ],
+        
+        imloginFlag:false,
+        customer_id:0,
         searchname:'',
-        patientsMap:{},
-        thisPatient:null,
+        facesBoxDisplay:'none',
+        emotionList:[],
+        percentage:0,
+        dialogImageUrl:'',
+        form:{name:'', region:''},
+        dialogPicModal:false,
+        loading:false,
+        loadingtext:'加载中...',
+        loadingbox:true,
+        loadingboxtext:'请选择用户',
+        selToID:'',
+        useradmin:{
+          usersig: '',
+          Indentifier: '',
+          appIDAt3rd:'',
+          IdentifierNick:'',
+          HeadURL:'',
+        },
+        loginInfo: {
+            sdkAppID: '', //用户所属应用id,必填
+            appIDAt3rd: '',
+            identifier: '', //当前用户ID,必须是否字符串类型，必填
+            accountType: '', //用户所属应用帐号类型，必填
+            userSig: '', //当前用户身份凭证，必须是字符串类型，必填
+            identifierNick: '', //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
+            headurl: '', //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
+        },
+        loginOptions:{},
+        userSigFlag:false,
+        userListFlag:false,
+        customers:[],
+        customersUnique:[],
+        customersMap:{},
+        thisCustomer:null,
+        selSess:null,
+        message:'',
         messageBox:[],
       }
     },
-    methods:{},
+    methods: {
+      
+      bindScrollHistoryEvent(axtion){
+        var msgflow = document.getElementsByClassName("message-list-item")[0];
+        var _this = this;
+        if (axtion=='init') {
+          msgflow.onscroll = function () {
+                if (msgflow.scrollTop == 0) {
+                    msgflow.scrollTop = 10;
+                    if (selType == webim.SESSION_TYPE.C2C) {
+                        _this.getPrePageC2CHistoryMsgs();
+                    } 
+                }
+            }
+        }else {
+          
+              msgflow.onscroll = null;
+        }
+      },
+      selectPicClick() {
+        this.dialogPicModal = true;
+      },  
+      chooseThisFace(face) {
+        this.message = this.message + face.id;
+        this.facesBoxDisplay='none';
+      },
+      onProgressCallBack(loadedSize, totalSize) {
+          this.percentage = (loadedSize / totalSize) * 100;
+      },
+      uploadPic(){
+        var _this = this;
+        var uploadFiles = document.getElementById('upd_pic');
+        var file = uploadFiles.files[0];
+        var businessType;//业务类型，1-发群图片，2-向好友发图片
+        if (selType != webim.SESSION_TYPE.C2C) {//向好友发图片
+          this.$message.error('不支持群聊');
+          return; 
+        } 
+        businessType = webim.UPLOAD_PIC_BUSSINESS_TYPE.C2C_MSG;
+        //封装上传图片请求
+        var opt = {
+            'file': file, //图片对象
+            'onProgressCallBack': this.onProgressCallBack, //上传图片进度条回调函数
+            //'abortButton': document.getElementById('upd_abort'), //停止上传图片按钮
+            'To_Account': this.selToID, //接收者
+            'businessType': businessType//业务类型
+        };
+        //上传图片
+        webim.uploadPic(opt,
+            function (resp) {
+                //上传成功发送图片
+                _this.sendPic(resp, file.name);
+                
+            },
+            function (err) {
+                alert(err.ErrorInfo);
+            }
+        );
+      },
+      sendPic(images, imgName) {
+        var _this = this;
+          if (!this.selToID) {
+              alert("请先选择对话用户");
+              return;
+          }
+
+          if (!this.selSess) {
+              this.selSess = new webim.Session(selType, this.selToID, this.selToID, this.thisCustomer.avatar, Math.round(new Date().getTime() / 1000));
+          }
+          var msg = new webim.Msg(this.selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
+          var images_obj = new webim.Msg.Elem.Images(images.File_UUID);
+          for (var i in images.URL_INFO) {
+              var img = images.URL_INFO[i];
+              var newImg;
+              var type;
+              switch (img.PIC_TYPE) {
+                  case 1://原图
+                      type = 1;//原图
+                      break;
+                  case 2://小图（缩略图）
+                      type = 3;//小图
+                      break;
+                  case 4://大图
+                      type = 2;//大图
+                      break;
+              }
+              newImg = new webim.Msg.Elem.Images.Image(type, img.PIC_Size, img.PIC_Width, img.PIC_Height, img.DownUrl);
+              images_obj.addImage(newImg);
+          }
+          msg.addImage(images_obj);
+          //if(imgName){
+          //    var data=imgName;//通过自定义消息中的data字段保存图片名称
+          //    var custom_obj = new webim.Msg.Elem.Custom(data, '', '');
+          //    msg.addCustom(custom_obj);
+          //}
+          //调用发送图片消息接口
+          webim.sendMsg(msg, function (resp) {
+              if (selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
+                  _this.addMsg(msg);
+              }
+          }, function (err) {
+              alert(err.ErrorInfo);
+          });
+      },
+      showEmotionDialog(){
+        this.facesBoxDisplay = 'block';
+      },
+      fileOnChange(){
+        var file = document.querySelector('input[name=filebox]').files[0]
+        if (!window.File || !window.FileList || !window.FileReader) {
+            alert("您的浏览器不支持File Api");
+            return;
+        }
+
+        var fileSize = file.size;
+
+        //先检查图片类型和大小
+        if (!this.checkPic(file, fileSize)) {
+            return;
+        }
+
+        var _this = this;
+        //预览图片
+        var reader = new FileReader();
+        reader.onload = (function (file) {
+            return function (e) {
+              _this.dialogImageUrl = this.result;
+            };
+        })(file);
+        //预览图片
+        reader.readAsDataURL(file);
+      },
+      
+      checkPic(obj, fileSize) {
+          var picExts = 'jpg|jpeg|png|bmp|gif|webp';
+          var photoExt = obj.name.substr(obj.name.lastIndexOf(".") + 1).toLowerCase();//获得文件后缀名
+          var pos = picExts.indexOf(photoExt);
+          if (pos < 0) {
+            this.$message.error('您选中的文件不是图片，请重新选择');
+              return false;
+          }
+          fileSize = Math.round(fileSize / 1024 * 100) / 100; //单位为KB
+          if (fileSize > 30 * 1024) {
+            this.$message.error('您选择的图片大小超过限制(最大为30M)，请重新选择');
+              return false;
+          }
+          return true;
+      },
+      chooseThisUser(customer) {
+        if(customer.user_id<=0) {
+          this.$message.error('选择对象还未关联用户，无法进行对话');
+          return false;
+        }
+        this.thisCustomer = customer;
+        this.selToID = "User_" + customer.user_id;
+        this.onSelSess(selType, this.selToID);
+        this.loadingbox = false;
+      },
+      sendMessage(){
+        if(this.thisCustomer == null) {
+          this.$message.error('请先选择对话用户');
+          return false;
+        }
+        var message = this.message.trim();
+        var msgLen = webim.Tool.getStrBytes(message);
+        if(message == '') {
+          this.$message.error('不能发送空消息');
+          return false;
+        }
+        var maxLen, errInfo;
+        if (selType == webim.SESSION_TYPE.C2C) {
+          maxLen = webim.MSG_MAX_LENGTH.C2C;
+          errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
+        } else {
+          maxLen = webim.MSG_MAX_LENGTH.GROUP;
+          errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
+        }
+        if (msgLen > maxLen) {
+          this.$message.error(errInfo);
+          return false;
+        }
+        this.handleMsgSend(message);
+
+      },
+      webimlogin(){
+        let _this = this;
+        let listeners = {
+          "onConnNotify": this.onConnNotify //监听连接状态回调变化事件,必填
+          ,
+          "jsonpCallback": this.jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
+          ,
+          "onMsgNotify": this.onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
+          ,
+          "onProfileSystemNotifys": this.onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
+          ,
+          "onKickedEventCall": this.onKickedEventCall //被其他登录实例踢下线
+          ,
+          "onC2cEventNotifys": this.onC2cEventNotifys //监听C2C系统消息通道
+        };
+
+        webim.login(this.loginInfo, listeners, this.loginOptions, 
+          function(resp){
+            _this.$message.success('登录成功');
+            _this.imloginFlag = true;
+          },
+          function(err) {
+            _this.$message.error('登录错误');
+          }
+        );
+      
+      },
+      onConnNotify(){},
+      jsonpCallback(){},
+      onMsgNotify(newMsgList){
+        //监听新消息事件
+        var msgList = [];
+        var dateStart = null;
+        var dateEnd = null;
+
+        //console.warn(newMsgList);
+        var sess, newMsg, formId;
+        //获取所有聊天会话
+        var sessMap = webim.MsgStore.sessMap();
+
+        for (var j in newMsgList) {//遍历新消息
+
+            newMsg = newMsgList[j];
+            formId = newMsg.getSession().id();
+            if (formId.indexOf("User")<0) {
+                continue;
+            }else {
+                // if (!this.selToID) {//没有聊天对象
+                //     this.selToID = newMsg.getSession().id();
+                //     selType = newMsg.getSession().type();
+                //     this.selSess = newMsg.getSession();
+                //     if(this.selToID in this.customersMap) {
+                //       this.thisCustomer = this.customersMap[this.selToID];
+                //     }
+                // }
+                if (newMsg.getSession().id() == this.selToID) {//为当前聊天对象的消息
+                    this.addMsg(newMsg);
+                }
+                msgList.push(newMsg.elems[0].content.text);
+            }
+
+            
+        }
+
+
+        for (var i in sessMap) {
+            sess = sessMap[i];
+            if (this.selToID != sess.id() && sess.id() in this.customersMap) {//更新其他聊天对象的未读消息数
+              var unread = sess.unread();
+              if(unread>99) {
+                unread = '99+';
+              }
+              // var custimerItem = this.customersMap[sess.id()];
+              // custimerItem.unread_msg_count = unread;
+              var thisdiv = document.getElementById('badgeDiv_'+ sess.id());
+              thisdiv.innerHTML = '<i class="count">' + unread + '</i>';
+              thisdiv.style.display = 'block';
+              this.$set(this.customersMap[sess.id()], 'unread_msg_count', unread);
+            }
+        }
+    
+      },
+      onProfileSystemNotifys(){},
+      onKickedEventCall(){},
+      onC2cEventNotifys(){},
+      initUnreadMsgCount() {
+          var sess;
+          var sessMap = webim.MsgStore.sessMap();
+          for (var i in sessMap) {
+              sess = sessMap[i];
+              if (this.selToID != sess.id() && sess.id() in this.customersMap) {//更新其他聊天对象的未读消息数
+                var unread = sess.unread();
+                if(unread>99) {
+                  unread = '99+';
+                }
+                // var custimerItem = this.customersMap[sess.id()];
+                // custimerItem.unread_msg_count = unread;
+                
+                var thisdiv = document.getElementById('badgeDiv_'+ sess.id());
+                thisdiv.innerHTML = '<i class="count">' + unread + '</i>';
+                thisdiv.style.display = 'block';
+                this.$set(this.customersMap[sess.id()], 'unread_msg_count', unread);
+                
+                // this.$set(this.customersMap, sess.id(), custimerItem);
+              }
+          }
+      },
+      getusersig() {
+        getusersig().then(response => {
+          if (response.data.state == 0) {
+            this.$message.error(response.data.msg);
+            return false;
+          } else {
+            this.useradmin = {
+              usersig: response.data.data.sig,
+              Indentifier: response.data.data.Indentifier,
+              appIDAt3rd:response.data.data.appIDAt3rd,
+              IdentifierNick:response.data.data.IdentifierNick,
+              HeadURL:response.data.data.HeadURL,
+            } 
+          
+            this.loginInfo.appIDAt3rd = this.useradmin.appIDAt3rd
+            this.loginInfo.identifier = this.useradmin.Indentifier
+            this.loginInfo.userSig = this.useradmin.usersig
+            this.loginInfo.identifierNick = this.useradmin.IdentifierNick
+            this.loginInfo.headurl = this.useradmin.HeadURL
+            this.loginInfo.sdkAppID = response.data.data.sdkAppID
+            this.loginInfo.accountType = response.data.data.accountType
+            this.userSigFlag = true;
+          }
+        });
+        this.bindWechatDialog = true
+      },
+
+      GetAllMembers(){
+        GetAllMembers().then(response=>{
+          if (response.data.state == 1) { 
+            this.customers = response.data.data.members;
+            for (const key in this.customers) {
+              var custimerItem = this.customers[key];
+              var mapKey = "User_" + custimerItem.user_id;
+              if(custimerItem.user_id==0 || mapKey in this.customersMap) {
+                continue;
+              }
+              custimerItem['sortno'] = -1;
+              custimerItem['unread_msg_count'] = '';
+              this.$set(this.customersMap, mapKey, custimerItem);
+              this.customersUnique.push(custimerItem);
+            }
+            this.userListFlag = true;
+          } else {
+
+          }
+        });
+      },
+      addMsg(msg, prepage) {
+        var messageitem = {
+          id:'',
+          message:'',
+          avatar:'',
+          time:'',
+          float:''
+        };
+        var isSelfSend, fromAccount, fromAccountNick, fromAccountImage, sessType, subType;
+
+        //webim.SESSION_TYPE.GROUP-群聊，
+        //webim.SESSION_TYPE.C2C-私聊，
+        sessType = msg.getSession().type();
+        isSelfSend = msg.getIsSend();//消息是否为自己发的
+        fromAccount = msg.getFromAccount();
+        if (!fromAccount) {
+            return;
+        }
+        if (isSelfSend) {//如果是自己发的消息
+          messageitem.avatar = this.loginInfo.headurl;
+          messageitem.float = "fr";
+        } else {
+          messageitem.avatar = this.thisCustomer.avatar;
+          messageitem.float = "fl";
+        }
+        messageitem.id = msg.random;
+        messageitem.time = webim.Tool.formatText2Html(webim.Tool.formatTimeStamp(msg.getTime()));
+        messageitem.message = this.convertMsgtoHtml(msg)
+        this.messageBox.push(messageitem);
+
+        var msgflow = document.getElementsByClassName("message-list-item")[0];
+        if (prepage) {
+            //300ms后,等待图片加载完，滚动条自动滚动到底部
+            if (msgflow.scrollTop == 0) {
+                setTimeout(function () {
+                    msgflow.scrollTop = 0;
+                }, 300);
+            }
+        } else {
+            //300ms后,等待图片加载完，滚动条自动滚动到底部
+            setTimeout(function () {
+                msgflow.scrollTop = msgflow.scrollHeight;
+            }, 300);
+        }
+
+      },
+      convertMsgtoHtml(msg) {
+          var html = "",
+              elems, elem, type, content;
+          elems = msg.getElems(); //获取消息包含的元素数组
+          var count = elems.length;
+          for (var i = 0; i < count; i++) {
+              elem = elems[i];
+              type = elem.getType();//获取元素类型
+              content = elem.getContent();//获取元素对象
+              switch (type) {
+                  case webim.MSG_ELEMENT_TYPE.TEXT:
+                      var eleHtml = this.convertTextMsgToHtml(content);
+                      //转义，防XSS
+                      html += webim.Tool.formatText2Html(eleHtml);
+                      break;
+                  case webim.MSG_ELEMENT_TYPE.FACE:
+                      html += this.convertFaceMsgToHtml(content);
+                      break;
+                  case webim.MSG_ELEMENT_TYPE.IMAGE:
+                      if (i <= count - 2) {
+                          var customMsgElem = elems[i + 1];//获取保存图片名称的自定义消息elem
+                          var imgName = customMsgElem.getContent().getData();//业务可以自定义保存字段，demo中采用data字段保存图片文件名
+                          html += this.convertImageMsgToHtml(content, imgName);
+                          i++;//下标向后移一位
+                      } else {
+                          html += this.convertImageMsgToHtml(content);
+                      }
+                      break;
+                  case webim.MSG_ELEMENT_TYPE.SOUND:
+                      html += this.convertSoundMsgToHtml(content);
+                      break;
+                  case webim.MSG_ELEMENT_TYPE.FILE:
+                      html += this.convertFileMsgToHtml(content);
+                      break;
+                  case webim.MSG_ELEMENT_TYPE.LOCATION:
+                      html += this.convertLocationMsgToHtml(content);
+                      break;
+                  case webim.MSG_ELEMENT_TYPE.CUSTOM:
+                      var eleHtml = this.convertCustomMsgToHtml(content);
+                      //转义，防XSS
+                      html += webim.Tool.formatText2Html(eleHtml);
+                      break;
+                  case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
+                      var eleHtml = this.convertGroupTipMsgToHtml(content);
+                      //转义，防XSS
+                      html += webim.Tool.formatText2Html(eleHtml);
+                      break;
+                  default:
+                      webim.Log.error('未知消息元素类型: elemType=' + type);
+                      break;
+              }
+          }
+          return html;
+      },
+      convertTextMsgToHtml(content) {
+          return content.getText();
+      },
+      //解析表情消息元素
+      convertFaceMsgToHtml(content) {
+          var faceUrl = null;
+          var data = content.getData();
+          var index = webim.EmotionDataIndexs[data];
+
+          var emotion = webim.Emotions[index];
+          if (emotion && emotion[1]) {
+              faceUrl = emotion[1];
+          }
+          if (faceUrl) {
+              return "<img src='" + faceUrl + "'/>";
+          } else {
+              return data;
+          }
+      },
+      //解析图片消息元素
+      convertImageMsgToHtml(content, imageName) {
+          var smallImage = content.getImage(webim.IMAGE_TYPE.SMALL);//小图
+          var bigImage = content.getImage(webim.IMAGE_TYPE.LARGE);//大图
+          var oriImage = content.getImage(webim.IMAGE_TYPE.ORIGIN);//原图
+          if (!bigImage) {
+              bigImage = smallImage;
+          }
+          if (!oriImage) {
+              oriImage = smallImage;
+          }
+          return "<img name='" + imageName + "' src='" + smallImage.getUrl() + "#" + bigImage.getUrl() + "#" + oriImage.getUrl() + "' style='CURSOR: hand' id='" + content.getImageId() + "' bigImgUrl='" + bigImage.getUrl() + "' />";
+      },
+      onSelSess(sess_type, to_id) {
+        var _this = this;
+        if(this.selToID != to_id) {
+          this.message = '';
+        }
+        if (sess_type == webim.SESSION_TYPE.GROUP) {
+          this.$message.error("不支持群聊");
+          return;
+        }
+        this.messageBox = [];
+        this.bindScrollHistoryEvent('reset');
+        this.getLastC2CHistoryMsgs(function (msgList) {
+            _this.getHistoryMsgCallback(msgList);
+            _this.bindScrollHistoryEvent('init');
+            //绑定滚动操作
+        }, function (err) {
+            alert(err.ErrorInfo);
+        });
+      },
+      getHistoryMsgCallback(msgList, prepage) {
+          var msg;
+          var prepage = prepage || false;
+
+          //如果是加载前几页的消息，消息体需要prepend，所以先倒排一下
+          if (prepage) {
+              msgList.reverse();
+          }
+
+          for (var j in msgList) {//遍历新消息
+              msg = msgList[j];
+              if (msg.getSession().id() == this.selToID) {//为当前聊天对象的消息
+                  this.selSess = msg.getSession();
+                  //在聊天窗体中新增一条消息
+                  this.addMsg(msg, prepage);
+                  var thisdiv = document.getElementById('badgeDiv_'+ this.selToID);
+                  thisdiv.innerHTML = '<i class="count"></i>';
+                  thisdiv.style.display = 'none';
+              }
+          }
+          //消息已读上报，并将当前会话的消息设置成自动已读
+          webim.setAutoRead(this.selSess, true, true);
+      },
+      getPrePageC2CHistoryMsgs  (cbOk, cbError) {
+        var _this = this;
+          if (selType == webim.SESSION_TYPE.GROUP) {
+            _this.$message.error("当前的聊天类型为群聊天，不能进行拉取好友历史消息操作");
+              return;
+          }
+          var tempInfo = getPrePageC2CHistroyMsgInfoMap[_this.selToID];//获取下一次拉取的c2c消息时间和消息Key
+          var lastMsgTime;
+          var msgKey;
+          if (tempInfo) {
+              lastMsgTime = tempInfo.LastMsgTime;
+              msgKey = tempInfo.MsgKey;
+          } else {
+              _this.$message.error("获取下一次拉取的c2c消息时间和消息Key为空");
+              return;
+          }
+          var options = {
+              'Peer_Account': _this.selToID, //好友帐号
+              'MaxCnt': reqMsgCount, //拉取消息条数
+              'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
+              'MsgKey': msgKey
+          };
+          webim.getC2CHistoryMsgs(
+              options,
+              function (resp) {
+                  var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
+                  if (resp.MsgList.length == 0) {
+                      webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
+                      return;
+                  }
+                  getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
+                      'LastMsgTime': resp.LastMsgTime,
+                      'MsgKey': resp.MsgKey
+                  };
+                  if (cbOk) {
+                      cbOk(resp.MsgList);
+                  } else {
+                      _this.getHistoryMsgCallback(resp.MsgList, true);
+                  }
+              },
+              cbError
+          );
+      },
+      getLastC2CHistoryMsgs (cbOk, cbError) {
+        var _this = this;
+          var lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
+          var msgKey = '';
+          var options = {
+              'Peer_Account': this.selToID, //好友帐号
+              'MaxCnt': reqMsgCount, //拉取消息条数
+              'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
+              'MsgKey': msgKey
+          };
+          this.selSess = null;
+          webim.MsgStore.delSessByTypeId(selType, this.selToID);
+
+          webim.getC2CHistoryMsgs(
+              options,
+              function (resp) {
+                  var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
+
+                  if (resp.MsgList.length == 0) {
+                      webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
+                      return;
+                  }
+                  getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
+                      'LastMsgTime': resp.LastMsgTime,
+                      'MsgKey': resp.MsgKey
+                  };
+                  
+                  if (cbOk)
+                      cbOk(resp.MsgList);
+              },
+              cbError
+          );
+      },
+      handleMsgSend(msgContent) {
+          
+          var selSess = new webim.Session(selType, this.selToID, this.selToID, this.thisCustomer.avatar, Math.round(new Date().getTime() / 1000));
+          
+          var isSend = true; //是否为自己发送
+          var seq = -1; //消息序列，-1表示sdk自动生成，用于去重
+          var random = Math.round(Math.random() * 4294967296); //消息随机数，用于去重
+          var msgTime = Math.round(new Date().getTime() / 1000); //消息时间戳
+          var subType; //消息子类型
+          if (selType == webim.SESSION_TYPE.C2C) {
+              subType = webim.C2C_MSG_SUB_TYPE.COMMON;
+          } else {
+              subType = webim.GROUP_MSG_SUB_TYPE.COMMON;
+          }
+          var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, this.loginInfo.identifier, subType, this.loginInfo.identifierNick);
+
+          var text_obj, face_obj, tmsg, emotionIndex, emotion, restMsgIndex;
+          //解析文本和表情
+          var expr = /\[[^[\]]{1,3}\]/mg;
+          var emotions = msgContent.match(expr);
+          if (!emotions || emotions.length < 1) {
+              text_obj = new webim.Msg.Elem.Text(msgContent);
+              msg.addText(text_obj);
+          } else {
+              for (var i = 0; i < emotions.length; i++) {
+                  tmsg = msgContent.substring(0, msgContent.indexOf(emotions[i]));
+                  if (tmsg) {
+                      text_obj = new webim.Msg.Elem.Text(tmsg);
+                      msg.addText(text_obj);
+                  }
+                  emotionIndex = webim.EmotionDataIndexs[emotions[i]];
+                  emotion = webim.Emotions[emotionIndex];
+
+                  if (emotion) {
+                      face_obj = new webim.Msg.Elem.Face(emotionIndex, emotions[i]);
+                      msg.addFace(face_obj);
+                  } else {
+                      text_obj = new webim.Msg.Elem.Text(emotions[i]);
+                      msg.addText(text_obj);
+                  }
+                  restMsgIndex = msgContent.indexOf(emotions[i]) + emotions[i].length;
+                  msgContent = msgContent.substring(restMsgIndex);
+              }
+              if (msgContent) {
+                  text_obj = new webim.Msg.Elem.Text(msgContent);
+                  msg.addText(text_obj);
+              }
+          }
+
+          msg.PushInfo = {
+              "PushFlag": 0,
+              "Desc": '测试离线推送内容', //离线推送内容
+              "Ext": '测试离线推送透传内容', //离线推送透传内容
+              "AndroidInfo": {
+                  "Sound": "android.mp3" //离线推送声音文件路径。
+              },
+              "ApnsInfo": {
+                  "Sound": "apns.mp3", //离线推送声音文件路径。
+                  "BadgeMode": 1
+              }
+          };
+
+          msg.PushInfoBoolean = true; //是否开启离线推送push同步
+          msg.sending = 1;
+          msg.originContent = msgContent;
+          // turnoffFaces_box();
+          var _this = this;
+
+          webim.sendMsg(msg, function (resp) {
+            _this.addMsg(msg);
+            _this.message = '';
+          }, function (err) {
+              console.log(err)
+          });
+      },
+      
+    },
+    watch:{
+      userSigFlag(newValue){
+        if(this.userSigFlag) {
+          this.webimlogin();
+        }
+      },
+      userListFlag(newValue){
+        if(this.userListFlag && this.imloginFlag) {
+          this.initUnreadMsgCount();
+        }
+
+      },
+      imloginFlag(newvalue) {
+        if(this.userListFlag && this.imloginFlag) {
+          this.initUnreadMsgCount();
+        }
+      }
+    },
     created(){
-    }
+      
+      this.GetAllMembers();
+      this.getusersig();
+
+      this.emotionList = [];
+
+      for (var index in webim.Emotions) {
+        var item = {
+          id:webim.Emotions[index][0],
+          src:webim.Emotions[index][1],
+        };
+        this.emotionList.push(item);
+      }
+
+    },
   }
 </script>
 

src/scrm_pages/members/members.vue

             }).catch(e=>{});
         },
         openSendMessage(){
-          
-          this.$message.error("功能开发中...");
-          return false;
           if (this.selectedMembers.length==0) {
-            this.$message.error("请选择要发送短信的会员");
+            this.$message.error("请选择会员");
+            return false;
+          }
+          var targets = [];
+          for (const index in this.selectedMembers) {
+            if(this.selectedMembers[index].mobile.length>0) {
+              targets.push({id:this.selectedMembers[index].id,name:this.selectedMembers[index].name,name:this.selectedMembers[index].name,mobile:this.selectedMembers[index].mobile});
+            }
+          }
+          if (targets.length==0) {
+            this.$message.error("由于所选的全部会员里，均无手机号，无法发送短信");
             return false;
           }
+            this.$store.dispatch("SMSSetTargets", targets)
+          this.$router.push({path:'/sms/send'})
           
         },
         openAddMembersTags() {