ProAdvanced/pages/game-page/game-list/game-list.vue

<template>
	<view>
		<!--  rgba(116, 172, 240, 1) -->
		<uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(153, 150, 252, 255)" <!-- #ifdef APP-PLUS -->
			@clickLeft="showDrawer()"
			<!-- #endif -->
			<!-- #ifdef H5 || MP-WEIXIN -->
			@clickLeft="showClickEvent('DrawerModalL')"
			<!-- #endif -->
			@clickRight="onNavHome" title="游戏" color="#FFFFFF" fixed="true">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="png-more" src="../../../static/more.png"></image>
				</view>
			</view>
			<!-- <view slot="right">
				<view class=" flex align-center " style="margin-right: 10rpx;">
					<view class="cuIcon-home text-20px-before"></view>
				</view>
			</view> -->
		</uni-nav-bar>

		<!-- v-if="(cIndex != -1 && gameShow)||ConnectBindingDevice" -->
		<scroll-view scroll-y="true" :style="{ height: scrollviewHight + 'px' }" @scrolltolower="lower">
			<view class="game-item card-view" v-for="(item, index) in gameList" :key="index" :data-id="index">
				<view @tap="onNavToWebviewGame(item)">
					<view class="game-image-container">
						<image mode="aspectFill" class="game-item-image" :src="item.gamePicture"></image>
						<image class="head-image" :src="item.gameIcon"></image>

						<view class="play-bg-image">
							<image class="play-image" src="/static/play.png"></image>
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="content flex-sub">
								<view>{{ item.gameName }}</view>
								<view class='flex flex-wrap ' style="margin: 10rpx 0;">
									<view style="padding-right:5rpx;" v-for="(item,index) in item.gameTags"
										:key="index">
										<view class='cu-tag line-purple radius'>{{item.tagName}}</view>
									</view>
								</view>
								<!-- <view class="text-sm flex justify-between" style="color:rgba(201, 201, 201, 1);">{{item.createTime}}</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="text-gray text-sm text-center padding flex flex-direction" style="width: 100%;">
					<view @tap="onFavoriteAdd(item)">
						<image class="margin-lr-xs right-png" style="margin: 25px 0;"
							:src="item.gameFavorite?'/static/favorite_r.png':'/static/favorite_g.png'"
							mode="aspectFill"></image>
					</view>
					<view style="margin-top: 30px;" @tap="onNavComment">
						<!-- <image class="margin-lr-xs right-png" style="margin: 20px 0;" src="/static/info_g.png" mode="aspectFill"></image> -->
					</view>
					<view style="margin-top: 60px;" @tap="onNavDetail(item)">
						<view class="cuIcon-moreandroid margin-lr-xs"
							style="font-size: 20px; margin: 10px 0;  color: #d6d6d6;"></view>
					</view>
				</view>
			</view>
			<!-- (cIndex == -1 && !gameShow) ||gameList.length == 0 || ConnectBindingDevice == null-->
			<view v-if="gameList.length == 0" class="text-16px text-gray text-center margin">没有更多数据</view>
			<view style="height: 17px;"></view>
		</scroll-view>

		<!-- <view class="float-png">
			<image src="/static/conversion@2x.png" mode="aspectFit" @tap="onNavConver"></image>
		</view> -->
		<!-- <round-menu @trigger="onRoundTrigger"></round-menu> -->
		<sideBar ref="sideBar"></sideBar>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import sideBar from '@/components/side-bar/side-bar.vue';
	import config from '../../../common/config.js';
	import reqUtil from '../../../util/util-js/requstUtil.js';
	// import roundMenu from "@/components/round-menu/round-menu.vue";

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			uniNavBar,
			sideBar
		},
		computed: mapState(['ConnectBindingDevice', 'BLEConnectDevice', 'currentModeIndex', 'cIndex', 'versionCodeState',
			'platform',
			'gamePlatform', 'systemInfo', 'navHeight', 'tabbarHeight'
		]),
		data() {
			return {
				tabList: [],
				TabCur: 0,
				Category: 0,
				scrollLeft: 0,
				scrollviewHight: '',


				bDontUpdate: false,

				//游戏列表
				gameList: [],
				gamePage: 1,
				gameSize: 10,

				//默认显示
				gameShow: true,
				//编码的item
				encodeItem: '',

			};
		},
		onLoad(option) {
			let _this = this;


		},
		onReady() {
			let phoneHeight = this.systemInfo.windowHeight;
			// 计算组件的高度
			this.scrollviewHight = phoneHeight - this.navHeight - this.tabbarHeight - this.systemInfo.statusBarHeight;
		},
		onShow() {
			let _index = 1;
			this.bDontUpdate = false;
			this.gameList = [];
			this.gamePage = 1;
			if (this.tabList.length == 0) {
				//获得游戏类目
				reqUtil.requestData(config.URL.GAMECATEGORY).then(
					res => {
						console.log('GAMECATEGORY =====', res);
						if (res.code == 0) {
							this.tabList = res.data;
							this.TabCur = _index; //game
							this.categoryType = this.tabList[_index].categoryType;
							this.getGameList(this.categoryType);
						}
					},
					e => {
						console.log(e);
					}
				);
			} else {
				//如果存在分类
				this.getGameList(this.categoryType);
			}

		},
		methods: {
			...mapMutations(['glimitPlayGame', 'showDrawerById']),
			// 跳转转换页面
			onNavConver() {
				uni.reLaunch({
					url: '../../conversion-page/conversion/conversion',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//跳转回主页
			onNavHome() {
				uni.reLaunch({
					url: '../../personal-page/personal/personal',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					//重新设置参数
					this.bDontUpdate = false;
					this.gameList = [];
					this.gamePage = 1;
					this.gameSize = 10;
					this.TabCur = e.currentTarget.dataset.id;
					this.categoryType = e.currentTarget.dataset.category_id;
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
					this.getGameList(this.categoryType);
				}

			},
			showClickEvent() {
				this.$refs.sideBar.showModal();
			},
			onNavSearch() {

				uni.showToast({
					title: '功能尚未开放',
					icon: 'none'
				})
				return;

				uni.navigateTo({
					url: '../game-search/game-search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//收藏
			onFavoriteAdd(item) {
				//添加收藏
				let favoritesTemp = {
					'fObjectId': item.gameId,
					'favoritesType': 0,
				}

				reqUtil.requestData(config.URL.FAVORITESMODIFY, favoritesTemp).then(res => {
						console.log('FAVORITESMODIFY =====', res);
						if (res.code == 0) {
							if (!res.data.bHas) {
								item.gameFavorite = false;
								uni.showToast({
									title: "取消收藏",
									icon: "none"
								})
							} else {
								uni.showToast({
									title: "收藏成功",
									icon: "none"
								})
								item.gameFavorite = true;
							}
						}

					},
					e => {
						console.log(e)
					});
			},
			onNavComment() {
				uni.showToast({
					title: '功能尚未开放',
					icon: 'none'
				})
				return;
				uni.navigateTo({
					url: '../game-comment/game-comment',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onNavDetail(item) {
				// console.log(item);
				let temItem = encodeURIComponent(JSON.stringify(item));
				// return;
				uni.navigateTo({
					url: '../game-detail/game-detail?item=' + temItem + "&type=game",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onNavToWebviewGame(item) {
				// console.log("====item == ",item);
				// if (!this.BLEConnectDevice || this.cIndex == -1) {
				// 	uni.showToast({
				// 		title: "没有连接绑带,请连接后重试！",
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				//1.先判断模式
				//如果都不存在，返回
				this.glimitPlayGame({
					gameTags: item.gameTags,
					callback: () => {
						reqUtil.requestData(config.URL.GAMEDETAIL, item).then(res => {
								console.log('GAMEDETAIL =====', res);
								if (res.code == 0) {
									this.encodeItem = encodeURIComponent(JSON.stringify(res.data
										.gameInfo));

									// #ifdef APP-PLUS
									uni.navigateTo({
										url: '../game-play-sub/game-play-sub?item=' + this
											.encodeItem,
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
									// #endif 
									// #ifdef H5
									uni.navigateTo({
										url: '../game-play/game-play-web?item=' + this.encodeItem,
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
									// #endif
								}

							},
							e => {
								console.log(e)
							});
					}
				});



			},

			getGameList(categoryType) {
				uni.showToast({
					icon: "loading",
					title: "",
					mask: true,
					duration: 10000
				})
				let tagId = 3; //默认是普通模式，普通模式可以用手机直接玩
				if (this.BLEConnectDevice != null) {
					if (1 === this.currentModeIndex) {
						//关卡是跳绳
						tagId = 4; // rope 标签
					} else if (0 === this.currentModeIndex) {
						//关卡是拳击
						tagId = 1; //hotman模式 标签

					}
				}
				//获得游戏列表
				reqUtil.requestData(
					config.URL.GAMELISTBYTAG, {
						categoryType: categoryType,
						//endTime 可以不设置，服务器默认设置一个值
						// endTime: config.endTime,
						tagId: tagId,
						page: this.gamePage,
						size: this.gameSize
					}, "POST"
				).then(res => {
						console.log('GAMELISTBYTAG =====', res);
						if (res.code == 0) {
							uni.hideToast();

							if (res.data.length < this.gameSize) {
								this.bDontUpdate = true;
							}

							if (res.data.length != 0) {
								uni.showToast({
									icon: "none",
									title: "更新成功",
								})
							} else {
								uni.showToast({
									icon: "none",
									title: "没数据啦",
								})
							}
							this.gameList = this.gameList.concat(res.data);

							if (categoryType == 1) {
								//game
								this.gameShow = this.versionCodeState.showGame;

							} else if (categoryType == 2) {
								//game
								this.gameShow = this.versionCodeState.showVideo;
							}
						}
					},
					e => {
						console.log(e);
						uni.showToast({
							icon: "none",
							title: "更新出错",
						})
					}
				);
			},

			onRoundTrigger(data) {
				console.log("onRoundTrigger==", data);
				// return;
				let url = '';
				switch (data.item.type) {
					case "personal":
						//个人中心页面
						url = '../../personal-page/personal/personal';
						break;
					case "game":
						url = '../../game-page/game/game';
						break;
					default:
						url = '../../personal-page/personal/personal';
						break;
				}
				uni.reLaunch({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			lower(e) {
				if (this.bDontUpdate) return;
				console.log(e);
				this.gamePage++;
				this.getGameList(this.categoryType);
			},
			showDrawer() {
				// uni.getSubNVueById('game-list-drawer').show('slide-in-left', 200); {id:'game-list-drawer'}
				this.showDrawerById();
			}
		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.float-png {
		position: absolute;
		right: 15px;
		bottom: 200px;
		width: 56px;
		height: 56px;
	}

	.png-search {
		width: 50rpx;
		height: 100%;
		position: absolute;
		right: 20px;
		top: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		/* border: 1rpx solid #000000; */
	}

	.scrollX {
		position: relative;
		width: 100%;
		height: 90upx;
		/* border: 1rpx solid #000000; */
	}

	.scrollX-padding {
		padding: 0 74px 0 20px;
	}

	.game-item {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		background-color: white;

		margin: 17px 14px 0 17px;
		/* border-bottom: 1rpx solid rgba(240, 240, 240, 1); */
	}

	.game-item-image {
		width: 542rpx;
		height: 542rpx;
		z-index: 99;
	}

	.head-image {
		position: absolute;
		bottom: -20px;
		left: 0;
		margin-left: 17px;
		width: 80rpx;
		height: 80rpx;
		border: 2px solid white;
		border-radius: 100px;
		z-index: 100;
	}

	.play-bg-image {
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		right: 0;
		width: 112rpx;
		height: 112rpx;

		margin: auto;
		background: rgba(0, 0, 0, 0.25);
		/* opacity: 0.25; */
		border-radius: 100px;
		z-index: 100;
	}

	.play-image {
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		right: 0;
		width: 44rpx;
		height: 54rpx;
		margin: auto;
		z-index: 100;
	}

	.game-image-container {
		position: relative;
	}

	.game-index {
		z-index: 300;
	}

	.cu-color {
		color: rgba(191, 191, 193, 1);
	}

	.right-png {
		width: 36rpx;
		height: 32rpx;
	}
</style>