cbz/page_shop/pages/mine/chatDetail.vue

<template>
	<view class="content">
		<view class="list">
			<block v-for="(item,index) in pageList" :key="index">
				<view v-if="left"></view>
				<view v-if="right"></view>
			</block>
		</view>
		<view class="bottom">
			<u-input v-model="message" border="none" placeholder="和他聊一下吧~" @confirm="sendText"></u-input>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				userInfo: {
					
				},
				other: {
					id: '',
					name: ''
				},
				message: '',
				pageList: []
			}
		},
		onLoad(options) {
			that = this
			if(options.id) {
				that.other.id = options.id,
				that.other.name = options.name
			}
			that.getUserInfo()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: that.other.name
			})
		},
		methods: {
			getUserInfo() {
				
			},
			sendText() {
				let option = {
				    // 设置消息类型。
				    type: "txt",
				    // 设置消息内容。
				    msg: that.message,
				    // 设置消息接收方，单聊为对方用户 ID，群聊和聊天室分别为群组 ID 和聊天室 ID。
				    to: that.other.id,
				    // 设置会话类型，单聊、群聊和聊天室分别为 `singleChat`、`groupChat` 和 `chatRoom`，默认为单聊。
				    chatType: "singleChat",
				};
				let msg = uni.WebIM.message.create(option);
				uni.WebIM.conn.send(msg).then((res) => {
				  console.log("Send message success",res);
				}).catch((error) => {
				  console.log("Send message fail",error);
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		.bottom {
			width: 100%;
			height: 166rpx;
			position: fixed;
			bottom: 0;
			z-index: 99;
			
			background: #FFFFFF;
			.u-input {
				width: 612rpx;
				height: 80rpx;
				background: #F4F4F4;
				border-radius: 42rpx;
				margin: 12rpx 22rpx 0 30rpx;
				box-sizing: border-box;
				padding: 22rpx 32rpx !important;
			}
		}
	}
</style>