yuyekeji_gamecenter/pages/Home/Home.vue

<template>
	<view class="root">
		<view class="uni-margin-wrap">
			<swiper class="swiper" indicator-dots circular autoplay interval=3000>
				<swiper-item v-for="(item,index) in aSwipers" :key="index" @click="clickItem(index)">
					<image class="swiper-image" mode="aspectFit" :src="aSwipers[index]"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="category">
			<view class="game-center" @click="gameCenter">
				<image mode="scaleToFill" src="/static/home/GameCenter.png"></image>
				<text>游戏大厅</text>
			</view>
			<view class="bbeng" @click="bbeng">
				<image mode="scaleToFill" src="/static/home/BB.png"></image>
				<text>体感游戏</text>
			</view>
			<view class="shang-wan" @click="shangWan">
				<image mode="scaleToFill" src="/static/home/ShanWan.png"></image>
				<text>闪玩在线</text>
			</view>
			<view class="game-wallet" @click="gameWallet">
				<image mode="scaleToFill" src="/static/home/GameWallet.png"></image>
				<text>游戏钱包</text>
			</view>
		</view>

		<view class="recommend">
			<view class="title">
				<text class="today">热门推荐</text>
				<view class="more" @click="recommendMore">
					<text>更多推荐</text>
					<image class='left-arrow' mode="scaleToFill" src="../../static/home/LeftArrow.png"></image>
				</view>
			</view>

			<view class="waterfall-flow">
				<view class="left">
					<image mode="widthFix" :src="aLeftPic1" @click="leftPic1"></image>
					<image mode="widthFix" :src="aLeftPic2" @click="leftPic2"></image>
				</view>
				<view class="right">
					<image mode="heightFix" :src="aRightPic" @click="rightPic"></image>
				</view>
			</view>
		</view>

		<view class="today-recommend">
			<view class="title">
				<text class="today">今天玩什么</text>
				<view class="more" @click="todayRecommendMore">
					<text>更多推荐</text>
					<image class='left-arrow' mode="scaleToFill" src="../../static/home/LeftArrow.png"></image>
				</view>
			</view>
			<!-- <view class="items" v-for="(item,index) in aTodayRecArr" :key="index" @click="clickTodayRecItem(index)"> -->
			<view class="items" v-for="(item,index) in aTodayRecArr" :key="index">
				<view class="content">
					<view class="pic">
						<image mode="widthFix" :src='item.icon'></image>
					</view>
					<view class="detail">
						<view class="detailRow1">
							<view class="title">{{item.name}}</view>
							<!-- <view class="tips" v-for="(item1,index1) in item.tip" :key="index1">
							<view class="tip">{{item1.tip}}</view> -->
							<!-- <view class="tip">{{item.tip}}</view> -->
							<!-- <view class="tip" v-for="(itemTip,tipIndex) in item.tip" :key="tipIndex" :background-color="itemTip.color"> -->
							<view class="tip" v-for="(itemTip,tipIndex) in item.tip" :key="tipIndex" :style="{'background-color':itemTip.color}">
								{{itemTip.tip}}
							</view>
							<!-- <view class="tip">{{itemTip.tip}}</view> -->
						</view>
						<view class="detailRow2">
							<view class="type">{{item.type}}</view>
							<view class="verticalLine">|</view>
							<!-- <text> | </text> -->
							<view class="player">{{item.player}}</view>
							<text>人在玩</text>
						</view>
						<!-- <text class="intro">{{item[2]}}</text> -->
						<view class="intro">{{item.sub}}</view>
					</view>
					<!-- <view class="left-arrow">
						<image mode="scaleToFill" src="/static/home/LeftArrow.png"></image>
					</view> -->
					<view class="buttom-box">
						<button class="play-btn" @click="clickTodayRecItem(index)">开始玩</button>
					</view>
				</view>
				<view class="itemLine"></view>
				<!-- <view class="buttom-box">
					<button class="play-btn">开始玩</button>
				</view> -->
			</view>
		</view>
		<!-- 单个游戏推荐弹窗 -->
		<div v-show="popup">
			<div class="dialog">
				<image src="../../static/home/btnClose.png" id="closeButton" @click="closepopup"></image>
				<image mode="widthFix" src="../../static/home/4.jpg" id="showImage" @click="clickHomePop"></image>
			</div>
			<!--这里是半透明背景层-->
			<div class="over" @click="closepopup"></div>
		</div>
		<!-- 敬请期待弹窗 -->
		<div v-show="showTipSwitch">
			<div class="dialog">
				<view id="tipToBeOpened">敬请期待</view>
			</div>
			<!--这里是半透明背景层-->
			<div class="over" @click="closeTip"></div>
		</div>
	</view>
