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

<template>
	<view class="game-content">
		<!-- 自定义导航栏 -->
		<uni-nav-bar id="nav-bar" status-bar="true" @clickRight="onNavHome" @clickLeft="showClickEvent('DrawerModalL')" title="视频"
		 color="#FFFFFF" fixed="true" backgroundColor="rgba(153, 150, 252, 255)">
			<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;">
					<image class="png-more" src="/static/mConver.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>

		<scroll-view v-if="decodeItem" class="scroll-class" scroll-y="true" :style="{'height':scrollviewHigh+'px'}">
			<view class="cu-bar back-class">
				<view class="action round" style="background-color: rgba(0,0,0,0.35);" @tap="onBack">
					<text class="cuIcon-back text-white" style="padding: 10rpx 0 10rpx 20rpx;"></text>
				</view>
				<!-- <view class="content text-bold">
					操作条
				</view> -->
			</view>
			<swiper class="screen-swiper" style="height: 456px;" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
			 :circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="game-child-content">
				<view class="text-gray text-df">{{decodeItem.createTime}}</view>
				<view class="margin-top-sm text-bold text-xl">{{decodeItem.gameName}}</view>
				<view class="margin-top-sm text-content text-df">
					{{decodeItem.gameDescription}}
				</view>
				<view class='flex flex-wrap ' style="margin: 10rpx 0;">
					<view style="padding-right:5rpx;" v-for="(item,index) in gameTags" :key="index">
						<view class='cu-tag line-purple radius'>{{item.tagName}}</view>
					</view>
				</view>

				<view class="flex padding justify-around plan-Tip-child">
					<view>
						<image class="margin-lr-xs right-png" :src="gameFavorite?'/static/favorite_r.png':'/static/favorite_g.png'" mode="aspectFill"
						 @tap="onFavoriteAdd"></image>
					</view>
					<view>
						<!-- <image class="margin-lr-xs right-png" src="/static/info_g.png" mode="aspectFill" @tap="onNavComment"></image> -->

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

		</scroll-view>
		<view class="bottom-container">
			<view class="cu-bar tabbar" style="height: 100%;">
				<button class="cu-btn make-bg-bPurple text-white lg margin-lg" style="width: 100%;" @tap="onNavToWebviewGame">马上去玩</button>
			</view>
		</view>

		<sideBarD ref="sideBarDetail">

		</sideBarD>

		<!-- <button @tap="onNavToMiniGame">跳转小游戏</button> -->
		<!-- <button @tap="onNavToWebviewGame">跳转webview游戏</button> -->
	</view>
</template>

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

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			uniNavBar,
			sideBarD
		},
		computed: mapState(['ConnectBindingDevice', 'BLEConnectDevice', 'cIndex']),
		data() {
			return {
				//解编码item
				decodeItem: '',
				//编码的item
				encodeItem: '',

				cardCur: 0,
				swiperList: [],
				gameTags: [],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				scrollviewHigh: 500,

				gameFavorite: false,
			}
		},
		onLoad(option) {

			if (option.item) {
				console.log('option:', option);
				// this.encodeItem = option.item;
				// this.decodeItem = JSON.parse(decodeURIComponent(option.item));

				let item = JSON.parse(decodeURIComponent(option.item));
				// console.log("==",item);
				this.gameFavorite = item.gameFavorite;
				reqUtil.requestData(config.URL.GAMEDETAIL, item).then(res => {
						console.log('GAMEDETAIL =====', res);
						if (res.code == 0) {
							this.encodeItem = encodeURIComponent(JSON.stringify(res.data.gameInfo));
							this.decodeItem = res.data.gameInfo;
							this.swiperList = res.data.gamePicturesList;
							this.gameTags = res.data.gameTags;
						}

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


		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					// 计算组件的高度
					// console.log("组件高度：", res);
					let view = uni.createSelectorQuery().select("#nav-bar")
					view.boundingClientRect(data => {
						// console.log("data:", data);
						let navHeight = data.height;
						_this.scrollviewHigh = res.windowHeight - 58 - navHeight;
					}).exec()
					// 	_this.scrollviewHigh = res.windowHeight- uni.getSystemInfoSync().screenWidth / 750 * (300); //像素
				}
			})
		},
		methods: {
			...mapMutations(['glimitPlayGame']),
			// 跳转转换页面
			onNavConver() {
				uni.navigateTo({
					url: '../../conversion-page/conversion/conversion',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//跳转回主页
			onNavHome() {
				uni.reLaunch({
					url: '../../personal-page/personal/personal',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			showClickEvent() {
				this.$refs.sideBarDetail.showModal();
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onNavToMiniGame() {
				uni.navigateToMiniProgram({
					appId: 'wx6898b48e0760935c',
					path: '',
					extraData: {
						'data1': 'test'
					},
					success(res) {
						// 打开成功
						console.log(res);
					},
					fail(fail) {
						console.error(fail);
					}
				})
			},
			onNavToWebviewGame() {
				//1.先判断模式
				//如果都不存在，返回
				this.glimitPlayGame({
					gameTags: this.gameTags,
					callback: () => {
						// #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
					}
				})


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

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

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

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

<style>
	.game-content {
		position: fixed;
		height: 100%;
		width: 100%;
		background: #FFFFFF;
		/* display: flex; */
		/* flex-direction: column; */
		/* align-items: center; */
		/*垂直居中*/
		/* justify-content: center; */
		/*水平居中*/

		/* border: 1rpx solid #39B54A; */
	}

	.game-child-content {
		margin: 20px;
	}

	.bottom-container {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 58px;
		/* border: 1rpx solid #39B54A; */
	}

	.scroll-class {
		/* background-color: #007AFF; */
		/* border: 1rpx solid #007AFF; */
		position: relative;
	}

	.back-class {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	.plan-Tip {
		height: 90rpx;
		margin: 60rpx 0;
	}

	.plan-Tip-child {
		background-color: #F8F8F8;
		border-radius: 30px;
		width: 100%;
		height: 90rpx;
		margin: 50rpx 0;

	}

	.plan-litle-img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 32rpx;
	}

	.plan-m-img {
		width: 1rpx;
		height: 110rpx;
		border: 1rpx dashed rgba(151, 151, 255, 1);

	}

	/* 图标大小 */
	.data-png {
		width: 16px;
		height: 16px;
		margin: 5rpx;
	}


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