草庐IT

花趣短视频源码淘宝客系统全开源版带直播带货带自营商城流量主小游戏

花花省 2023-05-15 原文

本系统基于UNIAPP+THINKPHP5+MYSQL开发,

源码全开源可二次开发,

遵循市面主流短视频APP优化,

功能丰富系统完善,

更对接了广告主,走路赚,淘宝客等

后续会更新任务板块等等

系统功能介绍

1、首页仿抖音短视频 ,关注 ,我的, 本地, 直播, 可发布短视频 可录制上传,直播带PK功能,可打赏

2、商城页面 广告位、淘口令识别、微信登录、淘宝登录、淘宝返佣、拼多多返佣、京东返佣、唯品会返佣、热销榜、聚划算、天猫超市、9.9包邮、品牌特卖、新人攻略 、小米有品、优惠加油、阿里巴巴、去哪网、电影票、飞猪旅行、美团酒店、当当网、肯德基、热门抖货、商品推荐、商品详情、商品海报、APP检测升级、配置动态化、分享海报、会员授权、获取剪切板、精选商品、签到、积分兑换、淘口令解析、热门搜索、搜索历史、抖音直播、抖音电商、走路赚(选配),主页面主流布局,特色功能板块

3、分类商品分类 、分类详情、多平台比价、海报生成

4、自营商城(选配)商城首页、商城推荐、商城分类、商品列表、商品详情、我的订单、我的返利、团队返利、我的团队,地址管理,订单详情,支付页面,退款、确认收货、提醒发货、物流信息、订单明细等

5、发圈素材(淘系素材,京东素材)

6、我的提现、积分明细、消息中心、反馈、使用帮助、团队成员、提现明细、会员、订单明细、我的收藏、推广中心、推广订单、账号安全、设置、提现设置、换绑手机号、修改密码、邀请成员、推广海报、钱包明细,消息通知

7.对接领鸡蛋小游戏+种树小游戏均对接流量主CPS

