九 pages/tabbar/my.vue

<template>
	<view class='my'>
		<view class='my-title' @click='login'>
			<image :src='userInfo.status? userInfo.avatar : "../../static/logo.png"'></image>
			<text>{{ userInfo.status ? userInfo.nickName : "登录/注册" }}</text>
		</view>
		<view>
			<view>我的订单</view>
			<u-tabs :list="list" @click="order"></u-tabs>
		</view>
		<view>
			<view>办鹿宝箱</view>
			<view @click='address'>
				<view>
					<text>我的地址</text>
				</view>
			</view>
			<view>
				<button open-type="contact">客服</button>
			</view>
			<view class='goFav'>
				收藏
			</view>
		</view>
		<view @click='gr'>
			导航守卫
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default{
	data () {
		return {
			list: [{
				name: '待付款',
			}, {
				name: '待发货',
			}, {
				name: '待收货'
			}, {
				name: '已完成'
			}]
		}
	},
	onShow(){
		console.log( 'onshow',this.userInfo );
	},
	computed:{
		...mapState(['userInfo'])
	},
	methods:{
		//进入登录页面
		login(){
			uni.navigateTo({
				url:'/login/login'
			})
		},
		//订单tabs
		order(item) {
			let { index } = item;
			uni.navigateTo({
				url:`/order/order-list?id=${ index + 1 }`
			})
		},
		//我的地址
		address(){
			uni.navigateTo({
				url:'/address/address-list'
			})
		},
		//我的收藏
		goFav(){
			uni.navigateTo({
				url:'/my/fav'
			})
		},
		//测试导航守卫
		gr(){
			uni.navigateTo({
				url:'/pages/goods-detail'
			})
		}
	}
}
</script>

<style>
.my-title{
	display: flex;
	align-items: center;
	height: 281rpx;
	background: #707070;
}
.my-title image{
	margin-left: 28rpx;
	width: 141rpx;
	height: 141rpx;
	border-radius: 50%;
	background-color: #fff;
}
.my-title text{
	margin-left: 22rpx;
}
</style>