webapp / GreenwayWeb

<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti">
			<div style="display:flex;border: 1px solid #d7d7d7;width: 100%;">
				<div class="left_list">
					<div :class="index == msgListIndex ?'cardClick' :'card'" style="position: relative;"
						v-for="(item,index) in tableData" @click="getMsg(item.businessUserId,index)" v-if="totle!=0" >
						<el-badge :value="item.num" :hidden="item.num ==0?true:false"
							style="position: absolute;top: 65%;right:20px;"></el-badge>
						<div style="display:flex;justify-content: space-between; margin-bottom: 10px;width: 100%;">

							<div class="name">{{item.userName}}</div>

							<div>{{item.chatTime}}</div>
						</div>
						<div class="const">{{item.chatContent}}</div>
					</div>
					<div v-if="totle==0" style="display: flex;justify-content: space-around;margin: 20px;font-size: 16px;">暂无消息对话</div>
				</div>
				<div class="right_list" ref="commentsContainer" v-if="msgListIndex!=null">
					<div class="title_name">{{kehuName}}</div>
					<div class="right_list" style="width: 100%;height: 68vh;" id="words">
						<div :class="item.messageType==1?'neiBox':'zijiBox'" v-for="(item,index) in msgList">
							<div style="padding: 10px;">{{item.messageType==1?item.userName:item.shopName }}</div>
							<div :class="item.messageType==1?'kehu':'ziji'">{{item.chatContent}}</div>
							<div :class="item.messageType==1?'time':'time'">{{item.chatTime}}</div>
						</div>
					</div>
					<!-- <div class="" v-for="(item,index) in msgList" v-if="item.messageType==2">
				 <div style="padding: 10px;">{{item.shopName}}</div>
                <div class="">{{item.chatContent}}</div>
                <div class="" style="text-align: right;">{{item.chatTime}}</div>
             </div> -->

					<div class="footput">
						<el-input v-model="sumkehu.chatContent" placeholder="请输入"
							style="width:90%;margin-right: 15px;" />
						<el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">发送
						</el-button>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		shopGetDetails,
		shopGetList,
		shopPushMsg,
		updateReadStatus
	} from '@/api/server';
	export default {
		data() {
			return {
				msg: '',
				totle:0,
				msgListIndex: null,
				tableData: [],
				msgList: [],
				sumkehu: {
					businessUserId: '',
					chatContent: ''
				},
				kehuName: '',
				timer: null, // 定义定时器


			}
		},
		created() {

		},
		mounted() {
			this.getAll()

			this.$nextTick(() => {
				this.timer = setInterval(() => {
					this.getAll()
					if (this.msgListIndex !== null) {
						this.getmsgList(this.sumkehu.businessUserId)
					}
				}, 30000)
			})


		},

		beforeDestroy() {
			// 组件销毁时清除定时器，避免内存泄漏
			if (this.timer) {
				clearInterval(this.timer)
			}

		},
		methods: {
			async getAll(formInline) {
				const res = await shopGetList();
				this.tableData = res.data
				this.totle = this.tableData.length
			},
			async getmsgList(ids,val) {
				const res = await shopGetDetails(ids)
				this.msgList = res.data
				this.kehuName = res.data[0].userName
				if(val == 1){
					this.scollBottom()
				}
				

			},
			async update(ids) {
				let obj = {
					businessUserId: ids
				}
				const res = await updateReadStatus(obj)
			},

			getMsg(ids, index) {

				this.getmsgList(ids,1)
				this.update(ids)
				this.sumkehu.businessUserId = ids
				this.msgListIndex = index


			},
			async onSubmit() {
				if (this.sumkehu.chatContent == '') {
					return
				}
				await shopPushMsg(this.sumkehu)
				this.sumkehu.chatContent = ''
				this.getmsgList(this.sumkehu.businessUserId)
				this.scollBottom()
			},
			scollBottom() {
				var oWords = document.getElementById('words')
				setTimeout(() => {
					this.$nextTick(() => {
						oWords.scrollTop = oWords.scrollHeight + 55
					})
				}, 100)


			}
		}
	}
</script>