<template>
	<view class="chatBox">

		<TX-PlayView :txAppId="txAppId" :appId="appId" :appKey="appKey" :roomId="roomId" :userId="userName" :role="role"
			:scene="scene" ref="maxTxPlayView" class="maxTxPlayView"
			:style="{height:windowHeight,width:windowWeith,top:top}" :whiteness="beauty" :ruddiness="beauty"
			:beauty="beauty" beatyStyle=0 videoResolution=108 videoBitrate=500 videoFps=15 resMode=1 mirror=true
			:filterFileName="filterFileName" :enableLocalPreview="enable" :enableLocalAudio="enable"
			@statechange="onPush"></TX-PlayView>
		<view class="header" :style="{right:right}">
			<view v-for="(item, index) in fubo" :key="index" class="minTxPlayView">
				<TX-PlayView v-if="currentid==item.id" :txAppId="txAppId" :appId="appId" :appKey="appKey"
					:enableLocalPreview="lianMaienable" :ref="'minTxPlayView'+index" roomId="488" userId="488"
					:scene="scene" role="21" class="currentview" @statechange="onPusher" @click="xuanzeta(item.id)">
				</TX-PlayView>
				<TX-PlayView v-else :txAppId="txAppId" :appId="appId" :appKey="appKey"
					:enableLocalPreview="lianMaienable" :ref="'minTxPlayView'+index" roomId="488" userId="488"
					:scene="scene" role="21" class="minTxPlay" @statechange="onPusher" @click="xuanzeta(item.id)">
				</TX-PlayView>
				<view
					style="margin-top:-35rpx;background-color: #ff557f;width:100rpx;border-radius: 2rpx;align-items: center;">
					<text style="font-size: 26rpx;color:#fff;">{{item.id}}号主播</text>
				</view>
			</view>

			<tx-svga ref="maxTxAnimation" class="maxTxAnimation" @statechange="onProgress" :style="{height:sgHeight}">
			</tx-svga>
		</view>
		<view v-if="!zhiboing">
			<view class="foot">
				<view class="circleBoxAll">
					<view class="beauty" @click="beautymod()">
						<image style="width:50rpx;height:53rpx" src="/static/meiyan.png"></image>
					</view>
					<view class="switch" @click="switchCamera()">
						<image style="width:50rpx;height:53rpx" src="/static/switch.png"></image>
					</view>
					<view class="guanbi" @click="close()">
						<image style="width:40rpx;height:40rpx" src="/static/guanbi.png"></image>
					</view>
				</view>
			</view>
			<view v-if="fengmianurl" class="fengmian">
				<view class="fengmianbox">
					<view class="addfengmian" @click="addfengmian()" style="width:200rpx;">
						<image style="width:200rpx;" mode="widthFix" :src="fengmianurl"></image>
					</view>
					<view class="input-content" style="width:300rpx;text-align: center;margin-top:50rpx">
						<input type="text" @input="textareaInput" :value="content" class="content" placeholder="你要直播什么呢"
							placeholder-style="color:#ccc" />
					</view>
				</view>
			</view>
			<view v-if="!fengmianurl" class="addfm">
				<view class="addfmbox">
					<view class="addfengmian" @click="addfengmian()">
						<image style="width:401rpx;" mode="widthFix" src="/static/addfengmian.png"></image>
					</view>
					<view class="input-content" style="width:400rpx;text-align: center;margin-top:50rpx">
						<input type="text" @input="textareaInput" :value="content" class="content" placeholder="你要直播什么呢"
							placeholder-style="color:#ccc" />
					</view>
				</view>
			</view>
		</view>
		<view v-if="zhiboing">
			<view class="heading">
				<view class="circleBoxAll">
					<view class="touxiang">
						<image class="headimgurl" style="width:70rpx;height:70rpx;" :src="avatarUrl"></image>
						<view class="xinxi">
							<text class="nicheng">{{nickName}}</text>
							<text class="guankan">{{renqi}}人观看</text>
						</view>
					</view>
					<view class="guanzhong">
						<scroll-view class="category-scroll" scroll-direction="horizontal" :show-scrollbar="false"
							:scroll-x="true">
							<view class="category-tab-item" :ref="'navItem' + index" v-for="(item, index) in players"
								:key="index" :id="item.id" v-if="item.userAvatar">
								<image style="width:60rpx; height: 60rpx;border-radius: 50rpx;border-color: #fcda79;border-width: 3rpx;" :src="item.userAvatar">
								</image>
							</view>
						</scroll-view>
					</view>
					<!--<view class="selectmp3" @click="selectmp3()">
						<image style="width:200rpx;" mode="widthFix" src="/static/selectmp3.png"></image>
					</view>-->
					<view class="stopzhibo" @click="stopAll()">
						<image style="width:58rpx;height:60rpx" src="/static/stopzhibo.png"></image>
					</view>
				</view>
			</view>
			<view class="footing" :style="{bottom: marginbottom+ 'rpx'}">

				<view class="clickliaotian" @click="liaotian()">
					<text class="shuoshuo">说点什么...</text>
				</view>
				<view class="lianmaing" @click="beautymod()">
					<image style="height:70rpx;" mode="heightFix" src="/static/meiyan.png"></image>
				</view>
				<view class="huopining" @click="huopinmod()">
					<image style="height:70rpx;" mode="heightFix" src="/static/tuipin.png"></image>
				</view>
				<view class="liwuing" @click="xuanzeliwu()">
					<image style="height:70rpx" mode="heightFix" src="/static/liwuz.png"></image>
				</view>
				<view class="dianzaning" @click="switchCamera()">
					<image style="height:70rpx" mode="heightFix" src="/static/switch.png"></image>
				</view>
			</view>

		</view>
		<view class="foot-content">
			<chat-room id="chatRoom" ref="chatRoom" class="chat-room" :roomId="roomId" :show="shuodianshenme">
			</chat-room>
		</view>
		<view class="bootom" v-if="!zhiboing">
			<view class="start" @click="kaishizhibo">
				<text class="startzhibo">开始直播</text>
			</view>
		</view>
		<view class="guanbizb" v-if="guanbizhibo">
			<view class="stop">
				<text class="quxiao" @click="quxiao()">取消</text>
				<text class="guanbizhibo" @click="confirm()">关闭直播</text>
			</view>
		</view>
	</view>
</template>

