yichael_zhongchuang_front_2/components/user/user.vue

<template>
	<!-- 用户 -->
	<view class="df jcc aic myComRoot">
		<!-- 一级页面 -->
		<view class="df content-box jcsb" v-show="showIndex==0">
			<view v-for="(item,i) in (userInfo.role=='老师'?userMenu_teacher:userMenu_student)" :key="i" class="df jcc aic fdc btn1-box"
			 @click="onClick_Btn1(i)">
				<view class="btn1-icon">
					<img :src="item.icon_large"></img>
				</view>
				<view class="btn1-text">{{item.text}}</view>
			</view>
		</view>
		<!-- 展示页 -->
		<view class="user-show df fdr" v-show="showIndex!=0">
			<view class="user-left-box">
				<view class="df fdc aic">
					<view class="user-left-avatar df">
						<img :src="userInfo.avatarSrc"></img>
					</view>
					<view class="user-left-btn df jcc aic">上传头像</view>
				</view>
				<view class="user-left-line"></view>
				<view class="user-left-menu">
					<view class="df fdc" v-for="(menu,menuI) in (userInfo.role=='老师'?userMenu_teacher:userMenu_student)" :key="menuI"
					 @click="onClick_Btn1(menuI)">
						<view class="user-left-menu-item df fdr aic">
							<view class="user-left-menu-item-left df fdr aic">
								<view class="df" :style="{opacity:checkedIndex_leftMenu==menuI?1:0}">
									<img src="../../assets/user/icon_user_09.png"></img>
								</view>
								<view class="df user-left-menu-icon">
									<img :src="checkedIndex_leftMenu==menuI?menu.icon_checked:menu.icon_unchecked"></img>
								</view>
								<view :class="checkedIndex_leftMenu==menuI?'text-checked':'text-unchecked'">{{menu.text}}</view>
							</view>
							<view class="df  user-left-menu-arrow">
								<img :src="checkedIndex_leftMenu==menuI?user_left_arrow_checked:user_left_arrow_unchecked"></img>
							</view>
						</view>
						<view class="user-left-line"></view>
					</view>
				</view>
			</view>
			<scroll-view class="rightBox user-right-box" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
				<!-- <view class="user-right-box"> -->
				<GRXX ref="GRXX" v-show="showIndex==1"></GRXX>
				<XSGL ref="XSGL" v-show="showIndex==2&&userInfo.role=='老师'&&!isShow_xssyqk"></XSGL>
				<XSSYQK ref="XSSYQK" v-show="showIndex==2&&userInfo.role=='老师'&&isShow_xssyqk"></XSSYQK>
				<GRXXJL ref="GRXXJL" v-show="showIndex==2&&userInfo.role=='学生'"></GRXXJL>
				<!-- </view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import GRXX from './selfInfo.vue'
	import XSGL from './stuManage.vue'
	import XSSYQK from './stuTestDetails.vue'
	import GRXXJL from './personalLearning.vue'
	export default {
		components: {
			GRXX, //个人信息
			XSGL, //学生管理
			XSSYQK, //学生实验情况
			GRXXJL, //个人学习记录
		},
		onLoad() {

		},
		data() {
			return {
				//0一级页面1个人信息2学生管理3学生实验情况4学生创作项目管理平台
				showIndex: 0,
				checkedIndex_leftMenu: 0,
				userInfo: mydata_userInfo,
				isShow_xssyqk: false,
				scrollTop: 0,
				oldScrollTop: 0,

				userMenu_teacher: [{
						"icon_large": require("../../assets/user/icon_user_01.png"),
						"text": "个人信息",
						"icon_checked": require("../../assets/user/icon_user_05_02.png"),
						"icon_unchecked": require("../../assets/user/icon_user_05_01.png"),
					},
					{
						"icon_large": require("../../assets/user/icon_user_02.png"),
						"text": "学生管理",
						"icon_checked": require("../../assets/user/icon_user_06_02.png"),
						"icon_unchecked": require("../../assets/user/icon_user_06_01.png"),
					},
					{
						"icon_large": require("../../assets/user/icon_user_04.png"),
						"text": "创作项目管理平台",
						"icon_checked": require("../../assets/user/icon_user_08_02.png"),
						"icon_unchecked": require("../../assets/user/icon_user_08_01.png"),
					}
				],
				userMenu_student: [{
						"icon_large": require("../../assets/user/icon_user_01.png"),
						"text": "个人信息",
						"icon_checked": require("../../assets/user/icon_user_05_02.png"),
						"icon_unchecked": require("../../assets/user/icon_user_05_01.png"),
					},
					{
						"icon_large": require("../../assets/user/icon_user_03.png"),
						"text": '个人学习记录',
						"icon_checked": require("../../assets/user/icon_user_07_02.png"),
						"icon_unchecked": require("../../assets/user/icon_user_07_01.png"),
					},
					{
						"icon_large": require("../../assets/user/icon_user_04.png"),
						"text": "创作项目管理平台",
						"icon_checked": require("../../assets/user/icon_user_08_02.png"),
						"icon_unchecked": require("../../assets/user/icon_user_08_01.png"),
					}
				],
				user_left_arrow_checked: require("../../assets/user/icon_user_10_02.png"),
				user_left_arrow_unchecked: require("../../assets/user/icon_user_10_01.png"),
			}
		},
		methods: {
			initData() {
				this.showIndex = 0;
			},
			onClick_Btn1(index) {
				if (index == this.userMenu_student.length - 1) {
					this.$emit("onClick_proManage");
				} else {
					this.checkedIndex_leftMenu = index;
					this.showIndex = index + 1;
				}
				if (this.userInfo.role == '老师') {
					switch (index) {
						case 0: //个人信息

							break;
						case 1: //学生管理
							this.$refs.XSGL.updateInfo();
							break;
						case 2: //创作项目管理平台

							break;
						default:

					}
				} else {
					switch (index) {
						case 0: //个人信息

							break;
						case 1: //个人学习记录

							break;
						case 2: //创作项目管理平台

							break;
						default:

					}
				}
				this.getUserInfo();
			},
			getUserInfo() {
				let url = this.$Api + "/user/getuserinfo";
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						"UserID": mydata_userInfo.UserID,
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//100成功
						if (data.Code == 100) {
							console.log("请求成功", res);
							this.$refs.GRXX.updateInfo(data.User);
							mydata_userInfo.email = data.User.Email;
							if (mydata_userInfo.role == '老师') {

							} else {
								this.$refs.GRXXJL.updateInfo(data.User);
							}
						}
						//200失败
						else {

						}
						// console.log("success+++**+*", res.data.Code)
					},
					fail: (res) => {
						console.log("fail+**+*", res)
					}
				});
			},
			scroll(e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			goTop(e) {
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},


			//范例，直接复制
			testPost() {
				let url = this.$Api + "/user/getuserinfo";
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						"UserID": mydata_userInfo.UserID,
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//100成功
						if (data.Code == 100) {

						}
						//200失败
						else {

						}
						console.log("success+++**+*", res.data.Code)
					},
					fail: (res) => {
						console.log("fail+**+*", res)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	$btnN:4;

	.content-box {
		width: px2vw(312*$btnN+34*(($btnN)-1));
		height: px2vw(367);
	}

	.user-full {
		width: 100%;
		height: 100%;
	}

	.user-show {
		width: 100%;
		// height: 100%;
		height: px2vh(960);
	}

	.user-left-box {
		width: px2vw(374);
		background: #FFFFFF;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		margin-top: px2vw(10);
	}

	.user-left-avatar img {
		width: px2vw(120);
		margin-top: px2vw(74);
	}

	.user-left-btn {
		width: px2vw(158);
		height: px2vw(48);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(18);
		color: #FFFFFF;
		line-height: px2vw(24);
		margin-top: px2vw(31);
		margin-bottom: px2vw(65);
	}

	.user-left-line {
		width: px2vw(374);
		height: 1px;
		background: #DDDDDD;
	}

	.user-left-menu-item {
		height: px2vw(80);
		margin-top: px2vw(16);
		margin-bottom: px2vw(16);
	}

	.user-left-menu-item-left {
		width: px2vw(317);
	}

	.user-left-menu-icon {
		margin-left: px2vw(33);
	}

	.text-checked {
		font-size: px2vw(20);
		color: #FF0019;
		line-height: px2vw(26);
		margin-left: px2vw(15);
	}

	.text-unchecked {
		font-size: px2vw(20);
		color: #070707;
		line-height: px2vw(26);
		margin-left: px2vw(15);
	}

	.user-right-box {
		background: #F4F4F4;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		flex: 1;
		margin-left: px2vw(10);
	}
</style>