uni-app直播开发教程

这篇具有很好参考价值的文章主要介绍了uni-app直播开发教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第三方平台选型:腾讯、阿里、即构、声网

由于即构直播平台支持uni-app故本文章选用的是即构sdk版讲解

一、效果

uni-app直播开发教程,uni-app,uni-app

二、sdk集成

     1、  首先注册即构平台账号,然后对照即构官网一步步集成

主要分为sdk插件集成与JS 封装层集成这两部分,具体步骤请移步官网查看。

uni-app实时音视频示例源码下载 - 开发者中心 - ZEGO即构科技

   

   2、调试,即构官网提供了pc网页直播推流地址,如下

    推拉流基础功能

         需要到控制台获取自己创建的AppIDRoomID、UserID、Token、StreamID,填入其中,app直播端也需要填写一样的appid.有关app部分下一步再讲。需要注意的是,直播端与观众端的AppIDRoomID、StreamID三个需要一致才可看到对方的直播。

  uni-app直播开发教程,uni-app,uni-app

3、app端代码

需要修改 appSign、AppID,修改成自己的。文章来源地址https://www.toymoban.com/news/detail-553144.html

<template>
	<view class="colum_layout">
		<!-- 状态栏 -->
		<view class="title" style="width: 100%;height: 70rpx;background-color: black;"></view>
		<!-- <zego-local-view style="height: 300rpx;width: 400rpx;position: absolute;display: flex;z-index:999"></zego-local-view> -->

		<!-- 拉流布局 -->
		<view class="live_parent" @click="hide_edit">
			<zego-remote-view class="live_play" :streamID="playStreamID" :viewMode="AspectFit=1">
			</zego-remote-view>
		</view>

		<!-- 在线人数 -->
		<view class="onlines">
			<text class="user_name">昵称:医生</text>
			<!-- @click="loginOut" -->
			<view class="onlineMd">
				<text class="onlineTag">在线</text>
				<text class="online_num">{{online}}</text>
				<image @click="closed" style="width: 40rpx;height: 40rpx; margin-right: 40rpx;" src="/static/cha.png">
				</image>
			</view>
		</view>

		<!-- 消息列表 -->
		<view :class="isShowKeyboad?'msg_list_height':'msg_list_low'">
			<scroll-view scroll-y="true" class="list-content" show-scrollbar="false" :enhanced="true" :bounces="false"
				:scroll-with-animation="true" :scroll-top="commentScrollTop">
				<view class="list-item" id="commentContent" v-for="(item,index) in msg" :key="index">
					<!-- item.fromUser.userName -->
					<text class="person_title">{{item.fromUser.userName}}</text>
					<!-- item.message -->
					<text class="content_body">{{item.message}}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 消息输入 -->
		<view class="enter_input" v-if="isShowKeyboad">
			<textarea class="input_reply_msg" maxlength="50" :show-confirm-bar="false" v-model="msg_enter" auto-height
				focus='true' placeholder="请输入消息" @input="inputHandle" />
			<text class="send_msg" @click="sendMsg">发送</text>
		</view>

		<!-- 消息反馈模块 -->
		<view class="interaction" v-if="!isShowKeyboad">
			<!-- <view> -->
			<!-- <zego-local-view class="push_live"></zego-local-view> -->
			<!-- </view> -->
			<text class="input_msg" @click="inputMsg">说点什么吧...</text>
			<!-- <text class="like_click" @click="likeClick">点赞</text> -->
			<likeButton :throttle="100" :large="2" :site="[60, 160]"
				style="display: flex;position: fixed;bottom: 32rpx;right: 30rpx;">
			</likeButton>

		</view>
	</view>
</template>

