yichael_gamecenter/pages/BBeng/BBeng.vue

<template>
	<view>
		<view class="today-recommend">
			<view id="topUI">
				<!-- 搜索框 -->
				<view id="searchBG">
					<!-- <view id="searchTip">搜索关键词</view> -->
					<input id="searchInput" confirm-type="search" placeholder="搜索关键词" />
					<!-- <view id="searchIcon"></view> -->
					<image id="searchIcon" src="../../static/bbeng/searchIcon.png"></image>
				</view>
				<view id="gameClassify">
					<!-- 横向选项卡 -->
					<wuc-tab :tab-list="data_category" :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>
				</view>
				<view id="topLine"></view>
				<view id="classifyTop">
					<view id="classifyTitle">{{classifyTitleStr}}</view>
					<view style="display: flex;" @click="clickBluetooth">
						<image id="iconBluetooth" :src='blueToothInfoArr[currentBlueToothInfo].src'></image>
						<view id="tipBluetooth" :style="{'color':blueToothInfoArr[currentBlueToothInfo].color}">{{blueToothInfoArr[currentBlueToothInfo].text}}</view>
					</view>
				</view>
			</view>

			<!-- 游戏列表 -->
			<view class="items" v-for="(item,index) in aTodayRecArr" :key="index" @click="clickTodayRecItem(index)">
				<view class="content">
					<view class="pic">
						<image mode="scaleToFill" :src='item.gameIcon'></image>
					</view>
					<view class="detail">
						<text class="title">{{item.gameName}}</text>
						<!-- <text class="intro">{{item.gameDescription}}</text> -->
						<view class="intro">{{item.gameDescription}}</view>
					</view>
					<view class="left-arrow">
						<image mode="scaleToFill" src="../../static/home/LeftArrow.png"></image>
					</view>
				</view>
				<view class="buttom-box">
					<button class="play-btn">开始玩</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';

	export default {
		data() {
			return {
				aTodayRecArr: [{
					"gameName": "音咚",
					"gameDescription": "二次元音乐与数码的战斗，戴上你的拳击套击碎音符迸发出来的能量吧",
					"gameIcon": "gameIcon/2020-07-26/d1e5292c910f4ca6b767c3400815cec3-eee492f7e18d97a82c2e4ffc98fa95b.png",
					"gamePicture": "pictures/2020-07-26/5885c40179ca4f68869a3b60ad082eac-loading.jpg",
					"gameUrl": "http://110.43.54.43/t8/",
					"createTime": "2020-07-01"
				}],

				TabCur: 0,
				classifyTitleStr: '推荐',

				//分类列表
				data_category: [{
					"categoryId": 1,
					"categoryName": "全部",
					"categoryType": 0
				}],


				currentBlueToothInfo: 0,
				blueToothInfoArr: [{
						src: '../../static/bbeng/iconBluetooth.png',
						text: '蓝牙未连接',
						color: '#B3B3B3'
					},
					{
						src: '../../static/bbeng/iconBluetoothBlue.png',
						text: '蓝牙已连接',
						color: '#00A1FF'
					},
				],
			}
		},
		onLoad() {
			//默认展示第一个分类
			this.tabChange(0);
			console.log("哔蹦onload");
			//请求游戏分类
			this.getCategory(this.callbackCategory);
		},
		components: {
			WucTab,
		},
		methods: {
			clickTodayRecItem: function(index) {
				// console.log(index);

				getApp().globalData.gid = getApp().globalData.gameList[7 + index].id;
				this.goToGame();
			},
			//切换分类
			tabChange(index) {
				this.TabCur = index;
				this.classifyTitleStr = this.data_category[index].categoryName;
				// console.log("切换分类",this.data_category);
				
				let categoryType = this.data_category[index].categoryType;
				//根据分类获取游戏列表
				this.getGameListByCategory(categoryType, 1, 100, this.callbackGameListByCategory);
			},
			clickBluetooth() {
				let newIndex = (this.currentBlueToothInfo + 1) % 2;
				this.currentBlueToothInfo = newIndex;
				// console.log("新的索引", this.currentBlueToothInfo);
			},
			//请求游戏分类
			getCategory(callback) {
				let url = 'https://www.9527fun.cn/api_dev/td/game_category'
				// let data_category = this.data_category;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						// console.log("分类 ", res);
						callback(res.data.data);
					},
					fail: (res) => {
						console.log("fail:====" + res)
						// return callback('fail');
					}
				})
			},
			//请求游戏分类回调
			callbackCategory(res) {
				this.data_category = res;
				// console.log("分类啦啦啦", this.data_category);

				//根据分类获取游戏列表
				this.getGameListByCategory(res[0].categoryType, 1, 100, this.callbackGameListByCategory);
			},
			//根据分类获取游戏列表
			getGameListByCategory(categoryType, page, size, callback) {
				let url = 'https://www.9527fun.cn/api_dev/td/games_by_category?categoryType=' + categoryType + '&page=' + page +
					'&size=' + size;
				// let data_category = this.data_category;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						// console.log("根据分类获取游戏列表 ", res);
						callback(res.data.data);
					},
					fail: (res) => {
						console.log("fail:====" + res)
						// return callback('fail');
					}
				})
			},
			//根据分类获取游戏列表回调
			callbackGameListByCategory(res) {
				// this.data_category = res;
				// console.log("分类啦啦啦", this.data_category);
				// console.log("根据分类获取游戏列表 ", res);
				this.aTodayRecArr = res.List;
			},
		}
	}
