update chat

chat/src/components/index.vue

@@ -1429,7 +1429,7 @@
 				}).then(res => {
 					if (res.data.code == 1) {
 						this.chatNum = res.data.data.systemconfig_data;
-						console.log(this.chatNum, '聊天限制')
+						// console.log(this.chatNum, '聊天限制')
 					}
 				})
 			},

chat/src/components/knowledgeLibrary.vue

@@ -14,13 +14,13 @@
 				<!-- 时间选择 -->
 				<div class="serchLeft">
 					<yd-accordion>
-						<yd-accordion-item :title="serchLeftClick">
+						<yd-accordion-item :title="serchLeftClick" id="lists">
 							<ul>
 								<li
 										class="row center list"
 										v-for="(item,index) in options"
 										:key="index"
-										@click="serchLeftClick = item.label,getAjax(item.value)"
+										@click="serchLeftClick = item.label,getList(item.value)"
 								>
 									<p :class="serchLeftClick == item.label?'active':''">{{item.label}}</p>
 								</li>
@@ -42,57 +42,27 @@
 							v-for="(item) in typeList" :key="item.id"
 							class="main-title-list row center"
 							:class="mainTitle== item.name?'active':''"
-							@click="mainTitle =  item.name"
+							@click="mainTitle =  item.name,getAjax(1)"
 					>{{item.name}}
 					</div>
 				</div>
 				<div class="main-box">
-					<yd-accordion v-for="(item,index) in data" :key="index">
+					<yd-accordion v-for="(item,index) in listData" :key="index">
 						<yd-accordion-item v-if="item.type_name == mainTitle" :title="item.content">
 							<div slot="txt" style="color:#999;font-size:.24rem;">{{item.add_time}}</div>
 							<div style="color:#555;" class="chatContent">
-								<!-- 留言回复内容 -->
-								<!-- 模拟客服 -->
-								<div class="contents row allAlignment">
-									<div class="userPortrait">
-										<img v-if="1" :src="require('@/assets/userPortrait1.png')"/>
-									</div>
-									<div class="contentsCenter" :style="0?'text-align: right;':''">
-										<div class="txt" :class="1?'left':'right'">
-											您好！工号{{item.user_id}}为您服务，请问有什么需要帮助的吗？ <img v-if="item.image"
-																						:src="item.image"/></div>
-									</div>
-									<div class="userPortrait">
-										<img v-if="0" :src="require('@/assets/userPortrait2.png')"/>
-									</div>
+								<div class="text">
+									{{item.content}}
 								</div>
-								<!-- 模拟用户 -->
-								<div class="contents row allAlignment">
-									<div class="userPortrait">
-										<img v-if="0" :src="require('@/assets/userPortrait1.png')"/>
-									</div>
-									<div class="contentsCenter" :style="1?'text-align: right;':''">
-										<div class="txt" :class="0?'left':'right'">{{item.content}}</div>
-									</div>
-									<div class="userPortrait">
-										<img v-if="1" :src="require('@/assets/userPortrait2.png')"/>
-									</div>
+								<ul class="imgs" v-for="i in imgs">
+									<li v-for="child in i">
+										<img :src="url + child" alt="">
+									</li>
+								</ul>
+								<p class="reply_title">回复的留言</p>
+								<div class="reply_text">
+									{{item.reply_content}}
 								</div>
-								<!-- 模拟客服 -->
-								<div class="contents row allAlignment">
-									<div class="userPortrait">
-										<img v-if="1" :src="require('@/assets/userPortrait1.png')"/>
-									</div>
-									<div class="contentsCenter" :style="0?'text-align: right;':''">
-										<div class="txt" :class="1?'left':'right'">{{item.reply_content}} <img
-												v-if="item.image" :src="item.image"/></div>
-									</div>
-									<div class="userPortrait">
-										<img v-if="0" :src="require('@/assets/userPortrait2.png')"/>
-									</div>
-								</div>
-								<!-- 模拟系统消息 -->
-								<div class="system row center">{{item.dealWith_time}}</div>
 							</div>
 						</yd-accordion-item>
 					</yd-accordion>
