MingGaoApp_vue/MingGaoApp/pages/response/index.vue

<template>
	<view class="response_box" :style="'height:' +  phoneHeight + 'px'">
		<view class="response_ul" v-if="list.length > 0">
			<view class="response_list" v-for="item in list" @click="defail(item)">
				<view class="response_left">
					<u-badge numberType="overflow" shape="circle" :type="type" max="99" :value="item.unread">
					</u-badge>
					<!-- <image :src="item.img" mode=""></image> -->
					<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode=""></image>
				</view>
				<view class="response_right">
					<view class="response_right_title">
						<view class="response_right_titleName">
							{{ item.real_name | name }}
						</view>
						<view class="response_right_titleTime">
							{{ item.msg_list[0].create_time }}
						</view>
					</view>
					<view class="response_right_text">
						{{ item.msg_list[0].msg_info | msgData}}
					</view>
				</view>
			</view>
		</view>

		<view class="" style="padding: 20% 0 0 0;" v-else>
			<image style="margin: 0 0 0 65rpx;" src="../../static/image/13.png" mode=""></image>
			<view style="text-align: center; color: #83ccfd; font-size: 20px; line-height: 20rpx;">暂无数据</view>
		</view>

		<!-- 加载 -->
		<u-loading-page :loading="loading"></u-loading-page>

		<!-- 列表加载更多 -->

		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<!-- 顶部弹出框 - 视频通话提示框 -->
		<u-popup :safeAreaInsetTop="true" :closeOnClickOverlay="false" :customStyle="styleObj" :show="show" mode="top"
			:round="10" @close="close" @open="open">
			<view style="display: flex; justify-content: space-evenly; margin: 25rpx 0 0 0;">
				<view style="display: flex;">
					<view class="topUpImg">
						<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode=""></image>
					</view>
					<view class="topUpTxt">
						<text>嚣张</text>
						<text>邀请你进行视频通话..</text>
					</view>
				</view>

				<view class="topUpBtn">
					<u-button @click="close()" type="error" style="border-radius: 50px; width: 50px; height: 50px;"
						size="mini" text="取消"></u-button>
					<u-button @click="open()" type="success"
						style="border-radius: 50px; width: 50px; height: 50px; margin: 0 0 0 15rpx;" size="mini"
						text="确定"></u-button>
				</view>
			</view>
		</u-popup>

		<!-- 测试 -->
		<image id="remoteVideo"></image>
		<!-- 测试 -->
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	let App = getApp();
	var API = App.globalData.socketTask;
	export default {
		components: {},
		// 过滤
		filters: {
			name: function(val) {
				if (!val) return "";
				if (val.length > 7) {
					return val.slice(0, 7) + '...'
				}
				return val
			},

			msgData: function(val) {
				if (!val) return ""
				if (val.length > 21) {
					return val.slice(0, 21) + '...'
				}
				return val
			},
		},
		data() {
			return {
				loading: false, // 加载
				scrollTop: 0, // 返回顶部
				list: [],
				page: 0,

				// 消息通知
				type: "error",
				value: 99999,

				// 即构
				engine: undefined,
				videoObj: null,
				userid: "Uni" + Math.floor(Math.random() * 1000000).toString(),

				// 弹出框
				show: false,
				styleObj: {
					display: 'flex',
					backgroundColor: "#fff",
					height: '500px'
				},

				isPublishingStream: false,

				phoneHeight: '', // 获取当前的屏幕高度
			}
		},
		watch: {
			videoData(news, old) {
				console.log('触发了')
				console.log(news)
				if (news) {
					this.videoObj = news
					this.show = true
				}
			},

			list(val) {
				console.log(val)
				console.log(App.globalData.socketTask)
				if (val.length == 0 && App.globalData.socketTask == null) {
					App.msgInit(); // 请求重启初始化Websocket
					// var obj = {}
					// obj = {
					// 	'action': 'list', // 动作标识，必填
					// 	'recv_user_id': '', // 接收人用户id， 非必填
					// 	'data': {}
					// }
					// API.send(JSON.stringify(obj))
					// App.msgInit(); // 重新初始化websocket
				}
			},
			msgList(news, old) {
				this.list = news
				console.log(news, '新数据')
				console.log(old, '旧数据')
			}
		},
		computed: {
			// 视频消息
			videoData() {
				return store.state.video
			},

			// 用户列表消息
			msgList() {
				return store.state.list
			}
		},
		methods: {
			loadmoreAxios() {
				console.log(this.list)
			},

			// 进入详情
			defail(data) {
				var that = this
				if (App.globalData.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					// 进入详情前先发送已经阅读过消息
					var obj = {
						'action': 'read', // 动作标识，必填
						'send_user_id': data.user_id, // 接收人用户id， 非必填
						'data': {}
					}
					API.send({
						data: JSON.stringify(obj),
						async success(res) {
							console.log("消息发送成功");
						},
					});
					uni.navigateTo({
						url: '/pages/response/details?data=' + JSON.stringify(data)
					})
				} else {
					console.log('没有进入')
				}
			},

			// 弹出框
			open() {
				console.log('open');
				uni.navigateTo({
					url: '/pages/response/video?videoObj=' + JSON.stringify(this.videoObj)
				})
				this.show = false
			},
			close() {
				this.show = false
				console.log('close');
			},
		},

		async onLoad() {
			var that = this
			// uni.startPullDownRefresh(); // 开始刷新
			uni.getSystemInfo({ //异步获取。
				success(res) {
					that.phoneHeight = res.windowHeight - 0; //窗口高度
					// console.log(that.phoneHeight)
				}
			});
		},

		onShow() {
			var that = this
			var a = App.globalData.list
			for (var i = 0; i < a.length; i++) {
				if (a[i].msg_list[0].im_id == 1) {
					a[i].msg_list.reverse()
				}
			}
			this.list = App.globalData.list; // 倒叙
		},

		// 下拉刷新
		onPullDownRefresh() {
			// console.log('刷新了')
			var that = this
			if (App.globalData.is_open_socket) {
				// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
				var obj = {
					'action': 'list', // 动作标识，必填
					'send_user_id': '', // 接收人用户id， 非必填
					'data': {}
				}
				API.send({
					data: JSON.stringify(obj),
					async success(res) {
						console.log("消息发送成功");
					},
				});
			} else {
				console.log('没有进入')
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		// 上拉加载
		onReachBottom() {
			console.log('加载了')
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f7f7;
		padding: 25rpx 0 25rpx 0;
	}

	.response_box {
		background: #f7f7f7;

		.response_ul {
			background: #f7f7f7;
			overflow: hidden;

			.response_list {
				position: relative;
				background: #FFF;
				border: 1px solid #e5e2e2;
				margin: 0 0 35rpx 0;
				padding: 20rpx 20rpx 20rpx 20rpx;
				display: flex;

				// 左
				.response_left {
					image {
						width: 110rpx;
						height: 110rpx;
						border-radius: 20rpx;
					}
				}

				// 右
				.response_right {
					margin: 8rpx 0 0 30rpx;
					width: 100%;

					.response_right_title {
						line-height: 50rpx;
						display: flex;
						justify-content: space-between;

						.response_right_titleName {}

						.response_right_titleTime {
							color: #999999;
							font-size: 25rpx;
						}
					}

					.response_right_text {
						color: #999999;
						font-size: 25rpx;
						line-height: 58rpx;
					}
				}
			}
		}


		.topUpImg {
			image {
				width: 110rpx;
				height: 110rpx;
				border-radius: 15rpx;
			}

			margin: 15rpx 0 0 15rpx;
		}

		.topUpTxt {
			margin: 45rpx 0 0 15rpx;

			text {
				color: #979994;
				font-size: 28rpx;
				display: block;
			}
		}

		.topUpBtn {
			display: flex;
			margin: 25rpx 0 0 0;
		}

		// 视频通话
		.video_you {
			position: relative;
			// border: 1px solid #000;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.video_me {
			// border: 1px solid #000;
			width: 200rpx;
			height: 300rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.video_btn {
			// border: 1px solid;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			.video_imgList {
				display: flex;
				justify-content: space-evenly;

				.video_imgList1 {

					// border: 1px solid;
					// background: rgba(0, 0, 0, .5);
					.video_view {
						background: rgba(0, 0, 0, .5);
						border: 1px solid;
						border-radius: 50px;
						width: 50px;
						height: 50px;
						margin: 0 auto;

						image {
							width: 50rpx;
							height: 50rpx;
							margin: 24rpx 0 0 25rpx;
						}
					}

					view {
						color: #fff;
						font-size: 20rpx;
					}
				}

				.video_imgList2 {

					// border: 1px solid;
					// background: rgba(0, 0, 0, .5);
					.video_view {
						border: 1px solid;
						background: rgba(0, 0, 0, .5);
						margin: 0 auto;
						border-radius: 50px;
						width: 50px;
						height: 50px;

						image {
							width: 50rpx;
							height: 50rpx;
							margin: 24rpx 0 0 25rpx;
						}
					}

					view {
						color: #fff;
						font-size: 20rpx;
					}
				}
			}
		}
	}

	// uview 样式修改
	/deep/.u-badge--error {
		position: absolute;
		left: 105rpx;
		top: 15rpx;
		z-index: 10;
	}

	/deep/.u-slide-down-enter-active {
		height: 200rpx;
	}
</style>