jch-wx_tmsaip/pages/homePage/mine/mine.vue

<template>
	<view class="content">
		<view class="mine-header">
			<!-- <image class="header-bg" src="https://img.zcool.cn/community/0187c358fd6e72a8012160f71b0715.gif"></image> -->
			<view class="header">
				<view class="left">
					<!-- <image class="header-img"
						src="https://img2.baidu.com/it/u=3973855039,4170930478&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto&maxorilen2heic=2000000">
					</image> -->
					<image class="header-img"
						src="@/static/image/header.png">
					</image>
				</view>
				<view class="center" v-if="!isLogin">
					<view class="user-name">用户名：暂未登录 </view>
					<view class="user-type">公司：暂未登录 </view>
				</view>
				<view class="center" v-else>
					<view class="user-name">用户名：{{userInfo.showname}}</view>
					<view class="user-type">公司：{{userInfo.comname}}</view>
				</view>
			</view>
		</view>
		<view class="mine-list">
			<view class="mine-tab">
				<view><text class="iconfont icon-fuzhi"></text><text>按钮</text></view>
				<view><text class="iconfont icon-yunshuche"></text><text>按钮</text></view>
				<view><text class="iconfont icon-mianxingjizhuangxiang"></text><text>按钮</text></view>
				<view><text class="iconfont icon-cangdan"></text><text>按钮</text></view>
			</view>
			<view class="login-btn" v-if="!isLogin">
				<text class="login-img iconfont icon-yunshuche"></text>
				<button @click="goLogin">去登录</button>
			</view>
			<template v-else>
				<view class="mine-content" >
					<view class="tab">
						<view class="left"><text class="iconfont icon-fuzhi"></text><text class="tip">设置</text></view>
						<view class="right iconfont icon-daoda"></view>
					</view>
					<view class="tab">
						<view class="left"><text class="iconfont icon-fuzhi"></text><text class="tip">设置</text></view>
						<view class="right iconfont icon-daoda"></view>
					</view>
					<view class="tab">
						<view class="left"><text class="iconfont icon-fuzhi"></text><text class="tip">设置</text></view>
						<view class="right iconfont icon-daoda"></view>
					</view>
				</view>
				<view class="sign-out" @click="signOut">退出登录</view>
			</template>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	
	export default {
		computed: {
			...mapState([
				'userInfo'
			]),
		},
		data() {
			return {
				isLogin: null,
			}
		},
		watch:{
			isLogin(){
				console.log('----', this.isLogin)
			}
		},
		mounted() {
			this.isLogin = getApp().globalData.isLogin;
		},
		methods: {
			goLogin(){
				// uni.navigateTo({
				// 	url:'/pages/homePage/login/login'
				// })
				uni.navigateTo({
					url: '/pages/homePage/login/login',
					success(res) {
						console.log('成功啦',res);
					},
					fail(err) {
						console.log('失败啦',err);
					}
				});

			},
			signOut(){
				this.$util.showModal('退出','确定退出登录？',()=>{
					this.$util.Tips({title: '退出登录成功'})
					getApp().globalData.isLogin = false;
					this.isLogin = false;
					uni.removeStorageSync('userToken')
					uni.removeStorageSync('tokenStartTime');
					this.$forceUpdate();
				},()=>{
					console.log('== 取消退出 ==')
				})
			}
		}
	}
</script>

<style lang="less">
	@import url("./mine.less");
</style>