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" @click="onUploadAvatar">上传头像</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" v-on:onClick_XSSYQK="onClick_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, //个人学习记录
		},
		mounted() {

		},
		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;
			},
			onshow()
			{
				console.log('onshow......')
				this.showIndex = false;
			},
			onClick_Btn1(index) {
				// console.log('index===',index)
				// console.log('this.userMenu_student===',this.userMenu_student)
				if (index == this.userMenu_student.length - 1) {
					this.$emit("onClick_proManage");
				}
				else 
				{
					this.isShow_xssyqk = false;
					this.checkedIndex_leftMenu = index;
					this.showIndex = index + 1;
					// console.log('checkedIndex_leftMenu=',index)
					// console.log('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";
				let _self = this;
				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;
							// console.log('00000000000=',mydata_userInfo.role)
							
							if (mydata_userInfo.role == '老师') 
							{
								// this.$refs.XSSYQK.updateInfo(data.User);
							} 
							else 
							{
								this.$refs.GRXXJL.updateInfo(data.User);
								//请求分数
								url = this.$Api + "/score/getscore";
								uni.request({
									header: {
										'Content-Type': 'application/json;charset=UTF-8'
									},
									url: url,
									method: 'POST',
									data: {
										"UserID": data.User.Id,
									},
									dataType: 'json',
									success: (res) => {
										let data = res.data;
										//100成功
										if (data.Code == 100) {
											// console.log("请求分数成功", res);
											 this.$refs.GRXXJL.updateLearnProgress(data.Scores);
										}
										//200失败
										else {
											console.log("fail200=", res)
										}
										// console.log("success+++**+*", res.data.Code)
									},
									fail: (res) => {
										console.log("fail+**+*", res)
									}
								});
							}
						}
						//200失败
						else {
							console.log("fail200=", res)
						}
						// 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)
					}
				});
			},
			onClick_XSSYQK(UserID){
				// console.log("11111=",this.userInfo.role);
				// console.log("2222=",this.isShow_xssyqk);
				// console.log("UserID=",UserID);
				this.isShow_xssyqk = true;
				this.checkedIndex_leftMenu = 1;
				this.showIndex = 2;
				
				let url = this.$Api + "/user/getuserinfo";
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						"UserID": UserID,
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//100成功
						if (data.Code == 100) {
							console.log("请求成功", res);
							 this.$refs.XSSYQK.updateInfo(data.User);
						}
						//200失败
						else {
				
						}
						// console.log("success+++**+*", res.data.Code)
					},
					fail: (res) => {
						console.log("fail+**+*", res)
					}
				});
				
				url = this.$Api + "/score/getscore";
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: url,
					method: 'POST',
					data: {
						"UserID": UserID,
					},
					dataType: 'json',
					success: (res) => {
						let data = res.data;
						//100成功
						if (data.Code == 100) {
							console.log("请求分数成功", res);
							 this.$refs.XSSYQK.updateLearnProgress(data.Scores);
						}
						//200失败
						else {
				
						}
						// console.log("success+++**+*", res.data.Code)
					},
					fail: (res) => {
						console.log("fail+**+*", res)
					}
				});
				
			},
			onUploadAvatar(){
				uni.chooseFile({
				    success: (chooseFileRes) => {
				        const tempFilePaths = chooseFileRes.tempFilePaths;
				        uni.uploadFile({
				            url: this.$Api + "/user/uploaduserheadimage", //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
								'UserID':this.$UserId,                // 创建用户 id
				            },
				            success: (uploadFileRes) => {
				                console.log('upload ok=',uploadFileRes.data);
								//刷新avatar
								uni.request({
									header: {
										'Content-Type': 'application/json;charset=UTF-8'
									},
								    url: this.$Api + "/user/getuserinfo", //仅为示例，非真实的接口地址
									method: 'POST',
									data: {
										'UserID':this.$UserId, 
									},
									dataType: 'json',
									success: (res) => {
										this.userInfo.avatarSrc = res.data.User.HeadImageURL;
									},
									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>