webapp / GreenwayWeb

<template>
	<view class="uni-padding-wrap">
		<view class="" style="position:fixed;bottom: 0rpx;left: 0;width: 100%;">
			<form @submit="commitComments">
				<view style="display: flex;justify-content: space-between;;padding: 10px;">
					<input class="contentTextArea" name="commentContent" v-model="sumshop.chatContent" placeholder="请输入"></input>
					<button class="commitButton" formType="submit">发送</button>
				</view>
			</form>
		</view>
				
		<view class="uni-comment" v-show="commentsList.length!=0" id="words" >
			<view :class="item.messageType==2?'uni-comment-list':'uni-comment-listTWO'" v-for="(item,index) in commentsList" :key="index"  >
				<view   style="text-align: right;margin-top: 10rpx;"	v-if="item.messageType==1">
					<view class="uni-comment-top" style="margin-right: 10px;">
						<view>{{item.userName==''||item.userName==null?'匿名':item.userName}}</view>
						
						
					</view>				
					<view class="uni-comment-content ziji" style="margin-right: 10px;text-align: right;padding-right: 15px;">{{item.chatContent}}</view>
					<view class="uni-comment-date">{{item.chatTime}}</view>
				</view>
				<view class="uni-comment-face" v-if="item.messageType==1">
					<image :src="$baseURL+user.headImage" mode="widthFix"></image>
				</view>
				
				<view class="uni-comment-face" v-if="item.messageType==2">
					<image src="../../components/canvasShow/static/images/product/kefu.png" mode="widthFix"></image>
				</view>
				<view class="uni-comment-body" v-if="item.messageType==2">
					<view class="uni-comment-top">
						<view>{{item.shopName==''||item.shopName==null?'匿名':item.shopName}}</view>
						
					</view>				
					<view class="uni-comment-content kehu" style="text-align: left;padding-left: 15px;">{{item.chatContent}}</view>
					<view class="uni-comment-date">{{item.chatTime}}</view>
				</view>
			</view>
			
		</view>
		<view class="uni-comment" v-if="commentsList.length==0">
			<view class="uni-comment-list">
				<view class="uni-comment-face">
					<image src="../../components/canvasShow/static/images/product/kefu.png" mode="widthFix"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<view>商家</view>
						
					</view>				
						<view class="uni-comment-content kehu" style="text-align: left;padding-left: 15px;">您好！请问有什么问题呢？</view>
						<view class="uni-comment-date"></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
	data(){
		return{
			commentsList:[],
			user:{},
			index:'',	
			sumshop:{
				chatContent:'',
				shopId:''
			},
			timer: null // 定义定时器
		}
	},
	mounted() {
		
		    this.timer = setInterval(() => {
		      this.getMsg()
		    }, 30000)
				
	},
	onLoad(option) {
	  console.log(option.shopId) 
	  this.sumshop.shopId = option.shopId
	  NET.requestGet(API.keSeverList, option.shopId, 'GET').then(res => {
		  this.commentsList = res.data
	  	NET.request(API.GetUser, {}, 'GET').then(iotem => {	
	  		this.user = iotem.data
	  	})
	  	
	  })
	},
	 beforeDestroy() {
	    // 组件销毁时清除定时器，避免内存泄漏
	    if (this.timer) {
	      clearInterval(this.timer)
	    }
	  },
	methods:{	
		commitComments(){
			if(this.sumshop.chatContent == ''){
				return
			}
			NET.request(API.keSever, this.sumshop, 'POST').then(res => {
				if(res.code=='200'){
					this.sumshop.chatContent = ''
					this.getMsg(1)
					
				}
			})
			
		},
		getMsg(val){
			NET.requestGet(API.keSeverList, this.sumshop.shopId, 'GET').then(res => {
				this.commentsList = res.data
				if(val == 1){
					this.scollBottom()
				}
				
			})
		},
		scollBottom(){
			var oWords = document.getElementById('words')
			       setTimeout(() => {
			         this.$nextTick(() => {
			           oWords.scrollTop = oWords.scrollHeight+87.5
			         })
			       }, 100)
		}
		
	}
}
</script>
    <style lang="scss" scoped>  
 .uni-padding-wrap{
	 height: calc(100vh - 100px);
	 position: relative;
 }
 .ziji {
 	width: 100%;
	
 	/* 假设消息框占据了屏幕宽度的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;
 	/* 左下角保持直角，这其实是默认值 */
 }
 .kehu {
 	width: 100%;
 	/* 假设消息框占据了屏幕宽度的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;
 	/* 左下角保持直角，这其实是默认值 */
 }
	view {
		font-size: 28upx;
	}
 
	.uni-comment {
		padding: 30upx;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		scrollbar-width: none;
		overflow: hidden;
		height: 95vh;
		overflow-y: auto;
	}
 
	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
	}
 
 .uni-comment-listTWO{
	 flex-wrap: nowrap;
	 padding: 10rpx 0;
	 margin: 10rpx 0;
	 width: 100%;
	 display: flex;
	 justify-content: flex-end;
 }
	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}
 
	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}
 
	.uni-comment-body {
		margin-top: 10rpx;
		width: 100%;
	}
 
	.uni-comment-top {
		// display: flex;
		// justify-content: flex-start;
		line-height: 1.5em;
		
	}
 
	.uni-comment-top text {
		color: #3F9B6A;
		margin-right: 20rpx;
		font-size: 24upx;
	}
 
	.uni-comment-top{
		
	}
 .uni-comment-date {
 		color: #666666;
 		font-size: 24upx;
 }
	.uni-comment-content {
		line-height: 1.6em;
		font-size: 28upx;
		padding: 8rpx 10px;
		margin:8rpx 0;
		 /* 移除固定高度和宽度 */
		  height: auto;
		  width: auto;
		  /* 使用 inline-block 或 flex 让盒子根据内容自动调整大小 */
		  display: inline-block; 
		   max-width: 70%; /* 大致限制宽度为父元素的 70% */
		    word-wrap: break-word; /* 允许长单词换行 */
		    overflow-wrap: break-word; /* 同 word-wrap，更标准的写法 */
		    display: inline-block; /* 让盒子根据内容自适应宽度 */
	}
 
	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}
	.commitButton{
		height: 64rpx;
		color: #fff;
		width: 20%;
		margin: 0rpx auto;
		font-size: 27rpx;
		border-radius: 10px;
		line-height: 64rpx;
		background-color: #3F9B6A;
	}
	.contentTextArea{
		
		font-size: 30rpx;
		background-color: #fff;
		border:1rpx solid #e9e7ef;
		border-right: 0px solid transparent;
		width: 72%;
		height: 40rpx;
		margin: 0rpx auto;
		padding: 10rpx 0 10rpx 20rpx;
		border-radius: 10px;
	}
</style>