Customer-Service-Web/chat/src/components/knowledgeLibrary.vue

<template>
	<div>
		<!-- 留言知识库 -->
		<div v-if="!flag">
			<div class="header row item-center allAlignment">
				<!-- 返回按钮 -->
				<div style="height:100%;" @click="returnIndex" class="row item-center">
					<img src="@/assets/return.png" style="height:.35rem;width:.35rem"/>
				</div>
				<div>留言知识库</div>
				<div></div>
			</div>
			<div class="serch row allAlignment">
				<!-- 时间选择 -->
				<div class="serchLeft">
					<yd-accordion>
						<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,getList(item.value)"
								>
									<p :class="serchLeftClick == item.label?'active':''">{{item.label}}</p>
								</li>
							</ul>
						</yd-accordion-item>
					</yd-accordion>
				</div>
				<!-- 搜索框 -->
				<div class="serchBox row item-center">
					<input type="text" v-model="serchInputValue" placeholder="请输入关键词"/>
					<p style="padding:.22rem .2rem" @click="serchClick">
						<img src="@/assets/serchImg.png" style="width:.24rem;height:.24rem;"/>
					</p>
				</div>
			</div>
			<div class="main">
				<div class="main-title row allAlignment bottomAlignment">
					<div
							v-for="(item) in typeList" :key="item.id"
							class="main-title-list row center"
							:class="mainTitle== item.name?'active':''"
							@click="mainTitle =  item.name,getAjax(1)"
					>{{item.name}}
					</div>
				</div>
				<div class="main-box">
					<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="text">
									{{item.content}}
								</div>
								<ul class="imgs" v-if="showImg" 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>
						</yd-accordion-item>
					</yd-accordion>
				</div>
			</div>
			<div class="main-bottom row center" @click="flag = true">发起留言</div>
		</div>
		<!-- 留言模块 -->
		<div v-if="flag">
			<div class="leave">
				<div class="leave-header row item-center allAlignment">
					<p>我要留言</p>
					<img
							style="width:.3rem;height:.3rem;"
							@click="flag = false"
							:src="require('@/assets/Service4.png')"
					/>
				</div>
				<div class="leave-main">
					<div>
            <span style="color:#666;">
              您的称呼
              <i style="color:#F04992">*</i>
            </span>
						<b style="color:#F04992">{{formText.call}}</b>
						<br/>
						<input type="text" @focus="leave.call = ''" @blur="leave.call ? '': formText.call = '称呼不能为空' "
							   v-model="leave.call"/>
					</div>
					<div>
            <span style="color:#666;">
              您的手机号
            </span>
						<b style="color:#F04992">{{formText.phone}}</b>
						<br/>
						<input type="text" @focus="formText.phone = ''" @blur="phoneBlur()" v-model="leave.phone"/>
					</div>
					<div>
            <span style="color:#666;">
              您的邮箱地址
				<!--              <i style="color:#F04992">*</i>-->
            </span>
						<b style="color:#F04992">{{formText.email}}</b>
						<br/>
						<input type="email" v-model="leave.email"/>
					</div>
					<p>
            <span style="color:#666;">
              您的留言信息
              <i style="color:#F04992">*</i>
            </span>
						<b style="color:#F04992">{{formText.describe}}</b>
						<br/>
						<textarea class="leave-main-txt" v-model="leave.describe" @focus="leave.describe = ''"
								  @blur="leave.describe ? '': formText.describe = '留言内容不能为空'"
								  style="margin-top:.1rem;width:100%;height:1.6rem"></textarea>
					</p>
					<div style="height:2.2rem;margin-top:.3rem;overflow-x: hidden;overflow-y: auto;">
            <span style="color:#666;">
              您的图片预览
              <i style="color:#F04992">*</i>
            </span>
						<b style="color:#F04992">（单次最多4张图片）</b>
						<br/>
						<section class="imgMsg row item-center" style="margin-bottom:.1rem;">
							<div
									style="height:100%;"
									:style="imgSrcList.length==4?'width:100%;':''"
									class="row allAlignment"
							>
								<div
										class="row center"
										style="width:1.4rem;height:1.4rem"
										v-for="(item,index) in imgSrcList"
										:key="index"
								>
									<img
											@click="leaveImgDel(index)"
											style="max-height:1.2rem;max-width:1.2rem;"
											:src="item.src"
									/>
								</div>
							</div>
							<input
									type="file"
									accept="image/jpeg, image/jpg, image/png, image/svg"
									id="fileBtn"
									@change="leaveFile($event)"
									style="display:none;"
							/>
							<label
									v-if="imgSrcList.length<4"
									for="fileBtn"
									class="row center"
									style="width:.8rem;height:.8rem;border:.02rem solid #ccc;border-radius: .1rem;background:#fff;color:#999;font-size:.5rem;margin-left:.3rem"
							>+</label>
						</section>
					</div>
					<input type="file" id="fileBtn" @change="leaveFile($event)" style="display:none;"/>
					<label
							for="fileBtn"
							class="row center"
							style="width:100%;height:.8rem;border:.01rem solid #ddd;border-radius: .1rem;background:#fff;color:#999;"
					>上传图片</label>
					<button
							style="background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);box-shadow:0 .03rem .03rem rgba(0,0,0,0.2);border-radius:.1rem;height:1rem;width:100%;border:none;font-size:.34rem;color:#fff;margin-top:.17rem;"
							@click="leaveSubmit"
					>提交留言
					</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "knowledgeLibrary",
		data() {
			return {

				listData: [],//留言数据
				flag: false, //留言和知识库开关
				options: [
					{
						value: "week",
						label: "最近一周"
					},
					{
						value: "oneMonth",
						label: "最近一个月"
					},
					{
						value: "threeMonth",
						label: "最近三个月"
					}
				],
				typeList: '',//留言知识库类型
				serchLeftClick: "最近一周", //时间选择开关
				mainTitle: "充值", // 留言知识库开关
				//用户留言信息
				leave: {
					call: "", //称呼
					phone: "", //手机号
					email: "", //邮箱
					describe: "", //留言描述问题
					imgArr: [],// 上传的图片地址
				},
				formText: {  //表单验证错误提示
					phone: '',
					email: '',
					describe: '',
					call: '',
				},
				imgSrcList: [], //上传图片列表
				serchInputValue: "", //搜索输入框的值
				setImgList: [],//上传图片
				valTime:"week",
				pages: 1,
				imgs: [],
				url: 'http://kfadmin.bocai186.com', // 域名地址
				// url: 'http://192.168.2.187:8090', // 域名地址
				fileList:[],
				filesImg:'',
				showImg:false,
			};
		},
		props: ["currentTime"],
		methods: {
			// 设置apiToken
			setApiToken(name, controller, time, modules) {
				let txetVal = name + "customer-service" + controller + time + modules;
				// let sssd = txetVal.toLowerCase();
				// console.log(sssd);
				return this.$md5(txetVal.toLowerCase());
			},
			//   返回上级 子传父
			returnIndex() {
				this.$emit("returnIndex", false);
			},

			/*******************************************/
			// 留言图片删除
			leaveImgDel(i) {
				this.$dialog.confirm({
					title: "删除图片",
					mes: "你确定要删除吗？",
					opts: () => {
						this.imgSrcList.splice(i, 1);
					}
				});
			},

			/*******************************************/
			// 用户留言上传图片
			leaveFile(e) {
				let self = this;
				let files = e.target.files || e.dataTransfer.files;
				if (!files.length) return;
				let picavalue = files[0];

				const isLt1M = picavalue.size / 1024 / 1024 < 0.5;
				if (!isLt1M) {
					this.$dialog.toast({mes: '上传的图片不能大于0.5MB', 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(page, size = 999) {
				this.imgs = []
				let obj = {
					headers: {
						apiToken: this.setApiToken("index", "message", this.currentTime[0], "index")
					}
				};
				this.post("api/index/Message/index", {
				        time: this.valTime,
						key: this.serchInputValue,
						type: this.mainTitle,
						pageSize:size,
						pageNumber:page
					},
					obj
				).then(res => {
					if (res.data.status == 1) {
						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(",");
							if(_img != ""){
								this.showImg = true
								this.imgs.push(_img);
							}else {
								this.showImg = false
							}
						}

						if (this.listData.length == 0) {
							this.$dialog.toast({mes: '当前没有你要的内容，请发起留言', timeout: 1500});
						}
					}
				});
			},
			// 留言知识库类型获取
			getAjaxType() {
				let obj = {
					headers: {
						apiToken: this.setApiToken("type", "message", this.currentTime[0], "index")
					}
				}
				this.post('api/index/Message/type', {}, obj).then((res) => {
					if (res.data.status == 1) {
						this.typeList = res.data.data;
					}

				})
			},
			// 留言信息提交
			leaveSubmit() {
				let uid = localStorage.getItem('uid');
				if (this.leave.call == '') {
					this.$dialog.toast({mes: '请填写称呼', timeout: 1500});
				} else if (this.leave.describe == '') {
					this.$dialog.toast({mes: '请填写留言信息!', timeout: 1500});
				} else {

					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;
						})
					}
					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)
				}

			},
			// 搜索按钮被点击
			serchClick() {
				// 如果输入框的值存在就调用接口
				if (this.serchInputValue.length > 0) {
					this.getAjax(1)
				} else {
					this.serchInputValue = '';
					this.getAjax(1)
					this.$dialog.toast({mes: '请输入关键词再搜索', timeout: 1500});
				}
			},
			// 验证手机号
			phoneBlur() {
				if (!(/^1[3456789]\d{9}$/.test(this.leave.phone))) {
					this.leave.phone = ''
					this.formText.phone = "手机号码有误，请重填"
				}
			},
			// 验证邮箱
			// emailBlur(){
			//   if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.leave.email))){
			//     this.leave.email = ''
			//     this.formText.email = "邮箱格式错误，请重填"
			//   }
			// }
		},
		mounted() {
			this.getAjaxType()
			this.getAjax(1);
		}
	};
