From 539e8479ad1f4f214a4914292312e920b04341b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Mon, 18 Nov 2024 19:56:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=9A=E4=B8=8A=E5=AE=A2=E6=9C=8D=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue                          |   2 +-
 .../service/components/attachmentUpload.vue   |  20 +-
 .../service/components/customerRecords.vue    |  46 +-
 src/views/service/components/recordsList.vue  |  68 ++-
 src/views/service/faq.vue                     | 458 +---------------
 src/views/service/infoQuery.vue               | 496 +++++++++++++++++-
 src/views/service/queryRecord.vue             |  28 +
 7 files changed, 612 insertions(+), 506 deletions(-)
 create mode 100644 src/views/service/queryRecord.vue

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 4d4d20f..f37f6a6 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -287,7 +287,7 @@
 						this.$store.commit("set_repair_count", res.data.list_repair_info.repair_count);
 					}
 					let apiMenu = tool.objCopy(tool.data.get("MENU"));
-					if(apiMenu.length<1) return
+					if(!apiMenu || apiMenu.length === 0) return
 					apiMenu.forEach(item=>{
 						if(item.name == 'order'){
 							item.meta.tag = 0;
diff --git a/src/views/service/components/attachmentUpload.vue b/src/views/service/components/attachmentUpload.vue
index 985f332..6f6b937 100644
--- a/src/views/service/components/attachmentUpload.vue
+++ b/src/views/service/components/attachmentUpload.vue
@@ -67,6 +67,7 @@ export default {
 			},
 			upload_data:{},
 			params:{},
+			singleFnc:true,
 			parentParams:{
 				to_user_id:"",
 				unique:""
@@ -119,7 +120,6 @@ export default {
 
 		// 导入文件
 		importFile(params){
-			this.visible = true;
 			this.parentParams = params;
 		},
 		// 上传前
@@ -149,14 +149,17 @@ export default {
 			formData.append('to_user_id', this.parentParams['to_user_id']);
 			this.params = formData;
 
-			this.save();
+			// 单次
+			if(this.singleFnc){
+				this.singleFnc = false;
+				this.save();
+			}
 		},
 		deleteFileNum(num){
 			this.handleRemove(this.fileList[num], this.fileList);
 			this.setParamsData();
 		},
 		close(){
-			this.visible = false;
 			this.progressShow = false;
 			this.listProgress = [];
 			this.handleRemove('',this.fileList,true);
@@ -166,11 +169,11 @@ export default {
 			const res = await this.$API.customer.attachmentMessage.post(this.params);
 			this.saveLoading = false;
 			if (res.code == 200) {
-				this.$message.success('提交成功,正在上传');
-				this.listProgress = [];
-				this.visible = false;
-				// this.uploadShow = false;
-				// this.$emit('uploadFileSuccess');
+				this.params = {};
+				this.fileList = [];
+				this.singleFnc = true;
+
+				this.$emit('uploadFileSuccess',res.data);
 			}
 		},
 		handleExceed(){
@@ -179,7 +182,6 @@ export default {
 		handleRemove(file,fileList,isArr=false){
 			if(isArr){
 				fileList = [];
-				// this.listProgress = [];
 			}else{
 				const index = fileList.findIndex(f => f.uid === file.uid);
 				if (index !== -1) {
diff --git a/src/views/service/components/customerRecords.vue b/src/views/service/components/customerRecords.vue
index f473b54..e84c1b8 100644
--- a/src/views/service/components/customerRecords.vue
+++ b/src/views/service/components/customerRecords.vue
@@ -1,12 +1,14 @@
 <template>
 	<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" draggable destroy-on-close @closed="$emit('closed')">
-		<el-input placeholder="搜索" v-model="keyWord"></el-input>
+		<div class="searchBtn">
+			<el-input placeholder="搜索" v-model="keyWord" @change="searchInput"></el-input>
+		</div>
 		<el-tabs v-loading="loading" element-loading-text="加载中..." v-model="tabName" @tab-change="tabChange">
 			<el-tab-pane label="全部" name="1">
-				<records-list :recordsData="recordsDataList"></records-list>
+				<records-list :recordsData="recordsDataList" @moreList="pageMore"></records-list>
 			</el-tab-pane>
-			<el-tab-pane label="文档" name="2">
-				<records-list :recordsData="recordsDataList"></records-list>
+			<el-tab-pane label="文件" name="2">
+				<records-list :recordsData="recordsDataList" @moreList="pageMore"></records-list>
 			</el-tab-pane>
 		</el-tabs>
 	</el-dialog>
@@ -33,6 +35,8 @@ export default {
 			recordsDataList:[],
 
 			page: 1,
+			pageSize:100,
+			moreShow:true,
 			keyWord:"",
 			user_id:this.$TOOL.data.get('USER_INFO').id,
 			to_user_id:"",
@@ -49,17 +53,29 @@ export default {
 			return this
 		},
 		tabChange(){
-			this.setData();
+			this.page = 1;
+			this.getData();
 		},
 		//表单注入数据
 		setData(data) {
-			this.to_user_id = data;
+			this.to_user_id = data.from_user_id;
+			this.titleMap.show = data.from_user && data.from_user.name?"与"+data.from_user.name+"聊天记录":'与匿名聊天记录';
+			this.getData();
+		},
+		// 加载更多
+		pageMore(){
+			if(!this.moreShow) return
+			this.page = this.page +1;
+			this.getData();
+		},
+		searchInput(){
+			this.page = 1;
 			this.getData();
 		},
 		async getData() {
 			let params = {
 				page: this.page,
-				pageSize: 100,
+				pageSize: this.pageSize,
 				creator_id: {
 					operator: "in",
 					value: [this.to_user_id, this.user_id]
@@ -82,14 +98,22 @@ export default {
 						item.to_message_list = JSON.parse(item.to_message);
 					}
 				})
-				// console.log(res.data.rows)
-				this.recordsDataList = res.data.rows;
+				if(res.data.rows.length < this.pageSize){
+					this.moreShow = false;
+				}
+				if(this.page === 1){
+					this.recordsDataList = res.data.rows;
+				}else{
+					this.recordsDataList = this.recordsDataList.concat(res.data.rows);
+				}
 			}
 		}
 	}
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+	.searchBtn{
+		margin-bottom: 10px;
+	}
 </style>
diff --git a/src/views/service/components/recordsList.vue b/src/views/service/components/recordsList.vue
index 6abc1c9..324d2e8 100644
--- a/src/views/service/components/recordsList.vue
+++ b/src/views/service/components/recordsList.vue
@@ -1,31 +1,34 @@
 <template>
 	<div class="recordView">
-		<el-scrollbar max-height="420px">
-			<div class="itemCol" v-for="(item,index) in recordsData" :key="index">
-				<div class="avatar">
-					<el-avatar :size="36" :src="item.from_user.avatar" fit="contain" v-if="item.from_user && item.from_user.avatar">
-						<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
-					</el-avatar>
-					<el-avatar :size="36" :src="item.to_user.avatar" fit="contain" v-else>
-						<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
-					</el-avatar>
-				</div>
-				<div class="msgText">
-					<div class="msgTitle">
-						{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
-						<span class="time">{{item.created_at}}</span>
+		<el-scrollbar height="420px" @scroll="handleScroll">
+			<div class="itemRow" ref="itemRow">
+				<div class="itemCol" v-for="(item,index) in recordsData" :key="index">
+					<div class="avatar">
+						<el-avatar :size="36" :src="item.from_user.avatar" fit="contain" v-if="item.from_user && item.from_user.avatar">
+							<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+						</el-avatar>
+						<el-avatar :size="36" :src="item.to_user.avatar" fit="contain" v-else>
+							<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+						</el-avatar>
 					</div>
-					<div class="textCom" v-if="item.send_message_type === 1">
-						<div v-html="item.to_message"></div>
-					</div>
-					<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>
-							</span>
-							<span class="fileView" v-else>
-								<fileType size="30px" :fileType="em.extension" />
-							</span>
+					<div class="msgText">
+						<div class="msgTitle">
+							{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
+							<span class="time">{{item.created_at}}</span>
+						</div>
+						<div class="textCom" v-if="item.send_message_type === 1">
+							<div v-html="item.to_message"></div>
+						</div>
+						<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>
+								</span>
+								<span class="fileView" v-else>
+									<fileType size="30px" :fileType="em.extension" />
+									<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
+								</span>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -55,7 +58,13 @@ export default {
 
 	},
 	methods:{
-
+		handleScroll(event){
+			const { scrollTop } = event;
+			let num = this.$refs.itemRow.scrollHeight;
+			if(Number(scrollTop) + 420 > num){
+				this.$emit('moreList');
+			}
+		}
 	}
 }
 </script>
@@ -91,6 +100,13 @@ export default {
 					text-align: left;
 					.fileView{
 						cursor: pointer;
+						color: var(--el-color-primary);
+						display: flex;
+						align-items: center;
+						border: 1px solid #f4f4f4;
+						padding: 10px;
+						border-radius: 4px;
+						background: #f8f6f6;
 					}
 				}
 				.textComNoneBack{
diff --git a/src/views/service/faq.vue b/src/views/service/faq.vue
index a9e3124..798165f 100644
--- a/src/views/service/faq.vue
+++ b/src/views/service/faq.vue
@@ -1,484 +1,34 @@
 <template>
 	<el-container class="mainNoBack userBox">
-		<el-aside class="userAside" width="220px">
-			<el-container>
-				<el-main class="nopadding">
-					<el-scrollbar>
-						<div class="contacts">
-							<div class="contactsTitle">联系人</div>
-							<div class="bodyView">
-								<div class="itemCol" :class="{'itemColActive':item.from_user && item.from_user.id === to_user_id}"  v-for="(item,index) in contactsList" :key="index" @click="contactsActive(item)">
-									<div class="avatar">
-										<el-avatar :size="36" :src="item.from_user && item.from_user.avatar" fit="contain">
-											<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
-										</el-avatar>
-									</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>
-								</div>
-							</div>
-						</div>
-					</el-scrollbar>
-				</el-main>
-			</el-container>
-		</el-aside>
-		<el-main class="userMain userMainPadding_0" style="border-top-right-radius: 0;border-bottom-right-radius: 0;padding: 0;">
-			<div class="mainBody">
-				<div class="mainTitle">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
-				<div class="mainView">
-					<el-scrollbar ref="scrollbar">
-						<div class="msgList">
-							<div class="msgItem" :class="user_id != item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
-								<div class="avatar" v-if="user_id === item.to_user_id">
-									<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
-										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
-									</el-avatar>
-								</div>
-								<div class="msgText">
-									<div class="msgTitle">
-										<span class="leftTime" v-if="user_id != item.to_user_id">{{item.created_at}}</span>
-										{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
-										<span class="time" v-if="user_id === item.to_user_id">{{item.created_at}}</span>
-									</div>
-									<div class="textCom" v-if="item.send_message_type === 1">
-										<div v-html="item.to_message"></div>
-									</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'">
-												<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>
-											</span>
-											<span class="fileView" v-else @click="linkFile(em)">
-												<fileType size="26px" :fileType="em.extension" />
-												<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
-											</span>
-										</div>
-									</div>
-								</div>
-								<div class="avatar" v-if="user_id != item.to_user_id">
-									<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
-										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
-									</el-avatar>
-								</div>
-							</div>
-						</div>
-					</el-scrollbar>
-				</div>
-				<div class="mainFooter">
-					<div class="tagList">
-						<div class="tagItem" @click="uploadFile">
-							<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
-						</div>
-						<div class="tagItem" @click="recordsShow"><el-icon size="18"><sc-icon-Record/></el-icon></div>
-						<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
-					</div>
-					<div class="sendView">
-						<el-input @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" type="textarea" placeholder="Shift+Enter换行 请输入.." :rows="3" resize="none"></el-input>
-						<div class="saveBtn" @click="sendCustomer" :class="params.to_message!=''?'saveActive':''">
-							<el-icon size="22"><sc-icon-SendCustom /></el-icon>
-						</div>
-					</div>
-				</div>
-			</div>
+		<el-main>
+			问题反馈
 		</el-main>
-		<el-aside class="userAside" width="260px">
-			<el-container>
-				<el-main class="nopadding" style="border-left: 1px solid #f4f4f4;border-top-left-radius: 0;border-bottom-left-radius: 0;">
-					<div class="contactsUserInfo">
-						<div class="contactsTitle">
-							<el-avatar :size="56" :src="contactsInfo.from_user && contactsInfo.from_user.avatar" fit="contain">
-								<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
-							</el-avatar>
-						</div>
-						<div class="bodyView">
-							<div class="itemCol">
-								<div class="name">昵称</div>
-								<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
-							</div>
-							<div class="itemCol">
-								<div class="name">手机号</div>
-								<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.mobile}}</div>
-							</div>
-							<div class="itemCol">
-								<div class="name">邮箱</div>
-								<div class="text">{{ contactsInfo.from_user && contactsInfo.from_user.email }}</div>
-							</div>
-						</div>
-					</div>
-				</el-main>
-			</el-container>
-		</el-aside>
 	</el-container>
-
-	<customer-records-dialog v-if="dialog.show" ref="recordsMsgDialog" @closed="dialog.show=false"></customer-records-dialog>
-
 </template>
 
 <script>
-import {eventBus} from "@/utils/eventBus";
-import customerRecordsDialog from "@/views/service/components/customerRecords"
-import uploadFile from "@/views/service/components/attachmentUpload";
-import fileType from "@/views/docsManager/fileType"
 export default {
-	name: "", // faq
+	name: "faq",
 	components:{
-		customerRecordsDialog,
-		uploadFile,
-		fileType
+
 	},
 	data(){
 		return{
-			contactsList:[],
-			contactsInfo:{},
-			msgList:[],
-			user_id:0,
-			to_user_id:0,
 
-			params:{
-				to_user_id:"",
-				to_message:"",
-			},
-
-			dialog:{
-				show:false
-			},
-			mesList:false,
 		}
 	},
 	created() {
 
 	},
 	mounted() {
-		const userInfo = this.$TOOL.data.get("USER_INFO");
-		this.user_id = userInfo.id;
 
-		setTimeout(()=>{
-			this.getContactList();
-
-		},1000)
-		// 获取新消息
-		eventBus.$on('sockBack', this.getWsResult);
 	},
 	methods:{
-		getWsResult(res){
-			if(res.data && (res.data.type == 36 || res.data.type == 38)){
-				switch(res.data.type) {
-					case 36:
-						res.data.rows.forEach((item)=>{
-							if(item.send_message_type == 2){
-								item.to_message_list = JSON.parse(item.to_message);
-							}
-						})
-						this.msgList = res.data.rows;
-						this.scrollDown();
-						break;
-					case 38:
-						this.contactsList = res.data.contact_list;
-						if(res.data.contact_list.length>0){
-							this.to_user_id = res.data.contact_list[0].from_user.id;
-							this.params.to_user_id = res.data.contact_list[0].from_user.id;
-							this.contactsInfo = res.data.contact_list[0];
-							if(!this.mesList){
-								this.getCustomerMsgList();
-								this.mesList = true;
-							}
-						}
-						break;
-					default:
-						break;
-				}
-			}
-		},
-		async getContactList() {
-			await this.$API.customer.contactList.post();
-		},
-		contactsActive(item){
-			this.contactsInfo = item;
-			this.to_user_id = item.from_user.id;
-			this.getCustomerMsgList();
-		},
-		async getCustomerMsgList() {
-			let params = {
-				to_user_id:this.to_user_id
-			}
-			await this.$API.customer.list.post(params);
-		},
-		handleKeydown(event){
-			if(event.key === 'Enter' && !event.shiftKey){
-				event.preventDefault(); // 阻止输入框的默认行为
-				this.sendCustomer();
-			}else if(event.key === 'Enter' && event.shiftKey){
-				this.params.to_message += '';
-			}
-		},
-		async sendCustomer() {
-			if(this.params.to_message =="") return
-			const res = await this.$API.customer.send.post(this.params);
-			if(res.code == 200){
-				const userInfo = this.$TOOL.data.get("USER_INFO");
-				this.msgList.push({
-					to_user_id:-1,
-					send_message_type:1,
-					from_user:{
-						name:userInfo.name,
-						avatar:userInfo.avatar
-					},
-					to_message:this.params.to_message
-				});
-				this.params.to_message = "";
-				this.scrollDown();
-			}
-		},
 
-		// 上传附件
-		uploadFile(){
-			this.$nextTick(()=>{
-				this.$refs.uploadFile.importFile(this.params);
-			})
-		},
-		uploadFileSuccess(){
-			// this.getCustomerMsgList();
-		},
-
-		recordsShow(){
-			this.dialog.show = true;
-			this.$nextTick(() => {
-				this.$refs.recordsMsgDialog.open('show').setData(this.to_user_id); // this.to_user_id
-			})
-		},
-		linkFile(em){
-			window.location.href = em.file;
-		},
-
-		scrollDown() {
-			this.$nextTick(() => {
-				const wrap = this.$refs.scrollbar;
-				if(wrap){
-					const e = wrap.$el.querySelector('.el-scrollbar__wrap')
-					e.scrollTop = e.scrollHeight;
-				}
-			})
-		},
 	}
 }
 </script>
 
 <style scoped lang="scss">
-	::v-deep .noBorderRadius{border-radius: 0;}
-	.contacts{
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		.contactsTitle{
-			padding: 5px 10px;
-			font-size: 14px;
-		}
-		.bodyView{
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			padding: 0 5px;
-			.itemCol{
-				padding: 10px 8px;
-				display: flex;
-				align-items: flex-start;
-				.viewRight{
-					margin-left: 10px;
-					flex: 1;
-					overflow: hidden;
-					.title{
-						font-size: 13px;
-						font-weight: 500;
-						margin-bottom: 4px;
-					}
-					.msg{
-						width: 100%;
-						color: #888888;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-				}
-			}
-			.itemCol:hover{
-				background: #F6FBFF;
-				border-radius: 4px;
-				cursor: pointer;
-			}
-			.itemColActive{
-				background: #F6FBFF;
-				border-radius: 4px;
-			}
-		}
-	}
-	.contactsUserInfo{
-		display: flex;
-		flex-direction: column;
-		padding: 0 10px;
-		.contactsTitle{
-			padding: 20px 10px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-bottom: 1px solid #F6F6F6;
-		}
-		.bodyView{
-			flex:1;
-			display: flex;
-			flex-direction: column;
-			padding: 10px 5px;
-			.itemCol{
-				display: flex;
-				justify-content: space-between;
-				margin-bottom: 15px;
-				.name{
-					color: #888;
-				}
-			}
-		}
-	}
 
-	.mainBody{
-		height: 100%;
-		padding: 15px 0;
-		display: flex;
-		flex-direction: column;
-		.mainTitle{
-			border-bottom: 1px solid #F6F6F6;
-			padding-bottom: 10px;
-			margin: 0 10px;
-			font-weight: 500;
-			font-size: 14px;
-		}
-		.mainView{
-			flex: 1;
-			overflow: hidden;
-			padding-bottom: 10px;
-			.msgList{
-				padding: 10px;
-				.msgItem{
-					display: flex;
-					margin-bottom: 12px;
-					padding-right: 40px;
-					.avatar{
-						padding-right: 10px;
-					}
-					.msgText{
-						.msgTitle{
-							padding:0 0 8px 0;
-							color: #555;
-							.time{
-								margin-left: 8px;
-								font-size: 12px;
-								color: #888;
-							}
-							.leftTime{
-								margin-right: 8px;
-								font-size: 12px;
-								color: #888;
-							}
-						}
-						.textCom{
-							background: #f5f5f5;
-							border-radius: 4px;
-							padding: 10px;
-							display: inline-block;
-							text-align: left;
-							.fileView{
-								cursor: pointer;
-								color: var(--el-color-primary);
-								display: flex;
-								align-items: center;
-								border: 1px solid #f4f4f4;
-								padding: 5px 10px;
-								border-radius: 4px;
-								background: #f8f6f6;
-							}
-						}
-						.textComNoneBack{
-							background: none;
-							padding: 10px 0;
-							.fileRightItem{
-								text-align: right;
-							}
-						}
-					}
-				}
-				.msgRightItem{
-					justify-content: flex-end;
-					padding:0 0 0 40px;
-					.avatar{
-						padding-left: 10px;
-						padding-right: 0;
-					}
-					.msgText{
-						text-align: right;
-						.msgTitle{
-							text-align: right;
-						}
-						.textCom{
-							background: var(--el-color-primary);
-							color: var(--el-color-white);
-							text-align: left;
-						}
-						.textComNoneBack{
-							background: none;
-							.el-image{
-								border-radius: 4px;
-							}
-						}
-					}
-				}
-			}
-		}
-		.mainFooter{
-			margin: 0 10px 5px 10px;
-			padding: 10px 0;
-			border: 1px solid #F6F6F6;
-			border-radius: 4px;
-			position: relative;
-			.tagList{
-				display: flex;
-				align-items: center;
-				border-bottom: 1px solid #F6F6F6;
-				padding-bottom: 10px;
-				.tagItem{
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					margin-left: 15px;
-					cursor: pointer;
-				}
-			}
-			.customTextarea{
-				font-size:13px;
-				::v-deep .el-textarea__inner{
-					box-shadow: none;
-					border: 0;
-					padding:10px 35px 10px 10px;
-				}
-				::v-deep .el-textarea__inner::-webkit-scrollbar{
-					width: 0;
-				}
-			}
-			.saveBtn{
-				position: absolute;
-				bottom:20px;
-				right: 10px;
-				z-index: 10;
-				color: #A8ABB2;
-				border-radius: 3px;
-				cursor: not-allowed;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-			.saveActive{
-				cursor: pointer;
-				color: var(--el-color-primary);
-			}
-		}
-	}
 </style>
diff --git a/src/views/service/infoQuery.vue b/src/views/service/infoQuery.vue
index 0079551..760ea72 100644
--- a/src/views/service/infoQuery.vue
+++ b/src/views/service/infoQuery.vue
@@ -1,24 +1,510 @@
 <template>
-	<div>900</div>
+	<el-container class="mainNoBack userBox">
+		<el-aside class="userAside" width="220px">
+			<el-container>
+				<el-main class="nopadding">
+					<el-scrollbar>
+						<div class="contacts">
+							<div class="contactsTitle">联系人</div>
+							<div class="bodyView">
+								<div class="itemCol" :class="{'itemColActive':item.from_user && item.from_user.id === to_user_id}"  v-for="(item,index) in contactsList" :key="index" @click="contactsActive(item)">
+									<div class="avatar">
+										<el-avatar :size="36" :src="item.from_user && item.from_user.avatar" fit="contain">
+											<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+										</el-avatar>
+									</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>
+								</div>
+							</div>
+						</div>
+					</el-scrollbar>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-main class="userMain userMainPadding_0" style="border-top-right-radius: 0;border-bottom-right-radius: 0;padding: 0;">
+			<div class="mainBody">
+				<div class="mainTitle">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
+				<div class="mainView">
+					<el-scrollbar ref="scrollbar" @scroll="handleScroll">
+						<div class="msgList">
+							<div class="msgItem" :class="user_id != item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
+								<div class="avatar" v-if="user_id === item.to_user_id">
+									<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
+										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+									</el-avatar>
+								</div>
+								<div class="msgText">
+									<div class="msgTitle">
+										<span class="leftTime" v-if="user_id != item.to_user_id">{{item.created_at}}</span>
+										{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
+										<span class="time" v-if="user_id === item.to_user_id">{{item.created_at}}</span>
+									</div>
+									<div class="textCom" v-if="item.send_message_type === 1">
+										<div v-html="item.to_message"></div>
+									</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'">
+												<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>
+											</span>
+											<span class="fileView" v-else @click="linkFile(em)">
+												<fileType size="26px" :fileType="em.extension || em.file_type" />
+												<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
+											</span>
+										</div>
+									</div>
+								</div>
+								<div class="avatar" v-if="user_id != item.to_user_id">
+									<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
+										<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+									</el-avatar>
+								</div>
+							</div>
+						</div>
+					</el-scrollbar>
+				</div>
+				<div class="mainFooter">
+					<div class="tagList">
+						<div class="tagItem" @click="uploadFile">
+							<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
+						</div>
+						<div class="tagItem" @click="recordsShow"><el-icon size="18"><sc-icon-Record/></el-icon></div>
+						<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
+					</div>
+					<div class="sendView">
+						<el-input @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" type="textarea" placeholder="Shift+Enter换行 请输入.." :rows="3" resize="none"></el-input>
+						<div class="saveBtn" @click="sendCustomer" :class="params.to_message!=''?'saveActive':''">
+							<el-icon size="22"><sc-icon-SendCustom /></el-icon>
+						</div>
+					</div>
+				</div>
+			</div>
+		</el-main>
+		<el-aside class="userAside" width="260px">
+			<el-container>
+				<el-main class="nopadding" style="border-left: 1px solid #f4f4f4;border-top-left-radius: 0;border-bottom-left-radius: 0;">
+					<div class="contactsUserInfo">
+						<div class="contactsTitle">
+							<el-avatar :size="56" :src="contactsInfo.from_user && contactsInfo.from_user.avatar" fit="contain">
+								<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+							</el-avatar>
+						</div>
+						<div class="bodyView">
+							<div class="itemCol">
+								<div class="name">昵称</div>
+								<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
+							</div>
+							<div class="itemCol">
+								<div class="name">手机号</div>
+								<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.mobile}}</div>
+							</div>
+							<div class="itemCol">
+								<div class="name">邮箱</div>
+								<div class="text">{{ contactsInfo.from_user && contactsInfo.from_user.email }}</div>
+							</div>
+						</div>
+					</div>
+				</el-main>
+			</el-container>
+		</el-aside>
+	</el-container>
+
+	<customer-records-dialog v-if="dialog.show" ref="recordsMsgDialog" @closed="dialog.show=false"></customer-records-dialog>
+
 </template>
 
 <script>
+import {eventBus} from "@/utils/eventBus";
+import customerRecordsDialog from "@/views/service/components/customerRecords"
+import uploadFile from "@/views/service/components/attachmentUpload";
+import fileType from "@/views/docsManager/fileType"
 export default {
-	name: "infoQuery",
+	name: "",
+	components:{
+		customerRecordsDialog,
+		uploadFile,
+		fileType
+	},
 	data(){
 		return{
+			contactsList:[],
+			contactsInfo:{},
+			msgList:[],
+			user_id:0,
+			to_user_id:0,
 
+			params:{
+				to_user_id:"",
+				to_message:"",
+			},
+
+			dialog:{
+				show:false
+			},
+			mesList:true,
 		}
 	},
-	mounted() {
+	created() {
 
 	},
-	methods:{
+	mounted() {
+		const userInfo = this.$TOOL.data.get("USER_INFO");
+		this.user_id = userInfo.id;
 
+		setTimeout(()=>{
+			this.getContactList();
+
+		},1000)
+		// 获取新消息
+		eventBus.$on('sockBack', this.getWsResult);
+	},
+	methods:{
+		getWsResult(res){
+			if(res.data && (res.data.type == 36 || res.data.type == 38)){
+				switch(res.data.type) {
+					case 36:
+						res.data.rows.forEach((item)=>{
+							if(item.send_message_type == 2){
+								item.to_message_list = JSON.parse(item.to_message);
+							}
+						})
+						this.msgList = res.data.rows;
+						setTimeout(()=>{
+							this.scrollDown();
+						},500);
+						break;
+					case 38:
+						this.contactsList = res.data.contact_list;
+						if(res.data.contact_list.length>0){
+							if(this.mesList){
+								this.to_user_id = res.data.contact_list[0].from_user.id;
+								this.params.to_user_id = res.data.contact_list[0].from_user.id;
+								this.contactsInfo = res.data.contact_list[0];
+
+								this.getCustomerMsgList();
+								this.mesList = false;
+							}
+						}
+						break;
+					default:
+						break;
+				}
+			}
+		},
+		async getContactList() {
+			await this.$API.customer.contactList.post();
+		},
+		contactsActive(item){
+			this.contactsInfo = item;
+			this.to_user_id = item.from_user.id;
+			this.params.to_user_id = item.from_user.id;
+			this.getCustomerMsgList();
+		},
+		async getCustomerMsgList() {
+			let params = {
+				to_user_id:this.to_user_id
+			}
+			await this.$API.customer.list.post(params);
+		},
+		handleKeydown(event){
+			if(event.key === 'Enter' && !event.shiftKey){
+				event.preventDefault(); // 阻止输入框的默认行为
+				this.sendCustomer();
+			}else if(event.key === 'Enter' && event.shiftKey){
+				this.params.to_message += '';
+			}
+		},
+		async sendCustomer() {
+			if(this.params.to_message =="") return
+			const res = await this.$API.customer.send.post(this.params);
+			if(res.code == 200){
+				const userInfo = this.$TOOL.data.get("USER_INFO");
+				this.msgList.push({
+					to_user_id:-1,
+					send_message_type:1,
+					created_at:this.$TOOL.dateFormat(new Date()),
+					from_user:{
+						name:userInfo.name,
+						avatar:userInfo.avatar
+					},
+					to_message:this.params.to_message
+				});
+				this.params.to_message = "";
+				this.scrollDown();
+			}
+		},
+
+		// 上传附件
+		uploadFile(){
+			this.$nextTick(()=>{
+				this.$refs.uploadFile.importFile(this.params);
+			})
+		},
+		uploadFileSuccess(data){
+			console.log('接口上传成功',data)
+			const userInfo = this.$TOOL.data.get("USER_INFO");
+			this.msgList.push({
+				to_user_id:-1,
+				send_message_type:2,
+				created_at:this.$TOOL.dateFormat(new Date()),
+				from_user:{
+					name:userInfo.name,
+					avatar:userInfo.avatar
+				},
+				to_message_list:data,
+				to_message:''
+			});
+		},
+
+		recordsShow(){
+			this.dialog.show = true;
+			this.$nextTick(() => {
+				this.$refs.recordsMsgDialog.open('show').setData(this.contactsInfo);
+			})
+		},
+		linkFile(em){
+			window.location.href = em.file;
+		},
+
+		handleScroll(event){
+			const { scrollTop } = event;
+			if(scrollTop === 0){
+				console.log(scrollTop)
+			}
+		},
+		scrollDown() {
+			this.$nextTick(() => {
+				const wrap = this.$refs.scrollbar;
+				if(wrap){
+					const e = wrap.$el.querySelector('.el-scrollbar__wrap')
+					e.scrollTop = e.scrollHeight;
+				}
+			})
+		},
 	}
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+::v-deep .noBorderRadius{border-radius: 0;}
+.contacts{
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.contactsTitle{
+		padding: 5px 10px;
+		font-size: 14px;
+	}
+	.bodyView{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 0 5px;
+		.itemCol{
+			padding: 10px 8px;
+			display: flex;
+			align-items: flex-start;
+			.viewRight{
+				margin-left: 10px;
+				flex: 1;
+				overflow: hidden;
+				.title{
+					font-size: 13px;
+					font-weight: 500;
+					margin-bottom: 4px;
+				}
+				.msg{
+					width: 100%;
+					color: #888888;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
+		}
+		.itemCol:hover{
+			background: #F6FBFF;
+			border-radius: 4px;
+			cursor: pointer;
+		}
+		.itemColActive{
+			background: #F6FBFF;
+			border-radius: 4px;
+		}
+	}
+}
+.contactsUserInfo{
+	display: flex;
+	flex-direction: column;
+	padding: 0 10px;
+	.contactsTitle{
+		padding: 20px 10px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-bottom: 1px solid #F6F6F6;
+	}
+	.bodyView{
+		flex:1;
+		display: flex;
+		flex-direction: column;
+		padding: 10px 5px;
+		.itemCol{
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 15px;
+			.name{
+				color: #888;
+			}
+		}
+	}
+}
 
+.mainBody{
+	height: 100%;
+	padding: 15px 0;
+	display: flex;
+	flex-direction: column;
+	.mainTitle{
+		border-bottom: 1px solid #F6F6F6;
+		padding-bottom: 10px;
+		margin: 0 10px;
+		font-weight: 500;
+		font-size: 14px;
+	}
+	.mainView{
+		flex: 1;
+		overflow: hidden;
+		padding-bottom: 10px;
+		.msgList{
+			padding: 10px;
+			.msgItem{
+				display: flex;
+				margin-bottom: 12px;
+				padding-right: 40px;
+				.avatar{
+					padding-right: 10px;
+				}
+				.msgText{
+					.msgTitle{
+						padding:0 0 8px 0;
+						color: #555;
+						.time{
+							margin-left: 8px;
+							font-size: 12px;
+							color: #888;
+						}
+						.leftTime{
+							margin-right: 8px;
+							font-size: 12px;
+							color: #888;
+						}
+					}
+					.textCom{
+						background: #f5f5f5;
+						border-radius: 4px;
+						padding: 10px;
+						display: inline-block;
+						text-align: left;
+						.fileView{
+							cursor: pointer;
+							color: var(--el-color-primary);
+							display: flex;
+							align-items: center;
+							border: 1px solid #f4f4f4;
+							padding: 10px;
+							border-radius: 4px;
+							background: #f8f6f6;
+						}
+					}
+					.el-image{
+						border-radius: 4px;
+					}
+					.textComNoneBack{
+						background: none;
+						padding: 10px 0;
+						.fileRightItem{
+							text-align: right;
+						}
+					}
+				}
+			}
+			.msgRightItem{
+				justify-content: flex-end;
+				padding:0 0 0 40px;
+				.avatar{
+					padding-left: 10px;
+					padding-right: 0;
+				}
+				.msgText{
+					text-align: right;
+					.msgTitle{
+						text-align: right;
+					}
+					.textCom{
+						background: var(--el-color-primary);
+						color: var(--el-color-white);
+						text-align: left;
+					}
+					.textComNoneBack{
+						background: none;
+						.el-image{
+							border-radius: 4px;
+						}
+					}
+				}
+			}
+		}
+	}
+	.mainFooter{
+		margin: 0 10px 5px 10px;
+		padding: 10px 0;
+		border: 1px solid #F6F6F6;
+		border-radius: 4px;
+		position: relative;
+		.tagList{
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid #F6F6F6;
+			padding-bottom: 10px;
+			.tagItem{
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-left: 15px;
+				cursor: pointer;
+			}
+		}
+		.customTextarea{
+			font-size:13px;
+			::v-deep .el-textarea__inner{
+				box-shadow: none;
+				border: 0;
+				padding:10px 35px 10px 10px;
+			}
+			::v-deep .el-textarea__inner::-webkit-scrollbar{
+				width: 0;
+			}
+		}
+		.saveBtn{
+			position: absolute;
+			bottom:20px;
+			right: 10px;
+			z-index: 10;
+			color: #A8ABB2;
+			border-radius: 3px;
+			cursor: not-allowed;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.saveActive{
+			cursor: pointer;
+			color: var(--el-color-primary);
+		}
+	}
+}
 </style>
diff --git a/src/views/service/queryRecord.vue b/src/views/service/queryRecord.vue
new file mode 100644
index 0000000..2ee2f47
--- /dev/null
+++ b/src/views/service/queryRecord.vue
@@ -0,0 +1,28 @@
+<template>
+	<el-container class="mainNoBack userBox">
+		<el-main>
+			查询记录
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+export default {
+	name: "queryRecord",
+	data(){
+		return{
+
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+
+	}
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>