ROBOT-APP/code/HBX/pages/native/my.nvue

<template>
	<view class="m-page">
		<image class="banner" src="../../static/mybg.png" mode="" ></image>
		<view class="m-head">
			<image class="img1" :src="users.icon || '/static/user.png'" @error="errorImg" @click="chooseImg" mode="aspectFit"></image>
			<view class="h-view" v-if="Token">
				<text class="h-t1">{{users.account}}</text>
				<!-- <text class="h-t2">{{users | sex}}</text> -->
				<text class="h-t2 icon" @click="changeName">昵称：{{users.name}}&#xe6ae;</text>
				<text class="h-t3">上次登录时间：{{users.loginTime}}</text>
			</view>
			<view class="h-view" v-if="!Token">
				<text class="h-t1">暂未登录</text>
			</view>
		</view>
		<view class="m-list" @click="changePhone">
			<text class="icon m-1">&#xe60b;</text>
			<text class="m-t">手机号</text>
			<text class="m-r icon">{{users.mobile}}&#xe65f;</text>
		</view>
		<view class="m-list" @click="changeEmail">
			<text class="icon m-2">&#xe605;</text>
			<text class="m-t">邮箱</text>
			<text class="m-r icon">{{users.email}}&#xe65f;</text>
		</view>
		<view class="m-list" @click="changePass">
			<text class="icon m-3">&#xe626;</text>
			<text class="m-t ">密码安全</text>
			<text class="m-r icon">&#xe65f;</text>
		</view>
		<view class="m-list">
			<text class="icon m-4">&#xe602;</text>
			<text class="m-t">接受新消息通知  </text>
			<switch class="m-r" color="#3EAB3E" style="transform:scale(0.8);margin-left: 280rpx;"  checked @change="switchChange" />
		</view>
		<view class="m-list m-center" @click="infoSet">
			<text class="icon m-5">&#xe621;</text>
			<text class="m-t">消息设置</text>
			<text class="m-r icon">&#xe65f;</text>
		</view>
		<view class="m-list" @click="APPUpdate(true)">
			<text class="icon m-6">&#xe613;</text>
			<text class="m-t">关于系统</text>
			<text class="m-r">{{version}}</text>
		</view>
		<view class="m-list" @click="goFeedback">
			<text class="icon m-7">&#xe659;</text>
			<text class="m-t">帮助与反馈</text>
			<text class="m-r icon">&#xe65f;</text>
		</view>
		
		<view class=" m-b" @click="remove">
			<text class="m-t">退出登录</text>
		</view>
	</view>
</template>