<script>
	const fuboData = [{
		id: 1,
		xianshi: 1,
		userid: 0
	}, {
		id: 2,
		xianshi: 1,
		userid: 0
	}, {
		id: 3,
		xianshi: 1,
		userid: 0
	}, ];
	import chatRoom from "@/components/chat-room";
	import liveShow from "@/components/live-show";
	import liveShow1 from "@/components/live-show1";
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	const trtcCloud = uni.requireNativePlugin('TX-TRTCCloud');
	const svgaModel = uni.requireNativePlugin('tx-svgamodel');
	const txIm = uni.requireNativePlugin('TX-TencentIM');
	var appHelper = getApp().globalData;
	var request = appHelper.request;
	import helper from '@/common/helper.js';
	export default {

		components: {
			chatRoom,
			liveShow,
			liveShow1
		},
		data() {
			return {
				roomIdS: [666, 888, 686, 868],
				fubo: fuboData,
				roomId: 1,
				players: [],
				hisId: null,
				userName: 'yangang',
				windowHeight: 0,
				sgHeight: 0,
				windowWeith: '750rpx',
				top: '0rpx',
				right: '-230rpx',
				role: 20,
				beauty: 5,
				mode: "me", //大小窗口显示模式
				enable: false,
				scene: 1,
				appId: '',
				txAppId: 1259013353, //混流参数,不需要混流可以去掉
				appKey: '',
				bizId: '', //混流参数,不需要混流可以去掉
				cloudMixtures: "", //混流参数,不需要混流可以去掉
				filterFileName: "normal.png",
				islianmai: 0,
				fengmianurl: '',
				content: '',
				zhiboing: 0,
				mp3status: 0,
				zhiboid: 0,
				renqi: 0,
				avatarUrl: '',
				nickName: '',
				guanbizhibo: 0,
				lanjiecishu: 0,
				duoren: 0,
				lianMaienable: false,
				lianmaicount: 0,
				marginbottom: 0,
				shuodianshenme: false,
				xinghao: 0,
				currentid: 0,
				nextSeq: 0
			}
		},
		onLoad(params) {
			// 获取上一个页面传入的参数
			console.log(params);
			if (params.current == 1) {
				this.duoren = 1;
			}
			this.roomId = params.roomid;
			this.userName = params.roomid;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.sgHeight = uni.getSystemInfoSync().windowHeight;
			//设备的唯一标识 
			this.imlogin();
			//this.bianxing()
		},
		onReady() {
			//this.join();
			//this.zhiboing = 1;
			uni.$emit('iszhubo', {
				iszhubo: 1
			});
		},
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		onBackPress() {
			if (this.lanjiecishu == 0 && this.zhiboing == 1) {
				this.stopAll();
				this.lanjiecishu = 1;
				return true;
			}
		},
		created() {
			// 保持屏幕常亮
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					//console.log(res); 
					if (res.platform == 'android') {
						that.xinghao = 0;
					} else {
						that.xinghao = 1;
						that.marginbottom = 60;
					}
				}
			});
			uni.$on('sendmessage', event => {
				//console.log(event); 
				var message = '1|' + event.message + ',' + event.userId + ',' + event.nickName + ',' + event
					.avatarUrl;
				that.sendGroupTextMessage(message);
				//trtcCloud.sendCustomCmdMsg(1, message, true, false);
			});
			uni.$on('sendliwumessage', event => {
				console.log(event);
				var message = '4|' + event.message + ',' + event.userId + ',' + event.nickName + ',' + event
					.avatarUrl +
					',' + event.liwuurl;
				console.log(message);
				that.sendGroupTextMessage(message);
				//trtcCloud.sendCustomCmdMsg(4, message, true, false);
				this.playAnimation(event.liwuurl);
			});

			uni.$on('curnamechange', event => {
				that.filterFileName = event.curname;
			});
			uni.$on('beautychange', event => {
				that.beauty = event.beautynum;
			});
			uni.$on('jieshoulianmai', event => {
				this.bianxing();
				console.log(event.lianmaiid);
				that.sendGroupTextMessage('4|' + event.lianmaiid);
				//trtcCloud.sendCustomCmdMsg(4, event.lianmaiid, true, false);
				var rooms = '';
				var isyou = 0;
				this.fubo.forEach((item, index) => {
					if (this.fubo[index].userid > 0) {
						if (rooms == '') {
							rooms = rooms + this.fubo[index].userid;
						} else {
							rooms = rooms + '|' + this.fubo[index].userid;
						}
					}
				});
				if (rooms == '') {
					rooms = rooms + event.lianmaiid;
				} else {
					rooms = rooms + '|' + event.lianmaiid;
				}
				that.sendGroupTextMessage('6|' + rooms);
				//trtcCloud.sendCustomCmdMsg(6, rooms, true, false);
			});
			uni.$on('fengmian', event => {
				that.fengmianurl = event.fengmian;
				setTimeout(() => {
					that.initzhibo();
				}, 800);
			});
			uni.$on('onblur', event => {
				this.shuodianshenme = false;
			});
			that.initzhibo();

		},
		methods: {
			imlogin() {
				var that = this;
				let isSuccess = txIm.initSDK({
					sdkAppID: 1400587703,
					logLevel: 0
				}, result => {
					console.log(result);
				})
				if (isSuccess) {
					txIm.removeAdvancedMsgListener();
					txIm.removeGroupListener();
					txIm.addAdvancedMsgListener(result => {
						console.log(result.msg.groupId);
						if (result.msg.groupId == that.roomId) {
							let msg = result.msg.textElem.msg;
							that.hudong(msg);
						}
					});
					txIm.setGroupListener(result => {
						console.log(result);
					});

					txIm.login({
						sdkAppID: 1400587703,
						sdkAppKey: "f57675bbf63c3e86f407b70c9b76a88ffb64388de87de0f06f50c665a2d58124",
						userId: that.roomId,
						expireTime: 604800,
						filePath: plus.io.convertLocalFileSystemURL('_doc')
					}, result => {
						console.log(result);
						that.createGroup();
						that.joinGroup();
					})
				}

			},
			createGroup() {
				var gname = "my_group" + this.roomId;
				txIm.createGroup({
					groupType: "AVChatRoom",
					groupId: this.roomId,
					groupName: gname
				}, result => {
					console.log(result);
				})
			},
			joinGroup() {
				txIm.joinGroup({
					"groupId": this.roomId
				}, result => {
					console.log(result);
				})
			},
			deleteGroup() {
				txIm.deleteGroup({"groupId":this.roomId},result=>{
					console.log(result);
				})
			},
			getGroupMemberList() {
				txIm.getGroupMemberList({
					"groupId": this.roomId,
					"filter": 0,
					"nextSeq": this.nextSeq
				}, result => {
					console.log(result);
					this.players = result.members;
					this.removePlayer(this.roomId);
					this.nextSeq = result.nextSeq;
				})
			},
			dianzanmod() {

				svgaModel.downloadUrls('http://upload.niulaoyao.com.cn/dianzan.svga', result => {
					console.log(result);
					this.$refs.maxTxAnimation.playAnimation({
						"filePath": result.filePath
					});
				});
			},
			liaotian() {
				this.shuodianshenme = true;
			},
			huopinmod() {
				var that = this;
				uni.getSubNVueById('goods').show('slide-in-bottom', 200, () => {});
				uni.$emit('goodsList-pop', {
					zhuboid: this.roomId
				});
			},
			xuanzeliwu() {
				if (this.currentid == 0) {
					uni.showToast({
						title: '请选择一位主播赠送礼物',
						icon: 'none'
					});
					return false;
				}
				this.fubo.forEach((item, index) => {
					if (this.fubo[index].id == this.currentid) {
						uni.$emit('liwu-pop', {
							zhuboid: this.fubo[index].userid,
							currentid: this.currentid
						});
					}
				});
				uni.getSubNVueById('liwu').show('slide-in-bottom', 200, () => {});
			},
			playAnimation(url) {
				console.log(url);
				var that = this;
				svgaModel.downloadUrls(url, result => {
					console.log(result);
					that.$refs.maxTxAnimation.playAnimation({
						"filePath": result.filePath
					});
				});
			},
			pauseAnimation() {
				this.$refs.maxTxAnimation.pauseAnimation();
			},
			resumeAnimation() {
				this.$refs.maxTxAnimation.resumeAnimation();
			},
			onProgress(e) {
				var result = e.detail;
			},
			bianxing() {
				this.windowHeight = '940rpx';
				this.windowWeith = '520rpx';
				this.top = '190rpx';
				this.right = 0;
			},
			switchCamera() {
				trtcCloud.switchCamera();
			},
			kuapk() {
				this.lianMaienable = true;
				trtcCloud.disconnectOtherRoom();
				let connectRoomId = 488;
				let connectUserId = "488";
				let jsonobj = {
					"roomId": connectRoomId,
					"userId": connectUserId
				};
				trtcCloud.switchRole(20);
				trtcCloud.connectOtherRoom(JSON.stringify(jsonobj));
				//this.$refs.minTxPlayView.startLocalPreview();
				//this.joinother();

			},
			textareaInput(event) {
				var {
					value
				} = event.detail;
				this.content = value;
			},
			async initzhibo() {
				var that = this;
				try {
					const res = await getApp().globalData.request.post('zhibo/config', {
						uid: this.$store.state.openid
					});
					if (res.code == 200) {
						console.log(res.data.roomid);
						that.appId = res.data.trtcappId;
						that.appKey = res.data.trtcappKey;
						that.avatarUrl = res.data.avatarUrl;
						that.nickName = res.data.nickName;
						that.$refs.maxTxPlayView.startLocalPreview();
						txIm.setSelfProfile({
							"userName": res.data.nickName,
							"userAvatar": res.data.avatarUrl,
							"gender": 1
						}, result => {
							console.log(result);
						})
						
						if (that.zhiboing == 1) {
							setTimeout(function() {
								that.startAll();
							}, 500);
						}
					}
				} catch (e) {
					console.log(e);
				}
				//this.record();
			},
			async kaishizhibo() {
				if (this.fengmianurl == '') {
					uni.showToast({
						title: '请添加封面',
						icon: 'none'
					});
					return false;
				}
				if (this.content == '') {
					uni.showToast({
						title: '请填写直播标题',
						icon: 'none'
					});
					return false;
				}
				var that = this;
				try {
					const res = await getApp().globalData.request.post('zhibo/addzhibo', {
						uid: this.$store.state.openid,
						fengmian: this.fengmianurl,
						type: this.duoren,
						title: this.content
					});
					if (res.code == 200) {
						console.log(res.data);
						that.zhiboid = res.data;
						that.zhiboing = 1;
						that.startAll();
					}
				} catch (e) {
					console.log(e);
				}
			},
			addfengmian() {
				console.log(this.$store.state.openid)
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					success: res => {
						var src = res.tempFilePaths[0];
						console.log(src);
						//that.fengmianurl = src;
						uni.navigateTo({
							url: `./canvas/canvas?src=${src}`
						});
					}
				});
			},
			startAll() {
				this.join();
				this.$refs.maxTxPlayView.startLocalPreview();
				//this.$refs.minTxPlayView.startRemoteView(this.roomId);
				console.log("123586")
			},
			xuanzeta(id) {
				this.currentid = id;
			},
			confirm(done, value) {
				this.enable = false;
				this.$refs.maxTxPlayView.leaveRoom();
				this.deleteGroup();
				//this.$refs.minTxPlayView.stopRemoteView(this.roomId);
				this.zhiboing = 0;
				uni.navigateBack();
				//this.$refs.maxTxPlayView.stopLocalPreview();
				//this.$refs.minTxPlayView.stopRemoteView(this.hisId);
			},
			stopAll() {
				this.guanbizhibo = 1;
				this.lanjiecishu = 1;
			},
			quxiao() {
				this.guanbizhibo = 0;
				this.lanjiecishu = 0;
			},
			beautymod() {
				console.log("beauty")
				var that = this;
				uni.getSubNVueById('beauty').show('slide-in-bottom', 200, () => {});
				uni.$emit('beautynum', {
					beautynum: that.beauty,
					curname: that.filterFileName
				});
			},
			hideKeyboard() {
				console.log('hideKeyboard');
			},
			async addPlayer(userId) {
				var that = this;
				console.log(this.players)
				let baohan = 0;
				for (let i = 0; i < this.players.length; i++) {
					let d = this.players[i]
					if (d.userId === userId) {
						baohan = 1;
					}
				}
				if (baohan == 0) {
					setTimeout(() => {
						that.sendGroupTextMessage('2|' + that.renqi);
						//trtcCloud.sendCustomCmdMsg(2, this.renqi, true, false);
					}, 500);
					that.getGroupMemberList();
				}
			},
			removePlayer(userId) {
				for (let i = 0; i < this.players.length; i++) {
					let d = this.players[i]
					if (d.userId === userId) {
						this.players.splice(i, 1)
						break
					}
				}
			},
			musicstatus() {
				var that = this;
				that.mp3status = !that.mp3status;
				if (that.mp3status == 1) {
					trtcCloud.startPlayMusic({
						path: "http://mp3.9ku.com/mp3/555/554523.mp3",
						loopCount: 0,
						ID: 1
					}, result => {
						console.log(result);
					})
				} else {
					trtcCloud.stopPlayMusic({
						ID: 1
					})
				}
			},
			sendGroupTextMessage(msg) {
				txIm.sendGroupTextMessage({
					"textMsg": msg,
					"groupId": this.roomId,
					"priority": 0
				}, result => {
					console.log(result);
				})
			},
			close() {
				uni.navigateBack();
			},
			onPush(e) {
				var result = e.detail;
				console.log(result);
				switch (result.type) {
					case 'onFirstVideoFrame':
						console.log('onFirstVideoFrame');
						break;
					case 'onUserEnter':
						if (this.role == 21) {
							this.hisId = result.userId;
							this.$refs.maxTxPlayView.startRemoteView(result.userId);
						} else {
							/**/
							this.addPlayer(result.userId);

							//this.$refs.minTxPlayView.startRemoteView(result.userId);
						}
						break;
					case 'onUserVideoAvailable':
						if (result.available === true && this.role == 20) {
							if (result.userId) {
								//this.addPlayer(result.userId);

								//混流处理,不需要可以去掉
								//var jsonString = JSON.stringify(this.players);
								//console.log(jsonString);
								//this.cloudMixtures = jsonString
							}
						}
						break;
					case 'onRemoteUserLeaveRoom':
						if (this.role == 20) {
							if (result.userId) {
								this.removePlayer(result.userId);
								this.renqi = this.players.length;
								console.log(result.userId);
								this.fubo.forEach((item, index) => {
									if (this.fubo[index].userid == result.userId) {
										this.fubo[index].userid = 0;
										this.lianmaicount--;
									}
								});
								setTimeout(() => {
									this.sendGroupTextMessage('2|' + this.renqi);
									//trtcCloud.sendCustomCmdMsg(2, this.renqi, true, false);
								}, 500);
							}
						}
						break;
					case 'onRemoteUserEnterRoom':
						if (this.role == 20) {
							this.addPlayer(result.userId);

							if (result.userId) {
								var rooms = '';
								var isyou = 0;
								this.fubo.forEach((item, index) => {
									if (this.fubo[index].userid == 0 && isyou == 0) {
										this.fubo[index].userid = result.userId;
										this.lianmaicount++;
										this.$refs['minTxPlayView' + index][0].startRemoteView(result.userId);
										isyou = 1;
									}
								});
							}
						}
						break;
					case 'onRecvCustomCmdMsg':
						/*
						if (result.cmdID == '1') { //监控聊天消息
							uni.$emit('tzmessage', {
								message: result.message,
								cmdId: result.cmdID
							});
						} else if (result.cmdID == '2') { //监控人气
							this.renqi = result.message;
						} else if (result.cmdID == '3') { //监听连麦请求
							uni.$emit('tzmessage', {
								message: result.message,
								cmdId: result.cmdID
							});

						} else { //监控礼物
							console.log(result.message);
							var str = result.message;
							var strs = new Array(); //定义一数组
							strs = str.split(","); //字符分割

							this.playAnimation(strs[4]);
							uni.$emit('tzmessage', {
								message: result.message,
								cmdId: result.cmdID
							});

						}*/
				}
			},
			hudong(msg) {
				var strs = new Array(); //定义一数组
				strs = msg.split("|"); //字符分割
				if (strs[0] == '1') { //监控聊天消息
					uni.$emit('tzmessage', {
						message: strs[1],
						cmdId: strs[0]
					});
				} else if (strs[0] == '2') { //监控人气
					this.renqi = strs[1];
				} else if (strs[0] == '3') { //监听连麦请求
					uni.$emit('tzmessage', {
						message: strs[1],
						cmdId: strs[0]
					});

				} else { //监控礼物
					console.log(strs[1]);
					var str1 = strs[1];
					var strs1 = new Array(); //定义一数组
					strs1 = str1.split(","); //字符分割

					this.playAnimation(strs1[4]);
					uni.$emit('tzmessage', {
						message: strs[1],
						cmdId: strs[0]
					});
				}
			},
			onPushother(e) {
				var result = e.detail;
				console.log(result);
				switch (result.type) {
					case 'onFirstVideoFrame':
						console.log('onFirstVideoFrame');
						break;
					case 'onUserEnter':

						this.$refs.minTxPlayView.startRemoteView(488);
						this.$refs.minTxPlayView.joinRoom();
						break;

				}
			},
			join() {

				//主要步骤如下:
				//1. 开启本地视频的预览画面,并开启声音
				if (this.role == 20) {
					this.enable = true;
				} else {
					this.enable = false;
				}

				this.$refs.maxTxPlayView.joinRoom();


			},
			joinother() {

				this.$refs.minTxPlayView.joinRoom();

			}
		},
		beforeCreate: function() {
			// #ifdef APP-PLUS-NVUE
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
				'fontFamily': "iconfont",
				'src': 'url("' + "file:/" + plus.io.convertLocalFileSystemURL("_www/static/iconfont.ttf") +
					'")'
			});
			// #endif
		},
	}
