oneSetting - 副本.vue 3.0 KB
<template>
	<view class="oneSetting">
		<!-- 资料 设置 -->
		<view class="header-wrap"></view>
		<view class="content-wrap area">
			<view class="content-head-wrap flex">
				<view class="content-head-img">
					<!-- <image :src="imgUrl" mode="aspectFill"></image> -->
					<avatar selWidth="250rpx" selHeight="250rpx" @upload="myUpload" 
						:avatarSrc="userdata.head_portrait?$service.getimg(userdata.head_portrait):imgUrl"
						avatarStyle="width: 164rpx;height: 164rpx;border-radius: 50%;" inner=true></avatar>
				</view>
			</view>
			<view class="content-item flex">
				<view>
					姓名
				</view>
				<view v-if="identity==1" class="user-name">
					李老师
				</view>
				<view v-else class="user-name">
					{{userName}}
				</view>
			</view>
			<view class="content-item flex">
				<view>
					性别
				</view>
				<view class="user-name">
					{{gender}}
				</view>
			</view>
			<view v-if="identity==1" class="content-item flex">
				<view>
					手机号
				</view>
				<view class="user-name">
					{{'16612345678'}}
				</view>
			</view>
			<view v-else class="content-item flex">
				<view>
					学号
				</view>
				<view class="user-name">
					{{studentNum}}
				</view>
			</view>
			<view class="sign-out" @click="logout_fuc">
				退出登录
			</view>
			
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that 
	export default {
		data() {
			return {
				imgUrl: '/static/images/tx.png',
				userName: "学员01",
				gender: "男",
				studentNum: "ZZ202012058",
				identity:0,
				userdata:{
					head_portrait:''
				}
			}
		},
		onLoad(option) {
			console.log(option);
			this.identity=uni.getStorageSync('identity')
		},
		methods: {
			getimg(img){
				return this.$service.getimg(img)
			},
			logout_fuc(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oneSetting {
		position: relative;
	}

	.content-wrap {
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		top: 16rpx;
		left: 50%;
		transform: translate(-50%, 0);

		.content-head-wrap {
			width: 100%;
			height: 340rpx;
			justify-content: center;
			align-items: center;
			border-bottom: #eeeeee 1px solid;

			.content-head-img {
				width: 164rpx;
				height: 164rpx;
				border-radius: 50%;

				image {
					width: 164rpx;
					height: 164rpx;
					border-radius: 50%;
				}
			}
		}

		.content-item {
			width: 100%;
			height: 90rpx;
			border-bottom: #eeeeee 1px solid;
			padding: 0 28rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5B6476;

			.user-name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #A9B1C0;
			}
		}
		.sign-out{
			width: 100%;
			height: 112rpx;
			line-height: 112rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #2D81FF;
		}
	}
</style>