<script>
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "iconfont",
		'src': "url('/static/iconfont.ttf')"
	})
	import APPUpdate from '@/uni_modules/APPUpdate/js_sdk/appUpdate';
	import {
		BeforeNavigateTo
	} from '../../common/utils.js'
	import {
		getUser,
		updateIcon,
		exit
	} from '@/common/api.js'
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		mapGetters
	} from 'vuex'
	import {api_config} from '@/config.js'
	export default {
		onLoad() {
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (inf) => {
				let str;
				api_config == 'http://192.168.20.132:8081' ? str = ':Test' : str = ''
				this.version = inf.version+str
			});
			//#endif
			if (this.Token) {
				this.getUser()
			}
			uni.$on("changeUser",() =>{
				this.getUser()
			})
		},
		filters: {
			orgNameList(val) {
				if (!val) return
				let str = ''
				val.map(item => {
					str += item + '-'
				})
				return str
			},
			sex(val){
				return val == 1 ? '男' :'女'
			}
		},
		computed: {
			...mapGetters([
				'Token'
			]),
		},
		data() {
			return {
				users: {

				},
				version: ""
			}
		},
		onShow() {
			
		},
		methods: {
			infoSet(){
				permision.gotoAppPermissionSetting()
			},
			chooseImg(){
				let that =this
				uni.chooseImage({
				    count: 1, 
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (res) {
						uni.compressImage({
						  src: res.tempFilePaths[0],
						  quality: 10,
						  success: resp => {
						   plus.io.resolveLocalFileSystemURL(resp.tempFilePath, function(entry){
						   	entry.file( function(file){
						   		let fileReader = new plus.io.FileReader();
						   		fileReader.readAsDataURL( file );
						   		fileReader.onloadend = function(evt) {
						   			
						   			updateIcon({
						   				icon:evt.target.result,
						   				userId:that.$store.state.Token
						   			}).then(e =>{
						   				that.users.icon = evt.target.result
						   			})
						   			
						   		}
						   	});
						   }) 
						  }
						})
						
				    }
				});
			},
			getUser(){
				getUser({
					userId:this.Token
				}).then(res => {
					this.users = res
				}).catch(e => {
					plus.nativeUI.toast('获取用户信息失败,请重新登录')
					setTimeout(() =>{
						exit().then(res => {
							this.$store.dispatch('setToken', "")
						//	uni.clearStorage()
							this.$store.dispatch('setUsers', "{}")
							uni.reLaunch({
								url: '/pages/native/login'
							});
						}).catch(e => {
							plus.nativeUI.toast('服务退出登录失败，正强制退出...')
							setTimeout(() =>{
								this.$store.dispatch('setToken', "")
								this.$store.dispatch('setUsers', "{}")
								uni.reLaunch({
									url: '/pages/native/login'
								});
							},1000)
						})
					},1000)
				})
			},
			changePhone(){
				BeforeNavigateTo({
					url: '/pages/webview/changePhone',
				}, true)
			},
			changeEmail(){
				BeforeNavigateTo({
					url: '/pages/webview/changeEmail',
				}, true)
			},
			changeName(){
				BeforeNavigateTo({
					url: '/pages/webview/changeName',
				}, true)
			},
			switchChange(e){
				
			},
			changePass(){
				BeforeNavigateTo({
					url: '/pages/webview/changePassword',
				}, true)
			},
			APPUpdate() {
				return
				APPUpdate(true)
			},
			errorImg() {
				this.users.avatar = "/static/iconM.png"
			},
			goFeedback() {
				BeforeNavigateTo({
					url: '/pages/webview/feedback',
				}, true)
			},
			go() {
				BeforeNavigateTo({
					url: '/pages/hybrid/index',
				}, true)
			},
			remove() {
				uni.showActionSheet({
					itemList: ['确定退出'],
					success: (res) => {
						exit().then(res => {
							this.$store.dispatch('setToken', "")
						//	uni.clearStorage()
							this.$store.dispatch('setUsers', "{}")
							uni.reLaunch({
								url: '/pages/native/login'
							});
						}).catch(e => {
							plus.nativeUI.toast('服务退出登录失败，正强制退出...')
							setTimeout(() =>{
								this.$store.dispatch('setToken', "")
								this.$store.dispatch('setUsers', "{}")
								uni.reLaunch({
									url: '/pages/native/login'
								});
							},1000)
						})

					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.icon {
		font-family: iconfont;
		font-size: 26px;
	}
	.m-page {
		/*#ifdef MP-WEIXIN*/
		height: 100vh;
		
		/*#endif*/
		.banner{
			width: 750rpx;
			height: 332rpx;
		}
		.m-center{
			margin: 20rpx 0 0 0;
		}
		.m-list {
			border-bottom:1px solid #E5E5E5;
			background: #fff;
			flex-direction: row;
			align-items: center;
			padding: 30rpx 30rpx;

			.butt {
				padding: 0;
				border: 0px;
				margin: 0;
				font-size: 32px !important;
			}
			.m-1,.m-2,.m-3,.m-4,.m-5,.m-6,.m-7{
				font-size: 34rpx;
				width: 50rpx;
				
			}
			.m-1{color: #F34E4E;}
			.m-2{color: #3EAB3E;}
			.m-3{color: #9127AB;}
			.m-4{color: #37A8FF;}
			.m-5{color: #E9C70C;}
			.m-6{color: #5C83F2;}
			.m-7{color: #F66D23;}
			.m-t {
				color: #666;
				font-size: 34rpx;
			}

			.m-r {
				flex: 1;
				text-align: right;
				color: #999;
				justify-content: flex-end; 
				font-size: 32rpx;
			}
		}

		.m-b {
			justify-content: center;
			background: #0581FD;
			margin:50rpx;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 30rpx;
			border-radius: 15rpx;
			border: 1px solid #0581FD;
			.m-t {
				color: #fff;
				font-size: 34rpx;
			}
		}

		.m-head {
			padding: 20rpx 30rpx;
			position: absolute;
			top: 0;
			height: 332rpx;
			margin-bottom: 30rpx;
			flex-direction: row;
			align-items: center;
			.img1 {
				width: 150rpx;
				height: 150rpx;
				border-radius: 100rpx;
				margin-right: 30rpx;
			}

			.h-t1 {
				color: #fff;
				font-size: 36rpx;
				
			}

			.h-t2 {
				color: #fff;
				padding-top: 15rpx;
				font-size: 34rpx;
			}
			
			.h-t3{
				color: #fff;
				padding-top: 15rpx;
				font-size: 28rpx;
			}
		}
	}
</style>