客服记录加载更多

src/components/scCustomer/index.vue

@@ -58,6 +58,7 @@ export default {
 		return{
 			customerShow:false,
 			params:{
+				client:2,
 				type:"",
 				to_user_id:"",
 				to_message:"",

src/views/service/components/recordsList.vue

@@ -22,7 +22,7 @@
 						<div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
 							<div v-for="(em,ind) in item.to_message_list" :key="ind">
 								<span v-if="em.extension === 'png' || em.extension === 'jpg' || em.extension === 'gif' || em.extension === 'jpeg'">
-									<el-image style="max-width: 140px;max-height: 140px;border-radius: 4px;" fit="cover" :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
+									<el-image style="max-width: 140px;max-height: 140px;border-radius: 4px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
 								</span>
 								<span class="fileView" v-else>
 									<fileType size="30px" :fileType="em.extension" />

src/views/service/infoQuery.vue

@@ -15,7 +15,11 @@
 									</div>
 									<div class="viewRight">
 										<div class="title">{{item.from_user && item.from_user.name==""?'匿名':item.from_user && item.from_user.name}}</div>
-										<div class="msg">{{item.to_message}}</div>
+										<div class="msg" v-if="item.to_message.send_message_type === 1">{{item.to_message.to_message}}</div>
+										<div class="msg" v-if="item.to_message.send_message_type === 2">
+											未命名
+<!--											{{item.to_message_list[0].client_file_name?item.to_message_list[0].client_file_name:'未命名'}}-->
+										</div>
 									</div>
 								</div>
 							</div>
@@ -47,8 +51,8 @@
 									</div>
 									<div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
 										<div :class="user_id != item.to_user_id?'fileRightItem':''" v-for="(em,ind) in item.to_message_list" :key="ind">
-											<span v-if="em.extension === 'png' || em.extension === 'jpg' || em.extension === 'gif' || em.extension === 'jpeg'">
+											<span v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
-												<el-image style="max-width: 280px;max-height: 240px;" fit="cover" :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
+												<el-image style="max-width: 280px;max-height: 240px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
 											</span>
 											<span class="fileView" v-else @click="linkFile(em)">
 												<fileType size="26px" :fileType="em.extension || em.file_type" />
@@ -135,8 +139,11 @@ export default {
 			msgList:[],
 			user_id:0,
 			to_user_id:0,
+			page:1,
+			pageSize:1,
 
 			params:{
+				client:1,      // 1 管理后台 2 客服端
 				to_user_id:"",
 				to_message:"",
 			},
@@ -154,9 +161,10 @@ export default {
 		const userInfo = this.$TOOL.data.get("USER_INFO");
 		this.user_id = userInfo.id;
 
+
+
 		setTimeout(()=>{
 			this.getContactList();
-
 		},1000)
 		// 获取新消息
 		eventBus.$on('sockBack', this.getWsResult);
@@ -171,12 +179,23 @@ export default {
 								item.to_message_list = JSON.parse(item.to_message);
 							}
 						})
-						this.msgList = res.data.rows;
+						this.msgList = res.data.rows.concat(this.msgList);
+						this.page = res.data.page;
+						this.pageSize = res.data.pageSize;
 						setTimeout(()=>{
-							this.scrollDown();
+							if(res.data.page === res.data.pageSize){
+								this.scrollDown();
+							}
 						},500);
 						break;
 					case 38:
+						if(res.data.contact_list && res.data.contact_list.length>0){
+							res.data.contact_list.forEach(item=>{
+								if(item.send_message_type ==2){
+									item.to_message_list = JSON.parse(item.to_message);
+								}
+							})
+						}
 						this.contactsList = res.data.contact_list;
 						if(res.data.contact_list.length>0){
 							if(this.mesList){
@@ -188,6 +207,9 @@ export default {
 								this.mesList = false;
 							}
 						}
+						break;
+					case 12:
+
 						break;
 					default:
 						break;
@@ -201,11 +223,22 @@ export default {
 			this.contactsInfo = item;
 			this.to_user_id = item.from_user.id;
 			this.params.to_user_id = item.from_user.id;
-			this.getCustomerMsgList();
+			this.msgList = [];
+			this.getCustomerMsgList(false);
 		},
-		async getCustomerMsgList() {
+		async getCustomerMsgList(isPage=false) {
-			let params = {
+			let params = {}
-				to_user_id:this.to_user_id
+			if(!isPage){
+				params = {
+					to_user_id:this.to_user_id,
+					pageSize:30
+				}
+			}else{
+				params = {
+					to_user_id:this.to_user_id,
+					page:this.page,
+					pageSize:30
+				}
 			}
 			await this.$API.customer.list.post(params);
 		},
@@ -271,8 +304,10 @@ export default {
 
 		handleScroll(event){
 			const { scrollTop } = event;
-			if(scrollTop === 0){
+			if(scrollTop === 0 && this.msgList.length>0 && this.page >1){
-				console.log(scrollTop)
+				this.page = this.page -1;
+				console.log('执行接口数据获取')
+				this.getCustomerMsgList(true)
 			}
 		},
 		scrollDown() {
@@ -418,6 +453,7 @@ export default {
 							padding: 10px;
 							border-radius: 4px;
 							background: #f8f6f6;
+							margin-bottom: 5px;
 						}
 					}
 					.el-image{