</script>

<style lang="scss">
	.chatBox {
		width: 750rpx;
		flex: 1;
		flex-direction: column;
		background-color: #0d0e3c;
	}

	.lianmai {
		width: 750rpx;
		position: fixed;
		top: 100rpx;
		left: 0;
		margin: 20rpx 0;
		flex-direction: row;
		justify-content: space-between;
	}

	.viewIco {
		margin-left: 20rpx;
		font-family: iconfont;
		font-size: 60rpx;
		color: #FFFFFF;
	}

	.maxTxPlayView {

		background-color: #111111;
		position: fixed;
		left: 0;
	}

	.header {
		width: 230rpx;
		height: 1500rpx;
		position: fixed;
		top: 190rpx;

	}

	.minTxPlayView {
		border-width: 3rpx;
		width: 230rpx;
		height: 300rpx;
		margin-bottom: 20rpx;
	}

	.minTxPlay {
		border-color: #2d258a;
		border-width: 3rpx;
		background-color: #000000;
		width: 230rpx;
		height: 300rpx;
	}

	.currentview {
		border-color: #ff55ff;
		border-width: 5rpx;
		width: 230rpx;
		height: 300rpx;
		background-color: #ff55ff;

	}

	.foot {
		width: 710rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 20rpx;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-direction: column;
	}

	.circleBoxAll {
		// flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.inputBoxAll {
		flex-direction: row;
		align-items: center;
	}

	.inputBox {
		flex-direction: row;
		margin: 15rpx;
		padding: 15rpx;
		background-color: #FFFFFF;
		border-radius: 6px;
	}

	.inputTitle {
		height: 80rpx;
		line-height: 80rpx;
	}

	.input {
		height: 80rpx;
		width: 340rpx;
		font-size: 30rpx;
		padding: 15rpx;
	}

	.join {
		background-color: #DD524D;
		width: 160rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 10px;
	}

	.circleBox {
		width: 150rpx;
		padding: 10rpx 0;
		margin: 10rpx;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

	.circleIco {
		font-size: 36rpx;
		width: 64rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 500px;
		border-style: solid;
		border-width: 1px;
		border-color: #FFFFFF;
		text-align: center;
		font-family: iconfont;
		color: #FFFFFF;
	}

	.phone {
		background-color: #c5433a;
		border-style: solid;
		border-width: 1px;
		border-color: #c5433a;
	}

	.hint {
		font-size: 22rpx;
		color: #FFFFFF;
		padding-top: 20rpx;
	}


	.tools {
		position: fixed;
		right: 0;
		bottom: 100rpx;
		z-index: 11;

		width: 150rpx;
	}

	.showSlider {
		position: fixed;
		right: 180rpx;
		bottom: 100rpx;
		z-index: 12;
		width: 400rpx;
	}

	.foot-content {

		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column-reverse;

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		height: 500rpx; // 聊天区最高显示的高度
		overflow: hidden;

		padding-top: 20rpx;
		padding-right: 40rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
	}

	.circleBoxAll {
		flex-direction: row;
		align-items: center;
	}

	.foot {
		width: 710rpx;
		position: fixed;
		top: 130rpx;
		left: 50rpx;
		margin: 20rpx;
		flex-direction: row;
		flex-direction: column;
	}

	.addfm {
		width: 750rpx;
		align-items: center;
		flex-direction: column;
		top: 220rpx;
		position: fixed;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-direction: column;
	}

	.touxiang {
		left: 20rpx;
		position: fixed;
		top: 85rpx;
		width: 250rpx;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50rpx;
		padding-left: 8rpx;
		padding-top: 8rpx;
		flex-direction: row;
	}
	
	.guanzhong {
		left: 300rpx;
		position: fixed;
		top: 85rpx;
		width: 350rpx;
		height: 80rpx;
		padding-left: 8rpx;
		padding-top: 8rpx;
		flex-direction: row;
	}
	
	.category-scroll {
		width:350rpx;
		height: 80rpx;
		flex-direction: row;
	}
	
	.category-tab-item {
		width: 60rpx;
		height: 80rpx;
		flex-direction: column;
		text-align: center;
		margin-right: 3rpx;
	}

	.nicheng {
		color: #fff;
		font-size: 25rpx;
	}

	.guankan {
		margin-top: 10rpx;
		color: #fff;
		font-size: 25rpx;
	}

	.xinxi {
		margin-left: 20rpx;
		line-height: 80rpx;
	}


	.fengmian {
		width: 710rpx;
		flex-direction: column;
		top: 220rpx;
		position: fixed;
		left: 60rpx;
	}

	.headimgurl {
		border-radius: 50%;
	}

	.circleBox {
		width: 200rpx;
		padding: 30rpx 0;
		margin: 10rpx;
		align-items: center;
		flex-direction: column;
	}

	.circleIco {
		font-size: 30rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 500px;
		border-style: solid;
		border-width: 1px;
		border-color: #FFFFFF;
		text-align: center;
		font-family: iconfont;
		color: #FFFFFF;
		font-size: 50rpx;
	}

	.phone {
		background-color: #c5433a;
		border-style: solid;
		border-width: 1px;
		border-color: #c5433a;
	}

	.hint {
		font-size: 30rpx;
		color: #FF0000;
		padding-top: 20rpx;
	}

	.maxTxAnimation {
		right: 0rpx;
		position: fixed;
		top: 0rpx;
		flex: 1;
		width: 750rpx;
	}

	.startzhibo {
		align-items: center;
		flex-direction: column;
		color: #fff;
		font-size: 35rpx;
	}

	.quxiao {
		align-items: center;
		flex-direction: column;
		color: #fff;
		font-size: 35rpx;
		background-color: #c3c520;
		height: 80rpx;
		width: 350rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.guanbizhibo {
		align-items: center;
		flex-direction: column;
		color: #fff;
		font-size: 35rpx;
		background-color: #ff0000;
		height: 80rpx;
		width: 350rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 50rpx;
	}

	.bootom {
		width: 750rpx;
		align-items: center;
		flex-direction: column;
		bottom: 200rpx;
		position: fixed;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-direction: column;
	}

	.guanbizb {
		width: 750rpx;
		height: 1800rpx;
		align-items: center;
		flex-direction: column;
		top: 0rpx;
		position: fixed;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-direction: column;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.start {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #60d088;
		height: 80rpx;
		width: 600rpx;
		border-radius: 50rpx;
	}

	.stop {
		background-color: rgba(255, 255, 255, 0.8);
		width: 600rpx;
		height: 300rpx;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}

	.guanbi {
		right: 80rpx;
		position: fixed;
		top: 120rpx;

	}

	.stopzhibo {
		right: 30rpx;
		position: fixed;
		top: 100rpx;

	}

	.beauty {
		left: 80rpx;
		position: fixed;
		top: 120rpx;
	}

	.beautying {
		left: 250rpx;
		position: fixed;
		bottom: 5rpx;
	}

	.switch {
		left: 300rpx;
		position: fixed;
		top: 120rpx;
	}

	.switching {
		left: 500rpx;
		position: fixed;
		bottom: 10rpx;
	}

	.mp3status {
		left: 450rpx;
		position: fixed;
		bottom: 10rpx;
	}

	.content {
		color: #fff;
		font-size: 40rpx;
	}

	.selectmp3 {
		left: 275rpx;
		position: fixed;
		top: 100rpx;
	}

	.footing {
		width: 750rpx;
		height: 190rpx;
		bottom: 0;
		position: absolute;
		flex-direction: row;
	}

	.lianmaing {
		left: 350rpx;
		position: fixed;
		bottom: 5rpx;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 10rpx;
		border-radius: 50rpx;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.huopining {
		left: 450rpx;
		position: fixed;
		bottom: 5rpx;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 10rpx;
		border-radius: 50rpx;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.liwuing {
		left: 550rpx;
		position: fixed;
		bottom: 5rpx;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 10rpx;
		border-radius: 50rpx;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.dianzaning {
		left: 650rpx;
		position: fixed;
		bottom: 5rpx;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 10rpx;
		border-radius: 50rpx;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.clickliaotian {
		left: 10rpx;
		position: fixed;
		bottom: 5rpx;
	}

	.shuoshuo {
		color: #fff;
		font-size: 30rpx;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 20rpx 170rpx 20rpx 10rpx;
		border-radius: 50rpx;
	}
</style>

有关花趣短视频源码淘宝客系统全开源版带直播带货带自营商城流量主小游戏的更多相关文章

  1. UE4 源码阅读:从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本:4.27一、引擎主循环的位置:Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑:1、EnginePreInit:加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序:模块加载过程:(1)注册模块中定义的UObject,同时为每个类构造一个类默认对象(CDO,记录类的默认状态,作为模板用于子类实例创建)(2)调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类(UGame

  2. ruby - 我需要从 facebook 游戏中抓取数据——使用 ruby - 2

    修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息;但是,我遇到了一堵又一堵砖墙。据我所知,主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是,当我尝试抓取该iframe时,它​​是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具,这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据,也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它,但它仍然不存在)。发生这种情况是因为

  3. python - Ruby 或 Python 的 3d 游戏引擎? - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的,因为它们往往会吸引自以为是的答案和垃圾邮件。相反,describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion是否有适用于这些的3d游戏引擎?

  4. elasticsearch源码关于TransportSearchAction【阶段三】 - 2

    1.回顾.TransportServicepublicclassTransportServiceextendsAbstractLifecycleComponentTransportService:方法:1publicfinalTextendsTransportResponse>voidsendRequest(finalTransport.Connectionconnection,finalStringaction,finalTransportRequestrequest,finalTransportRequestOptionsoptions,TransportResponseHandlerT>

  5. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  6. ruby - 使用 Ruby 编写 Unity 游戏 - 2

    所以我看到unity支持c#、JS和Boo。我可以学习其中一个,但我想制作一个“编译器”或类似的东西,让我可以编写ruby​​代码并输出JS代码或制作一个可以被Unity编译器读取的层。这有可能吗?我愿意在这方面投入很多时间并且有相当多的经验。 最佳答案 如果您的问题实际上是“我如何将Ruby编译为JavaScript”,那么这更容易回答:Opal:RubytoJavaScriptcompiler但是,学习其中一种受支持的语言会更好。当运行的是用另一种语言解释的代码时,很难调试“您的”代码。

  7. 【Unity游戏破解】外挂原理分析 - 2

    文章目录认识unity打包目录结构游戏逆向流程Unity游戏攻击面可被攻击原因mono的打包建议方案锁血飞天无限金币攻击力翻倍以上统称内存挂透视自瞄压枪瞬移内购破解Unity游戏防御开发时注意数据安全接入第三方反作弊系统外挂检测思路狠人自爆实战查看目录结构用il2cppdumper例子2-森林whoishe后记认识unity打包目录结构dll一般很大,因为里面是所有的游戏功能编译成的二进制码游戏逆向流程开发人员代码被编译打包到GameAssembly.dll中使用il2ppDumper工具,并借助游戏名_Data\il2cpp_data\Metadata\global-metadata.dat

  8. Unity游戏开发:背包系统的实现 - 2

    背包是游戏中经常使用的一个组件,它负责管理玩家在游戏中所获得的道具。一个完整的背包系统应当具有将物品放置进背包、对背包内物品进行管理和使用背包内物品等功能。而往往一个背包系统的逻辑关系较为复杂,如果把所有功能都放在一个脚本中实现会使代码显得十分冗杂且缺乏逻辑。所以在背包系统的设计过程中,我们常将其分解为数据、逻辑和UI三部分分别来进行完成。一、UI设计以CottonPuzzle中的背包设计为例,我们需要有物品展示栏、物品切换按键和物品提示信息等部分。在Canvas中创建ItemHolder,在ItemHolder中创建LeftButton和RightButton控制物品的左右切换、Slot来控

  9. Cesium源码解析一(terrain文件的加载、解析与渲染全过程梳理) - 2

    快速导航(持续更新中…)Cesium源码解析一(terrain文件的加载、解析与渲染全过程梳理)Cesium源码解析二(metadataAvailability的含义)Cesium源码解析三(metadata元数据拓展中行列号的分块规则解析)Cesium源码解析四(Quantized-Mesh(.terrain)格式文件在CesiumJS和UE中加载情况的对比)目录1.前言2.本篇的由来3.terrain文件的加载3.1更新环境3.2更新和执行渲染命令3.3数据优化3.4结束当前帧4.总结1.前言  目前市场上三维比较火的实现方案主要有两种,b/s的方案主要是Cesium,c/s的方案主要是u

  10. 停车系统源码-基于springboot+uniapp开源项目 - 2

    Iparking停车收费管理系统-可商用介绍Iparking是一款基于springBoot的停车收费管理系统,支持封闭车场和路边车场,支持微信支付宝多种支付渠道,支持多种硬件,涵盖了停车场管理系统的所有基础功能。技术栈Springboot,MybatisPlus,Beetl,Mysql,Redis,RabbitMQ,UniApp功能云端功能序号模块功能描述1系统管理菜单管理配置系统菜单2系统管理组织管理管理组织机构3系统管理角色管理配置系统角色,包含数据权限和功能权限配置4系统管理用户管理管理后台用户5系统管理租户管理多租户管理6系统管理公众号配置租户公众号配置7系统管理操作日志审计日志8系统

随机推荐