TraceabilityAPP/pages/index/personal.vue

<template>
	<view class="head">
		<!-- #ifdef APP-PLUS -->
		<view class="head-return">
			<Myindex url='/pages/index/personal' />
		</view>
		<!-- #endif -->
		<view class="head-con">
			<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="Object.keys(userinfo).length>0">

				<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>
	<view class="content">
		<view class="card" style="border-radius: 10rpx;">
			<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="lock"></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;border-radius: 500rpx;"
				color="#EC6857" text="退出登录" v-if="Object.keys(userinfo).length>0"></up-button>


		</view>
	</view>

</template>

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

	const userinfo = reactive({})
	if (store.state.userInfo != null) {
		Object.assign(userinfo, store.state.userInfo)

	}

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






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

	])

	const loginOutFn = () => {

		if (store.state.userInfo) {
			logout().then((res) => {
				if (res.code == 1) {
					uni.$u.toast('退出登录');
					uni.navigateTo({
						url: "/pages/Login/login"
					})
					uni.clearStorageSync()
				}
			})
		} else {
			uni.navigateTo({
				url: "/pages/Login/login"
			})
		}


	}
	const navto = (url) => {
		uni.navigateTo({
			url
		})
	}
	const revto = (url) => {

		uni.redirectTo({
			url
		})
	}
</script>

<style lang="scss">
	page {
		background-color: $theme-bg-color;
	}

	.head {
		height: 25vh;
		background-color: $theme-main-color;
		color: white;
		padding-top: 30rpx;
		position: relative;
		border-radius: 0 0 50rpx 50rpx;
		// background-color: red;
		position: relative;

		.head-con {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 100rpx // margin-top: 150rpx;
		}

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

		.avater {
			margin: 0 40rpx;
		}

		.head-return {
			margin-top: 30rpx;
			margin-left: calc(100% - 200rpx);


		}
	}

	.content {


		// padding-top: 30rpx;

		.card {
			background-color: white;
			border-radius: 10rpx;
			width: 90vw;
			transform: translateY(-50rpx);

			.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;


			position: absolute;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			// border-radius: 500rpx;
			// background-color: red;
			// margin: auto;
		}
	}
</style>