BiKing/pages/property/index.vue

<template>
	<view class="navigation-page">
		<headContent :showleftRight="false">
			<template #content>
				<view class="navigation-box">
					<view
						:class="['navigation-item hide_1' , navigationIndex === index ? 'active-navigation-item' : '']"
						v-for="(item , index) in navigationArr" :key="`navigation_${index}`"
						@click.stop="navigationIndex = index">
						{{ item }}
					</view>
				</view>
			</template>
		</headContent>
		<view class="content">
			<!-- 合约账户 -->
			<template v-if="navigationIndex === 0">
				<contractModules />
			</template>
			<!-- 币币账户 -->
			<template v-if="navigationIndex === 1">
				<BibiModules />
			</template>
			<!-- 合约账户 -->
			<template v-if="navigationIndex === 2">
				<legalTenderModules />
			</template>
			<template v-else-if="navigationIndex === 3">
				<GiftMoneyModules />
			</template>
		</view>

		<!-- <uni-load-more /> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import card from "./modules/card.vue"
	import contractModules from "./modules/contract/index.vue"
	import GiftMoneyModules from "./modules/GiftMoney/index.vue"
	import legalTenderModules from "./modules/legalTender/index.vue"
	import BibiModules from "./modules/Bibi/index.vue"
	import {
		Way_getUserInfo
	} from "@/utils/common-request.js"
	export default {
		name: 'property',
		components: {
			card,
			contractModules,
			GiftMoneyModules,
			legalTenderModules,
			BibiModules
		},
		data() {
			return {
				navigationIndex: 0,
				navigationArr: [
					'合约账户',
					'币币账户',
					'法币账户',
					'赠金账户'
				],
				UserInfo: null,

				 
			};
		},
		computed: {
			...mapGetters([
				'token'
			]),
		},
		onShow() {
			this.getTokenStatus()
		},
		onReachBottom() {
			console.log('页面触底')
		},
		watch: {
			token: {
				handler(newToken) {
					if (!newToken) {
						this.goLogin()
					};
				}
			}
		},
		methods: {
			goLogin(){
				// #ifndef APP-PLUS
				uni.redirectTo({
					url: '/pages/login/index'
				})
				// #endif
			},
			getTokenStatus() {
				if (this.token) {
					this.getAccountInfo()
				} else {
					this.goLogin()
				}
			},
			getAccountInfo() {
				this.$store.dispatch('possession/getPossession').then(res => {
					console.log('获取成功')
				}).catch(err => {
					console.log('获取shibai ')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.navigation-box {
		padding: 0 $pages-padding;
		width: 100%;
		height: 100%;
		padding-bottom: 11rpx;
		display: flex;
		align-items: flex-end;

		.navigation-item {
			width: 25%;
			text-align: center;
			height: 60rpx;
			border: 2rpx solid #27ae83;
			line-height: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #05c175;

			&:nth-child(n + 2) {
				border-left: none;
			}

			&:last-child {
				border-radius: 0 6rpx 6rpx 0;
			}

			&:first-child {
				border-radius: 6rpx 0 0 6rpx;
			}
		}

		.active-navigation-item {
			background-color: #05C175;
			color: #FFFFFF;
		}
	}
</style>