zd/pages/user/user.vue

<template>
	<view class="content">
		<user-page ref='userPage' v-show="isUserPage" @tab='changeTab'>
		</user-page>
		<shop-page ref='shopPage' v-show="!isUserPage" @tab='changeTab'>
		</shop-page>
	</view>
</template>
<script>
	import userPage from "./userPage.vue"
	import shopPage from "./shopPage.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		orderData,
		getUserInfo
	} from '@/api/user.js';
	export default {
		components: {
			userPage,
			shopPage
		},
		data() {
			return {
				isUserPage: true //默认用户页面
			};
		},
		computed: {
			...mapState('user', [ 'hasLogin']),
		},
		onShow() {
			uni.setTabBarStyle({
				backgroundColor: '#FFFFFF'
			})
			// 判断是否已经登录
			this.loadBaseData();
			// 判断是否用户页面
			if (this.isUserPage&&this.hasLogin) {
				this.$nextTick(() => {
					this.$refs.userPage.getUser();
				})
			} else if(this.hasLogin){
				this.$nextTick(() => {
					this.$refs.shopPage.getInit();
				})
			}
		},
		methods: {
			toJSON(){
				return this;
			},
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			changeTab(bool) {
				if (bool) {
					this.$refs.shopPage.getInit();
				}
				if (!bool) {
					this.$refs.userPage.getUser();
				}
				// 判断 是否切换为商家
				this.isUserPage = !bool;
			},
			// 加载初始数据
			loadBaseData() {
				getUserInfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data);
						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
						orderData({})
							.then(({
								data
							}) => {
								this.setOrderInfo(data);
							})
							.catch(e => {
								this.setOrderInfo({
									complete_count: 0, //完成
									received_count: 0, //待收货
									unshipped_count: 0, //待发货
									order_count: 0, //订单总数
									unpaid_count: 0 //待付款
								});
							});
					})
					.catch(e => {
						console.log(e);
					});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
		}
	};
</script>
<style lang="scss">
	.content {
		/* #ifdef H5 */
		padding-bottom: 150rpx;
		/* #endif */
	}
</style>