jyz/pages/user/user.vue

<template>
	<view class="container">
		<view class="content-box"  @click="navTo('/pages/rescuers/rescuers')">
			<view class="user-section"><image :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
		</view>
		<view class="cover-container"  @click="navTo('/pages/rescuers/rescuers')">
			<view class="nickname">{{userInfo.nickname || '未登录'}}</view>
			<view class="login1" v-if="userInfo.helper == 1"><text>救援者{{userInfo.id}}</text></view>
			<view class="mobile" v-if="userInfo.mobile">{{userInfo.mobile }}</view>
			<view class="login" v-if="hasLogin == false" @click="navTo('/pages/public/wxLogin')"><text>点击登录系统</text></view>
		</view>
		<view class="item-box">
			<!-- <view class="flex item-list" @click="navTo('/pages/record/help')">
				<view class="flex_item list-icon">
					<view class="icon"><image src="/static/img/img004.png"></image></view>
					<view class="text">求救记录</view>
				</view>
				<view class="icon"><text class="iconfont iconenter"></text></view>
			</view> -->
			<view class="flex item-list" @click="navTo('/pages/rescuers/rescuers')">
				<view class="flex_item list-icon">
					<view class="icon"><image src="/static/tabBar/tab-cate-current.png"></image></view>
					<view class="text">救援者注册</view>
				</view>
				<view class="icon"><text class="iconfont iconenter"></text></view>
			</view>
			<view class="flex item-list" @click="navTo('/pages/address/address')">
				<view class="flex_item list-icon">
					<view class="icon"><image src="/static/img/address.png"></image></view>
					<view class="text">常用地址</view>
				</view>
				<view class="icon"><text class="iconfont iconenter"></text></view>
			</view>
			<view class="flex item-list" @click="navTo('/pages/user/about')">
				<view class="flex_item list-icon">
					<view class="icon"><image src="/static/img/img006.png"></image></view>
					<view class="text">功能介绍</view>
				</view>
				<view class="icon"><text class="iconfont iconenter"></text></view>
			</view>
			<!-- <view v-if="hasLogin == true" class="list-cell log-out-btn" @click="toLogout">
				<text class="cell-tit">退出登录</text>
			</view> -->
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import { getUserInfo } from '@/api/login.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { logout } from '@/api/set.js';
let startY = 0,
	moveY = 0,
	pageAtTop = true;
export default {
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
		};
	},
	onShow() {
		console.log(this.hasLogin)
		// 判断是否已经登录
		if (this.hasLogin) {
			this.loadBaseData();
		}else{
			
			this.logout()
		}
	},
	computed: {
		...mapState(['hasLogin','userInfo'])
	},
	methods: {
		...mapMutations(['setUserInfo','logout']),
		// 加载初始数据
		loadBaseData() {
			let obj = this;
			getUserInfo({}).then(({ data }) => {
				obj.setUserInfo(data.user);
				console.log(data.user,'dddd')
			}).catch((e) => {
				obj.logout()
			});
		},
		//退出登录
		toLogout(){
			uni.showModal({
			    content: '确定要退出登录么',
			    success: (e)=>{
			    	if(e.confirm){
						this.out();
			    	}
			    }
			});
		},
		// 退出请求
		out(){
			logout({}).then((e) => {
				this.logout()
				this.$api.msg(e.msg);
			}).catch((e) => {
			})
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.hasLogin) {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			} else {
				uni.navigateTo({
					url
				});
			}
		}
	}
};
</script>
<style lang="scss">
page {
	height: 100%;
	background-color: #FFFFFF;
	.container {
		height: 100%;
	}
}
.content-box {
	background-color: #FF4F4F;
	height: 220rpx;
	width: 100%;
	.user-section{
			width: 200rpx;
			height: 200rpx;
			margin: 0rpx auto;
			position: relative;
			image{
				border: 8rpx solid #FFFFFF;
				position: absolute;
				transform: translate(0%, 50%);
				width: 200rpx;
				height: 200rpx;
				border-radius: 100rpx;
			}
		}
}
.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20rpx $page-row-spacing;
		line-height:60rpx;
		position:relative;
		background: #fff;
		justify-content: center;
		box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
		&.log-out-btn{
			margin-top: 100rpx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
			margin-right:10rpx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16rpx) scale(.84);
		}
	}
.cover-container{
	width: 100%;
	text-align: center;
	padding-top: 120rpx;
	.nickname{
		font-size: 40rpx;
		color: #323232;
	}
	.mobile{
		color: #888888;
		font-size: 30rpx;
		padding-top: 25rpx;
	}
	.login{
		text-align: center;
		width: 100%;
		padding-top: 25rpx;
		text{
			font-size: 30rpx;
			color: #FFFFFF;
			border-radius: 50rpx;
			padding:10rpx 25rpx;
			background-color: #FF4F4F;
		}
	}
	.login1{
		width: 100%;
		text-align: center;
		margin-top: 25rpx;
		text{
			color: #FF4F4F;
			font-size: 30rpx;
			padding: 3rpx 25rpx;
			border-radius: 50rpx;
			border:2rpx solid #FF4F4F;
		}
	}
}
.item-box{
	width: 100%;
	padding: 50rpx 55rpx;
	.item-list{
		width: 100%;
		margin-top: 30rpx;
		.list-icon{
			image{
				width: 45rpx;
				height: 45rpx;
				margin-top: 10rpx;
				margin-right: 35rpx;
			}
			.text{
				color: #323232;
				font-size: 28rpx;
				font-weight:bold;
			}
		}
	}
}
</style>