</template>

<script>
	import md5 from "../../common/md5.js";

	export default {
		data() {
			return {
				aSwipers: [],
				aLeftPic1: '',
				aLeftPic2: '',
				aRightPic: '',
				aTodayRecArr: [{
					"icon": "http://img.m3guo.com/group3/M00/00/F1/wKgMHF3yJQWADJkDAAGX3Q-p0QU945.gif",
					"name": "贪婪洞窟",
					"tip": [{
						"tip": "精品",
						"color": "#000000",
					}],
					"type": "策略",
					"player": "122079",
					"sub": "地牢探险Roguelike",
				}],

				//弹窗相关属性
				popup: 0,
				showTipSwitch: 0,
				gameIconArr: [
					'../../static/home/Icon1.jpg',
					'../../static/home/Icon2.jpg',
					'../../static/home/Icon3.jpg',
					'../../static/home/Icon4.jpg',
				],
				//tip对应颜色
				colorOfTip: {
					"精品": "#a173ff",
					"热门": "#cd000b",
					"最新": "#c27547",
					"礼包": "#d1a866",
				}
			}
		},

		onLoad() {
			// 防止返回按钮
			// if (uni.getSystemInfoSync().platform === 'devtools') {
			// 	console.log('H5')
			// 	history.pushState(null, null, document.URL);
			// 	window.addEventListener('popstate', function() {
			// 		history.pushState(null, null, document.URL);
			// 	});
			// } else {
			// 	console.log('运行在手机中')
			// }
			history.pushState(null, null, document.URL);
			window.addEventListener('popstate', function() {
				history.pushState(null, null, document.URL);
			});

			let gameList = getApp().globalData.gameList;
			if (gameList === '') {
				uni.navigateTo({
					url: '/pages/index/index',
				});
				return;
			}

			this.aSwipers = ['../../static/home/1.jpg',
				'../../static/home/2.png',
				'../../static/home/3.jpg',
				'../../static/home/4.jpg'
			];

			this.aLeftPic1 = '../../static/home/LeftPic1.jpeg';
			this.aLeftPic2 = '../../static/home/LeftPic2.gif';
			this.aRightPic = '../../static/home/RightPic.png';

			this.showpopup();

			this.aTodayRecArr = [];

			for (let i = 0; i < 4; i++) {
				let playerNum = (gameList[7 + i].player) ? (gameList[7 + i].player) : 0;
				// playerNum = !playerNum ? 0 : playerNum;
				let str = Math.floor(playerNum / 1000) / 10 + "万";
				let tip = [];
				if (gameList[7 + i].tip) {
					tip.push({
						"tip": gameList[7 + i].tip,
						"color": this.colorOfTip[gameList[7 + i].tip],
					});
				}
				let info = {
					// "icon": gameList[7 + i].icon,
					"icon": this.gameIconArr[i],
					"name": gameList[7 + i].name,
					"tip": tip,
					"type": gameList[7 + i].type,
					"player": str,
					"sub": gameList[7 + i].sub,
				}
				this.aTodayRecArr.push(info);
			}

			uni.hideLoading();
		},
		methods: {
			//请求游戏列表
			getGameList(callback) {
				let url = 'https://www.b-beng.com/game_center/getGameList?'
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						callback(res);
					},
					fail: (res) => {
						console.log("fail:====" + res)
					}
				})
			},
			//请求游戏列表回调
			callbackGameList(res) {
				// this.data_category = res;
				console.log("请求游戏列表回调", res)
				this.aTodayRecArr = [];
				let gameList = res.data.list;
				for (let i = 0; i < 4; i++) {
					let playerNum = (gameList[7 + i].player) ? (gameList[7 + i].player) : 0;
					// playerNum = !playerNum ? 0 : playerNum;
					let str = Math.floor(playerNum / 1000) / 10 + "万";
					let tip = [];
					if (gameList[7 + i].tip) {
						tip.push({
							"tip": gameList[7 + i].tip,
							"color": this.colorOfTip[gameList[7 + i].tip],
						})
					}
					let info = {
						// "icon": gameList[7 + i].icon,
						"icon": this.gameIconArr[i],
						"name": gameList[7 + i].name,
						"tip": tip,
						"type": gameList[7 + i].type,
						"player": str,
						"sub": gameList[7 + i].sub,
					}
					this.aTodayRecArr.push(info);
				}
			},

			getQueryString: function(name) {
				const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
				const search = window.location.search.split('?')[1] || '';
				const r = search.match(reg) || [];
				return r[2];
			},
			goToGame: function() {
				console.log("进入游戏页");

				//原始数据
				const params = {
					channel: '14633',
					openid: getApp().globalData.openid, //'sdsj2020',
					// openid: 'sdsj2020',
					time: parseInt(new Date().getTime().toString().substring(0, 10)),
					nick: getApp().globalData.openid.substring(0, 3) + '***' + getApp().globalData.openid.substring(7, 11),
					avatar: 'https://img.m3guo.com/group4/M00/00/5A/wKgMHF_ODXGAfBHbAADCVYIwtio762.png',
					sex: 1,
					phone: '',
				};
				// 参与url的数据
				const paramsToUrl = {
					channel: params.channel,
					openid: encodeURIComponent(params.openid),
					time: params.time,
					nick: encodeURIComponent(params.nick),
					avatar: encodeURIComponent(params.avatar),
					sex: params.sex,
					phone: params.phone,
				};
				//参与sign数据
				const paramsToSign = {
					channel: params.channel,
					openid: encodeURIComponent(params.openid),
					time: params.time,
					nick: params.nick,
					avatar: params.avatar,
					sex: params.sex,
					phone: params.phone,
				}

				const appkey = '0262d5626aa24065b39eb3c185af910e'

				const string =
					`channel=${paramsToSign.channel}&openid=${paramsToSign.openid}&time=${paramsToSign.time}&nick=${paramsToSign.nick}&avatar=${paramsToSign.avatar}&sex=${paramsToSign.sex}&phone=${paramsToSign.phone}${appkey}`;
				// console.log('string=',string);
				let sign = md5.hex_md5(string).toLowerCase();
				// console.log('sign=',sign);
				//url
				let home_url = 'http://www.shandw.com/auth/';
				let sdw_simple = 6;
				let sdw_ld = 1;
				let gid = getApp().globalData.gid;
				let url =
					`${home_url}?channel=${paramsToUrl.channel}&openid=${paramsToUrl.openid}&time=${paramsToUrl.time}&nick=${paramsToUrl.nick}&avatar=${paramsToUrl.avatar}&sex=${paramsToUrl.sex}&phone=${paramsToUrl.phone}&sign=${sign}&sdw_simple=${sdw_simple}&sdw_ld=${sdw_ld}&gid=${gid}`;

				window.location.href = url;
				// uni.navigateTo({
				//     url: '/pages/Game/Game',
				// });
			},
			clickItem: function(index) {
				// console.log(index);
				getApp().globalData.gid = getApp().globalData.gameList[index].id;
				this.goToGame();
			},
			gameCenter: function(e) {
				// console.log(e);
				this.showTip();
			},
			bbeng: function(e) {
				// console.log(e);
				// uni.navigateTo({
				// 	url: '../BBeng/BBeng',
				// });
				this.showTip();
			},
			shangWan: function(e) {
				console.log("进入闪电玩页");

				//原始数据
				const params = {
					channel: '14633',
					openid: getApp().globalData.openid, //'sdsj2020',
					// openid: 'sdsj2020',
					time: parseInt(new Date().getTime().toString().substring(0, 10)),
					nick: getApp().globalData.openid.substring(0, 3) + '***' + getApp().globalData.openid.substring(7, 11),
					avatar: 'https://img.m3guo.com/group4/M00/00/5A/wKgMHF_ODXGAfBHbAADCVYIwtio762.png',
					sex: 1,
					phone: '',
				};
				// 参与url的数据
				const paramsToUrl = {
					channel: params.channel,
					openid: encodeURIComponent(params.openid),
					time: params.time,
					nick: encodeURIComponent(params.nick),
					avatar: encodeURIComponent(params.avatar),
					sex: params.sex,
					phone: params.phone,
				};
				//参与sign数据
				const paramsToSign = {
					channel: params.channel,
					openid: encodeURIComponent(params.openid),
					time: params.time,
					nick: params.nick,
					avatar: params.avatar,
					sex: params.sex,
					phone: params.phone,
				}

				const appkey = '0262d5626aa24065b39eb3c185af910e'

				const string =
					`channel=${paramsToSign.channel}&openid=${paramsToSign.openid}&time=${paramsToSign.time}&nick=${paramsToSign.nick}&avatar=${paramsToSign.avatar}&sex=${paramsToSign.sex}&phone=${paramsToSign.phone}${appkey}`;
				// console.log('string=',string);
				let sign = md5.hex_md5(string).toLowerCase();
				// console.log('sign=',sign);

				//url
				let home_url = 'http://www.shandw.com/auth/';
				let sdw_simple = 2;
				let sdw_ld = 1;
				let url =
					`${home_url}?channel=${paramsToUrl.channel}&openid=${paramsToUrl.openid}&time=${paramsToUrl.time}&nick=${paramsToUrl.nick}&avatar=${paramsToUrl.avatar}&sex=${paramsToUrl.sex}&phone=${paramsToUrl.phone}&sign=${sign}&sdw_simple=${sdw_simple}&sdw_ld=${sdw_ld}`;
				console.log('url=', url);

				window.location.href = url;
			},
			gameWallet: function(e) {
				// console.log(e);
				this.showTip();
			},
			recommendMore: function(e) {
				console.log(e);
				this.shangWan();
			},
			leftPic1: function(e) {
				// console.log(e);
				getApp().globalData.gid = getApp().globalData.gameList[4].id;
				this.goToGame();
			},
			leftPic2: function(e) {
				// console.log(e);
				getApp().globalData.gid = getApp().globalData.gameList[5].id;
				this.goToGame();
			},
			rightPic: function(e) {
				// console.log(e);
				getApp().globalData.gid = getApp().globalData.gameList[6].id;
				this.goToGame();
			},
			todayRecommendMore: function(e) {
				// console.log(e);
				this.shangWan();
			},
			clickTodayRecItem: function(index) {
				// console.log(index);

				getApp().globalData.gid = getApp().globalData.gameList[7 + index].id;
				this.goToGame();
			},
			//打开活动规则页面
			showpopup() {
				this.popup = 1;
			},
			//关闭活动规则页面
			closepopup() {
				this.popup = 0;
			},
			//打开敬请期待
			showTip() {
				this.showTipSwitch = 1;
			},
			//关闭敬请期待
			closeTip() {
				this.showTipSwitch = 0;
			},
			//点击首页推荐的那个游戏
			clickHomePop() {
				getApp().globalData.gid = getApp().globalData.gameList[3].id;
				this.goToGame();
			},
		},
		// onNavigationBarButtonTap() {
		//     console.log("点击了自定义按钮");  
		// }, 
	}
