PKR/pages/index/index.vue

<template>
	<view class="container">
		<view class="top flex">
			<view class="icon1 flex">
				<image class="img margin-r-10" src="../../static/shouye/shouye1.png" mode="scaleToFill"></image>
				<text class="tet">{{$t('login.a0')}}</text>
			</view>
			<view class="flex">
				<view class="icon2 text clamp margin-r-10" >
					{{userInfo.account||'链接钱包'}}
				</view>
				<view class="icon1  margin-r-10">
					<image class="langTip" src="../../static/shouye/shouye2.png" mode="scaleToFill"></image>
				</view>
				<view class="text1  margin-r-10">
					<picker :range="langList" range-key='label' @change="selectLang">
						<view>{{label}}</view>
					</picker>
				</view>
				<view class="icon1">
					<image class="langTipDom" src="../../static/shouye/shouye3.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="flex item">
			<navigator v-for="(item,ind) in gameList" :url="`entertainment?title=${item.name}&id=${item.id}`">
				<view class="item-style flex">
					<image class="item-tip" :src="`../../static/shouye/index_item_${ind+1}.png`" mode="scaleToFill">
					</image>
					<view class="name">
						{{item.name}}
					</view>
					<view class="item-next flex-center">
						<image src="../../static/img/zhiya1.png" mode="widthFix" class="next-img"></image>
					</view>
				</view>
			</navigator>
		</view>
		<view class="flex shop-detail-data">
			<view class="data-list">
				<view class="num-box">
					<text>{{active_user}}</text><text class="num-tip">+</text>
				</view>
				<view class="name">
					{{$t('homepledge.活跃用户')}}
				</view>
			</view>
			<view class="data-list">
				<view class="num-box">
					<text>1000000</text><text class="num-tip">+</text>
				</view>
				<view class="name">
					{{$t('homepledge.累计返奖')}}
				</view>
			</view>
			<view class="data-list">
				<view class="num-box">
					<text>10000</text><text class="num-tip">+</text>
				</view>
				<view class="name">
					{{$t('homepledge.总用户')}}
				</view>
			</view>
		</view>

		<view class="title">
			{{$t('homepledge.游戏流程')}}
		</view>
		<image class="conetnt-img" src="../../static/shouye/index-content.png" mode="widthFix"></image>
		<view class="title">
			{{$t('homepledge.合作伙伴')}}
		</view>
		<image class="conetnt-img" src="../../static/shouye/index-bottom.png" mode="widthFix"></image>
		<taber tab='index'></taber>
	</view>
</template>
<script>
	import {
		getIndex
	} from '@/api/index.js';
	import {
		getGameList,
	} from "@/api/game.js";
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	import taber from "@/components/footer/footer.vue";
	export default {
		components: {
			taber
		},
		data() {
			return {
				gameList: [],
				active_user: '0'
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState('user', ['userInfo']),
			label() {
				const label = this.langList.find((item) => {
					console.log(this.lang, item.value);
					return item.value == this.lang
				}).label;
				return label
			}
		},
		onLoad(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
		},
		onShow() {
			this.getGameList();
			this.loadData();
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			...mapActions({
				setLang: "setLang",
			}),
			// 请求载入数据
			async loadData() {
				getIndex({})
					.then(({
						data
					}) => {
						this.active_user = data.active_user
						console.log(data);
					})
					.catch(e => {});
			},
			selectLang(value) {
				this.setLang(this.langList[value.detail.value].value);
			},

			getGameList() {
				getGameList().then((res) => {
					this.gameList = res.data.list;

					if (this.gameList.length > 2) {
						this.gameList = this.gameList.slice(0, 2)
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #000000;
		padding-top: var(--status-bar-height);
	}

	.title {
		color: $base-color;
		text-align: center;
		font-size: 58rpx;

	}

	.item {
		padding: 30rpx;

		.item-style {
			border-radius: 20rpx;
			width: 320rpx;
			padding: 30rpx 0;
			background-color: #191A1F;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 38rpx;

			.item-tip {
				width: 209rpx;
				height: 209rpx;
			}

			.name {
				font-weight: bold;
			}

			.item-next {
				margin-top: 20rpx;
				width: 34rpx;
				height: 34rpx;
				border-radius: 20rpx;
				background-color: $color-yellow;
				font-size: 0;

				.next-img {
					width: 10rpx;
				}
			}
		}
	}

	.shop-detail-data {
		padding: 50rpx 30rpx;

		.data-list {
			text-align: center;

			.num-box {
				color: #FFF;
				font-size: 40rpx;
				font-weight: bold;

				.num-tip {
					font-size: $font-lg;
					color: $color-yellow;
				}
			}

			.name {
				font-size: $font-sm;
				color: $font-color-disabled;
			}
		}
	}

	.conetnt-img {
		width: 690rpx;
		margin: 30rpx;
		margin-top: 50rpx;
	}

	.top {
		font-weight: 500;
		padding: 40rpx 30rpx 24rpx 30rpx;
		line-height: 1;

		.icon1 {
			line-height: 0;

			.img {
				width: 47rpx;
				height: 47rpx;
			}

			.tet {
				font-size: 28rpx;
				color: #C3A76C;
			}
		}

		.icon2 {
			background: #292C3D;
			border: 2px solid #414243;
			border-radius: 21rpx;
		}

		.langTip {
			width: 34rpx;
			height: 34rpx;
		}

		.langTipDom {
			width: 23rpx;
			height: 15rpx;
		}

		.text {
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 10rpx 20rpx;
			max-width: 200rpx;
		}

		.text1 {
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
</style>