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">
							<view style="color: #fff; text-align: center; line-height: 90rpx; font-size: 40rpx;">我</view>
						</view>
					</view>

					<!-- you -->
					<view class="list_msgBox2" v-if="item.is_right == false">
						<view class="list_img">
							<view style="color: #fff; text-align: center; line-height: 90rpx; font-size: 40rpx;">{{ tltName.slice(0, 1) }}</view>
						</view>
						<view class="list_triangle"></view>
						<view class="list_msgText">
							{{ item.msg_info }}
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<!-- input输入框 -->
		<u--input type="text" :adjust-position="true" class="details_input" maxlength="30" 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;
	var API = App.globalData;
	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();
				// });

			},
			videoData(news, old) {
				console.log('触发了2222222222222222222222')
				console.log(news)
				uni.switchTab({
					url: '../response/index'
				})
				// if (news) {
				// }
			},

			listData(news, old) {
				console.log('有变化了啊-------------', news)
				// console.log(news, old)
				this.msg_list = []
				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();
						// this.msg_list = news[i].msg_list;
					}
				}
				this.$forceUpdate()
				console.log(this.msg_list, '新数组啊啊-------------')
			},
			// 视频消息
			videoData() {
				return this.$store.state.video
			},
		
		},
		computed: {
			listData() {
				return store.state.list
			},
		},
		onLoad(options) {
			var that = this
			var data = this.$store.state.list
			that.msg_list = []
			that.tltName = options.data
			
			for (var j = 0; j < data.length; j++) {
				if (options.data == data[j].real_name) {
					for (var i = 0; i < data[j].msg_list.length; i++) {
							that.val = data[j].msg_list
							that.msg_list = data[j].msg_list.reverse();
					}
				}
			}
			
			
			// that.msg_list = []
			// that.tltName = data.real_name
			// var arrayData = data
			// 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
				console.log(that.val)
				if (that.value !== "") {
					var obj = {
						'action': 'send', // 动作标识，必填
						'recv_user_id': that.val.user_id, // 接收人用户id， 非必填
						'data': {
							'msg_status': false, // 消息未读
							'msg_info': that.value, // 发送消息
						}
					}
					console.log(that.value.user_id)
					// App.globalData.userId = null
					App.globalData.userId = that.val.user_id
					console.log(obj, '发送的数据', that.val.user_id, App.globalData.socketTask)
					that.transmit(obj)
				} else {
					that.$refs.uToast.show({
						message: '不能为空！',
						type: 'error',
						icon: true,
					})
				}
			},

			// websocket发送
			transmit(obj) {
				var that = this
				// App.globalData.userId = that.value.user_id
				App.globalData.msgSetTime = setTimeout(() => {
					that.$refs.uToast.show({
						message: '消息发送失败，请关闭程序重试！',
						type: 'error',
						icon: true,
					})
				}, 10000)
				API.socketTask.send({
					data: JSON.stringify(obj),
					async success(res) {
						that.msg_list = [...that.msg_list, {
							msg_info: that.value,
							is_right: true
						}]
						that.value = ''
					},
					fali(err) {
						console.log('消息发送失败了', err)
					},
					complete(com) {
						console.log('消息发送完成，但不知道成没成功', com)
					}
				});
			},



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



		onReady() {
			// 修改头部标题栏
			uni.setNavigationBarTitle({
				title: this.tltName
			});
		},
		
		// 监听页面返回
		// onBackPress() {
		// 	console.log(App.globalData.list, '这是改变前')
		// 	getApp().globalData.list = App.globalData.list.sort()
		// 	// App.globalData.list = App.globalData.list.sort()
		// 	console.log(App.globalData.list, '这是改变后')
		// },
	}
</script>

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

	.details_box {
		height: 100%;

		.details_ul {
			height: 93%;
			overflow-y: auto;
			padding: 0 0 120rpx 0;

			.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;
						// }
						view {
							width: 96rpx;
							height: 96rpx;
							border-radius: 20rpx;
							background-image: linear-gradient(#a7fbc6, #60fba5);
							margin: 0 10rpx 0 0;
						}
					}
				}

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

					.list_img {
						// image {
						// 	width: 96rpx;
						// 	height: 96rpx;
						// }
						view {
							width: 96rpx;
							height: 96rpx;
							border-radius: 20rpx;
							background-image: linear-gradient(#addbff, #5cacff);
							margin: 0 0 0 10rpx;
						}
					}

					.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>