Customer-Service-Web/pc_chat/src/components/ledgeBase.vue

<template>
	<div class="chatBox">
		<el-header height='80px'>
			<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
				<el-col class="tit nopd">
					<span @click="back()" class="back pointer"></span>
					<span>留言知识库</span>
				</el-col>
			</el-row>
		</el-header>
		<div class="cationer">
			<el-main class="">
				<div class="leaveCont">
					<div class=" head row">
						<el-select v-model="selt.label" @change="selectGet" class="selt" placeholder="请选择">
							<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
						<el-input
								placeholder="请输入关键词"
								suffix-icon="el-icon-search"
								v-model="crux"
								class="crux"
						>
						</el-input>
						<div class="">
							<el-button type="primary" @click="search()"
									   style="height:40px;width:100px;margin-left:10px;">查询
							</el-button>
						</div>
					</div>

					<div class="nav">
						<div class="list" v-for="item in problemType" :key="item.id"
							 @click="acty(item.id,item.name)" :class="activity == item.id?'listActy':''">
							<span>{{item.name}}</span>
						</div>
					</div>
					<!-- 折叠面板 -->
					<div class="fold" v-if="noBase">
						<el-collapse accordion>
							<el-collapse-item class="list" v-for="item in knowLedgeBase" :key="item.id">
								<template slot="title">
									<div style="width:100%;" class="quesTit">
										<span class="title">{{item.content}}</span>
										<span style="float: right">{{item.add_time}}</span>
									</div>
								</template>
								<div class="text">
									{{item.content}}
								</div>
								<ul class="imgs" v-for="i in imgs">
									<li v-for="child in i">
										<img :src="url + child" alt="">
									</li>
								</ul>
								<p>回复的留言</p>
								<div class="text">
									{{item.reply_content ? item.reply_content : "暂无"}}
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>
					<div v-if="!noBase">
						<div class="noBase">
							<span>暂无数据</span>
						</div>
					</div>
					<!-- 分页 -->
					<el-pagination
							v-if="noBase"
							style="text-align: center"
							background
							layout="prev, pager, next"
							:total="pages" @prev-click='upData'
							@next-click="downData" @current-change="current_page">
					</el-pagination>

				</div>
				<div class="launch">
					<el-button type="primary" @click="launchLeave">发起留言</el-button>
				</div>
			</el-main>
		</div>
	</div>
</template>
<script>
	import '../css/index.css'

	export default {
		name: 'leaveMsg',
		data() {
			return {
				dialogImageUrl: '',
				selt: {value: 'week', label: '最近一周'},//选中默认值
				seltValue: '', // 选中的值
				crux: '',  //关键词
				activeNames: '', //折叠面板选中效果
				activity: '1', //活动列表选中状态
				options: [{
					value: 'week',
					label: '最近一周'
				}, {
					value: 'oneMonth',
					label: '最近一个月'
				}, {
					value: 'threeMonth',
					label: '最近三个月'
				}],
				problemType: '', //类
				knowLedgeBase: '', //知识库问答数据
				problemName: '账号',//类名
				noBase: true, //无数据状态
				imgs: [],
				url: 'http://kfadmin.bocai186.com', // 域名地址
				// url: 'http://192.168.2.187:8090', // 域名地址
				pages: 1,
				optionCont: "",
				ledgedata: {}
			}
		},
		methods: {
			/******************上一页*****************/
			upData(e) {
				this.getLeave(e)
			},

			/*********************下一页******************/
			downData(e) {
				this.getLeave(e)
			},

			/*******************选择页数******************/
			current_page(e) {
				this.getLeave(e)

			},

			// 返回传值到父组件
			back() {
				this.$emit('value', 10)
			},
			// 跳转发起留言
			launchLeave() {
				this.$emit('value', 1000)
			},
			// 切换类
			acty(type, name) {
				this.activity = type;
				this.problemName = name;
				this.getLeave(1);
			},
			// 获取下拉框的值
			selectGet(value) {
				// 获取下拉框的value值
				this.seltValue = value;
			},
			// 获取数据
			getLeave(page, size = 5) {
				this.ledgedata = {
					time: this.optionCont,
					key: this.crux,
					type: this.problemName,
					pageSize: size,
					pageNumber: page,
				}

				this.$axios.post('/api/index/Message/index', this.ledgedata).then(res => {
					if (res.data.status === 1) {
						// console.log('======获取数据=========', res.data.data);
						let _img;
						for (let i = 0; i < res.data.data.length; i++) {
							_img = res.data.data[i].images.split(",");
							this.imgs.push(_img)
						}

						this.knowLedgeBase = res.data.data.list;
						this.pages = res.data.data.total;

						this.knowLedgeBase.length > 0 ? this.noBase = true : this.noBase = false;

					}

				})
			},
			// 查询数据
			search() {
				this.optionCont = '';
				if (this.seltValue == '') {
					this.optionCont = this.selt.value;
				} else {
					this.optionCont = this.seltValue;
				}
				this.getLeave(1)
			}
		},
		mounted() {
			this.activity = '1';
			this.$axios.post('/api/index/Message/type').then(res => {
				if (res.data.status === 1) {
					this.problemType = res.data.data;
					let optionCont = '';
					if (this.seltValue == '') {
						optionCont = this.selt.value;
					} else {
						optionCont = this.seltValue;
					}

					this.getLeave(1)
				}
			})
		}
	}
