TraceabilityAPP/pages/index/personal.vue

<template>
	<view class="head">
		<view class="avater">
			<u--image @click="previewImageFn" :src="userinfo.avatar" width="130.28rpx" height="130.28rpx"
				shape="circle"></u--image>
		</view>
		<view class="" v-if="userinfo">
			
			<view class="head-li">
				姓名: {{userinfo.nickname}}
			</view>
			<view class="head-li">
				电话: {{userinfo.mobile}}
			</view>
			<!-- <view class="head-li">
				公司: 里海弄农业科技有限公司
			</view> -->
		</view>
		<view class="" v-else   @click="revto('/pages/Login/login')">
			请登录
		</view>
	</view>
	<view class="content">
		<view class="card" style="border-radius: 20rpx;">
			<view class="card-li" v-for="(item,index) in cardLiList" :key="index" @click="navto(item.nav)">
				<view class="" style="display: flex;align-items: center;">
					<view class="" style="margin-right: 20rpx;">
						<u-icon size="20" :name="url"></u-icon>
					</view>
					<view class="">
						{{item.text}}
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="out-btn">
			<up-button @click="loginOutFn" type="primary" customStyle="border:none;height:90rpx" color="#34D190"
				text="退出登录"></up-button>
		</view>
	</view>

</template>

<script setup lang="ts">
	import {
		reactive,
		ref
	} from 'vue';
	import { logout } from '@/api/file.js'

	const userinfo = uni.getStorageSync("SY_USER")




	const previewImageFn = () => {
		uni.previewImage({
			urls: [
				userinfo.avatar
			]
		});
	}


	const cardLiList = reactive([{
		text: "片区经理"
	},
	{
		text: "安全设置",
		nav: "/pages/updatePassword/updatePassword"
	},

	])

	const loginOutFn = () => {
			
		logout().then((res)=>{
	
			if(res.code==1){
				uni.$u.toast('退出登录');
				uni.navigateTo({
					url: "/pages/Login/login"
				})
				uni.clearStorageSync()
			}
		})
		
	}
	const navto = (url) => {
		uni.navigateTo({
			url
		})
	}
	const revto = (url) => {
		
		uni.redirectTo({
			url
		})
	}
	
</script>

<style lang="scss" scoped>
	.head {
		height: 25vh;
		background-color: $theme-main-color;
		color: white;
		display: flex;
		align-items: center;

		.head-li {
			margin: 10rpx 0;
		}

		.avater {
			margin: 0 40rpx;
		}
	}

	.content {
		height: 75vh;
		background-color: $theme-bg-color;
		padding-top: 30rpx;

		.card {
			background-color: white;
			border-radius: 10rpx;

			.card-li {
				height: 80rpx;
				line-height: 80rpx;
				// background-color: red;
				border-bottom: 1px solid #F5F5F5;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.out-btn {
			width: 693.93rpx;
			margin: auto;
		}
	}
</style>