uav-uniapp-demo-24-8-18/pages/home/home.vue

<!-- 首页 -->
<template>
	<view class="home bx">

		<!-- 首页顶部 -->
		<view class="home-top content">
			<view class="menu-icon" @click="centerShow = true;$play()">
				<image src="@/static/home/menu.png" mode="aspectFit"></image>
			</view>
			<view class="logo">
				Tiktok
			</view>
			<view class="sign">
				<image @click="toSignin" src="../../static/home/sign.png" mode="widthFix"></image>
			</view>
		</view>

		<!-- 通知 -->
		<view class="notification">
			<u-notice-bar :text="notification[notificationType[$i18n.locale]] || ''" bgColor="#000"
				color="white"></u-notice-bar>
		</view>

		<!-- 用户信息 -->
		<view class="user-info content">
			<view class="user-name">{{ userInfo.account }}</view>
			<view class="member-image">
				<image :src="vipInfo.icon" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-list content">
			<view v-for="(item,index) in onList" :key="index" @click="clickMenu(index)" class="menu-item">
				<image :src="item.icon" mode="aspectFit"></image>
				<view class="menu-descript">{{ $t(`page.home.${menuTitles[index]}`) }}</view>
			</view>
		</view>

		<!-- 会员等级信息 -->
		<view class="member-list content">
			<view class="member-item" v-for="(item, index) in vipList" :key="index">

				<view class="status-icon">
					<view v-if="item.current" class="current">current</view>
					<uni-icons v-else type="locked" size="20" color="#000"></uni-icons>
				</view>

				<view class="img-box">
					<image :src="item.icon" mode="aspectFit"></image>
				</view>

				<view class="menber-descript">{{ item.title }}</view>

				<!-- 权益列表 -->
				<view class="equity-list">
					<view class="equity-item">
						<!-- Receive a set of 40 apps data tasks -->
						{{ $t('page.home.equity_item_1', [item.num]) }}
					</view>

					<view class="equity-item">
						{{ $t('page.home.equity_item_2', [item.percentage]) }}
					</view>

					<view class="equity-item">
						{{ $t('page.home.equity_item_3', [item.price]) }}
					</view>
				</view>
			</view>
		</view>

		<!-- 协议列表 -->
		<view class="agreement-list">
			<view v-for="(item,index) in outList" :key="index" @click="toinstructions(index)" class="agreement-item">
				<image :src="item.icon" mode="aspectFit"></image>
				<view class="agreement-descript">{{ $t(`page.home.${agreementTitles[index]}`) }}</view>
			</view>
		</view>


		<sTabbar select="0" />

		<center :show="centerShow" :userInfo="userInfo" @close="centerShow = false;$play()" />

		<!-- 客服列表 -->
		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>

	</view>
</template>

