lxwx_front/pages/my/my.vue

<template>
<view class="my">
	<view class="status_bar"><!-- 这里是状态栏 --></view>
	<view class="contentContainer">
		<image src="../../static/mybg.png" mode="widthFix" class="mybg"></image>
		<view class="title">
			我的
		</view>
		<view class="mycontent">
			<view class="info" @click="goEditInfo">
				<view class="avatar">
					<view class="tx">
						<image :src="source=='phone'?userInfo.avatar||src:userInfo.avatarUrl||src" mode="widthFix"></image>
					</view>
					<view class="userInfo">
						<view v-if="isLogin">
							<view class="userName">
								{{source=='phone'?userInfo.nickname:userInfo.nickName}}
							</view>
							<view class="id" v-if="source=='phone'"> 
								ID：{{userInfo.user_id}}
							</view>
							<view class="mobile" v-if="source=='phone'">
								{{userInfo.mobile}}
							</view>
						</view>
						
						<u-button text="登录" @click.native.stop="goLogin" style="width:200upx;" color="#0076F6" v-if="!isLogin"></u-button>
					</view>
					
				</view>
				<image src="../../static/edit.png" mode="widthFix"  v-if="isLogin" class="editIcon"></image>
			</view>
			<view class="formContainer">
				<view class="myItem" v-for="(item,index) in myList" @click="goDetails(item)" :key="index">
					<view class="left">
						<image :src="item.pic" mode="widthFix"></image>
						<text>{{item.title}}</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="22"></u-icon>
				</view>
			</view>
		</view>
		<!--  -->
		<view style="display:flex" v-if="isLogin">
			<view class="codeBtn" @click="layoutHandle" color="#0076F6" >退出登录</view>
			<view class="codeBtn" @click="existHandle" color="#0076F6" >注销账户</view>
		</view>
		<u-modal :show="show" title="提示" confirmText="关闭" :content='content' @confirm="confirmHandle"></u-modal>
	</view>
</view>
</template>

<script>
	
	import {logout} from '@/common/api.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				show:false,
				myList:[
					{pic:require("static/m1.png"),title:'我的收藏'},
					{pic:require("static/m2.png"),title:'浏览历史'},
					{pic:require("static/m3.png"),title:'我的分享'},
					{pic:require("static/m4.png"),title:'设置'},
				],
				src:require("static/avatar.png"),
				userInfo:{},
				isLogin:false,
				source:'phone',
				content:'正在审核中……'
			};
		},
		methods:{
			confirmHandle(){
				this.show=false
			},
			goEditInfo(){
				uni.navigateTo({
					url:'/pages/my/editInfo'
				})
			},
			existHandle(){
				this.show=true
			},
			goDetails(item){
				if(item.title=='设置'){
					uni.navigateTo({
						url:'/pages/my/setting'
					})
				}else if(item.title=='浏览历史'){
					uni.navigateTo({
						url:'/pages/my/look'
					})
				}else if(item.title=='我的收藏'){
					uni.navigateTo({
						url:'/pages/my/collection'
					})
					
				}else{
					uni.navigateTo({
						url:'/pages/my/share'
					})
				}
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			layoutHandle(){
				logout({ custom: { auth: true }}).then(res=>{
					console.log("success")
					this.$store.commit('logout')
					uni.switchTab({
						url:'/pages/index/index'
					})
				}).catch((error)=>{
					console.log(error)
				})
				
			}
		},
		onShow() {
			this.source = uni.getStorageSync('source')
			console.log(this.source)
			let info = JSON.parse(JSON.stringify(uni.getStorageSync('userInfo')))
			if(info.avatar){
				if(info.avatar.indexOf("http")  == -1 && info.avatar.indexOf("uploads/") == 0){
					info.avatar = this.baseUrl + info.avatar
				}
			}					
			console.log(info)
			this.userInfo = info
			if(Object.keys(this.userInfo).length==0){
				this.isLogin = false
			}else{
				this.isLogin = true
			}
		},
		// computed: mapState({
		// 	source: state => state.source,
		// })
		
	}
</script>

<style lang="scss" scoped>
.title{
	background-color: transparent !important;
}
.my{
	position: relative;
	.mybg{
		position: absolute;
		top:0;
		width:100%;
	}
	.mycontent{
		padding-top:65upx;
		margin:0upx 24upx 0 24upx;
		position: relative;
		z-index: 99;
		.info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			&>image{
				width:44upx;
			}
			.avatar{
				display: flex;
				align-items: center;
				.tx{
					width:140upx;
					height:140upx;
					border-radius: 50%;
					overflow: hidden;
					
					&>image{
						width:100%;
						height:100%;
					}
				}
				.userInfo{
					margin-left:27upx;
					.userName{
						font-size: 34upx;
						font-weight: bold;
						color: #222222;
					}
					.id,.mobile{
						font-size: 24upx;
						color: #999999;
					}
					.id{
						margin: 20upx 0;
					}
				}
			}
			
		}
		.formContainer{
			background: #FFFFFF;
			border-radius: 20upx;
			padding:0 28upx;
			margin-top:60upx;
			.myItem{
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				border-bottom: 1px solid #EAEAEA;
				.left{
					display: flex;
					align-items: center;
					padding:38upx 0;
					&>image{
						width:44upx;
						height:44upx;
					}
					&>text{
						font-size: 30upx;
						color: #333333;
						margin-left:18upx;
					}
				}
			}
		}
	}
	.codeBtn{
		// width:80%;
		flex:1;
		margin:50upx 20upx;
		background: #0076F6;
		border-radius: 50upx;
		font-size: 30upx;
		font-weight: 500;
		color: #FFFFFF;
		padding:34upx 0;
		text-align: center;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color:transparent !important;
	}
}
</style>