zhxy-desk/pages/studentRanked/studentRankedChange.vue

<template>

	<view class="">
		<view style="margin-bottom: 32rpx;" class="">
			<topBtn :list="btnList" :active.sync='reActive' />
		</view>
		<view v-if="reActive == 1" @click="openPop"
			style="box-sizing: border-box;padding: 0 32rpx;margin-bottom: 32rpx;" class="btn-roll">
			排位调整
		</view>

		<view class="" v-if="reActive == 0" @click="show_classes=true" style="width: auto;">
			<view class="ui-p">
				<view class="visit-item">
					<view class="visit-item-left">
						选择班级
					</view>
					<view  class="btn-roll ui-plr" style="width: auto;" v-if="chooseClassName">
						{{ chooseClassName }}
					</view>
				</view>
			</view>
			
		</view>
		<view class="" v-if="reActive==0">
			<view class="ranked" v-if="chooseClassName">
				<view v-for="(item,index) in list" :key="index" class="ranked-item">
					<view @click="reActive == 1 ?itemClick(item1):Comment(item1)" v-for="(item1,index1) in item.nodes"
						:key="item1.id" class="ranked-item-tr">
						<!-- <image style="width: 90rpx;height: 90rpx;" src="@/static/image/female.png" mode=""></image> -->
						<view :class="active.indexOf(item1.id) == -1 ? '' :'active'" style="width: 90%;text-align: center;background-color: #fff;
					border-radius: 5px;">
							{{item1.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="platform" v-if="chooseClassName">
				<view class="ranked-radio">

				</view>
				<view class="platform-text">
					讲台
				</view>
				<view class="platform-color">

				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="ranked" >
				<view v-for="(item,index) in selfClassList" :key="index" class="ranked-item">
					<view @click="reActive == 1 ?itemClick(item1):Comment(item1)" v-for="(item1,index1) in item.nodes"
						:key="item1.id" class="ranked-item-tr">
						<!-- <image style="width: 90rpx;height: 90rpx;" src="@/static/image/female.png" mode=""></image> -->
						<view :class="active.indexOf(item1.id) == -1 ? '' :'active'" style="width: 90%;text-align: center;background-color: #fff;
					border-radius: 5px;">
							{{item1.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="platform" >
				<view class="ranked-radio">
			
				</view>
				<view class="platform-text">
					讲台
				</view>
				<view class="platform-color">
			
				</view>
			</view>
		</view>

		<uni-popup ref="popup" background-color="transparent">
			<view style="padding: 0;" class="popup-content"
				:class="{ 'popup-height': type === 'left' || type === 'right' }">
				<StuDraggable @change='change' :list.sync='selfClassList' />
			</view>
		</uni-popup>
		<uni-popup @change="popChange" ref="CommentPopup" background-color="transparent">
			<view style="padding: 32rpx;width: 700rpx;" class="popup-content"
				:class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="pop-title">
					<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" src="@/static/image/icon.png"
						mode=""></image> {{info.title}}
				</view>

				<view style="margin-top: 32rpx;" class="">
					<Tag @click='CommentOn' :list='tagList' />
				</view>
			</view>
		</uni-popup>
		<u-picker :show="show_classes" @confirm="doChooseClass" :columns="teachList" keyName="class_name" @cancel="show_classes=false"></u-picker>
		<view class="">
			<view @click="loginOut()" class="form-btn-content">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import topBtn from '@/components/topBtn.vue'
	import StuDraggable from './stuDraggable.vue'
	import Tag from './tag.vue'
	import { getStuSchoolIdByStuClassId } from "@/common/api/stu.js"
	export default {
		components: {
			topBtn,
			StuDraggable,
			Tag
		},
		data() {
			return {
				show_classes : false,
				id: 1,
				info: {},
				type: 'center',
				btnList: ['学生评分', '坐位调整'],
				reActive: 0,
				active: [],
				activeList: [],
				tagList: [],
				list: [],
				teachList :[],
				chooseClassName : '',
				chooseClassId : '',
				selfClassList : [],
				notSelfClass : true,
			}
		},
		mounted() {
			// this.id = this.$route.query.id
			this.id=this.$store.state.teacherInfo.selfclass.id
			
			// this.getStudent()
			this.getClassroomList()
		},
		methods: {
			loginOut(){
				uni.setStorageSync("token",'')
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			doChooseClass(val){
				console.log(val,"val");
				this.chooseClassId=val.value[0].id
				this.chooseClassName=val.value[0].class_name
				this.getStudent()
				this.show_classes=false
			},
			getClassroomList(){
				let teacher_id=this.$store.state.teacherInfo.id
				this.$api.sendRequest({
					url: `/mobile/teacher/teachClasses`,
					method: "post",
					data: {
						teacher_id : teacher_id
					},
					success: res => {
						this.teachList.push(res.data)
						console.log(this.teachList);
					}
				})
				
			},
			itemClick(item) {
				let val = this.active.indexOf(item.id)
				if (val == -1) {
					this.active.push(item.id)
					this.activeList.push(item)
				} else {
					this.active.splice(val, 1)
					this.activeList.splice(val, 1)
				}
				if (this.active.length == 2) {

					this.selfClassList.forEach((item2, index2) => {
						item2.nodes.forEach((item1, index1) => {
							let indexVal = this.active.indexOf(item1.id)
							if (indexVal != -1) {

								this.activeList.forEach(item3 => {
									if (item3.id != item1.id) {
										item2.nodes.splice(index1, 1, item3)
									}
								})

							}
						})
					})
					this.activeList = []
					this.active = []
					let info = {
						classroom_id: this.id,
						seat_list: this.selfClassList
					}
					this.$api.sendRequest({
						url: `/mobile/saveSeat`,
						method: "PUT",
						data: info,
						success: res => {
							uni.showToast({
								title: res.msg,

							})

						}
					})
				}
			},
			openPop() {
				if(!this.notSelfClass){
					this.type = 'center'
					this.$refs.popup.open('center')
				}
			},
			Comment(item) {
				console.log(item,"sgism");
				//item的id是studentClass的id,需要转换成stu_school_id传到
				
				this.$api.sendRequest({
					url: getStuSchoolIdByStuClassId,
					data : {
						stu_class_id : item.id
					},
					success: res => {
						console.log(res,"resrrrrr");
						
						
						let stu_school_id=res.data.stu_school_id
						uni.navigateTo({
							url: "/pages/studentTab/studentTab?stu_school_id="+stu_school_id
						})
					}
				})
			},
			popChange(val) {
				if (!val.show) {
					this.tagList.forEach(item => {
						item.show = false
					})
				}
			},
			getStudent() {
				this.$api.sendRequest({
					url: `/mobile/getSeat?classroom_id=${this.chooseClassId}`,
					success: res => {
						this.list = res.data

					}
				})
			},
			change(list) {
				console.log("组件传的数据",list);
				this.selfClassList = list
				let info = {
					classroom_id: this.id,
					seat_list: this.selfClassList
				}
				this.$api.sendRequest({
					url: `/mobile/saveSeat`,
					method: "PUT",
					data: info,
					success: res => {
						uni.showToast({
							title: res.msg,
						})
					}
				})
			},
			getTagList() {
				this.$api.sendRequest({
					url: `/mobile/student/tabs?id=${this.info.id}`,
					success: res => {
						res.data.forEach(item => {
							item.show = false
						})
						this.tagList = res.data
					}
				})
			},
			CommentOn(item, score) {

				let info = {
					id: this.info.id,
					tab_id: item.tab_id,
					score: score
				}
				this.$api.sendRequest({
					url: `/mobile/student/eval`,
					data: info,
					success: res => {
						uni.showToast({
							title: `${this.info.title} ${item.tab_name} ${item.type == 1 ? '+':'-'} ${score}分`,
							icon: 'none'
						})

						this.$refs.CommentPopup.close()
					}
				})
			}

		},
		watch: {
			reActive(newVal) {
				this.active = []
				this.activeList = []
				console.log(newVal);
				if(newVal==1){
					console.log(this.$store.state.teacherInfo.selfclass,"this.$store.state.teacherInfo.selfclass");
					if(this.$store.state.teacherInfo.selfclass){
						let classroom_id=this.$store.state.teacherInfo.selfclass.id
						// let classroom_id=1
						this.$api.sendRequest({
							url: `/mobile/getSeat?classroom_id=${classroom_id}`,
							success: res => {
								console.log(res.data);
								this.selfClassList = res.data
								this.notSelfClass=false
							}
						})
					}else{
						this.selfClassList=[]
						uni.showToast({
							icon: "none",
							title: "您不是班主任"
						})
					}
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	.form-btn-content {
		width: 30%;
		background: #05cca1;
		height: 72rpx;
		border-radius: 36rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 72rpx;
		margin: 0 auto;
		position: fixed;
		bottom: 40rpx;
		left: 35%;
		
	}
	.platform {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		height: 30rpx;
		margin-top: 60rpx;

		.platform-color {
			position: absolute;
			left: 0;
			top: 0;
			height: 60rpx;
			background-color: rgba(5, 204, 161, 1);
			width: 10rpx;
		}

		.platform-text {
			text-align: center;
			width: 60%;
			margin-top: 40rpx;

		}
	}

	.pop-title {
		border-bottom: 1px solid #f2f2f2;
		font-size: 36rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.popup-content {
		border-radius: 10px;
		box-sizing: border-box;
		padding: 0 32rpx;
	}

	.btn-roll {
		background-color: #fff;
		border-radius: 25rpx;
		width: 190rpx;
		color: #666;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-left: 32rpx;
	}

	.ranked {
		width: 100%;

		text-align: center;
		font-size: 10px;
		box-sizing: border-box;
		display: flex;

		.ranked-item {
			flex: 1;
			box-sizing: border-box;



			.ranked-item-tr {
				margin-bottom: 16rpx;
				border-radius: 5px;
				box-sizing: border-box;
				width: 100%;

				display: flex;
				justify-content: center;
			}

			.ranked-item-tr:last-child {
				margin-bottom: 0;
			}

			.active {
				border: 1px solid #ccc !important;
				background-color: rgba(5, 204, 161, 1) !important;
				color: #fff !important;
				box-sizing: border-box;
			}
		}

		.ranked-item:nth-child(2n) {
			border-right: 1px solid #ccc;
		}

		.ranked-item:last-child {
			border-right: 0;
		}

	}

	.ranked-radio {
		width: 100px;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		top: 0rpx;

		border-bottom: 3px solid rgba(5, 204, 161, 1);
		border-radius: 50% 50% 0 0;
	}
	
	.visit-item {
		display: flex;
		align-items: center;
	
		.visit-item-left {
			width: 120rpx;
			color: #666;
		}
	}
</style>