143 lines
3.5 KiB
Vue
143 lines
3.5 KiB
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.sex===0?'man':'woman'"
|
|
:src="isLogin?avatars[userMessage.sex]:''"
|
|
@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: '',//头像
|
|
// sex: '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 = {sex: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;
|
|
}
|
|
}
|
|
</style> |