jp-education-student/pages/teacher/mine/mine.vue

<template>
	<view>
	 <u-navbar back-text="我的"></u-navbar>
	 <view class="main">
		 <view class="data">
			 <view class="photo">
			 	<img src="../../../assets/img/photowoman.png" alt="">
			 </view>
			 <view class="infos">
				 <view class="name">
				 	夏奕琳
				 </view>
				 <view class="project">
				 	中国舞项目-芭蕾舞老师
				 </view>
			 	
			 </view>
			 
			 <view class="edit" @click="toEditProfile">
			 	 <view class="icon">
			 	 	<img src="../../../assets/img/riFill-mark-pen-fill@1x.png" alt="">
			 	 </view>
				 <view class="text">
				 	编辑资料
				 </view>
			 </view>
		 	
		 </view>
	 	
		<view class="option">
			<view class="option-item" @click="gotoUrl('pages/teacher/lectureRecord/lectureRecord')">
				<view class="item-name">
					<view class="icon">
						<img src="../../../assets/img/riLine-calendar-check-line@1x.png" alt="">
					</view>
					<view class="text">
						授课记录
					</view>
				</view>
				
				<view class="icon">
					<u-icon name="arrow-right" color="#b3b3b3"></u-icon>
				</view>
				
			</view>
			<view class="option-item">
				<view class="item-name">
					<view class="icon">
						<img src="../../../assets/img/riLine-question-line@1x.png" alt="">
					</view>
					<view class="text">
						帮助中心
					</view>
				</view>
				
				<view class="icon">
					<u-icon name="arrow-right" color="#b3b3b3"></u-icon>
				</view>
				
			</view>
			<view class="option-item">
				<view class="item-name">
					<view class="icon">
						<img src="../../../assets/img/riLine-logout-box-r-line@1x.png" alt="">
					</view>
					<view class="text">
						退出账号
					</view>
				</view>
				
				<view class="icon">
					<u-icon name="arrow-right" color="#b3b3b3"></u-icon>
				</view>
				
			</view>
			
		</view>
	 </view>
		
		
		
		<Tabbar :current="1" ref="tabbarMain" ></Tabbar>
		
	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import Tabbar from '@/components/Tabbar.vue'
	
	export default {
		components:{
			Tabbar,
			
		},
		data() {
			return {
				form: {
					headImg: '',
					nickName: ''
				},
			}
		},
		onShow() {
			this.getParentsInfo();
		},
		methods: {
			getParentsInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.form.headImg = response.data.regUser.headImg;
					this.form.nickName = response.data.regUser.nickName;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toEditProfile() {
				uni.navigateTo({
					url: '/pages/teacher/editProfile/editProfile'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		padding: 68rpx 0 68rpx 32rpx;
		.data{
			display: flex;
			.photo{
				width: 60px;
				height: 60px;
				border-radius: 50px;
				box-shadow: 0px 2px 8px 0px rgba(35, 72, 75, 15);
				border: 2px solid rgba(255, 255, 255, 1);
				overflow: hidden;
				img{
					width: 100%;
					height: 100%;
					
				}
			}
			.infos{
				margin-left: 12px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.name{
					color: rgba(51, 51, 51, 1);
					font-size: 20px;
					font-weight: bold;
				}
				.project{
					color: rgba(119, 119, 119, 1);
					font-size: 12px;
				}
			}
			
			.edit{
				margin-left: auto;
				display: flex;
				align-items: center;
				width: 108px;
				height: 38px;
				line-height: 38px;
				border-radius: 50px 0px 0px 50px;
				background: linear-gradient(90deg, rgba(25,196,124,1) 0%,rgba(13,186,199,1) 51.8%,rgba(49,170,240,1) 100%);
				text-align: center;
				box-shadow: 2px 8px 12px 0px rgba(79, 226, 157, 15);
				.icon{
					margin-left: 32rpx;
				}
				img{
					vertical-align: middle;
				}
				.text{
					margin-left: 8rpx;
					color: #fff;
				}
			}
		}
	
	
	.option{
		margin-top: 48rpx;
		padding-right: 32rpx;
		.option-item{
			display: flex;
			justify-content: space-between;

			.item-name{
				display: flex;
				align-items: center;
				padding: 12px 0;
				img{
					vertical-align: middle;
				}
				.text{
					margin-left: 16rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 16px;
				}
			}
			.icon{
				display: flex;
				align-items: center;
			}
		}
		
	}
	
	
	}
	

</style>