MingGaoApp_vue/MingGaoApp/pages/response/index.vue

<template>
	<view class="response_box">
		<view class="response_ul">
			<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>

		<!-- 加载 -->
		<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>

		<!-- 视频通话框 -->
		<!-- <u-popup :show="videoShow" :closeOnClickOverlay="false" :customStyle="styleObj1" mode="center"
			@close="videClose" @open="videOpen">

			本地预览视图
			<view class="video_me">
				<zego-local-view :viewMode="publisherViewModeIndex"
					style="height: 403.84rpx;flex: 1; border: 1px solid #0000;">
				</zego-local-view>
			</view>

			服务器传来的预览图
			<view class="video_you">
				<zego-remote-view :viewMode="publisherViewModeIndex"
					style="height: 403.84rpx;flex: 1; border: 1px solid #0000;">
				</zego-remote-view>
			</view>

			<view class="video_btn">
				<view class="video_imgList">
					<view class="video_imgList1">
						<view class="video_view">
							<image src="../../static/image/9.png" mode=""></image>
						</view>
						<view class="">翻转镜头</view>
					</view>
					<view class="video_imgList2">
						<view class="video_view">
							<image src="../../static/image/8.png" mode=""></image>
						</view>
						<view class="">切换语音通话</view>
					</view>
				</view>
				
				<u-button type="error" style="border-radius: 50px; width: 50px; height: 50px;" size="mini" text="关闭">
				</u-button>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	let App = getApp();
	var API = App.globalData.socketTask;
	import permision from "@/zego-express-video-uniapp/permission.js";
	// import ZegoExpressEngine from '@/zego-express-video-uniapp/lib/ZegoExpressEngine';
	import {
		ZegoScenario,
		ZegoRoomState,
		ZegoUpdateType,
		// ZegoViewMode
	} from '@/zego-express-video-uniapp/lib/ZegoExpressDefines'
	import {
		AppID,
		AppSign
	} from '@/zego-express-video-uniapp/KeyCenter.js'
	import ZegoLocalView from '@/zego-express-video-uniapp/zego-view/ZegoLocalView';
	import ZegoRemoteView from '@/zego-express-video-uniapp/zego-view/ZegoRemoteView';
	export default {
		components: {
			// ZegoLocalView: ZegoLocalView,
			// ZegoRemoteView: ZegoRemoteView
		},
		// 过滤
		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'
				},

				// videoShow: false, // 视频通话框
				// styleObj1: {
				// 	backgroundColor: "#fff",
				// 	height: '100%',
				// 	width: '100%'
				// },
				// publisherViewModeIndex: 0, // 本地预览图
				isPublishingStream: false,
			}
		},
		watch: {
			videoData(news, old) {
				console.log('触发了')
				console.log(news)
				if (news) {
					this.videoObj = news
					this.show = true
				}
			},
		},
		computed: {
			videoData() {
				return store.state.video
			},
		},
		methods: {
			loadmoreAxios() {
				console.log(this.list)
			},

			// 即构 - 视频通话 初始化
			async setup() {
				var that = this
				// 创建引擎
				let profile = {
					appID: AppID,
					appSign: AppSign,
					scenario: ZegoScenario.General
				}
				this.engine = await ZegoExpressEngine.createEngineWithProfile(profile);
				// console.log(this.engine)
				this.addListeners();
				// console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + that.videoObj.room_id)
				this.engine.loginRoom(that.videoObj.room_id, {
					userID: that.videoObj.room_id,
					userName: that.videoObj.room_id
				}, {
					isUserStatusNotify: true
				});
			},

			// 即构 - 视频通话 监听房间
			addListeners() {
				// 房间状态变化通知
				this.engine.on("roomStateUpdate", (roomID, state, errorCode, extendedData) => {
					console.log('房间状态变化')
				});

				// 房间用户变化通知
				this.engine.on("roomUserUpdate", (roomID, updateType, userList) => {
					console.log('房间用户变化通知')
				});

				// 房间内其他用户推的流变化通知
				this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
					console.log('房间内其他用户推的流变化通知')
				});

				// 房间内在线用户数量回调
				this.engine.on("roomOnlineUserCountUpdate", (roomID, count) => {
					console.log(roomID)
					console.log(count)
					console.log('>?>>>>>>>>>>>>>>>>>>>>>>>在线用户有变化')
				});

				// 拉流质量回调
				this.engine.on("playerQualityUpdate", (streamID, quality) => {
					console.log('拉流质量回调')
				});

				// 推流质量回调
				this.engine.on("publisherQualityUpdate", (streamID, quality) => {
					console.log('推流质量回调')
				});

				// 采集视频大小变更回调
				this.engine.on("publisherVideoSizeChanged", (width, height, channel) => {
					console.log('采集视频大小变更回调')
				});

				// 拉流分辨率变更通知
				this.engine.on("playerVideoSizeChanged", (streamID, width, height) => {
					console.log('拉流分辨率变更通知')
				});
			},

			// 进入详情
			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');
			},

			// 视频通话弹框
			// videOpen() {
			// 	console.log('open');
			// },
			// videClose() {
			// 	console.log('close');
			// },
			
			// 推流 - 展示视图
			onPublish() {
				// 设置视频配置
				ZegoExpressEngine.instance().setVideoConfig(this.videoObj.room_id);
				
				if (this.isPublishingStream) {
					this.engine.stopPreview();
					this.engine.stopPublishingStream();
					this.publishBtnName = "Start Publishing";
				} else {
					this.engine.startPreview();
					this.engine.startPublishingStream(this.videoObj.room_id);
					this.publishBtnName = "Stop Publishing";
				}
				this.isPublishingStream = !this.isPublishingStream;
			},
		},

		async onLoad() {
			// uni.startPullDownRefresh(); // 开始刷新

			// 即构 - 视频通话
			// 获取系统信息同步接口
			// if (uni.getSystemInfoSync().platform === 'android') {
			// 	await permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
			// 	await permision.requestAndroidPermission('android.permission.CAMERA');
			// }
			// await this.setup()
		},

		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('刷新了')
		},
		// 上拉加载
		onReachBottom() {
			console.log('加载了')
		},

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

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

	.response_box {
		background: #f7f7f7;

		.response_ul {
			// border: 1px solid #000;
			overflow-y: auto;
			// height: 1550rpx;
			height: 1450rpx;

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