<style scoped>
	/deep/ .first-column-bg {
		background-color: #f4f4f5 !important;
	}

	.zhuti {
		padding: 20px;
		background-color: #fff;
	}

	/deep/ .el-form-item__content {
		width: 80%;
	}

	.left_list {
		border-right: 1px solid #d7d7d7;
		width: 25%;
		height: 80vh;
		overflow-y: auto;
		/* 允许垂直滚动 */
	}

	.right_list {
		width: 75%;
		height: 80vh;
		/* position: relative; */
		overflow-y: auto;
		/* 允许垂直滚动 */
	}

	.card {
		padding: 20px;
		border-bottom: 1px solid #d7d7d7;
	}

	.card:hover {
		background-color: #DEEBE2;
		color: #3F9B6A;
	}

	.cardClick {
		padding: 20px;
		border-bottom: 1px solid #d7d7d7;
		background-color: #3F9B6A;
		color: #fff;
	}

	.cardClick:hover {
		background-color: #3F9B6A;
		color: #fff;
	}

	/* 针对WebKit内核的浏览器（如Chrome和Safari）隐藏滚动条 */
	.left_list::-webkit-scrollbar {
		display: none;
	}

	/* 对于Firefox，使用以下CSS属性隐藏滚动条 */
	.left_list {
		scrollbar-width: none;
		/* Firefox 64 */
	}

	/* 针对WebKit内核的浏览器（如Chrome和Safari）隐藏滚动条 */
	.right_list::-webkit-scrollbar {
		display: none;
	}

	/* 对于Firefox，使用以下CSS属性隐藏滚动条 */
	.right_list {
		scrollbar-width: none;
		/* Firefox 64 */
	}

	.const {
		width: 80%;
		white-space: nowrap;
		/* 防止文字换行 */
		overflow: hidden;
		/* 隐藏溢出的文字 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.title_name {
		border-bottom: 1px solid #d7d7d7;
		padding: 20px;
	}

	.neiBox {
		padding: 20px;
	}

	.zijiBox {
		padding: 20px;
		align-content: flex-end;
		flex-wrap: wrap;
		flex-direction: column;
		display: flex;
	}

	.footput {
		display: flex;
		/*  position: absolute;
  bottom:0;
  left:0; */
		padding: 10px;
		width: 100%;
		align-items: center;
	}

	.kehu {
		  height: auto;
		  /* 使用 inline-block 或 flex 让盒子根据内容自动调整大小 */
		  max-width: 70%; /* 大致限制宽度为父元素的 70% */
		    word-wrap: break-word; /* 允许长单词换行 */
		    overflow-wrap: break-word; /* 同 word-wrap，更标准的写法 */
		    display: inline-block; /* 让盒子根据内容自适应宽度 */
		/* 假设消息框占据了屏幕宽度的80% */
		padding: 16px;
		/* 消息框内的内边距 */
		background-color: #F7F5F6;
		/* 蓝色背景 */
		color: #000;
		/* 白色文字 */
		position: relative;
		/* 为了定位右上角的表情符号 */
		font-size: 16px;
		/* 字体大小 */
		text-align: left;
		/* 文字左对齐 */
		/* 移除圆角 */
		border-radius: 0;
		/* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
		border-top-right-radius: 22px;
		/* 可以根据需要调整或删除此行 */
		border-bottom-right-radius: 22px;
		/* 同上 */
		/* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
		/* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
		border-top-left-radius: 40px;
		border-bottom-left-radius: 0;
		/* 左下角保持直角，这其实是默认值 */
	}

	.ziji {
		height: auto;
		  /* 使用 inline-block 或 flex 让盒子根据内容自动调整大小 */
		  max-width: 70%; /* 大致限制宽度为父元素的 70% */
		    word-wrap: break-word; /* 允许长单词换行 */
		    overflow-wrap: break-word; /* 同 word-wrap，更标准的写法 */
		    display: inline-block; /* 让盒子根据内容自适应宽度 */
		/* 假设消息框占据了屏幕宽度的80% */
		padding: 16px;
		/* 消息框内的内边距 */
		background-color: #3F9B6A;
		/* 蓝色背景 */
		color: white;
		/* 白色文字 */
		position: relative;
		/* 为了定位右上角的表情符号 */
		font-size: 16px;
		/* 字体大小 */
		text-align: left;
		/* 文字左对齐 */
		/* 移除圆角 */
		border-radius: 0;
		/* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
		border-top-right-radius: 40px;
		/* 可以根据需要调整或删除此行 */
		border-bottom-right-radius: 0px;
		/* 同上 */
		/* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
		/* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
		border-top-left-radius: 22px;
		border-bottom-left-radius: 22px;
		/* 左下角保持直角，这其实是默认值 */
	}

	.time {
		padding: 5px;
	}
</style>