</script>

<style>
	#topUI {
		display: flex;
		flex-direction: column;
	}

	#searchBG {
		width: 330px;
		height: 37px;
		background: #EFEFEF;
		border-radius: 19px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#searchInput {
		margin-left: 20px;
		width: 100%;
	}

	#searchIcon {
		width: 22px;
		height: 18px;
		/* background: #B3B3B3; */
		/* background-image: url(../../static/bbeng/searchIcon.png); */
		margin-right: 20px;
		margin-left: 10px;
	}

	#topLine {
		width: 317px;
		height: 1px;
		background: #EBEBEB;
		margin-top: 10px;
	}

	#classifyTop {
		display: flex;
		/* flex-direction: row; */
		margin-top: 20px;
		width: 100%;
		align-items: center;
		/* border: 1px solid blue; */
		justify-content: space-between;
	}

	#classifyTitle {
		width: 68px;
		height: 24px;
		font-size: 17px;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 800;
		color: #414141;
		line-height: 24px;
		/* border: 1px solid blue; */
	}

	#iconBluetooth {
		width: 20px;
		height: 20px;
		margin-right: 7px;
		/* margin-left: 10px; */
		/* border: 1px solid blue; */
	}

	#tipBluetooth {
		width: 70px;
		height: 20px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #B3B3B3;
		line-height: 20px;
		/* margin-right: 10px; */
		/* border: 1px solid blue; */
	}

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

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

		/* 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: 250rpx;
		margin-top: 50rpx;

		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;
	}

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

		display: flex;
		flex-direction: row;

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

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

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

	.today-recommend .items .content .detail {
		margin-right: 10rpx;
		margin-top: 10rpx;
		/* border:1px solid red; */
	}

	.today-recommend .items .content .detail .title {
		font-size: 35rpx;
		font-weight: 700;
	}

	.today-recommend .items .content .detail .intro {
		color: #BBBBBB;
		font-size: 25rpx;
		text-align: left;
		font-weight: 400;
		/* border:1px solid red; */
	}

	.intro {
		/* border: 1px solid red; */
		/* margin-right: 200px; */
		width: 220px;
		height: 70px;
		margin-top: 5px;
	}

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

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

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

	/* .content {
		border: 1px solid red;
	}

	.left-arrow {
		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: 100%;
		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; */
	}
</style>