MingGaoApp_vue/MingGaoApp/pages/response/details.vue

<template>
	<view class="details_box" :style="'height:' +  phoneHeight + 'px'">

		<!-- 对话列表 -->
		<scroll-view id="scrollview" class="chat-window" scroll-y="true" :scroll-with-animation="true"
			:scroll-top="scrollTop" @scrolltolower="lower">
			<view class="details_ul" id="msgBox">
				<view class="details_list" v-for="item in msg_list">
					<!-- me -->
					<view class="list_msgBox1" v-if="item.is_right == true">
						<view class="list_msgText">
							{{ item.msg_info }}
						</view>
						<view class="list_triangle"></view>
						<view class="list_img">
							<image src="../../static/image/7.png" mode=""></image>
						</view>
					</view>

					<!-- you -->
					<view class="list_msgBox2" v-if="item.is_right == false">
						<view class="list_img">
							<image src="../../static/image/6.png" mode=""></image>
						</view>
						<view class="list_triangle"></view>
						<view class="list_msgText">
							{{ item.msg_info }}
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<!-- input输入框 -->
		<u--input type="text" class="details_input" maxlength="200" confirm-type="send" @confirm="search()"
			placeholder="请输入内容" border="surround" v-model="value" @change="sendChange"></u--input>

		<!-- 警告提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	let App = getApp();
	var API = App.globalData.socketTask;
	export default {
		data() {
			return {
				phoneHeight: '', // 获取当前的屏幕高度
				value: "", // input框值	
				tltName: '', // 头部标题
				val: {}, // 接收用户数据
				msg_list: [], // 消息列表

				// 警告提示
				show: false,

				// 聊天页面时时滚动样式
				// style: {
				// 	pageHeight: 0,
				// 	contentViewHeight: 0,
				// 	footViewHeight: 90,
				// 	mitemHeight: 0
				// },
				scrollTop: 0,
			}
		},
		watch: {
			msg_list(val) {
				// 实现打开聊天框后滚动条定位到最下方
				// this.$nextTick(() => {
				// 	// var div = document.getElementById("msgBox");
				// 	// div.scrollTop = div.scrollHeight;
				// 	// console.log(div.scrollHeight)

				// 	// const query = uni.createSelectorQuery().in(this);
				// 	// query.select('.details_ul').boundingClientRect(data => {
				// 	// 	console.log(data)
				// 	// }).exec();
				// });

			},

			listData(news, old) {
				// console.log(news, old)
				for (var i = 0; i < news.length; i++) {
					if (news[i].real_name == this.tltName) {
						this.val = news[i]
						this.msg_list = news[i].msg_list.reverse();
					}
				}

			}

		},
		computed: {
			listData() {
				return store.state.list
			},
		},
		onLoad(options) {
			console.log(store.state)
			var that = this
			var data = JSON.parse(options.data)
			that.tltName = data.real_name
			var arrayData = App.globalData.list
			for (var i = 0; i < arrayData.length; i++) {
				if (arrayData[i].real_name == data.real_name) {
					that.val = arrayData[i]
					that.msg_list = arrayData[i].msg_list.reverse();
				}
			}

			uni.getSystemInfo({ //异步获取。
				success(res) {
					that.phoneHeight = res.windowHeight - 13; //窗口高度
				}
			});
		},
		methods: {
			// 实时监控input框数据
			sendChange(data) {
				this.value = data
			},
			// 按回车键发送数据
			search() {
				var that = this
				if (that.value !== "") {
					var obj = {
						'action': 'send', // 动作标识，必填
						'recv_user_id': that.val.user_id, // 接收人用户id， 非必填
						'data': {
							'msg_status': false, // 消息未读
							'msg_info': that.value, // 发送消息
						}
					}
					App.globalData.userId = this.value
					that.transmit(obj)
				} else {
					this.$refs.uToast.show({
						message: '不能为空！',
						type: 'error',
						icon: true,
					})
				}
			},

			// websocket发送
			transmit(obj) {
				var that = this
				API.send({
					data: JSON.stringify(obj),
					async success(res) {
						console.log("消息发送成功");
						that.msg_list = [...that.msg_list, {
							msg_info: that.value,
							is_right: true
						}]
						that.value = ''
					},
				});
			},



			lower(e) {
				console.log(e)
			},
		},



		onReady() {
			// 修改头部标题栏
			uni.setNavigationBarTitle({
				title: this.tltName
			});
		},
	}
</script>

<style lang="scss" scoped>
	page {
		overflow: hidden;
	}

	.details_box {
		height: 100%;

		.details_ul {
			height: 93%;
			overflow-y: auto;

			.details_list {
				.list_msgBox1 {
					display: flex;
					margin-top: 22rpx;
					justify-content: flex-end;

					.list_msgText {
						background: #60fba5;
						color: #000;
						padding: 30rpx 15rpx 30rpx 25rpx;
						line-height: 24px;
						border-radius: 8rpx;
						width: 325rpx;
					}

					.list_triangle {
						width: 0;
						height: 0;
						border-top: 6px solid transparent;
						border-left: 10px solid #60fba5;
						border-bottom: 5px solid transparent;
						margin: 35rpx 0 0 0;
					}

					.list_img {
						image {
							width: 96rpx;
							height: 96rpx;
						}
					}
				}

				.list_msgBox2 {
					display: flex;
					margin-top: 22rpx;
					justify-content: flex-start;

					.list_img {
						image {
							width: 96rpx;
							height: 96rpx;
						}
					}

					.list_triangle {
						width: 0;
						height: 0;
						border-top: 5px solid transparent;
						border-right: 10px solid #eae9eb;
						border-bottom: 6px solid transparent;
						margin: 35rpx 0 0 0;
					}

					.list_msgText {
						width: 325rpx;
						background: #eae9eb;
						color: #000;
						padding: 30rpx 15rpx 30rpx 25rpx;
						line-height: 24px;
						border-radius: 8rpx;
					}
				}
			}
		}

		// 输入框
		.details_input {
			border: 0;
			border-top: 1px solid #eaeaea;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 96%;
			height: 90rpx;
			border-radius: 0;
			background: #fff;
		}
	}
</style>