</script>
<style scoped>
	.title {
		float: left;
		width: 300px;
		overflow: hidden;
		word-break: keep-all;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.imgs {
		margin: 20px 0;
		display: flex;
		justify-content: flex-start;
	}

	.imgs li {
		margin-right: 10px;
		width: 100px;
		height: 100px;
	}

	.imgs li img {
		width: 100px;
		height: 100px;
	}

	.text {
		background: #f5f5f5;
		border: 1px solid #eee;
		padding: 20px;
		font-size: 14px;
		color: #666;
		line-height: 1.8;
		margin-right: 15px;
		margin-top: 15px;
	}

	.chatBox {
		width: 700px;
	}

	.el-header {
		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);
	}

	.tit {
		height: 100%;
		line-height: 80px;
		text-align: left;
		padding-left: 20px;
	}

	.tit span {
		font-size: 18px;
	}

	.el-col span {
		font-size: 18px;
		color: #FFFFFF;
	}

	.imgBox {
		text-align: right;
	}

	.imgBox img {
		margin-right: 20px;
	}

	.imgBox img:nth-last-child(1) {
		margin-right: 0
	}

	.el-main {
		background: #fff;
		width: 445px;
		padding: 0;
	}

	.el-aside {
		background: #F5F5F5;
		width: 255px;
	}

	.cationer, .artificial {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.rt {
		width: 255px;
		box-sizing: inherit;
	}

	.artificial {
		/* width: 150px; */
		/* padding:0 20px; */
		margin-top: 23px;
		margin-bottom: 9px;
		vertical-align: middle;
		/* flex-direction: column;*/

	}

	.infor div {
		margin-bottom: 3px;
	}

	.infor div span, .autograph span {
		color: #999999;
		font-size: 14px;
		font-weight: 400;
	}

	.infor div span:nth-child(2), .autograph span:nth-child(2) {
		color: #666666;
		margin-left: 4px;
	}

	.headPortrait {
		width: 100px;
		height: 100px;
	}

	.autograph {
		margin-bottom: 11px;
	}

	.advent {
		border-top: 1px solid #DDDDDD;
		padding: 20px;
	}

	.advent img {
		width: 215px;
		height: 350px;
	}

	.pd {
		padding: 20px;
	}

	.pd20 {
		padding: 0 20px;
	}

	/* 留言框 */
	.el-main {
		position: relative;
		height: 600px;
		overflow: auto;
	}

	.el-main .leaveCont {
		box-sizing: border-box;
		padding: 20px 20px 13px;
	}

	label {
		font-size: 14px;
		color: #666666;

	}


	.star {
		color: #F04992;
		vertical-align: middle;

	}

	.tips {
		font-size: 12px;
		color: #F04992;
		margin-left: 20px;
	}

	.addPhoto {
		margin: 20px 0 0;
	}

	.addPhoto label {
		margin-bottom: 14px;
	}

	.el-textarea {
		margin-top: 10px;
	}

	.btn {
		position: absolute;
		/* bottom: 23px; */
		right: 20px;
	}

	.el-button {
		width: 120px;
		height: 48px;
		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);
		border-radius: 10px;
	}

	.back {
		display: inline-block;
		width: 25px;
		height: 25px;
		background: url("./../assets/st-img/back.png") no-repeat;
		background-size: 100% 100%;
		vertical-align: middle;
	}

	.nopd {
		padding: 0;
	}

	.pointer {
		cursor: pointer;
	}

	.selt {
		margin-right: 15px;
		width: 160px;
	}

	.cationer .head {
		width: 100%;
		margin-bottom: 20px;
	}

	.crux {
		width: 230px;
	}

	/* 主体 */
	.nav {
		height: 40px;
		background: #5EA0F7;
		border-radius: 5px 5px 0px 0px;
		display: flex;
		justify-content: space-between;
		padding: 10px 10px 0;
	}

	.nav .list {
		width: 90px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
	}

	.nav .list span {
		color: #fff;
	}

	.listActy {
		background: #fff;
		border-radius: 5px 5px 0px 0px;

	}

	.listActy span {
		color: #5EA0F7 !important;
	}

	.list .quesTit {
		align-items: center;
	}

	.list .el-collapse-item__header {
		color: #666666 !important;
	}

	.list .quesTit span {
		color: #666666;
		font-size: 16px;
	}

	.list .quesTit span:nth-last-child(1) {
		color: #999999;
		font-size: 14px;
		margin-right: 10px;
	}

	/* 会话 */
	.conversationBox {
		margin-top: 26px;
	}

	.timer {
		text-align: center;
		margin: 10px 0;
		color: #999999;
		font-size: 12px;
	}

	.headImg {
		width: 40px;
		height: 40px;
		margin-right: 13px;
	}

	.headImg img {
		width: 40px;
		height: 40px;
	}

	.conversation .cont, .customer .cont {
		background: #ffffff;
		padding: 9px 8px 12px 10px;
		display: inline-block;
		border: 1px solid rgba(223, 223, 223, 1);
		border-radius: 5px;
		position: relative;
	}

	.left::after {
		position: absolute;
		content: "";
		display: inline-block;
		left: -4px;
		top: 5px;
		width: 5px;
		height: 9px;
		background: #fff;
		-webkit-transform: skewX(30deg);
		transform: skewX(30deg);
		/* z-index: -1; */
		border-left: 1px solid #dfdfdf;
		border-top: 1px solid #dfdfdf;
	}

	div.noafter::after {
		content: '';
		width: 0;
		height: 0;
		display: inline;
		position: relative;
		border: 0;
	}

	.conversation .cont div, .customer .cont div {
		color: #666666;
		font-size: 16px;
	}

	.customer {
		justify-content: space-between;
	}

	.customer .cont {
		margin-right: 13px;
		border: 0;
		background: #5EA0F7;
	}

	.customer .cont div {
		color: #FFFFFF;
	}

	.right::after {
		position: absolute;
		content: "";
		display: inline-block;
		right: -3px;
		top: 6px;
		width: 5px;
		height: 9px;
		background: #5ea0f7;
		-webkit-transform: skewX(-30deg);
		transform: skewX(-30deg);
		border-left: 1px solid #5ea0f7;
		border-top: 1px solid #5ea0f7;
	}

	.col {
		color: #999999;
	}

	.change {
		color: #5ea0f7;
	}

	.launch {
		box-sizing: border-box;
		border-top: 1px solid #DDDDDD;
		padding: 16px 20px 0 0;
		position: relative;
		height: 80px;
	}

	.launch button {
		position: absolute;
		right: 20px;
	}

	.noBase {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #e0e0e0;
		text-align: center;
	}
</style>