</script>

<style>
	.root {
		/* position:fixed; */
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		/* border:1px solid blue; */
	}

	.uni-margin-wrap {
		width: 90%;
		height: 100%;
		margin-top: 10rpx;
		/* border:1px solid blue; */
	}

	.swiper {
		margin-top: -124rpx;
		height: 400rpx;
		/* border:1px solid blue; */
	}

	.swiper-item {
		/* display: block; */
		/* line-height: 400rpx; */
		/* text-align: center; */
		/* border:1px solid blue; */
	}

	/*图片宽度设置100% ，高度300upx（设为auto图片无法显示）*/
	.swiper-image {
		width: 100%;
		/* height: 400rpx; */

		/* display: block; //默认是inline-block 会有几px的空白 */
		border: none;
		/* border:1px solid blue; */
	}

	.category {
		width: 100%;
		height: 200rpx;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		/* border:1px solid red; */
	}

	.category view {
		width: 230rpx;
		height: 100rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		/* border:1px solid red; */
	}

	.category image {
		width: 62rpx;
		height: 62rpx;
	}

	.category text {
		color: #BBBBBB;
		font-size: 20rpx;
		font-weight: 700;
	}

	/* recommend */
	.recommend {
		width: 100%;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* border:1px solid red; */
	}

	.recommend .title {
		width: 90%;
		/* height:62rpx; */

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		/* border:1px solid red; */
	}

	.recommend .title .today {
		/* color: #BBBBBB; */
		font-size: 40rpx;
		font-weight: 700;
		/* margin-bottom: 50rpx; */
	}

	.recommend .title .more {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		/* border:1px solid blue; */
	}

	.recommend .title .more text {
		color: #BBBBBB;
		font-size: 20rpx;
		font-weight: 700;

		/* border:1px solid red; */
	}

	.recommend .title .more .left-arrow {
		width: 20rpx;
		height: 20rpx;
		/* border:1px solid red; */
	}

	.recommend .waterfall-flow {
		width: 90%;
		height: 360rpx;
		margin-top: 50rpx;

		display: flex;
		flex-direction: row;
		/* align-items: center; */
		/* justify-content: space-between; */
		/* border: 1px solid red; */
	}

	.recommend .waterfall-flow .left {
		/* width: 68%; */
		/* height: 90%; */
		width: 500rpx;

		display: flex;
		flex-direction: column;
		/* align-items: center; */
		/* justify-content: space-between; */
		/* border:1px solid blue; */
	}

	/* 	 .left{
		width: 49%;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	 } */

	.recommend .waterfall-flow .left image {
		width: 100%;
		height: 200rpx;
		margin-bottom: 22rpx;
		border-radius: 10rpx;
		/* border:1px solid red; */
	}

	.recommend .waterfall-flow .right {
		/* 		width: 36%;
		height: 80%; */
		width: 200rpx;
		/* margin-right: 0rpx; */
		margin-left: 22rpx;
		/* border:1px solid blue; */
	}

	.recommend .waterfall-flow .right image {
		/* width: 190rpx; */
		/* height: 100%; */
		height: 339rpx;
		border-radius: 10rpx;
		/* border:1px solid red; */
	}

	.today-recommend {
		width: 100%;
		margin-top: 50rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* border:1rpx solid red; */

	}

	.today-recommend .title {
		width: 90%;
		/* height:62rpx; */

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		/* border:1px solid red; */
	}

	.today-recommend .title .today {
		/* color: #BBBBBB; */
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 50rpx;
	}

	.today-recommend .title .more {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 50rpx;

		/* border:1px solid blue; */
	}

	.today-recommend .title .more text {
		color: #BBBBBB;
		font-size: 20rpx;
		font-weight: 700;
		/* border:1px solid red; */
	}

	.today-recommend .title .more .left-arrow {
		width: 20rpx;
		height: 20rpx;
		/* border:1px solid red; */
	}

	.today-recommend .items {
		width: 90%;
		height: 180rpx;
		margin-top: 20rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		/* border: 1rpx solid #E5E5E5; */
		/* 	border-top: #007AFF;
		border-left: #4CD964;
		border-right: #007AFF; */
	}

	.itemLine {
		width: 680rpx;
		height: 2rpx;
		background-color: #E5E5E5;
		margin-top: 20rpx;
	}

	.today-recommend .items .content {
		width: 100%;

		display: flex;
		flex-direction: row;
		align-items: center;

		/* border:1px solid blue; */
	}

	.today-recommend .items .content .pic {
		/* margin: 10rpx; */
		/* border:1px solid green; */
		height: 160rpx;
	}

	.today-recommend .items .content .pic image {
		width: 160rpx;
		height: 160rpx;
		/* border:1px solid red; */
		border-radius: 10rpx;
		border-radius: 30rpx;
	}

	.today-recommend .items .content .detail {
		margin-left: 20rpx;
		margin-right: 10rpx;
		/* margin-top: 10rpx; */
		/* border: 1px solid red; */
		height: 140rpx;
		/* 		justify-content: space-between;
		display: flex;
		flex-direction: column; */
	}

	.today-recommend .items .content .detail .title {
		/* margin-top: 20rpx; */
		font-size: 36rpx;
		font-weight: 700;
		/* border: 1px solid red; */
		width: auto;
		color: #5f5f5f;
	}

	.today-recommend .items .content .detail .intro {
		color: #797979;
		font-size: 28rpx;
		text-align: left;
		font-weight: 600;
		/* border:1px solid red; */
		width: 340rpx;
		height: 140rpx;
		margin-top: 10rpx;
	}

	.today-recommend .items .content .detail .detailRow1 {
		display: flex;
		flex-direction: row;
	}

	.today-recommend .items .content .detail .detailRow2 {
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;

		color: #797979;
		font-size: 27rpx;
		text-align: left;
		font-weight: 400;
	}

	.tips {
		/* display: flex;
		flex-direction: row;
		width: 140rpx;
		height: 62rpx;
		border: 1px solid red; */
	}

	.tip {
		/* border: 1px solid red; */
		/* background-color: #F37B1D; */
		align-self: center;
		margin-left: 6rpx;
		border-radius: 6rpx;
		color: #FFFFFF;
		/* color: #000000; */
		font-size: 24rpx;
		padding: 6rpx;
		width: auto;
	}

	.verticalLine {
		margin-left: 6rpx;
		margin-right: 6rpx;
	}

	.player {
		color: #F37B1D;
		font-style: italic;
		font-weight: 700;
	}

	/* 	.today-recommend .items .content .left-arrow {
		margin-right: 30rpx;

		display: flex;
		align-items: center;
		justify-content: center;

		border:1px solid red;
	}

	.today-recommend .items .content .left-arrow image {
		width: 20rpx;
		height: 20rpx;

		border:1px solid red;
	}
 */
	.today-recommend .items .buttom-box {
		width: 140rpx;
		height: 62rpx;
		/* border: 1px solid red; */
	}

	.today-recommend .items .buttom-box button {
		width: 140rpx;
		height: 62rpx;
		background: linear-gradient(180deg, #00C0FF 0%, #008CFF 100%);
		border-radius: 6px;
		font-size: 12px;
		color: #FFFFFF;
		/* margin-right: 30rpx; */
		/* margin-top: -20rpx; */

		display: flex;
		justify-content: center;
		align-items: center;
		/* border:1px solid red; */
	}

	.dialog {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1000;
		flex-direction: column;
	}

	#showImage {
		width: 343px;
		/* height: 198px; */
		border-radius: 20rpx;
	}

	.over {
		position: fixed;
		width: 100%;
		height: 100%;
		/* //透明度为70% */
		opacity: 0.7;
		filter: alpha(opacity=70);
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #000000;
	}

	#closeButton {
		width: 33px;
		height: 33px;
		position: relative;
		float: right;
		margin-bottom: 10px;
		/* border:1px solid red; */
	}

	#tipToBeOpened {
		font-size: 40rpx;
		font-weight: bold;
		color: #ffffff;
	}
</style>