|
|
@@ -3,107 +3,141 @@
|
|
3
|
3
|
<div class="position">
|
|
4
|
4
|
<bread-crumb :crumbs='crumbs'></bread-crumb>
|
|
5
|
5
|
</div>
|
|
6
|
|
- <div class="app-container">
|
|
7
|
|
- <div class="customer_plate white-bg">
|
|
8
|
|
- <div class="aside">
|
|
9
|
|
- <div class="customer_search clearfix">
|
|
10
|
|
- <div class="super_searchbox">
|
|
11
|
|
- <span class="search_icon"></span>
|
|
12
|
|
- <input type="text" class="cus_search_input" v-model="searchname" placeholder="请输入客户名称">
|
|
13
|
|
- </div>
|
|
14
|
|
- </div>
|
|
15
|
|
- <div class="client_list_box">
|
|
16
|
|
- <div class="client_list">
|
|
17
|
|
- <ul class="users-list">
|
|
18
|
|
- <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)">
|
|
19
|
|
- <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>
|
|
20
|
|
- <figure :id="'faceImg_User_'+patient.user_id" class="session-pic"><img :src="patient.avatar"></figure>
|
|
21
|
|
- <h3 :id="'nameDiv_User_'+patient.user_id" class="nick">{{patient.name}}</h3>
|
|
22
|
|
- <!-- <span class="square-close" title="退出接待" :data-toid="'User_'+patient.user_id">×</span> -->
|
|
23
|
|
- </li>
|
|
24
|
|
- </ul>
|
|
25
|
|
- </div>
|
|
26
|
|
- </div>
|
|
|
6
|
+ <div class="app-container"
|
|
|
7
|
+ v-loading="loading"
|
|
|
8
|
+ :element-loading-text="loadingtext">
|
|
|
9
|
+
|
|
|
10
|
+ <div class="customer_plate white-bg">
|
|
|
11
|
+ <div class="aside">
|
|
|
12
|
+ <div class="customer_search clearfix">
|
|
|
13
|
+ <div class="super_searchbox">
|
|
|
14
|
+ <span class="search_icon"></span>
|
|
|
15
|
+ <input type="text" class="cus_search_input" v-model="searchname" placeholder="请输入客户名称">
|
|
27
|
16
|
</div>
|
|
|
17
|
+ </div>
|
|
|
18
|
+ <div class="client_list_box">
|
|
|
19
|
+ <div class="client_list">
|
|
|
20
|
+ <ul class="users-list">
|
|
|
21
|
+ <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)">
|
|
|
22
|
+ <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>
|
|
|
23
|
+ <figure :id="'faceImg_User_'+customer.user_id" class="session-pic"><img :src="customer.avatar"></figure>
|
|
|
24
|
+ <h3 :id="'nameDiv_User_'+customer.user_id" class="nick">{{customer.name}}</h3>
|
|
|
25
|
+ <!-- <span class="square-close" title="退出接待" :data-toid="'User_'+customer.user_id">×</span> -->
|
|
|
26
|
+ </li>
|
|
|
27
|
+ </ul>
|
|
|
28
|
+ </div>
|
|
|
29
|
+ </div>
|
|
|
30
|
+ </div>
|
|
28
|
31
|
|
|
29
|
|
- <div class="left_content">
|
|
30
|
|
- <div class="conversation-admin">
|
|
31
|
|
- <span class="nickname">
|
|
32
|
|
- <span></span>
|
|
33
|
|
- </span>
|
|
34
|
|
- </div>
|
|
35
|
|
- <div class="message-list-wrap">
|
|
36
|
|
- <div class="message-list-item">
|
|
37
|
|
- <ul class="message-list">
|
|
38
|
|
-
|
|
39
|
|
- <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="message-item clearfix">
|
|
40
|
|
- <div class="time"><span v-html="messageitem.time"></span></div>
|
|
41
|
|
- <div class="user " :class="messageitem.float">
|
|
42
|
|
- <figure class="bg-pic circle-bg-pic">
|
|
43
|
|
- <div class="bg-pic-content">
|
|
44
|
|
- <img :src="messageitem.avatar">
|
|
45
|
|
- </div>
|
|
46
|
|
- </figure>
|
|
|
32
|
+ <div class="left_content">
|
|
|
33
|
+ <div class="conversation-admin">
|
|
|
34
|
+ <span class="nickname">
|
|
|
35
|
+ <span></span>
|
|
|
36
|
+ </span>
|
|
|
37
|
+ </div>
|
|
|
38
|
+ <div class="message-list-wrap">
|
|
|
39
|
+ <div class="message-list-item">
|
|
|
40
|
+ <ul class="message-list">
|
|
|
41
|
+
|
|
|
42
|
+ <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="message-item clearfix">
|
|
|
43
|
+ <div class="time"><span v-html="messageitem.time"></span></div>
|
|
|
44
|
+ <div class="user " :class="messageitem.float">
|
|
|
45
|
+ <figure class="bg-pic circle-bg-pic">
|
|
|
46
|
+ <div class="bg-pic-content">
|
|
|
47
|
+ <img :src="messageitem.avatar">
|
|
47
|
48
|
</div>
|
|
48
|
|
- <div class="message-body " :class="messageitem.float"><div class="inner" v-html="messageitem.message"></div></div>
|
|
49
|
|
- </li>
|
|
50
|
|
-
|
|
51
|
|
- </ul>
|
|
52
|
|
- </div>
|
|
53
|
|
- <div class="no_session">
|
|
54
|
|
- <span class="no_session_pic"></span>
|
|
55
|
|
- <p class="no_session_txt">没有选中会话哦！</p>
|
|
56
|
|
- </div>
|
|
57
|
|
- </div>
|
|
58
|
|
- <div class="send_box" v-loading="loadingbox" :element-loading-text="loadingboxtext">
|
|
59
|
|
- <div class="inputer_actions">
|
|
60
|
|
- <!-- <div class="face">
|
|
61
|
|
- <span class="face_icon" @click="showEmotionDialog"></span>
|
|
62
|
|
- </div> -->
|
|
63
|
|
- <div class="picture">
|
|
64
|
|
- <span class="picture_icon" @click="selectPicClick"></span>
|
|
65
|
|
- </div>
|
|
66
|
|
- </div>
|
|
67
|
|
- <div id="wl_faces_box" class="wl_faces_box" v-bind:style="{left:'0px', display:facesBoxDisplay}">
|
|
68
|
|
- <div class="wl_faces_content">
|
|
69
|
|
- <div class="title">
|
|
70
|
|
- <ul>
|
|
71
|
|
- <li class="title_name">常用表情</li>
|
|
72
|
|
- <li class="wl_faces_close">
|
|
73
|
|
- <span @click="facesBoxDisplay='none'"> </span>
|
|
74
|
|
- </li>
|
|
75
|
|
- </ul>
|
|
|
49
|
+ </figure>
|
|
76
|
50
|
</div>
|
|
77
|
|
- <div id="wl_faces_main" class="wl_faces_main">
|
|
78
|
|
- <ul id="emotionUL">
|
|
79
|
|
- <li v-for="(emotion, key) in emotionList" :key="key" @click="chooseThisFace(emotion)">
|
|
80
|
|
- <img :src="emotion.src" :id="emotion.id" alt="" style="cursor:pointer;">
|
|
81
|
|
- </li>
|
|
82
|
|
- </ul>
|
|
83
|
|
- </div>
|
|
84
|
|
- </div>
|
|
85
|
|
- <div class="wlf_icon"></div>
|
|
86
|
|
- </div>
|
|
87
|
|
- <div class="inputer-area">
|
|
88
|
|
- <textarea
|
|
89
|
|
- maxlength="500" v-model="message"
|
|
90
|
|
- class="message-textarea transparent-txta"
|
|
91
|
|
- placeholder
|
|
92
|
|
- id="message"
|
|
93
|
|
- ></textarea>
|
|
94
|
|
- </div>
|
|
95
|
|
- <div class="send_box_btn">
|
|
96
|
|
- <button class="send_btn" id="sendMessaeg" @click="sendMessage">发送</button>
|
|
|
51
|
+ <div class="message-body " :class="messageitem.float"><div class="inner" v-html="messageitem.message"></div></div>
|
|
|
52
|
+ </li>
|
|
|
53
|
+
|
|
|
54
|
+ </ul>
|
|
|
55
|
+ </div>
|
|
|
56
|
+ <div class="no_session">
|
|
|
57
|
+ <span class="no_session_pic"></span>
|
|
|
58
|
+ <p class="no_session_txt">没有选中会话哦！</p>
|
|
|
59
|
+ </div>
|
|
|
60
|
+ </div>
|
|
|
61
|
+ <div class="send_box" v-loading="loadingbox" :element-loading-text="loadingboxtext">
|
|
|
62
|
+ <div class="inputer_actions">
|
|
|
63
|
+ <!-- <div class="face">
|
|
|
64
|
+ <span class="face_icon" @click="showEmotionDialog"></span>
|
|
|
65
|
+ </div> -->
|
|
|
66
|
+ <div class="picture">
|
|
|
67
|
+ <span class="picture_icon" @click="selectPicClick"></span>
|
|
|
68
|
+ </div>
|
|
|
69
|
+ </div>
|
|
|
70
|
+ <div id="wl_faces_box" class="wl_faces_box" v-bind:style="{left:'0px', display:facesBoxDisplay}">
|
|
|
71
|
+ <div class="wl_faces_content">
|
|
|
72
|
+ <div class="title">
|
|
|
73
|
+ <ul>
|
|
|
74
|
+ <li class="title_name">常用表情</li>
|
|
|
75
|
+ <li class="wl_faces_close">
|
|
|
76
|
+ <span @click="facesBoxDisplay='none'"> </span>
|
|
|
77
|
+ </li>
|
|
|
78
|
+ </ul>
|
|
97
|
79
|
</div>
|
|
|
80
|
+ <div id="wl_faces_main" class="wl_faces_main">
|
|
|
81
|
+ <ul id="emotionUL">
|
|
|
82
|
+ <li v-for="(emotion, key) in emotionList" :key="key" @click="chooseThisFace(emotion)">
|
|
|
83
|
+ <img :src="emotion.src" :id="emotion.id" alt="" style="cursor:pointer;">
|
|
|
84
|
+ </li>
|
|
|
85
|
+ </ul>
|
|
98
|
86
|
</div>
|
|
|
87
|
+ </div>
|
|
|
88
|
+ <div class="wlf_icon"></div>
|
|
|
89
|
+ </div>
|
|
|
90
|
+ <div class="inputer-area">
|
|
|
91
|
+ <textarea
|
|
|
92
|
+ maxlength="500" v-model="message"
|
|
|
93
|
+ class="message-textarea transparent-txta"
|
|
|
94
|
+ placeholder
|
|
|
95
|
+ id="message"
|
|
|
96
|
+ ></textarea>
|
|
99
|
97
|
</div>
|
|
|
98
|
+ <div class="send_box_btn">
|
|
|
99
|
+ <button class="send_btn" id="sendMessaeg" @click="sendMessage">发送</button>
|
|
|
100
|
+ </div>
|
|
|
101
|
+ </div>
|
|
|
102
|
+ </div>
|
|
|
103
|
+ </div>
|
|
|
104
|
+
|
|
|
105
|
+ <el-dialog title="发送图片" :visible.sync="dialogPicModal">
|
|
|
106
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
107
|
+ <el-form-item label="选择">
|
|
|
108
|
+ <input type="file" name="filebox" id="upd_pic" @change="fileOnChange(this)">
|
|
|
109
|
+
|
|
|
110
|
+ </el-form-item>
|
|
|
111
|
+ <el-form-item label="预览">
|
|
|
112
|
+ <img :src="dialogImageUrl" alt="" style="width:100%">
|
|
|
113
|
+ </el-form-item>
|
|
|
114
|
+ <el-form-item label="进度">
|
|
|
115
|
+ <el-progress :text-inside="true" :stroke-width="18" :percentage="percentage" status="success"></el-progress>
|
|
|
116
|
+ </el-form-item>
|
|
|
117
|
+ </el-form>
|
|
|
118
|
+ <div slot="footer" class="dialog-footer">
|
|
|
119
|
+ <el-button type="primary" @click="uploadPic">发送</el-button>
|
|
100
|
120
|
</div>
|
|
|
121
|
+ </el-dialog>
|
|
|
122
|
+
|
|
|
123
|
+
|
|
101
|
124
|
</div>
|
|
102
|
125
|
</div>
|
|
103
|
126
|
</template>
|
|
104
|
127
|
|
|
105
|
128
|
<script>
|
|
106
|
|
- import BreadCrumb from '../components/bread-crumb'
|
|
|
129
|
+import BreadCrumb from '../components/bread-crumb'
|
|
|
130
|
+import {getusersig,GetAllMembers} from "@/api/kefu/tencentim";
|
|
|
131
|
+
|
|
|
132
|
+// let webim = require('../../../static/im/sdk/sdk/webim');
|
|
|
133
|
+import webim from 'webim-tencent'
|
|
|
134
|
+// let webim = webimSDK.webim;
|
|
|
135
|
+let selType = webim.SESSION_TYPE.C2C;
|
|
|
136
|
+let reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数
|
|
|
137
|
+var msgList = [];
|
|
|
138
|
+var getPrePageC2CHistroyMsgInfoMap = {};
|
|
|
139
|
+var kgetPrePageC2CHistroyMsgInfoMap = {};
|
|
|
140
|
+
|
|
107
|
141
|
export default {
|
|
108
|
142
|
name: 'commentList',
|
|
109
|
143
|
components:{
|
|
|
@@ -115,15 +149,749 @@
|
|
115
|
149
|
{ path: false, name: '客服管理' },
|
|
116
|
150
|
{ path: false, name: '咨询管理' }
|
|
117
|
151
|
],
|
|
|
152
|
+
|
|
|
153
|
+ imloginFlag:false,
|
|
|
154
|
+ customer_id:0,
|
|
118
|
155
|
searchname:'',
|
|
119
|
|
- patientsMap:{},
|
|
120
|
|
- thisPatient:null,
|
|
|
156
|
+ facesBoxDisplay:'none',
|
|
|
157
|
+ emotionList:[],
|
|
|
158
|
+ percentage:0,
|
|
|
159
|
+ dialogImageUrl:'',
|
|
|
160
|
+ form:{name:'', region:''},
|
|
|
161
|
+ dialogPicModal:false,
|
|
|
162
|
+ loading:false,
|
|
|
163
|
+ loadingtext:'加载中...',
|
|
|
164
|
+ loadingbox:true,
|
|
|
165
|
+ loadingboxtext:'请选择用户',
|
|
|
166
|
+ selToID:'',
|
|
|
167
|
+ useradmin:{
|
|
|
168
|
+ usersig: '',
|
|
|
169
|
+ Indentifier: '',
|
|
|
170
|
+ appIDAt3rd:'',
|
|
|
171
|
+ IdentifierNick:'',
|
|
|
172
|
+ HeadURL:'',
|
|
|
173
|
+ },
|
|
|
174
|
+ loginInfo: {
|
|
|
175
|
+ sdkAppID: '', //用户所属应用id,必填
|
|
|
176
|
+ appIDAt3rd: '',
|
|
|
177
|
+ identifier: '', //当前用户ID,必须是否字符串类型，必填
|
|
|
178
|
+ accountType: '', //用户所属应用帐号类型，必填
|
|
|
179
|
+ userSig: '', //当前用户身份凭证，必须是字符串类型，必填
|
|
|
180
|
+ identifierNick: '', //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
|
|
|
181
|
+ headurl: '', //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
|
|
|
182
|
+ },
|
|
|
183
|
+ loginOptions:{},
|
|
|
184
|
+ userSigFlag:false,
|
|
|
185
|
+ userListFlag:false,
|
|
|
186
|
+ customers:[],
|
|
|
187
|
+ customersUnique:[],
|
|
|
188
|
+ customersMap:{},
|
|
|
189
|
+ thisCustomer:null,
|
|
|
190
|
+ selSess:null,
|
|
|
191
|
+ message:'',
|
|
121
|
192
|
messageBox:[],
|
|
122
|
193
|
}
|
|
123
|
194
|
},
|
|
124
|
|
- methods:{},
|
|
|
195
|
+ methods: {
|
|
|
196
|
+
|
|
|
197
|
+ bindScrollHistoryEvent(axtion){
|
|
|
198
|
+ var msgflow = document.getElementsByClassName("message-list-item")[0];
|
|
|
199
|
+ var _this = this;
|
|
|
200
|
+ if (axtion=='init') {
|
|
|
201
|
+ msgflow.onscroll = function () {
|
|
|
202
|
+ if (msgflow.scrollTop == 0) {
|
|
|
203
|
+ msgflow.scrollTop = 10;
|
|
|
204
|
+ if (selType == webim.SESSION_TYPE.C2C) {
|
|
|
205
|
+ _this.getPrePageC2CHistoryMsgs();
|
|
|
206
|
+ }
|
|
|
207
|
+ }
|
|
|
208
|
+ }
|
|
|
209
|
+ }else {
|
|
|
210
|
+
|
|
|
211
|
+ msgflow.onscroll = null;
|
|
|
212
|
+ }
|
|
|
213
|
+ },
|
|
|
214
|
+ selectPicClick() {
|
|
|
215
|
+ this.dialogPicModal = true;
|
|
|
216
|
+ },
|
|
|
217
|
+ chooseThisFace(face) {
|
|
|
218
|
+ this.message = this.message + face.id;
|
|
|
219
|
+ this.facesBoxDisplay='none';
|
|
|
220
|
+ },
|
|
|
221
|
+ onProgressCallBack(loadedSize, totalSize) {
|
|
|
222
|
+ this.percentage = (loadedSize / totalSize) * 100;
|
|
|
223
|
+ },
|
|
|
224
|
+ uploadPic(){
|
|
|
225
|
+ var _this = this;
|
|
|
226
|
+ var uploadFiles = document.getElementById('upd_pic');
|
|
|
227
|
+ var file = uploadFiles.files[0];
|
|
|
228
|
+ var businessType;//业务类型，1-发群图片，2-向好友发图片
|
|
|
229
|
+ if (selType != webim.SESSION_TYPE.C2C) {//向好友发图片
|
|
|
230
|
+ this.$message.error('不支持群聊');
|
|
|
231
|
+ return;
|
|
|
232
|
+ }
|
|
|
233
|
+ businessType = webim.UPLOAD_PIC_BUSSINESS_TYPE.C2C_MSG;
|
|
|
234
|
+ //封装上传图片请求
|
|
|
235
|
+ var opt = {
|
|
|
236
|
+ 'file': file, //图片对象
|
|
|
237
|
+ 'onProgressCallBack': this.onProgressCallBack, //上传图片进度条回调函数
|
|
|
238
|
+ //'abortButton': document.getElementById('upd_abort'), //停止上传图片按钮
|
|
|
239
|
+ 'To_Account': this.selToID, //接收者
|
|
|
240
|
+ 'businessType': businessType//业务类型
|
|
|
241
|
+ };
|
|
|
242
|
+ //上传图片
|
|
|
243
|
+ webim.uploadPic(opt,
|
|
|
244
|
+ function (resp) {
|
|
|
245
|
+ //上传成功发送图片
|
|
|
246
|
+ _this.sendPic(resp, file.name);
|
|
|
247
|
+
|
|
|
248
|
+ },
|
|
|
249
|
+ function (err) {
|
|
|
250
|
+ alert(err.ErrorInfo);
|
|
|
251
|
+ }
|
|
|
252
|
+ );
|
|
|
253
|
+ },
|
|
|
254
|
+ sendPic(images, imgName) {
|
|
|
255
|
+ var _this = this;
|
|
|
256
|
+ if (!this.selToID) {
|
|
|
257
|
+ alert("请先选择对话用户");
|
|
|
258
|
+ return;
|
|
|
259
|
+ }
|
|
|
260
|
+
|
|
|
261
|
+ if (!this.selSess) {
|
|
|
262
|
+ this.selSess = new webim.Session(selType, this.selToID, this.selToID, this.thisCustomer.avatar, Math.round(new Date().getTime() / 1000));
|
|
|
263
|
+ }
|
|
|
264
|
+ var msg = new webim.Msg(this.selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
|
|
|
265
|
+ var images_obj = new webim.Msg.Elem.Images(images.File_UUID);
|
|
|
266
|
+ for (var i in images.URL_INFO) {
|
|
|
267
|
+ var img = images.URL_INFO[i];
|
|
|
268
|
+ var newImg;
|
|
|
269
|
+ var type;
|
|
|
270
|
+ switch (img.PIC_TYPE) {
|
|
|
271
|
+ case 1://原图
|
|
|
272
|
+ type = 1;//原图
|
|
|
273
|
+ break;
|
|
|
274
|
+ case 2://小图（缩略图）
|
|
|
275
|
+ type = 3;//小图
|
|
|
276
|
+ break;
|
|
|
277
|
+ case 4://大图
|
|
|
278
|
+ type = 2;//大图
|
|
|
279
|
+ break;
|
|
|
280
|
+ }
|
|
|
281
|
+ newImg = new webim.Msg.Elem.Images.Image(type, img.PIC_Size, img.PIC_Width, img.PIC_Height, img.DownUrl);
|
|
|
282
|
+ images_obj.addImage(newImg);
|
|
|
283
|
+ }
|
|
|
284
|
+ msg.addImage(images_obj);
|
|
|
285
|
+ //if(imgName){
|
|
|
286
|
+ // var data=imgName;//通过自定义消息中的data字段保存图片名称
|
|
|
287
|
+ // var custom_obj = new webim.Msg.Elem.Custom(data, '', '');
|
|
|
288
|
+ // msg.addCustom(custom_obj);
|
|
|
289
|
+ //}
|
|
|
290
|
+ //调用发送图片消息接口
|
|
|
291
|
+ webim.sendMsg(msg, function (resp) {
|
|
|
292
|
+ if (selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
|
|
|
293
|
+ _this.addMsg(msg);
|
|
|
294
|
+ }
|
|
|
295
|
+ }, function (err) {
|
|
|
296
|
+ alert(err.ErrorInfo);
|
|
|
297
|
+ });
|
|
|
298
|
+ },
|
|
|
299
|
+ showEmotionDialog(){
|
|
|
300
|
+ this.facesBoxDisplay = 'block';
|
|
|
301
|
+ },
|
|
|
302
|
+ fileOnChange(){
|
|
|
303
|
+ var file = document.querySelector('input[name=filebox]').files[0]
|
|
|
304
|
+ if (!window.File || !window.FileList || !window.FileReader) {
|
|
|
305
|
+ alert("您的浏览器不支持File Api");
|
|
|
306
|
+ return;
|
|
|
307
|
+ }
|
|
|
308
|
+
|
|
|
309
|
+ var fileSize = file.size;
|
|
|
310
|
+
|
|
|
311
|
+ //先检查图片类型和大小
|
|
|
312
|
+ if (!this.checkPic(file, fileSize)) {
|
|
|
313
|
+ return;
|
|
|
314
|
+ }
|
|
|
315
|
+
|
|
|
316
|
+ var _this = this;
|
|
|
317
|
+ //预览图片
|
|
|
318
|
+ var reader = new FileReader();
|
|
|
319
|
+ reader.onload = (function (file) {
|
|
|
320
|
+ return function (e) {
|
|
|
321
|
+ _this.dialogImageUrl = this.result;
|
|
|
322
|
+ };
|
|
|
323
|
+ })(file);
|
|
|
324
|
+ //预览图片
|
|
|
325
|
+ reader.readAsDataURL(file);
|
|
|
326
|
+ },
|
|
|
327
|
+
|
|
|
328
|
+ checkPic(obj, fileSize) {
|
|
|
329
|
+ var picExts = 'jpg|jpeg|png|bmp|gif|webp';
|
|
|
330
|
+ var photoExt = obj.name.substr(obj.name.lastIndexOf(".") + 1).toLowerCase();//获得文件后缀名
|
|
|
331
|
+ var pos = picExts.indexOf(photoExt);
|
|
|
332
|
+ if (pos < 0) {
|
|
|
333
|
+ this.$message.error('您选中的文件不是图片，请重新选择');
|
|
|
334
|
+ return false;
|
|
|
335
|
+ }
|
|
|
336
|
+ fileSize = Math.round(fileSize / 1024 * 100) / 100; //单位为KB
|
|
|
337
|
+ if (fileSize > 30 * 1024) {
|
|
|
338
|
+ this.$message.error('您选择的图片大小超过限制(最大为30M)，请重新选择');
|
|
|
339
|
+ return false;
|
|
|
340
|
+ }
|
|
|
341
|
+ return true;
|
|
|
342
|
+ },
|
|
|
343
|
+ chooseThisUser(customer) {
|
|
|
344
|
+ if(customer.user_id<=0) {
|
|
|
345
|
+ this.$message.error('选择对象还未关联用户，无法进行对话');
|
|
|
346
|
+ return false;
|
|
|
347
|
+ }
|
|
|
348
|
+ this.thisCustomer = customer;
|
|
|
349
|
+ this.selToID = "User_" + customer.user_id;
|
|
|
350
|
+ this.onSelSess(selType, this.selToID);
|
|
|
351
|
+ this.loadingbox = false;
|
|
|
352
|
+ },
|
|
|
353
|
+ sendMessage(){
|
|
|
354
|
+ if(this.thisCustomer == null) {
|
|
|
355
|
+ this.$message.error('请先选择对话用户');
|
|
|
356
|
+ return false;
|
|
|
357
|
+ }
|
|
|
358
|
+ var message = this.message.trim();
|
|
|
359
|
+ var msgLen = webim.Tool.getStrBytes(message);
|
|
|
360
|
+ if(message == '') {
|
|
|
361
|
+ this.$message.error('不能发送空消息');
|
|
|
362
|
+ return false;
|
|
|
363
|
+ }
|
|
|
364
|
+ var maxLen, errInfo;
|
|
|
365
|
+ if (selType == webim.SESSION_TYPE.C2C) {
|
|
|
366
|
+ maxLen = webim.MSG_MAX_LENGTH.C2C;
|
|
|
367
|
+ errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
|
|
|
368
|
+ } else {
|
|
|
369
|
+ maxLen = webim.MSG_MAX_LENGTH.GROUP;
|
|
|
370
|
+ errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
|
|
|
371
|
+ }
|
|
|
372
|
+ if (msgLen > maxLen) {
|
|
|
373
|
+ this.$message.error(errInfo);
|
|
|
374
|
+ return false;
|
|
|
375
|
+ }
|
|
|
376
|
+ this.handleMsgSend(message);
|
|
|
377
|
+
|
|
|
378
|
+ },
|
|
|
379
|
+ webimlogin(){
|
|
|
380
|
+ let _this = this;
|
|
|
381
|
+ let listeners = {
|
|
|
382
|
+ "onConnNotify": this.onConnNotify //监听连接状态回调变化事件,必填
|
|
|
383
|
+ ,
|
|
|
384
|
+ "jsonpCallback": this.jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
|
|
|
385
|
+ ,
|
|
|
386
|
+ "onMsgNotify": this.onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
|
|
|
387
|
+ ,
|
|
|
388
|
+ "onProfileSystemNotifys": this.onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
|
|
|
389
|
+ ,
|
|
|
390
|
+ "onKickedEventCall": this.onKickedEventCall //被其他登录实例踢下线
|
|
|
391
|
+ ,
|
|
|
392
|
+ "onC2cEventNotifys": this.onC2cEventNotifys //监听C2C系统消息通道
|
|
|
393
|
+ };
|
|
|
394
|
+
|
|
|
395
|
+ webim.login(this.loginInfo, listeners, this.loginOptions,
|
|
|
396
|
+ function(resp){
|
|
|
397
|
+ _this.$message.success('登录成功');
|
|
|
398
|
+ _this.imloginFlag = true;
|
|
|
399
|
+ },
|
|
|
400
|
+ function(err) {
|
|
|
401
|
+ _this.$message.error('登录错误');
|
|
|
402
|
+ }
|
|
|
403
|
+ );
|
|
|
404
|
+
|
|
|
405
|
+ },
|
|
|
406
|
+ onConnNotify(){},
|
|
|
407
|
+ jsonpCallback(){},
|
|
|
408
|
+ onMsgNotify(newMsgList){
|
|
|
409
|
+ //监听新消息事件
|
|
|
410
|
+ var msgList = [];
|
|
|
411
|
+ var dateStart = null;
|
|
|
412
|
+ var dateEnd = null;
|
|
|
413
|
+
|
|
|
414
|
+ //console.warn(newMsgList);
|
|
|
415
|
+ var sess, newMsg, formId;
|
|
|
416
|
+ //获取所有聊天会话
|
|
|
417
|
+ var sessMap = webim.MsgStore.sessMap();
|
|
|
418
|
+
|
|
|
419
|
+ for (var j in newMsgList) {//遍历新消息
|
|
|
420
|
+
|
|
|
421
|
+ newMsg = newMsgList[j];
|
|
|
422
|
+ formId = newMsg.getSession().id();
|
|
|
423
|
+ if (formId.indexOf("User")<0) {
|
|
|
424
|
+ continue;
|
|
|
425
|
+ }else {
|
|
|
426
|
+ // if (!this.selToID) {//没有聊天对象
|
|
|
427
|
+ // this.selToID = newMsg.getSession().id();
|
|
|
428
|
+ // selType = newMsg.getSession().type();
|
|
|
429
|
+ // this.selSess = newMsg.getSession();
|
|
|
430
|
+ // if(this.selToID in this.customersMap) {
|
|
|
431
|
+ // this.thisCustomer = this.customersMap[this.selToID];
|
|
|
432
|
+ // }
|
|
|
433
|
+ // }
|
|
|
434
|
+ if (newMsg.getSession().id() == this.selToID) {//为当前聊天对象的消息
|
|
|
435
|
+ this.addMsg(newMsg);
|
|
|
436
|
+ }
|
|
|
437
|
+ msgList.push(newMsg.elems[0].content.text);
|
|
|
438
|
+ }
|
|
|
439
|
+
|
|
|
440
|
+
|
|
|
441
|
+ }
|
|
|
442
|
+
|
|
|
443
|
+
|
|
|
444
|
+ for (var i in sessMap) {
|
|
|
445
|
+ sess = sessMap[i];
|
|
|
446
|
+ if (this.selToID != sess.id() && sess.id() in this.customersMap) {//更新其他聊天对象的未读消息数
|
|
|
447
|
+ var unread = sess.unread();
|
|
|
448
|
+ if(unread>99) {
|
|
|
449
|
+ unread = '99+';
|
|
|
450
|
+ }
|
|
|
451
|
+ // var custimerItem = this.customersMap[sess.id()];
|
|
|
452
|
+ // custimerItem.unread_msg_count = unread;
|
|
|
453
|
+ var thisdiv = document.getElementById('badgeDiv_'+ sess.id());
|
|
|
454
|
+ thisdiv.innerHTML = '<i class="count">' + unread + '</i>';
|
|
|
455
|
+ thisdiv.style.display = 'block';
|
|
|
456
|
+ this.$set(this.customersMap[sess.id()], 'unread_msg_count', unread);
|
|
|
457
|
+ }
|
|
|
458
|
+ }
|
|
|
459
|
+
|
|
|
460
|
+ },
|
|
|
461
|
+ onProfileSystemNotifys(){},
|
|
|
462
|
+ onKickedEventCall(){},
|
|
|
463
|
+ onC2cEventNotifys(){},
|
|
|
464
|
+ initUnreadMsgCount() {
|
|
|
465
|
+ var sess;
|
|
|
466
|
+ var sessMap = webim.MsgStore.sessMap();
|
|
|
467
|
+ for (var i in sessMap) {
|
|
|
468
|
+ sess = sessMap[i];
|
|
|
469
|
+ if (this.selToID != sess.id() && sess.id() in this.customersMap) {//更新其他聊天对象的未读消息数
|
|
|
470
|
+ var unread = sess.unread();
|
|
|
471
|
+ if(unread>99) {
|
|
|
472
|
+ unread = '99+';
|
|
|
473
|
+ }
|
|
|
474
|
+ // var custimerItem = this.customersMap[sess.id()];
|
|
|
475
|
+ // custimerItem.unread_msg_count = unread;
|
|
|
476
|
+
|
|
|
477
|
+ var thisdiv = document.getElementById('badgeDiv_'+ sess.id());
|
|
|
478
|
+ thisdiv.innerHTML = '<i class="count">' + unread + '</i>';
|
|
|
479
|
+ thisdiv.style.display = 'block';
|
|
|
480
|
+ this.$set(this.customersMap[sess.id()], 'unread_msg_count', unread);
|
|
|
481
|
+
|
|
|
482
|
+ // this.$set(this.customersMap, sess.id(), custimerItem);
|
|
|
483
|
+ }
|
|
|
484
|
+ }
|
|
|
485
|
+ },
|
|
|
486
|
+ getusersig() {
|
|
|
487
|
+ getusersig().then(response => {
|
|
|
488
|
+ if (response.data.state == 0) {
|
|
|
489
|
+ this.$message.error(response.data.msg);
|
|
|
490
|
+ return false;
|
|
|
491
|
+ } else {
|
|
|
492
|
+ this.useradmin = {
|
|
|
493
|
+ usersig: response.data.data.sig,
|
|
|
494
|
+ Indentifier: response.data.data.Indentifier,
|
|
|
495
|
+ appIDAt3rd:response.data.data.appIDAt3rd,
|
|
|
496
|
+ IdentifierNick:response.data.data.IdentifierNick,
|
|
|
497
|
+ HeadURL:response.data.data.HeadURL,
|
|
|
498
|
+ }
|
|
|
499
|
+
|
|
|
500
|
+ this.loginInfo.appIDAt3rd = this.useradmin.appIDAt3rd
|
|
|
501
|
+ this.loginInfo.identifier = this.useradmin.Indentifier
|
|
|
502
|
+ this.loginInfo.userSig = this.useradmin.usersig
|
|
|
503
|
+ this.loginInfo.identifierNick = this.useradmin.IdentifierNick
|
|
|
504
|
+ this.loginInfo.headurl = this.useradmin.HeadURL
|
|
|
505
|
+ this.loginInfo.sdkAppID = response.data.data.sdkAppID
|
|
|
506
|
+ this.loginInfo.accountType = response.data.data.accountType
|
|
|
507
|
+ this.userSigFlag = true;
|
|
|
508
|
+ }
|
|
|
509
|
+ });
|
|
|
510
|
+ this.bindWechatDialog = true
|
|
|
511
|
+ },
|
|
|
512
|
+
|
|
|
513
|
+ GetAllMembers(){
|
|
|
514
|
+ GetAllMembers().then(response=>{
|
|
|
515
|
+ if (response.data.state == 1) {
|
|
|
516
|
+ this.customers = response.data.data.members;
|
|
|
517
|
+ for (const key in this.customers) {
|
|
|
518
|
+ var custimerItem = this.customers[key];
|
|
|
519
|
+ var mapKey = "User_" + custimerItem.user_id;
|
|
|
520
|
+ if(custimerItem.user_id==0 || mapKey in this.customersMap) {
|
|
|
521
|
+ continue;
|
|
|
522
|
+ }
|
|
|
523
|
+ custimerItem['sortno'] = -1;
|
|
|
524
|
+ custimerItem['unread_msg_count'] = '';
|
|
|
525
|
+ this.$set(this.customersMap, mapKey, custimerItem);
|
|
|
526
|
+ this.customersUnique.push(custimerItem);
|
|
|
527
|
+ }
|
|
|
528
|
+ this.userListFlag = true;
|
|
|
529
|
+ } else {
|
|
|
530
|
+
|
|
|
531
|
+ }
|
|
|
532
|
+ });
|
|
|
533
|
+ },
|
|
|
534
|
+ addMsg(msg, prepage) {
|
|
|
535
|
+ var messageitem = {
|
|
|
536
|
+ id:'',
|
|
|
537
|
+ message:'',
|
|
|
538
|
+ avatar:'',
|
|
|
539
|
+ time:'',
|
|
|
540
|
+ float:''
|
|
|
541
|
+ };
|
|
|
542
|
+ var isSelfSend, fromAccount, fromAccountNick, fromAccountImage, sessType, subType;
|
|
|
543
|
+
|
|
|
544
|
+ //webim.SESSION_TYPE.GROUP-群聊，
|
|
|
545
|
+ //webim.SESSION_TYPE.C2C-私聊，
|
|
|
546
|
+ sessType = msg.getSession().type();
|
|
|
547
|
+ isSelfSend = msg.getIsSend();//消息是否为自己发的
|
|
|
548
|
+ fromAccount = msg.getFromAccount();
|
|
|
549
|
+ if (!fromAccount) {
|
|
|
550
|
+ return;
|
|
|
551
|
+ }
|
|
|
552
|
+ if (isSelfSend) {//如果是自己发的消息
|
|
|
553
|
+ messageitem.avatar = this.loginInfo.headurl;
|
|
|
554
|
+ messageitem.float = "fr";
|
|
|
555
|
+ } else {
|
|
|
556
|
+ messageitem.avatar = this.thisCustomer.avatar;
|
|
|
557
|
+ messageitem.float = "fl";
|
|
|
558
|
+ }
|
|
|
559
|
+ messageitem.id = msg.random;
|
|
|
560
|
+ messageitem.time = webim.Tool.formatText2Html(webim.Tool.formatTimeStamp(msg.getTime()));
|
|
|
561
|
+ messageitem.message = this.convertMsgtoHtml(msg)
|
|
|
562
|
+ this.messageBox.push(messageitem);
|
|
|
563
|
+
|
|
|
564
|
+ var msgflow = document.getElementsByClassName("message-list-item")[0];
|
|
|
565
|
+ if (prepage) {
|
|
|
566
|
+ //300ms后,等待图片加载完，滚动条自动滚动到底部
|
|
|
567
|
+ if (msgflow.scrollTop == 0) {
|
|
|
568
|
+ setTimeout(function () {
|
|
|
569
|
+ msgflow.scrollTop = 0;
|
|
|
570
|
+ }, 300);
|
|
|
571
|
+ }
|
|
|
572
|
+ } else {
|
|
|
573
|
+ //300ms后,等待图片加载完，滚动条自动滚动到底部
|
|
|
574
|
+ setTimeout(function () {
|
|
|
575
|
+ msgflow.scrollTop = msgflow.scrollHeight;
|
|
|
576
|
+ }, 300);
|
|
|
577
|
+ }
|
|
|
578
|
+
|
|
|
579
|
+ },
|
|
|
580
|
+ convertMsgtoHtml(msg) {
|
|
|
581
|
+ var html = "",
|
|
|
582
|
+ elems, elem, type, content;
|
|
|
583
|
+ elems = msg.getElems(); //获取消息包含的元素数组
|
|
|
584
|
+ var count = elems.length;
|
|
|
585
|
+ for (var i = 0; i < count; i++) {
|
|
|
586
|
+ elem = elems[i];
|
|
|
587
|
+ type = elem.getType();//获取元素类型
|
|
|
588
|
+ content = elem.getContent();//获取元素对象
|
|
|
589
|
+ switch (type) {
|
|
|
590
|
+ case webim.MSG_ELEMENT_TYPE.TEXT:
|
|
|
591
|
+ var eleHtml = this.convertTextMsgToHtml(content);
|
|
|
592
|
+ //转义，防XSS
|
|
|
593
|
+ html += webim.Tool.formatText2Html(eleHtml);
|
|
|
594
|
+ break;
|
|
|
595
|
+ case webim.MSG_ELEMENT_TYPE.FACE:
|
|
|
596
|
+ html += this.convertFaceMsgToHtml(content);
|
|
|
597
|
+ break;
|
|
|
598
|
+ case webim.MSG_ELEMENT_TYPE.IMAGE:
|
|
|
599
|
+ if (i <= count - 2) {
|
|
|
600
|
+ var customMsgElem = elems[i + 1];//获取保存图片名称的自定义消息elem
|
|
|
601
|
+ var imgName = customMsgElem.getContent().getData();//业务可以自定义保存字段，demo中采用data字段保存图片文件名
|
|
|
602
|
+ html += this.convertImageMsgToHtml(content, imgName);
|
|
|
603
|
+ i++;//下标向后移一位
|
|
|
604
|
+ } else {
|
|
|
605
|
+ html += this.convertImageMsgToHtml(content);
|
|
|
606
|
+ }
|
|
|
607
|
+ break;
|
|
|
608
|
+ case webim.MSG_ELEMENT_TYPE.SOUND:
|
|
|
609
|
+ html += this.convertSoundMsgToHtml(content);
|
|
|
610
|
+ break;
|
|
|
611
|
+ case webim.MSG_ELEMENT_TYPE.FILE:
|
|
|
612
|
+ html += this.convertFileMsgToHtml(content);
|
|
|
613
|
+ break;
|
|
|
614
|
+ case webim.MSG_ELEMENT_TYPE.LOCATION:
|
|
|
615
|
+ html += this.convertLocationMsgToHtml(content);
|
|
|
616
|
+ break;
|
|
|
617
|
+ case webim.MSG_ELEMENT_TYPE.CUSTOM:
|
|
|
618
|
+ var eleHtml = this.convertCustomMsgToHtml(content);
|
|
|
619
|
+ //转义，防XSS
|
|
|
620
|
+ html += webim.Tool.formatText2Html(eleHtml);
|
|
|
621
|
+ break;
|
|
|
622
|
+ case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
|
|
|
623
|
+ var eleHtml = this.convertGroupTipMsgToHtml(content);
|
|
|
624
|
+ //转义，防XSS
|
|
|
625
|
+ html += webim.Tool.formatText2Html(eleHtml);
|
|
|
626
|
+ break;
|
|
|
627
|
+ default:
|
|
|
628
|
+ webim.Log.error('未知消息元素类型: elemType=' + type);
|
|
|
629
|
+ break;
|
|
|
630
|
+ }
|
|
|
631
|
+ }
|
|
|
632
|
+ return html;
|
|
|
633
|
+ },
|
|
|
634
|
+ convertTextMsgToHtml(content) {
|
|
|
635
|
+ return content.getText();
|
|
|
636
|
+ },
|
|
|
637
|
+ //解析表情消息元素
|
|
|
638
|
+ convertFaceMsgToHtml(content) {
|
|
|
639
|
+ var faceUrl = null;
|
|
|
640
|
+ var data = content.getData();
|
|
|
641
|
+ var index = webim.EmotionDataIndexs[data];
|
|
|
642
|
+
|
|
|
643
|
+ var emotion = webim.Emotions[index];
|
|
|
644
|
+ if (emotion && emotion[1]) {
|
|
|
645
|
+ faceUrl = emotion[1];
|
|
|
646
|
+ }
|
|
|
647
|
+ if (faceUrl) {
|
|
|
648
|
+ return "<img src='" + faceUrl + "'/>";
|
|
|
649
|
+ } else {
|
|
|
650
|
+ return data;
|
|
|
651
|
+ }
|
|
|
652
|
+ },
|
|
|
653
|
+ //解析图片消息元素
|
|
|
654
|
+ convertImageMsgToHtml(content, imageName) {
|
|
|
655
|
+ var smallImage = content.getImage(webim.IMAGE_TYPE.SMALL);//小图
|
|
|
656
|
+ var bigImage = content.getImage(webim.IMAGE_TYPE.LARGE);//大图
|
|
|
657
|
+ var oriImage = content.getImage(webim.IMAGE_TYPE.ORIGIN);//原图
|
|
|
658
|
+ if (!bigImage) {
|
|
|
659
|
+ bigImage = smallImage;
|
|
|
660
|
+ }
|
|
|
661
|
+ if (!oriImage) {
|
|
|
662
|
+ oriImage = smallImage;
|
|
|
663
|
+ }
|
|
|
664
|
+ return "<img name='" + imageName + "' src='" + smallImage.getUrl() + "#" + bigImage.getUrl() + "#" + oriImage.getUrl() + "' style='CURSOR: hand' id='" + content.getImageId() + "' bigImgUrl='" + bigImage.getUrl() + "' />";
|
|
|
665
|
+ },
|
|
|
666
|
+ onSelSess(sess_type, to_id) {
|
|
|
667
|
+ var _this = this;
|
|
|
668
|
+ if(this.selToID != to_id) {
|
|
|
669
|
+ this.message = '';
|
|
|
670
|
+ }
|
|
|
671
|
+ if (sess_type == webim.SESSION_TYPE.GROUP) {
|
|
|
672
|
+ this.$message.error("不支持群聊");
|
|
|
673
|
+ return;
|
|
|
674
|
+ }
|
|
|
675
|
+ this.messageBox = [];
|
|
|
676
|
+ this.bindScrollHistoryEvent('reset');
|
|
|
677
|
+ this.getLastC2CHistoryMsgs(function (msgList) {
|
|
|
678
|
+ _this.getHistoryMsgCallback(msgList);
|
|
|
679
|
+ _this.bindScrollHistoryEvent('init');
|
|
|
680
|
+ //绑定滚动操作
|
|
|
681
|
+ }, function (err) {
|
|
|
682
|
+ alert(err.ErrorInfo);
|
|
|
683
|
+ });
|
|
|
684
|
+ },
|
|
|
685
|
+ getHistoryMsgCallback(msgList, prepage) {
|
|
|
686
|
+ var msg;
|
|
|
687
|
+ var prepage = prepage || false;
|
|
|
688
|
+
|
|
|
689
|
+ //如果是加载前几页的消息，消息体需要prepend，所以先倒排一下
|
|
|
690
|
+ if (prepage) {
|
|
|
691
|
+ msgList.reverse();
|
|
|
692
|
+ }
|
|
|
693
|
+
|
|
|
694
|
+ for (var j in msgList) {//遍历新消息
|
|
|
695
|
+ msg = msgList[j];
|
|
|
696
|
+ if (msg.getSession().id() == this.selToID) {//为当前聊天对象的消息
|
|
|
697
|
+ this.selSess = msg.getSession();
|
|
|
698
|
+ //在聊天窗体中新增一条消息
|
|
|
699
|
+ this.addMsg(msg, prepage);
|
|
|
700
|
+ var thisdiv = document.getElementById('badgeDiv_'+ this.selToID);
|
|
|
701
|
+ thisdiv.innerHTML = '<i class="count"></i>';
|
|
|
702
|
+ thisdiv.style.display = 'none';
|
|
|
703
|
+ }
|
|
|
704
|
+ }
|
|
|
705
|
+ //消息已读上报，并将当前会话的消息设置成自动已读
|
|
|
706
|
+ webim.setAutoRead(this.selSess, true, true);
|
|
|
707
|
+ },
|
|
|
708
|
+ getPrePageC2CHistoryMsgs (cbOk, cbError) {
|
|
|
709
|
+ var _this = this;
|
|
|
710
|
+ if (selType == webim.SESSION_TYPE.GROUP) {
|
|
|
711
|
+ _this.$message.error("当前的聊天类型为群聊天，不能进行拉取好友历史消息操作");
|
|
|
712
|
+ return;
|
|
|
713
|
+ }
|
|
|
714
|
+ var tempInfo = getPrePageC2CHistroyMsgInfoMap[_this.selToID];//获取下一次拉取的c2c消息时间和消息Key
|
|
|
715
|
+ var lastMsgTime;
|
|
|
716
|
+ var msgKey;
|
|
|
717
|
+ if (tempInfo) {
|
|
|
718
|
+ lastMsgTime = tempInfo.LastMsgTime;
|
|
|
719
|
+ msgKey = tempInfo.MsgKey;
|
|
|
720
|
+ } else {
|
|
|
721
|
+ _this.$message.error("获取下一次拉取的c2c消息时间和消息Key为空");
|
|
|
722
|
+ return;
|
|
|
723
|
+ }
|
|
|
724
|
+ var options = {
|
|
|
725
|
+ 'Peer_Account': _this.selToID, //好友帐号
|
|
|
726
|
+ 'MaxCnt': reqMsgCount, //拉取消息条数
|
|
|
727
|
+ 'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
|
|
|
728
|
+ 'MsgKey': msgKey
|
|
|
729
|
+ };
|
|
|
730
|
+ webim.getC2CHistoryMsgs(
|
|
|
731
|
+ options,
|
|
|
732
|
+ function (resp) {
|
|
|
733
|
+ var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
|
|
|
734
|
+ if (resp.MsgList.length == 0) {
|
|
|
735
|
+ webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
|
|
|
736
|
+ return;
|
|
|
737
|
+ }
|
|
|
738
|
+ getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
|
|
|
739
|
+ 'LastMsgTime': resp.LastMsgTime,
|
|
|
740
|
+ 'MsgKey': resp.MsgKey
|
|
|
741
|
+ };
|
|
|
742
|
+ if (cbOk) {
|
|
|
743
|
+ cbOk(resp.MsgList);
|
|
|
744
|
+ } else {
|
|
|
745
|
+ _this.getHistoryMsgCallback(resp.MsgList, true);
|
|
|
746
|
+ }
|
|
|
747
|
+ },
|
|
|
748
|
+ cbError
|
|
|
749
|
+ );
|
|
|
750
|
+ },
|
|
|
751
|
+ getLastC2CHistoryMsgs (cbOk, cbError) {
|
|
|
752
|
+ var _this = this;
|
|
|
753
|
+ var lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
|
|
|
754
|
+ var msgKey = '';
|
|
|
755
|
+ var options = {
|
|
|
756
|
+ 'Peer_Account': this.selToID, //好友帐号
|
|
|
757
|
+ 'MaxCnt': reqMsgCount, //拉取消息条数
|
|
|
758
|
+ 'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
|
|
|
759
|
+ 'MsgKey': msgKey
|
|
|
760
|
+ };
|
|
|
761
|
+ this.selSess = null;
|
|
|
762
|
+ webim.MsgStore.delSessByTypeId(selType, this.selToID);
|
|
|
763
|
+
|
|
|
764
|
+ webim.getC2CHistoryMsgs(
|
|
|
765
|
+ options,
|
|
|
766
|
+ function (resp) {
|
|
|
767
|
+ var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
|
|
|
768
|
+
|
|
|
769
|
+ if (resp.MsgList.length == 0) {
|
|
|
770
|
+ webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
|
|
|
771
|
+ return;
|
|
|
772
|
+ }
|
|
|
773
|
+ getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
|
|
|
774
|
+ 'LastMsgTime': resp.LastMsgTime,
|
|
|
775
|
+ 'MsgKey': resp.MsgKey
|
|
|
776
|
+ };
|
|
|
777
|
+
|
|
|
778
|
+ if (cbOk)
|
|
|
779
|
+ cbOk(resp.MsgList);
|
|
|
780
|
+ },
|
|
|
781
|
+ cbError
|
|
|
782
|
+ );
|
|
|
783
|
+ },
|
|
|
784
|
+ handleMsgSend(msgContent) {
|
|
|
785
|
+
|
|
|
786
|
+ var selSess = new webim.Session(selType, this.selToID, this.selToID, this.thisCustomer.avatar, Math.round(new Date().getTime() / 1000));
|
|
|
787
|
+
|
|
|
788
|
+ var isSend = true; //是否为自己发送
|
|
|
789
|
+ var seq = -1; //消息序列，-1表示sdk自动生成，用于去重
|
|
|
790
|
+ var random = Math.round(Math.random() * 4294967296); //消息随机数，用于去重
|
|
|
791
|
+ var msgTime = Math.round(new Date().getTime() / 1000); //消息时间戳
|
|
|
792
|
+ var subType; //消息子类型
|
|
|
793
|
+ if (selType == webim.SESSION_TYPE.C2C) {
|
|
|
794
|
+ subType = webim.C2C_MSG_SUB_TYPE.COMMON;
|
|
|
795
|
+ } else {
|
|
|
796
|
+ subType = webim.GROUP_MSG_SUB_TYPE.COMMON;
|
|
|
797
|
+ }
|
|
|
798
|
+ var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, this.loginInfo.identifier, subType, this.loginInfo.identifierNick);
|
|
|
799
|
+
|
|
|
800
|
+ var text_obj, face_obj, tmsg, emotionIndex, emotion, restMsgIndex;
|
|
|
801
|
+ //解析文本和表情
|
|
|
802
|
+ var expr = /\[[^[\]]{1,3}\]/mg;
|
|
|
803
|
+ var emotions = msgContent.match(expr);
|
|
|
804
|
+ if (!emotions || emotions.length < 1) {
|
|
|
805
|
+ text_obj = new webim.Msg.Elem.Text(msgContent);
|
|
|
806
|
+ msg.addText(text_obj);
|
|
|
807
|
+ } else {
|
|
|
808
|
+ for (var i = 0; i < emotions.length; i++) {
|
|
|
809
|
+ tmsg = msgContent.substring(0, msgContent.indexOf(emotions[i]));
|
|
|
810
|
+ if (tmsg) {
|
|
|
811
|
+ text_obj = new webim.Msg.Elem.Text(tmsg);
|
|
|
812
|
+ msg.addText(text_obj);
|
|
|
813
|
+ }
|
|
|
814
|
+ emotionIndex = webim.EmotionDataIndexs[emotions[i]];
|
|
|
815
|
+ emotion = webim.Emotions[emotionIndex];
|
|
|
816
|
+
|
|
|
817
|
+ if (emotion) {
|
|
|
818
|
+ face_obj = new webim.Msg.Elem.Face(emotionIndex, emotions[i]);
|
|
|
819
|
+ msg.addFace(face_obj);
|
|
|
820
|
+ } else {
|
|
|
821
|
+ text_obj = new webim.Msg.Elem.Text(emotions[i]);
|
|
|
822
|
+ msg.addText(text_obj);
|
|
|
823
|
+ }
|
|
|
824
|
+ restMsgIndex = msgContent.indexOf(emotions[i]) + emotions[i].length;
|
|
|
825
|
+ msgContent = msgContent.substring(restMsgIndex);
|
|
|
826
|
+ }
|
|
|
827
|
+ if (msgContent) {
|
|
|
828
|
+ text_obj = new webim.Msg.Elem.Text(msgContent);
|
|
|
829
|
+ msg.addText(text_obj);
|
|
|
830
|
+ }
|
|
|
831
|
+ }
|
|
|
832
|
+
|
|
|
833
|
+ msg.PushInfo = {
|
|
|
834
|
+ "PushFlag": 0,
|
|
|
835
|
+ "Desc": '测试离线推送内容', //离线推送内容
|
|
|
836
|
+ "Ext": '测试离线推送透传内容', //离线推送透传内容
|
|
|
837
|
+ "AndroidInfo": {
|
|
|
838
|
+ "Sound": "android.mp3" //离线推送声音文件路径。
|
|
|
839
|
+ },
|
|
|
840
|
+ "ApnsInfo": {
|
|
|
841
|
+ "Sound": "apns.mp3", //离线推送声音文件路径。
|
|
|
842
|
+ "BadgeMode": 1
|
|
|
843
|
+ }
|
|
|
844
|
+ };
|
|
|
845
|
+
|
|
|
846
|
+ msg.PushInfoBoolean = true; //是否开启离线推送push同步
|
|
|
847
|
+ msg.sending = 1;
|
|
|
848
|
+ msg.originContent = msgContent;
|
|
|
849
|
+ // turnoffFaces_box();
|
|
|
850
|
+ var _this = this;
|
|
|
851
|
+
|
|
|
852
|
+ webim.sendMsg(msg, function (resp) {
|
|
|
853
|
+ _this.addMsg(msg);
|
|
|
854
|
+ _this.message = '';
|
|
|
855
|
+ }, function (err) {
|
|
|
856
|
+ console.log(err)
|
|
|
857
|
+ });
|
|
|
858
|
+ },
|
|
|
859
|
+
|
|
|
860
|
+ },
|
|
|
861
|
+ watch:{
|
|
|
862
|
+ userSigFlag(newValue){
|
|
|
863
|
+ if(this.userSigFlag) {
|
|
|
864
|
+ this.webimlogin();
|
|
|
865
|
+ }
|
|
|
866
|
+ },
|
|
|
867
|
+ userListFlag(newValue){
|
|
|
868
|
+ if(this.userListFlag && this.imloginFlag) {
|
|
|
869
|
+ this.initUnreadMsgCount();
|
|
|
870
|
+ }
|
|
|
871
|
+
|
|
|
872
|
+ },
|
|
|
873
|
+ imloginFlag(newvalue) {
|
|
|
874
|
+ if(this.userListFlag && this.imloginFlag) {
|
|
|
875
|
+ this.initUnreadMsgCount();
|
|
|
876
|
+ }
|
|
|
877
|
+ }
|
|
|
878
|
+ },
|
|
125
|
879
|
created(){
|
|
126
|
|
- }
|
|
|
880
|
+
|
|
|
881
|
+ this.GetAllMembers();
|
|
|
882
|
+ this.getusersig();
|
|
|
883
|
+
|
|
|
884
|
+ this.emotionList = [];
|
|
|
885
|
+
|
|
|
886
|
+ for (var index in webim.Emotions) {
|
|
|
887
|
+ var item = {
|
|
|
888
|
+ id:webim.Emotions[index][0],
|
|
|
889
|
+ src:webim.Emotions[index][1],
|
|
|
890
|
+ };
|
|
|
891
|
+ this.emotionList.push(item);
|
|
|
892
|
+ }
|
|
|
893
|
+
|
|
|
894
|
+ },
|
|
127
|
895
|
}
|
|
128
|
896
|
</script>
|
|
129
|
897
|
|
X5YuLiang