uniapp-test/pages/center/index.vue

<template>
	<view class="center">
		<view class="logo" >
			<image class="logo-img" :src="avatarUrl"></image>
			
			<view class="logo-title" style="margin-top: -40px;">
				<text class="uer-name" style="font-size: 25px;">账号:{{username}}<br><div style="font-size: 20px;">姓名:{{remark}}</div></text>
				
				<!-- <text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text> -->
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom" @click="updatemm">
				<text class="list-icon">&#xe60f;</text>
				<text class="list-text">修改密码</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe639;</text>
				<text class="list-text">新消息通知</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">&#xe60b;</text>
				<text class="list-text">帮助与反馈</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe65f;</text>
				<text class="list-text">服务条款及隐私</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item" @click="clickabout">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<!-- <view class="center-list">
			<view class="center-list-item" @click="clickupdate">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">检查升级</text>
				<text  style="margin-right:30px;margin-top: 15px;">版本:{{version}}</text>
			</view>
		</view> -->
		
		<view class="center-list">
			<view class="center-list-item"  @click="logout">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">注销登录</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {logout} from '@/config/api.js';
	const config = require('@/config/request.js');
	export default {
		data() {
			return {
				version:'',
				avatarUrl: '',
				username:'',
				remark:'',
				show:true,
				login: false,
				uerInfo: {}
			}
		},
	 async onLoad() {
		
			//检查是否登录
			if(!this.$u.utils.isLogin()) return
			this.version=uni.getSystemInfoSync().appWgtVersion; //当前App版本号
			this.avatarUrl=uni.$u.http.config.baseURL+this.vuex_token.head_img
			this.username=this.vuex_token.username
			this.remark=this.vuex_token.remark
			 // console.log(uni.$u.http.config.baseURL)      

		},
		onPullDownRefresh() {
			this.clickupdate()
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			updatemm: function(e){
				// console.log(1111)
			  uni.navigateTo({
			  	url:"/pages/center/mmxg/mmxg"
			  })
			},
			clickabout: function(e){
			  uni.navigateTo({
			  	url:"/pages/center/about/about"
			  })
			},
			logout: function(e){
				const params={
					id:this.vuex_token.id,
				}
				this.dologout(params)
				
				
			},
			async dologout(params){
				var res=await  logout(params);
				// console.log(res)
				if(res.code==200){
					this.$u.toast('退出成功！')
					//this.$u.vuex('vuex_username',null)
					this.$u.vuex('vuex_token',null)
					setTimeout(()=>{
						this.$u.route({
							type:'redirect',
							url: 'pages/auth/login',
						})
					},2500)	
					
				}
			},
			
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #4cd964;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>