TalentService-mobile/pages/my/my.vue

<!-- 我的 -->
<template>
	<view class="my">
		<!-- 顶部背景 -->
		<view class="head-Bg">
			<lwTopnav :bgColor="bgColor" lwColor="#fff" lwTitle="我的"></lwTopnav>
			<view class="my-avatar">
				<u-avatar size="130" :showSex="isLogin" :sexIcon="userMessage.gender?'woman':'man'" 
				:src="isLogin?avatars[userMessage.gender||0]:''"
				@click="toShowDetail"></u-avatar>
				<!-- :src="userMessage.avatar" -->
				<text @click="toShowDetail">{{isLogin?userMessage.nickName:'请点击登录'}}</text>
			</view>
		</view>
		<view class="my-detail" @click="toShowDetail">
			<text>个人信息</text>
			<u-icon name="arrow-right" size="28" color="#aab1c0"></u-icon>
		</view>
		<view class="login-out" v-if="isLogin" @click="loginOut">
			退出登录
		</view>
	</view>
</template>

<script>
	import lwTopnav from "@/components/lw-topnav/lw-topnav";
	import configService from '@/common/config.service';
	export default {
		components: {
			lwTopnav
		},
		data(){
			return{
				userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
				// avatar: '',//头像
				// gender: 'man',// 性别-man、woman
				isLogin: this.$store.state.vuex_token !== '',// 是否登录
				avatars:[
					configService.ip+"upload/20241028/82f6d605d70645a0aa30c94ee51714a3.png",
					configService.ip+"upload/20241028/2cafd18a34364a70ba9bb8e0cd0ae023.png",
				],
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '我的'
			});
		},
		methods:{
			refresh(){
				this.userMessage = this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message);
				this.isLogin = this.$store.state.vuex_token !== '';
				this.$forceUpdate();
			},
			// 前往我的信息
			toShowDetail(){
				uni.navigateTo({
					url: '/pages/my/mySetting'
				})
			},
			// 登出
			loginOut(){
				uni.showModal({
					title: '登出',
					content: '是否确认退出登录？',
					showCancel: true,
					success: (res) => {
						if (!res.confirm) return;
						this.isLogin = false;
						this.userMessage = {gender:0,nickName:'',avatar:''}
						this.$u.vuex('vuex_token', '');
						this.$u.vuex('user_message', {});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.my{
	// background-color: #f9f9f9;
	display: flex;
	align-items: center;
	flex-direction: column;
	// height: max-content;
	.head-Bg{
		height: 500rpx;
		top: 0rpx;
		left: 0rpx;
		z-index: 1;
		width: 100%;
		background-color: #FFFFFF;
		overflow: hidden;
		background: -webkit-linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
		background: linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
		border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%;
	}
	.my-avatar{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 30rpx;
		text{
			font-size: 28rpx;
			color: #FFFFFF;
			font-weight: 600;
			margin-top: 20rpx;
		}
	}
	.my-detail{
		margin-top: -70rpx;
		border-radius: 12rpx;
		z-index: 2;
		width: 85%;
		height: 130rpx;
		color: #000;
		background-color: #fff;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
	}
	.login-out{
		position: absolute;
		box-shadow: 0px 5px 9px 0px rgba(100, 100, 111, 0.2);
		bottom: 15%;
		width: 85%;
		border-radius: 80rpx;
		border: 2rpx solid #ff2e0a;
		height: 90rpx;
		color: #ff2e0a;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		font-size: 34rpx;
		&:active{
			filter: opacity(0.8);
		}
	}
}
</style>