<script>
	// 导入权限工具类
	import permision from "@/pages/permission.js";
	// 导入直播引擎
	import ZegoExpressEngine from '@/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';
	// 导入推流布局组件
	import ZegoLocalView from '@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoLocalView';
	// 导入拉流布局组件
	import ZegoRemoteView from '@/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoRemoteView';

	//点赞按钮
	import likeButton from '@/components/like-button/like-button.vue';

	export default {
		components: {
			ZegoLocalView: ZegoLocalView,
			ZegoRemoteView: ZegoRemoteView,
			ZegoExpressEngine,
			likeButton
		},
		data() {
			return {
				title: 'Hello',
				isShowKeyboad: false,
				msg_enter: "",
				engine: undefined,
				playStreamID: 'streamID123',
				msg: [],
				commentScrollTop: 999999, //评论区滚动高度
				roomID: 'mghome123', //房间id
				userID: '222222', //用户id
				userName: '医生', //用户名
				online: 0, //在线用户数
			}
		},

		onLoad: function(option) { //option为object类型,会序列化上个页面传递的参数
			console.log("=====打印出上个页面传递的参数=="); //打印出上个页面传递的参数。

			this.userID = Math.floor(Math.random(10000) * 10000) + ""; //用户id
			this.userName = option.usName; //用户名
		},


		//返回键
		onBackPress() {
			console.log("===onBackPress===");
			this.loginOut();

		},

		created() {
			this.playStreamID = 'streamID123';
		},

		onReady() {
			this.playStreamID = 'streamID123';

			var that = this;
			this.initZegoExpressEngine();


		},
		
		//隐藏
		onHide() {
			that.logoutRoom(that.roomID);
		},

		mounted() {

		},

		methods: {
			async initZegoExpressEngine() {
				var that = this;

				console.log("==mounted==");
				//Android 权限请求
				if (uni.getSystemInfoSync().platform === "android") {
					await permision.requestAndroidPermission(
						"android.permission.RECORD_AUDIO"
					);
					await permision.requestAndroidPermission(
						"android.permission.CAMERA"
					);
				}


				//异步按顺序执行
				new Promise(res => {
					that.createEngine(); //创建视频流引擎

					setTimeout(() => {
						console.log("===mogu===");
						res();

					}, 100);

				}).then(res => {
					console.log("===mogu11===");

					//登录房间
					that.loginRoom(that.roomID, that.userID, that.userName);

				}).then(res => {
					console.log("===mogu22===");

					that.addListeners(); //添加监听

				});
			},

			//关闭页面
			closed() {
				this.loginOut();
			},

			//登出sasaa
			loginOut() {
				var that = this;
				that.engine.stopPlayingStream(that.playStreamID);

				that.logoutRoom(that.roomID);

				ZegoExpressEngine.destroyEngine(res => {

				});

				uni.reLaunch({
					url: '/pages/login/login'
				})
				// plus.runtime.quit();
			},

			//发送消息
			sendMsg: function(e) {
				var that = this;
				// console.log("====发送消息====" + JSON.stringify(this.engine));

				if (this.msg_enter == '' || this.msg_enter.length == 0) {
					uni.showToast({
						title: '输入不能为空',
						icon: "error",
						duration: 2000
					});
					return 1;
				}

				let msgConn = [{
					"sendTime": 1687763213632,
					"message": "" + this.msg_enter,
					"messageID": 1,
					"fromUser": {
						"userID": this.userID,
						"userName": this.userName
					}
				}];

				that.msgListDeal(msgConn);

				// 发送广播消息,每个登录房间的用户都会通过 IMRecvBroadcastMessage 回调事件收到此消息
				this.engine.sendBroadcastMessage('mghome123', "" + this.$data.msg_enter).then((
					result) => {
					// 获取消息发送结果
					console.log("====按钮发送====" + JSON.stringify(result));

					that.msg_enter = '';

					//隐藏软键盘方法
					that.hide_edit();

				})

			},

			// 接收消息
			receiverMsg: function(e) {
				var that = this;
				this.engine.on("IMRecvBroadcastMessage", (mghome, messageList) => {

					console.log("==1111==" + JSON.stringify(that.$data.msg));

					that.msgListDeal(messageList);

					console.log("==2222==" + JSON.stringify(that.$data.msg));

				});

				this.engine.on('IMRecvBarrageMessage', (mghome, messageList) => {
					console.log("===received barrage message==" + JSON.stringify(messageList))
				});

				// this.engine.on('IMRecvCustomCommand', (mghome, fromUser, command) => {
				//       console.log("("===received custom command=="+JSON.stringify(messageList)) 
				// })
			},

			//消息列表显示处理e
			msgListDeal: function(messageList) {
				var that = this;

				if (that.$data.msg.length >= 10) { //只显示最新10条消息
					that.$data.msg.shift();
				}

				that.$data.msg.push(...messageList); //新消息添加

				setTimeout(() => {
					this.commentScrollTop = this.commentScrollTop + 1;
				}, 100);

			},

			//键盘监听
			keyBoardHeightListener: function(e) {
				uni.onKeyboardHeightChange(res => {
					if (res.height == '0') { //隐藏键盘
						this.$data.isShowKeyboad = false;
					}

				})
			},

			//输入消息监听
			inputHandle(e) {

				this.$data.msg_enter = e.detail.value;

				console.log("==输入消息监听===" + e.detail.value)
			},

			// 键盘弹出
			inputMsg() {
				this.$data.isShowKeyboad = true;
				// console.log("===键盘弹出===");

			},


			//隐藏键盘
			hide_edit(e) {

				console.log("===隐藏软键盘方法===");
				this.$data.isShowKeyboad = false;
				uni.hideKeyboard() //隐藏软键盘方法

			},

			//创建引擎 
			async createEngine() {
				// 采用通用场景
				const profile = {
					appID: ,//换成自己的appid
					// AppSign 仅满足简单的鉴权需求,如果需要升级为更加安全的鉴权方式,请参考[如何从 AppSign 鉴权升级为 Token 鉴权](https://doc-zh.zego.im/faq/token_upgrade?product=ExpressVideo&platform=all)
					// AppSign 可通过[控制台](https://console.zego.im/dashboard)获取,格式为 @"39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
					appSign: '',//换成自己的appSign
					scenario: 0
				};

				this.engine = await ZegoExpressEngine.createEngineWithProfile(
					profile
				);


				console.log("==创建引擎==" + JSON.stringify(this.engine));

				//设置分辨率
				let config = {
					encodeWidth: 360,
					encodeHeight: 640
				}
				ZegoExpressEngine.instance().setVideoConfig(config);

			},

			//登录房间
			async loginRoom(roomID, userID, userName) {

				this.logoutRoom(roomID);

				let roomConfig = {};
				// 只有传入 “isUserStatusNotify” 参数取值为 “true” 的 ZegoRoomConfig,才能收到 onRoomUserUpdate 回调。
				roomConfig.isUserStatusNotify = true;
				// 登录房间
				// 开始登录房间
				this.engine.loginRoom(roomID, {
					'userID': userID,
					'userName': userName
				}, roomConfig);

				this.receiverMsg(); //接收消息监听
			},

			//登出房间
			logoutRoom(roomID) {

				this.engine.logoutRoom(roomID);
			},

			//推流
			async likeClick() {

				// #需要使用$nextTick延时调用,否则没有效果

				console.log("==推流==");

				/** 1. 创建美颜环境 */
				// await this.engine.startEffectsEnv();

				/** 开关美颜效果 */
				// await this.engine.enableEffectsBeauty(true);

				//js部分:
				/** 开始预览 */

				// ZegoExpressEngine.instance().startPreview();

				/** 开始推流  APP-PULL stream无值, Web有值,为MediaStream*/
				// const stream = await ZegoExpressEngine.instance().startPublishingStream("streamID123");

				// 推流视频流监听
				// ZegoExpressEngine.instance().on("publisherStateUpdate", (streamID, state, errorCode, extendedData) => {
				// 调用推流接口成功后,当推流器状态发生变更,如出现网络中断导致推流异常等情况,SDK在重试推流的同时,会通过该回调通知
				//....
				// });
			},

			//房间监听
			addListeners() {
				console.log("=======房间监听======");
				var that = this;

				// 以下为常用的房间相关回调
				that.engine.on('roomStateUpdate', (roomID, state, errorCode,
					extendedData) => {
					// 房间状态更新回调,登录房间后,当房间连接状态发生变更(如出现房间断开,登录认证失败等情况),SDK会通过该回调通知
					console.log("==房间状态更新回调==" + JSON.stringify(roomID));
				});;

				that.engine.on('roomUserUpdate', (roomID, updateType, userList) => {
					// 用户状态更新,登录房间后,当房间内有用户新增或删除时,SDK会通过该回调通知
					console.log("==用户状态更新==" + JSON.stringify(userList));

					if (updateType == 0) {
						that.online = that.online + userList.length;
					} else {

						if (that.online >= userList.length) {
							that.online = that.online - userList.length;
						}

						console.log("==用户状态更新==" + that.online);
					}

				});

				that.engine.on('roomStreamUpdate', (roomID, updateType, streamList) => {
					// 流状态更新,登录房间后,当房间内有用户新推送或删除音视频流时,SDK会通过该回调通知
					// 开始拉流
					if (streamList.length > 0) {

						if (streamList[0].streamID != '') {
							that.playStreamID = streamList[0].streamID;
							const streamss = that.engine.startPlayingStream(streamList[0]
								.streamID);
							console.log("==流状态更新==" + JSON.stringify(streamList[0].streamID));


						}

					}

				});

			},

			recycleData: function() {

				var that = this;

				//异步按顺序执行
				// new Promise(res => {
				// 	console.log("===mogu===");
				// 	// setTimeout(() => {
				// 	// 	res();
				// 	// }, 100);
				// 	/** 停止本地预览 */
				// 	// that.engine.stopPreview();
				// 	/** 停止推流 */
				// 	// that.engine.stopPublishingStream();
				// 	/** 停止拉流 */
				// 	that.engine.stopPlayingStream(that.playStreamID);
				// 	/** 退出房间 */
				// 	that.engine.logoutRoom(that.roomID);
				// 	/** 销毁引擎 */
				// 	ZegoExpressEngine.destroyEngine();
				// 	//移除键盘高度监听
				// 	uni.offKeyboardHeightChange(res => {
				// 	});
				// 	console.log("===销毁引擎==="+that.playStreamID+"=="+that.roomID);

				// });

			}

		},


		onUnload() {

			this.recycleData();
			// console.log("===销毁引擎===");
		}


	}
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: transparent
	}

	.colum_layout {
		flex: 1;
		height: 100px;
	}


	.play_screen {
		display: flex;
		height: 100vh;
		width: 100vh;
		flex-direction: column;
		justify-content: flex-end;
	}

	/* 在线人数模块 */
	.onlines {
		height: 90rpx;
		width: 750rpx;
		background: transparent;
		position: absolute;
		top: 90rpx;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	/*  */
	.user_name {
		height: 70rpx;
		background-color: #09c2fa;
		margin-left: 30rpx;
		padding-top: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-radius: 30rpx;
		align-items: center;
		text-align: center;
		font-size: 29rpx;
		color: #fff;
		background-color: rgba(128, 128, 128, 0.2);
	}

	/* 在线模块	 */
	.onlineMd {
		background: transparent;
		margin-right: 40rpx;
		flex-direction: row;
		align-items: center;
	}

	/*在线标记*/
	.onlineTag {
		color: white;
		margin-right: 8rpx;
		font-size: 28rpx;
	}


	/* 在线用户数 */
	.online_num {
		width: 80rpx;
		background-color: red;
		height: 80rpx;
		margin-right: 40rpx;
		border-radius: 40rpx;
		align-items: center;
		text-align: center;
		padding-top: 25rpx;
		font-size: 28rpx;
		background-color: rgba(128, 128, 128, 0.2);
		color: #fff;
	}

	/* 直播父布局 */
	.live_parent {
		flex: 1;
		height: 100px;
		position: sticky;
	}

	/* 直播组件 */
	.live_play {
		flex: 1;
		position: relative;
		height: 100px;
		z-index: -1
	}

	/* 拉流 */
	.push_live {
		height: 300rpx;
		width: 400rpx;
		position: absolute;
		bottom: 100rpx;
		display: flex;
		z-index: 999
	}

	/* 消息列表 */
	.list-content {
		max-height: 300px;
		padding-bottom: 30rpx;
	}

	/* 键盘未弹起消息布局 */
	.msg_list_low {
		position: absolute;
		width: 420rpx;
		height: 600rpx;
		background-color: red;
		background: transparent;
		bottom: 160rpx;
		justify-content: flex-end;
	}

	/* 键盘弹起消息布局 */
	.msg_list_height {
		position: absolute;
		width: 420rpx;
		/* 	height: 600rpx; */
		background: transparent;
		bottom: 300rpx;
		max-height: 600rpx;
		justify-content: flex-end;
	}

	/* 水平内容 */
	.list-item {
		background-color: yellow;
		margin-top: 20rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		flex-direction: row;
		background: transparent;
		background-color: rgba(128, 128, 128, 0.1);
		padding: 10rpx;

	}


	.person_title {
		margin-left: 5rpx;
		color: #09c2fa;
		margin-right: 10rpx;
		font-size: 28rpx;
	}

	.content_body {
		font-size: 28rpx;
		width: 344rpx;
		color: #fcfcfc;
		padding-right: 10rpx;
	}

	/*  */


	/* 消息输入按钮模块 */
	.enter_input {
		width: 750rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		bottom: 120rpx;
		align-items: center;
		background-color: white;
		border: transparent;
	}

	/* 消息输入框 */
	.input_reply_msg {
		border: transparent;
		flex: 1;
		min-height: 66rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		background-color: #f0f0f0;
		margin-left: 10rpx;
		padding-left: 20rpx;
		border-radius: 40rpx;
		margin-right: 30rpx;
	}


	/* 发送消息 */
	.send_msg {
		width: 100rpx;
		height: 58rpx;
		font-size: 28rpx;
		text-align: center;
		margin-right: 30rpx;
		padding-top: 13rpx;
		background-color: #FF9999;
		border-radius: 30rpx;
		color: white;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}

	/* 底部浮动布局 */
	.interaction {
		background: transparent;
		background-color: transparent;
		position: fixed;
		bottom: 20rpx;
		display: flex;
		flex: 1;
		width: 750rpx;
		flex-direction: row;
		justify-content: space-between;
	}

	/* 点击输入消息 */
	.input_msg {
		width: 320rpx;
		margin-left: 30rpx;
		height: 78rpx;
		background-color: rgba(128, 128, 128, 0.3);
		border-radius: 40rpx;
		color: #999999;
		padding-top: 20rpx;
		text-align: left;
		padding-left: 30rpx;
	}

	.like_click {
		height: 70rpx;
		width: 160rpx;
		display: flex;
		background-color: #06c6ad;
		padding-top: 20rpx;
		color: white;
		font-weight: 600;
		border-radius: 20rpx;
		font-size: 28rpx;
		margin-right: 40rpx;
		text-align: center;
	}
</style>

到了这里,关于uni-app直播开发教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app开发记录

    目录 uni-app目录结构 uni-app中的事件 uni-app中的组件通信 页面通信 组件间通信 节点操作 定义全局scss变量 APP相关 解决uniapp编译到APP出现页面抖动与滑动条 tabbar添加一个位于中间的按钮 uni.pageScrollTo滚动问题 静态资源只能存放在static文件夹内 通过 uni.$emit(\\\"事件名\\\",val) 创建事件

    2024年02月05日
    浏览(73)
  • Uni-App开发框架介绍

    Uni-App是一家公司(DCloud)产品,公司承诺将一直开源且免费。 公司旗下有4个产品: HBuilder X:开发工具 uni-app:跨平台统一框架 uniCloud:云服务提供商 uniMPsdk:Mobile端sdk,用于接入uni-app开发的模块 主要盈利方式是uni-ad(广告业务)和unicloud(云服务商) 一次编写,多端运行 小程

    2024年02月12日
    浏览(53)
  • uni-app引入地图map组件--APP开发

    需求场景:使用uni-app地图组件,实现APP开发 开发环境:Mac,HbuildX3.4.14 测试环境:iOS真机调试 一、流程 1、关于Uini-app的map组件:官方文档说明。map组件是原生组件,目前只针对原生APP开发,因此通过app-nvue实现,同时选择的地图服务商只能是高德地图。 2、创建高德地图应用

    2024年02月15日
    浏览(66)
  • uni-app 之 跨平台开发

    原生开发 优点 性能稳定,使用流畅,用户体验好、功能齐全,安全性有保证,兼容性好 ,可使用手机所有硬件功能等 缺点 开发周期长、维护成本高、迭代慢、部署慢、新版本必须重新下载应用 不支持跨平台,必须同时开发多端代码 跨平台开发 优点 可以跨平台, 一套代码

    2024年02月12日
    浏览(165)
  • 前端-vscode中开发uni-app

    node -v npm install @vue/ cli@4.5.15 -g 指定版本号:4.5.15 在自己电脑目录下创建项目: demo02是自己项目名字 在D/AllCode/vs_vue2_uniapp目录下执行一下命令: vue create -p dcloudio/uni-preset-vue demo02 要想在vscode执行npm命令 我们打开pages.json和manifest.json,发现会报红,这是因为在json中是不能写注

    2024年01月18日
    浏览(67)
  • uni-app详解、开发步骤、案例代码

    uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台。它允许开发者使用一套代码同时构建多个平台的应用程序,包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、字节

    2024年02月04日
    浏览(46)
  • UNI-APP安卓本地打包详细教程(保姆级)

    uni-app 官方文档地址   原生开发者支持 1、Android Studio 下载地址:Android Studio官网 OR Android Studio中文社区 2、最新版的HBuilderX 3、App离线SDK下载:最新android平台SDK下载 4、3.1.10版本起需要申请Appkey, 申请请参考 点击进入 Android Studio官网 或者 Android Studio中文社区 点击 Downl

    2024年04月23日
    浏览(73)
  • uni-app之android原生插件开发

    一 插件简介 1.1 当HBuilderX中提供的能力无法满足App功能需求,需要通过使用Andorid/iOS原生开发实现时,可使用App离线SDK开发原生插件来扩展原生能力。 1.2 插件类型有两种,Module模式和Component模式 Module模式:能力扩展,无嵌入窗体的UI控件。大部分插件都是属于此类,比如调

    2024年02月07日
    浏览(51)
  • uni-app教程一(项目创建、tabbar配置、运行

    导入静态资源包(图片) 页面tabbar配置 { “pages”: [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { “path”: “pages/index/index”, “style”: { “navigationBarTitleText”: “首页” } }, { “path”: “pages/news/news”, “style”: { “navigationBarTitleText”: “动态

    2024年04月23日
    浏览(53)
  • uni-app 使用安卓模拟器 mumu教程

    去官网下载 这个直接下载就行 去uni-app 里面配置 在这里设置adb路径和模拟器端口 进去安装目录找到adb.exe 相关的就行我的是 D:/moniqi/MuMuPlayer-12.0/shell/adb.exe 端口设置的是 16385 但是不起作用 找了半天 终于发现需要自己链接 adb 然后打开adb所在的目录 使用powerShell 打开后输入这

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包