</script>

<style scoped>
	/* 留言知识库 */
	.header {
		height: 1rem;
		background: linear-gradient(
				90deg,
				rgba(22, 84, 209, 1) 0%,
				rgba(9, 52, 173, 1) 100%
		);
		box-shadow: 0px 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
		color: #fff;
		font-size: 0.34rem;
		padding: 0 0.3rem;
	}

	.serch {
		padding: 0.3rem;
	}

	.serchLeft {
		position: relative;
		width: 2.2rem;
		height: 0.8rem;
	}

	.serchLeft div /deep/ .yd-accordion-head {
		padding: 0.2rem;
		border: 0.02rem solid #ddd;
		border-radius: 0.1rem;
		height: 0.8rem;
	}

	.serchLeft div /deep/ .yd-accordion-title,
	.serchLeft div /deep/ .yd-accordion-head-arrow {
		display: flex;
		min-height: 0rem !important;
		align-items: center;
		font-size: 0.28rem;
	}

	.serchLeft div /deep/ .yd-accordion-head:after {
		display: none;
	}

	.serchLeft div /deep/ .yd-accordion-content:after {
		display: none;
	}

	.serchLeft div /deep/ .yd-accordion-head-arrow:after {
		width: 0.22rem;
		height: 0.22rem;
		background: url("../assets/bottom.png");
		background-size: 100% 100%;
	}

	.serchLeft div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
		transform: rotate(180deg);
	}

	.serchLeft div /deep/ .yd-accordion-content {
		position: absolute;
		left: 0;
		top: 0.94rem;
		z-index: 99;
		border-radius: 0 0 0.1rem 0.1rem;
	}

	.list {
		width: 2.2rem;
		height: 0.6rem;
		background: #fff;
		padding: 0 0.2rem;
	}

	.list p {
		width: 100%;
		font-size: 0.26rem;
		text-align: center;
		border-bottom: 0.01rem solid #ddd;
		line-height: 0.6rem;
	}

	.list p.active {
		color: #5ea0f7;
	}

	.serchBox {
		width: 4.5rem;
		height: 0.8rem;
		border-radius: 0.1rem;
		background: #fff;
		border: 0.02rem solid #ddd;
	}

	.serchBox input {
		width: 100%;
		height: 100%;
		border: none;
		padding: 0.2rem;
		font-size: 0.28rem;
		color: #999;
	}

	.serchBox input:focus {
		color: #666;
	}

	.serchBox input::placeholder {
		color: #999;
	}

	.main {
		padding: 0 0.3rem;
	}

	.main-title {
		height: 0.8rem;
		background: #5ea0f7;
		color: #fff;
		border-radius: 0.1rem 0.1rem 0 0;
		padding: 0 0.1rem;
	}

	.main-title-list {
		width: 1.46rem;
		height: 0.7rem;
		border-radius: 0.1rem 0.1rem 0 0;
		font-size: 0.28rem;
	}

	.main-title-list.active {
		background: #fff;
		color: #5ea0f7;
	}

	.main {
		height: 68vh;
	}

	.main-box {
		height: 90%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.main-box div /deep/ .yd-accordion-head-content {
		justify-content: space-between;
		padding-right: 0.3rem;
	}

	.main-box div /deep/ .yd-accordion-title {
		max-width: 60%;
		color: #666;
		font-size: 0.26rem;
	}

	.main-box div /deep/ .yd-accordion-title span {
		display: inline-block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	div /deep/ .yd-accordion-head-content {
		width: 80%;
	}

	div /deep/ .yd-accordion-content {
		border-radius: 0;
	}

	div /deep/ .yd-accordion {
		border-radius: 0;
		border-top: none;
	}

	div /deep/ .yd-accordion-head {
		border: 0.02rem solid #ddd;
		border-top: none;
	}

	.main-bottom {
		background: linear-gradient(
				90deg,
				rgba(22, 84, 209, 1) 0%,
				rgba(9, 52, 173, 1) 100%
		);
		box-shadow: 0px 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
		border-radius: 0.1rem;
		font-size: 0.34rem;
		color: #fff;
		height: 1rem;
		margin: 0.3rem;
	}

	.chatContent {
		background: #f5f5f5;
		border: 0.02rem solid #ddd;
		border-top: none;
		padding: 0.3rem 0.2rem;
	}

	.userPortrait {
		width: 1rem;
		height: 1rem;
	}

	.userPortrait img {
		width: 100%;
		height: 100%;
	}

	.contentsCenter {
		width: 69%;
	}

	.contents {
		margin-top: 0.3rem;
	}

	.txt {
		padding: 0.2rem;
		border-radius: 0.1rem;
		display: inline-block;
		font-size: 0.28rem;
		max-width: 92.5%;
		word-wrap: break-word;
		position: relative;
	}

	.left {
		color: #555;
		margin-left: 0.3rem;
		border: 0.01rem solid #dfdfdf;
		background: #fff;
	}

	.left::after {
		position: absolute;
		content: "";
		display: inline-block;
		left: -0.08rem;
		top: 0.2rem;
		width: 0.125rem;
		height: 0.2rem;
		background: #fff;
		transform: skewX(30deg);
		border-left: 0.02rem solid #dfdfdf;
		border-top: 0.02rem solid #dfdfdf;
	}

	.right {
		color: #fff;
		margin-right: 0.3rem;
		background: #5ea0f7;
	}

	.right::after {
		position: absolute;
		content: "";
		display: inline-block;
		right: -0.06rem;
		top: 0.2rem;
		width: 0.125rem;
		height: 0.2rem;
		background: #5ea0f7;
		transform: skewX(-30deg);
	}

	.system {
		font-size: 0.24rem;
		color: #bbb;
		margin-top: 0.3rem;
	}

	div /deep/ .yd-tab-nav .yd-tab-active:before {
		content: none;
		display: none;
	}

	/*
	*留言模块
	*/
	.leave-header {
		height: 1rem;
		background: linear-gradient(
				90deg,
				rgba(22, 84, 209, 1) 0%,
				rgba(9, 52, 173, 1) 100%
		);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		color: #fff;
		font-size: 0.34rem;
		padding: 0 0.3rem;
	}

	.leave-main {
		height: 10rem;
		background: #f5f5f5;
		font-size: 0.28rem;
		padding: 0.3rem 0.3rem 0.2rem 0.3rem;
	}

	.leave-main > div {
		height: 1.3rem;
		margin-bottom: 0.2rem;
	}

	.leave-main > div input {
		height: 0.8rem;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
		background: #fff;
		padding: 0.2rem;
		width: 100%;
		margin-top: 0.1rem;
	}

	.leave-main-txt {
		background: #fff;
		padding: 0.2rem;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
	}

	.imgMsg {
		height: 1.5rem;
		padding: 0 0.2rem;
		margin-top: 0.1rem;
		font-size: 0.24rem;
		background: #fff;
		border: 0.01rem solid #ddd;
		border-radius: 0.1rem;
	}

	.yd-cell-box {
		width: 60%;
		min-height: 1.2rem;

		border: none;
		padding-right: 0.3rem;
		padding-left: 0.3rem;
	}

	div /deep/ .yd-textarea > textarea {
		box-sizing: border-box;
		height: auto;
		min-height: 1.2rem;
		font-size: 0.28rem;
		padding-top: 0.4rem;
	}

	.yd-textarea {
		padding: 0;
	}

	.yd-cell-box {
		margin: 0;
	}

	.yd-cell-item {
		padding: 0;
	}

	div /deep/ .yd-cell:after {
		height: 0;
	}

	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>