@@ -125,7 +95,6 @@
 					<div>
             <span style="color:#666;">
               您的手机号
-              <i style="color:#F04992">*</i>
             </span>
 						<b style="color:#F04992">{{formText.phone}}</b>
 						<br/>
@@ -173,7 +142,7 @@
 									<img
 											@click="leaveImgDel(index)"
 											style="max-height:1.2rem;max-width:1.2rem;"
-											:src="item.imgSrc"
+											:src="item.src"
 									/>
 								</div>
 							</div>
@@ -214,7 +183,8 @@
 		name: "knowledgeLibrary",
 		data() {
 			return {
-				data: '',//留言数据
+
+				listData: [],//留言数据
 				flag: false, //留言和知识库开关
 				options: [
 					{
@@ -250,6 +220,13 @@
 				imgSrcList: [], //上传图片列表
 				serchInputValue: "", //搜索输入框的值
 				setImgList: [],//上传图片
+				valTime:"week",
+				pages: 1,
+				imgs: [],
+				url: 'http://kfadmin.bocai186.com', // 域名地址
+				// url: 'http://192.168.2.187:8090', // 域名地址
+				fileList:[],
+				filesImg:''
 			};
 		},
 		props: ["currentTime"],
@@ -285,46 +262,69 @@
 				let files = e.target.files || e.dataTransfer.files;
 				if (!files.length) return;
 				let picavalue = files[0];
-				// console.log(picavalue.type == "image/png");
-				if (picavalue.size / 1024 > 5000) {
-					this.$message({
-						message: "图片过大不支持上传",
-						type: "warning"
-					});
-				} else {
-					this.$public.imgPreview(picavalue, function (imgSrc, formData) {
-						console.log(imgSrc);
-						let obj = {
-							imgSrc,
-							formData
-						}
-						self.imgSrcList.push(obj);
-						self.setImgList.push(formData.get("file"))
 
-					});
+				const isLt1M = picavalue.size / 1024 / 1024 < 0.5;
+				if (!isLt1M) {
+					this.$dialog.toast({mes: '当前没有你要的内容，请发起留言', timeout: 1500});
+					return
+				}
+				const isJPG = picavalue.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
+				if (!isJPG) {
+					this.$dialog.toast({mes: '上传只能是图片格式!', timeout: 1500});
+					return
 				}
+				let _this = this;
+
+				let name = picavalue.name.split('.')[0]
+				let reader = new FileReader();
+				//将图片转成base64格式
+				reader.readAsDataURL(picavalue);
+				//读取成功后的回调
+				reader.onloadend = function() {
+					let result = this.result;
+					_this.$set(picavalue,'src', result);
+					_this.imgSrcList.push(picavalue);
+					console.log(_this.imgSrcList,'读取')
+					_this.$forceUpdate();
+				};
+			},
+
+			// 获取选择内容
+			getList(val){
+				this.valTime = val;
+				let a = document.querySelector("#lists .yd-accordion-content")
+				a.style.height = 0 +"px";
 			},
+
 			// 留言知识库数据获取
-			getAjax(val = "week") {
-				// /index/Message/index
-				console.log(val, '213')
+			getAjax(page, size = 999) {
 				let obj = {
 					headers: {
 						apiToken: this.setApiToken("index", "message", this.currentTime[0], "index")
 					}
 				};
 				this.post("api/index/Message/index", {
-				        time: val,
+				        time: this.valTime,
 						key: this.serchInputValue,
+						type: this.mainTitle,
+						pageSize:size,
+						pageNumber:page
 					},
 					obj
 				).then(res => {
 					if (res.data.status == 1) {
-						this.data = res.data.data
-						if (this.data.length == 0) {
+						this.listData = res.data.data.list;
+						this.pages = res.data.data.total;
+						console.log(this.listData)
+						let _img;
+						for (let i = 0; i < res.data.data.list.length; i++) {
+							_img = res.data.data.list[i].images.split(",");
+							this.imgs.push(_img)
+						}
+
+						if (this.listData.length == 0) {
 							this.$dialog.toast({mes: '当前没有你要的内容，请发起留言', timeout: 1500});
 						}
-						console.log(this.data)
 					}
 				});
 			},
@@ -337,37 +337,56 @@
 				}
 				this.post('api/index/Message/type', {}, obj).then((res) => {
 					if (res.data.status == 1) {
-						this.typeList = res.data.data
+						this.typeList = res.data.data;
 					}
-					console.log(res)
+
 				})
 			},
 			// 留言信息提交
 			leaveSubmit() {
-
+				let uid = localStorage.getItem('uid');
 				if (this.leave.call == '') {
 					this.$dialog.toast({mes: '请填写称呼', timeout: 1500});
-				} else if (this.leave.phone == '') {
-					this.$dialog.toast({mes: '请填写手机号!', timeout: 1500});
 				} else if (this.leave.describe == '') {
 					this.$dialog.toast({mes: '请填写留言信息!', timeout: 1500});
 				} else {
-					let obj = {
-						headers: {
-							apiToken: this.setApiToken("LeavingMessage", "User", this.currentTime[0], "index")
-						}
+
+					for (let i = 0; i < this.imgSrcList.length; i++) {
+						var formData = new FormData();
+						formData.append('file',this.imgSrcList[i])
+						// 提交图片
+						this.post('api/index/upload/uploadImg',formData).then((res) => {
+							this.filesImg = this.filesImg ? this.filesImg + "," + res.data.data.src : res.data.data.src;
+						})
 					}
-					
-					let formData = new FormData();
-					formData.append("file",this.setImgList);
-					formData.append("name",this.leave.call);
-					formData.append("email",this.leave.email);
-					formData.append("describe",this.leave.describe);
-					formData.append("phone",this.leave.phone);
-					this.post('api/index/User/LeavingMessage', formData, obj).then((res) => {
-						console.log(res)
-					})
-					this.flag = false;
+					if(this.imgSrcList.length >= 1){
+
+					}
+
+					// 提交表单
+					setTimeout(()=>{
+						let obj = {
+							headers: {
+								apiToken: this.setApiToken("LeavingMessage", "User", this.currentTime[0], "index")
+							}
+						}
+						console.log(this.filesImg);
+						let params = {
+							'nick_name': this.leave.call,
+							'email': this.leave.email,
+							'content': this.leave.describe,
+							'phone': this.leave.phone,
+							'file': this.filesImg,
+							'account_id': uid,
+						}
+						this.post('api/index/User/LeavingMessage', params, obj).then((res) => {
+							if (res.data.code == 1) {
+								this.$dialog.toast({mes: "留言成功", timeout: 1500});
+								this.fileList =[];
+							}
+						})
+						this.flag = false;
+					},1000)
 				}
 
 			},
@@ -399,7 +418,7 @@
 		},
 		mounted() {
 			this.getAjaxType()
-			this.getAjax();
+			this.getAjax(1);
 		}
 	};
 </script>
@@ -466,7 +485,7 @@
 	.serchLeft div /deep/ .yd-accordion-content {
 		position: absolute;
 		left: 0;
-		top: 0.84rem;
+		top: 0.94rem;
 		z-index: 99;
 		border-radius: 0 0 0.1rem 0.1rem;
 	}
@@ -555,7 +574,7 @@
 	}
 
 	.main-box div /deep/ .yd-accordion-title {
-		max-width: 80%;
+		max-width: 60%;
 		color: #666;
 		font-size: 0.26rem;
 	}
@@ -776,4 +795,29 @@
 	div /deep/ .yd-textarea-counter {
 		display: none;
 	}
+
+	.imgs {
+		margin: 20px 0;
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	.imgs li {
+		margin-right: 10px;
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.imgs li img {
+		width:1rem;
+		height:1rem;
+	}
+
+	.reply_title {
+		text-align: right;
+	}
+	.reply_text {
+		margin-top: 10px;
+		text-align: right;
+	}
 </style>