sfms3.0-uniapp/pages/setter/index.vue

<template>
	<view class="personal">
		<view class="txbox">
			<image src="/static/avatar.png" class="tx"></image>
			<!-- 	<view class="text">admin</view> -->
		</view>
		<view>
			<uni-list>
				<!-- <uni-list-item title="工号" clickable @click="onClick" :rightText="usermsg.phoneNumber"></uni-list-item> -->
				<uni-list-item title="姓名" clickable :rightText="userName" thumb="/static/icon_personal_name.png">
				</uni-list-item>

				<uni-list-item v-if="userInfo!=null" title="部门" :rightText="userInfo.dept.name"
					thumb="/static/icon_personal_password.png"></uni-list-item>
				<uni-list-item v-if="userInfo!=null" title="岗位"
					:rightText="(userInfo.posts || []).map(post => post.name).join(',')"
					thumb="/static/icon_personal_password.png"></uni-list-item>
				<uni-list-item v-if="userInfo!=null" title="角色"
					:rightText="(userInfo.roles || []).map(role => role.name).join(',')"
					thumb="/static/icon_personal_password.png"></uni-list-item>
				<uni-list-item title="" clickable rightText="清除缓存" thumb="/static/icon_personal_name.png"
					@click="clear"></uni-list-item>
				<uni-list-item rightText="修改密码" link to="/pages/setter/passwordpage"
					thumb="/static/icon_personal_password.png"></uni-list-item>
				<!-- <uni-list-item title="服务器地址" 
					thumb="/static/icon_personal_password.png"></uni-list-item> -->
				<!-- 	<uni-list-item title="参数设置" link to="/pages/setter/setterDetail"
					thumb="/static/icon_personal_setting.png"></uni-list-item> -->
			</uni-list>
		</view>
		<view>
			<button class="footbtn" @click="handlerlogout">退出登录</button>
		</view>

	</view>
</template>

<script setup>
	import {
		logout,
		getUserProfile
	} from '@/api/request2.js';
	import store from '@/store'
	import {
		clearCacheData
	} from '@/common/directory.js';
	import {
		removeToken
	} from '@/common/utils/auth'
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	

	const userName = ref(store.state.user.name);
	let test = ref("123");
	let userInfo = ref(null);
	onLoad(() => {
		getUserProfile().then(res => {
			userInfo.value = res.data
			// nextTick(()=>{
			// 	const userInfo = res.data.nickname
			// 	 console.log("打印",userInfo)
			// 	})

		})
	});


	function handlerlogout() {
		store.dispatch('LogOut', {}).then(() => {
			clearStorage();
			uni.reLaunch({
				url: '../login/index'
			})
		})
	};

	function clearStorage() {
		uni.clearStorageSync()
		localStorage.clear();
		sessionStorage.clear();
		removeToken();
	};

	function clear() {
		clearCacheData()
		uni.showToast({
			title: "清理缓存成功"
		})
	}


	// export default {
	// 	data() {
	// 		return {
	// 			userName: '',
	// 			usermsg: {}
	// 		}
	// 	},
	// 	onLoad() {
	// 	},
	// 	created() {
	// 		this.userName = this.$store.getters.name
	// 	},
	// 	methods: {
	// 		handlerlogout() {
	// 			this.$store.dispatch('LogOut', params).then(() => {
	// 				uni.reLaunch({
	// 					url: '../login/index'
	// 				})
	// 				this.clearStorage();
	// 			})
	// 		},
	// 		clearStorage() {
	// 			uni.clearStorageSync()
	// 			localStorage.clear();
	// 			sessionStorage.clear();
	// 			removeToken();
	// 		},

	// 		clear(){
	// 			clearCacheData()
	// 			uni.showToast({
	// 				title:"清理缓存成功"
	// 			})
	// 		}

	// 	}
	// }
</script>

<style>
	.txbox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tx {
		width: 200rpx;
		height: 200rpx;
		margin: 30rpx 0 30rpx;
		border-radius: 150upx;
	}

	.text {
		font-size: 20upx;
		text-align: center;
	}

	.footbox {
		display: flex;
		align-items: center;

	}

	.footbtn {
		margin-top: 120rpx;
		width: 300rpx;
		border-radius: 50rpx;
		background-color: #fff;
		font-size: .825rem;
		color: #333;
		line-height: 90rpx;
	}
</style>