fangtanhua/pages/index/chat.vue

<template>
	<view class="chat">
		<view class="chat-list">
			<view class="more-btn" @click="tomore">
				{{showmore ? '点击查看更多' : '没有更多了'}}
			</view>
			<view class="chat-item u-flex u-col-top u-row-between" v-for="(item,index) in list" :key="index">
				<image :src="item.headimg" :style="{opacity:item.type == 2 ? 1 : 0}" class="user-head" mode=""></image>
				<view class="item-box u-flex-1 u-flex-col" :style="{alignItems: item.type == 2 ? 'flex-start' : 'flex-end'}">
					<text>{{item.name}}</text>
					<text :class="item.type == 2 ? 'text1' : 'text2'">{{item.content}}</text>
				</view>
				<image :src="item.headimg" :style="{opacity:item.type == 2 ? 0 : 1}" class="user-head" mode=""></image>
			</view>
			<view class="chat-item u-flex u-col-top u-row-between" v-for="(item,index) in chatlist" :key="index">
				<image :src="item.headimg" :style="{opacity:item.type == 2 ? 1 : 0}" class="user-head" mode=""></image>
				<view class="item-box u-flex-1 u-flex-col" :style="{alignItems: item.type == 2 ? 'flex-start' : 'flex-end'}">
					<text>{{item.name}}</text>
					<text :class="item.type == 2 ? 'text1' : 'text2'">{{item.content}}</text>
				</view>
				<image :src="item.headimg" :style="{opacity:item.type == 2 ? 0 : 1}" class="user-head" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 170rpx;"></view>
		<view class="chat-btn u-flex u-row-between">
			<input type="text" placeholder="请输入" v-model="text">
			<text @click="send(text)">发送</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				hx_username: '',
				worker_id:'',
				page: 1,
				list: [],
				chatlist:[],
				myname:'',
				myheadimg:'',
				workername:'',
				workerheadimg:'',
			}
		},
		onLoad(option) {
			this.hx_username = option.hx_username
			this.worker_id = option.worker_id
			this.myname = uni.getStorageSync("name")
			this.myheadimg = uni.getStorageSync("headimg")
			this.getlist()
			this.getworker()
			this.getmsg()
		},
		computed:{
			showmore(){
				if(this.list.length % 20 == 0 && this.list.length > 0){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			tomore(){
				if(this.showmore){
					this.page++
					this.getlist()
				}
			},
			getmsg(){
				this.$WebIM.conn.addEventHandler('getmsg', {
					// 当前用户收到文本消息。
					onTextMessage: (message) => {
						console.log(message);
						this.chatlist.push({
							content: message.msg,
							create_at: this.$u.timeFormat(message.time, 'yyyy-mm-dd hh:MM:ss'),
							headimg: message.from == uni.getStorageSync("hx_username") ? this.myheadimg : this.workerheadimg,
							name: message.from == uni.getStorageSync("hx_username") ? this.myname : this.workername,
							type: message.from == uni.getStorageSync("hx_username") ? 1 : 2,
						})
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop:99999
							})
						})
					},
				})
			},
			getworker(){
				this.$u.post('/api/News/get_worker_info',{
					worker_id: this.worker_id
				}).then(res => {
					this.workername = res.data.name
					this.workerheadimg = res.data.headimg
				})
			},
			getlist() {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				this.$u.post('/api/News/news_list', {
					worker_id: this.worker_id,
					page_num: 20,
					page: this.page
				}).then(res => {
					var list = res.data
					list.forEach(val => {
						this.list.unshift(val)
					})
					if(this.page == 1){
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop:99999
							})
						})
					}
					
				})
			},
			send(text) {
				if (!text) {
					this.$u.toast("请输入内容")
					return
				}
				this.text = ''
				let option = {
					// 消息类型。
					type: "txt",
					// 消息内容。
					msg: text,
					// 消息发送方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
					from: uni.getStorageSync("hx_username"),
					// 消息接收方：单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
					to: this.hx_username,
					// 会话类型：单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`，默认为单聊。
					chatType: "singleChat",
				};
				// 创建文本消息。
				let msg = this.$WebIM.message.create(option);
				// console.log(msg);
				this.$WebIM.conn.send(msg).then(res => {
					this.$u.post('/api/News/send_news', {
						worker_id: this.worker_id,
						content: text
					}).then(res => {
						this.chatlist.push({
							content: msg.msg,
							create_at: this.$u.timeFormat(msg.time, 'yyyy-mm-dd hh:MM:ss'),
							headimg: this.myheadimg,
							name: this.myname,
							type: 1,
						})
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop:99999
							})
						})
						
						// console.log(this.chatlist);
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F2;
	}

	.chat {
		.chat-list {
			padding: 24rpx;
			.more-btn{
				padding: 10rpx 0;
				text-align: center;
			}
			.chat-item {
				margin-bottom: 44rpx;

				.item-box {
					text:first-child {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						padding: 8rpx 24rpx;
					}

					text:last-child {
						padding: 20rpx;
						border-radius: 20rpx;
					}

					.text1 {
						background-color: #fff;
					}

					.text2 {
						background-color: #1F7EFF;
						color: #fff;
					}
				}

				.user-head {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
				}
			}
		}

		.chat-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			z-index: 10;
			padding: 0 24rpx 60rpx 24rpx;

			input {
				width: 574rpx;
				height: 58rpx;
				background: #F2F2F2;
				border-radius: 30rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
			}

			text {
				width: 102rpx;
				line-height: 58rpx;
				background: #1F7EFF;
				border-radius: 30rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>