<script>
	import sTabbar from '@/components/base/tabBar.vue'
	import center from '@/components/center/center.vue'
	import serviceList from '@/components/serviceList/serviceList.vue'

	export default {
		components: {
			sTabbar,
			center,
			serviceList
		},
		data() {
			return {
				notification: {},
				centerShow: false,
				showService: false,
				menuTitles: ['CustomerService', 'Certifcate', 'Deposit', 'Withdraw'],
				agreementTitles: ['agreement_item_1', 'agreement_item_2', 'agreement_item_3', 'agreement_item_4'],
				serverList: [],
				onList: [],
				outList: [],
				vipList: [],
				userInfo: {},
				vipInfo: {},
				notificationType: {
					en: 'keyEnglish',
					es: "keySpanish",
					"zh": "keyChinese"
				},
			}
		},
		onShow() {
			this.getIndexIcon()
			this.getNotice()
			this.getUserInfo()
			this.forgetPass()
		},
		methods: {
			//跳转证书页面
			toCertificate() {
				uni.navigateTo({
					url: `/pages/instructions/instructions?index=1&type=onList`
				})
			},

			//跳转充值页面
			toPurse() {
				uni.navigateTo({
					url: '/pages/purse/purse'
				})
			},

			//跳转提现页面
			toWithdraw() {
				uni.navigateTo({
					url: '/pages/withdraw/withdraw'
				})
			},

			//显示客服列表
			revealServiceList() {
				this.showService = true;
			},

			//关闭客服列表
			closeServiceList() {
				this.showService = false;
			},

			//跳转说明页面(六合一)
			toinstructions(index) {
				this.$play()
				uni.navigateTo({
					url: `/pages/instructions/instructions?index=${index}`
				})
			},

			//获取首页图标
			getIndexIcon() {
				this.request('indexIcon').then(res => {
					if (res.code == 200) {
						this.onList = res.result.onList;
						this.outList = res.result.outList;
					}
				})
			},

			//获取vip套餐
			getVipShop() {
				this.request('vipShop').then(res => {
					if (res.code == 200) {
						res.result.forEach(item => {
							if (this.vipInfo && item.id == this.vipInfo.id) {
								item.current = true
							}
						})
						this.vipList = res.result
					}
				})
			},

			//获取通知
			getNotice() {
				this.request('indexNotice').then(res => {
					if (res.code == 200) {
						this.notification = res.result
					}
				})
			},

			//用户点击菜单
			clickMenu(index) {
				this.$play()
				if (index == 0) {
					this.revealServiceList()
				}
				if (index == 1) {
					this.toCertificate()
				}
				if (index == 2) {
					this.toPurse()
				}
				if (index == 3) {
					this.toWithdraw()
				}
			},

			//获取用户信息
			getUserInfo() {
				this.request('userInfo').then(res => {
					if (res.code == 200) {
						this.userInfo = res.result.userInfo
						this.vipInfo = res.result.vip
						this.getVipShop()
					}
				})
			},

			//忘记密码(获取客服列表)
			forgetPass() {
				this.request('forgetPass').then(res => {
					if (res.code == 200) {
						this.serverList = res.result
					}
				})
			},

			//跳转签到页面
			toSignin() {
				this.$play()
				uni.navigateTo({
					url: '/pages/signIn/signIn'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		// background-color: black;
		// background-image: url('@/static/home/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		// color: white;
		padding-bottom: 200rpx;

		.content {
			width: 96%;
			margin: 0 auto;
		}

		.home-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			padding: 20rpx 0rpx;

			.menu-icon {

				image {
					width: 50rpx;
					height: 50rpx;
				}

			}

			.logo {
				color: uni-bg-color-app;
				font-weight: bold;
				font-size: 32rpx;
			}

			.sign {

				image {
					width: 60rpx;
				}
			}
		}

		.user-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 20rpx 0rpx;

			.user-name {
				font-size: 34rpx;
			}

			.member-image {

				image {
					width: 150rpx;
					height: 110rpx;
				}

			}
		}

		.menu-list,
		.agreement-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			text-align: center;

			.menu-item,
			.agreement-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: calc(25% - 20px);
				flex-shrink: 0;

				image {
					width: 110rpx;
					height: 110rpx;
				}

				.menu-descript {
					box-sizing: border-box;
					width: 100%;
					text-align: center;
					word-break: break-all;
					font-size: 24rpx;
					margin: 10rpx 0rpx;
					padding: 0rpx 12rpx;
				}
			}

			.agreement-item {
				font-size: 19rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}

		.agreement-list {
			padding-bottom: 40rpx;
		}

		.member-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 20rpx auto;

			.member-item {
				position: relative;
				box-sizing: border-box;
				padding: 15rpx;
				width: calc(50% - 10rpx);
				border-radius: 10rpx;
				border: 1px solid #00000080;
				margin-bottom: 25rpx;

				.status-icon {
					box-sizing: border-box;
					position: absolute;
					width: 100%;
					display: flex;
					justify-content: flex-end;
					padding: 0rpx 20rpx;

					.current {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 120rpx;
						background-image: url('@/static/home/current.png');
						background-size: 100%;
						background-repeat: no-repeat;
						color: black;
						font-size: 25rpx;
					}
				}

				.img-box {
					display: flex;
					justify-content: center;
					width: 150rpx;
					height: 110rpx;
					overflow: hidden;
					margin: 20rpx auto;

					image {
						width: 150rpx;
						height: 110rpx;
					}
				}

				.menber-descript {
					text-align: center;
					color: $uni-bg-color-app;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.equity-list {
					// color: white;
					font-size: 20rpx;
					padding-bottom: 40rpx;

					.equity-item {
						padding-left: 15rpx;
						position: relative;
						word-break: break-all;

						&::before {
							position: absolute;
							left: 0;
							top: 10rpx;
							content: '';
							width: 5rpx;
							height: 5rpx;
							background: white;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
</style>