zhxy-desk/pages/studentRanked/studentRanked.vue

<template>
	<view class="page">
		<!-- <u-popup :show="multiSelect" bgColor="#6e8fafde" mode="top" @close="multiSelect=false" :overlay="false">
            <view class="ui-p ui-flex ui-flex-align-center" style="justify-content: end;">
                <view class="ui-mr30">
                    <text class="f32" style="#9ccbff">请点击选则学生批量点评</text>
                </view>
                <view class="ui-flex" style="width: 250px;">
                    <u-button size="small" @click="setMulti" plain text="取消选择" style="background-color: #0d4980;"
                        class="ui-mr10"></u-button>
                    <u-button size="small" type="primary" @click="commentMulti()">
                        <text class="ui-mr10">批量点评</text>
                        <u-badge :value="activeList.length"></u-badge>
                    </u-button>
                </view>
            </view>
        </u-popup> -->

		<view class="txt-white ui-flex-row ui-flex-align-center"
			style="border-bottom: 4px solid #4472C4;padding-left: 40rpx;height: 54px;"
			:style="{'background-color': multiSelect ? '#4472c4' : ''}">
			<view class="ui-p ui-flex-row">
				<text class="f40">{{chooseClassName}}</text>
				<!-- <view class="ui-flex-row">
                    <text class="f40 ui-ml30 ui-mr10">李老师</text>
                    <u-icon name="arrow-down-fill" color="#fff"></u-icon>
                </view> -->
				<el-dropdown trigger="click">
					<span class="f40 txt-white ui-ml30" style="cursor:pointer;">
						李老师<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>周老师</el-dropdown-item>
						<el-dropdown-item>陈老师</el-dropdown-item>
						<el-dropdown-item>方老师</el-dropdown-item>
						<el-dropdown-item disabled>金老师</el-dropdown-item>
						<el-dropdown-item divided>退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

			</view>

			<view class="ui-p ui-flex ui-flex-1 ui-flex-align-center" style="justify-content: end;" v-if="multiSelect">
				<view class="ui-mr30">
					<text class="f32" style="#9ccbff">请点击选则学生批量点评</text>
				</view>
				<view class="ui-flex" style="width: 250px;">
					<el-button @click="setMulti" plain text="取消选择" style="background-color: #0d4980;"
						class="ui-mr10">取消选择</el-button>
					<el-badge :value="activeList.length">
						<el-button type="primary" @click="commentMulti()">
							批量点评
						</el-button>
					</el-badge>
				</view>
			</view>
		</view>

		<view class="ui-flex-row ui-mt20 ui-flex-space-around">
			<view v-for="(column, index) in list" :key="index" v-if="index%2 == 0" class="ui-flex-row">
				<view v-for="index2 in 2" class="ui-flex-column" :class="{
                        'ui-mr10' : index2 == 1,
                        'ui-ml10' : index2 == 2
                    }">
					<view @click="Comment(item1)" v-for="(item1,index1) in list[index2+index-1].nodes" :key="item1.id"
						class="ui-flex-column ranked-item-tr ui-flex-align-center"
						:class="{active : activeList.includes(item1.id)}">
						<image style="width: 100rpx;height: 100rpx;" :src="item1.student_cartoon_photo" mode=""></image>
						<view class="stu-tag text-center ui-flex-row ui-mt10">
							<view class="stu-tag-add ui-flex-1">{{item1.plus_score_total}}</view>
							<view class="stu-tag-sub ui-flex-1">{{item1.minus_score_total}}</view>
						</view>
						<view class="txt-white f28 ui-pt10">
							{{item1.title}}
						</view>
						<u-badge absolute style="left: 10px;top: 10px;"
							:value="activeList.indexOf(item1.id) + 1"></u-badge>
					</view>
				</view>
			</view>
		</view>

		<view class="platform" v-if="chooseClassName">
			<view class="ranked-radio"></view>
			<view class="platform-text txt-white">讲台</view>
		</view>

		<!-- 切换班级 -->
		<u-picker :show="show_classes" @confirm="doChooseClass" :columns="teachList" keyName="class_name"
			@cancel="show_classes=false"></u-picker>

		<!-- 点评 -->
		<markScore :title='stuName' @change='change' @close='close' :stuList='activeList' :list='tabList'
			ref="markScore"></markScore>

		<!-- 点评记录 -->
		<markScoreList @add='addTab' :list='studentTab.data' ref="markScoreList"></markScoreList>

		<el-drawer title="排行榜" :visible.sync="showRankList" direction="rtl">
			<view style="text-align: center;" class="">
				开发中....!
			</view>
		</el-drawer>

		<view class="ui-pull-bottom ui-flex-row ui-p"
			style="background-color: #0000006b;border-top: 1px solid #616161;">
			<view class="ui-flex-1 ui-flex-row">
				<view class="ui-flex-column text-center ui-p bottom-btn-item" @click="show_classes=true">
					<image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
					<view style="line-height: 1;">
						<text class="txt-white f24">评分记录</text>
					</view>
				</view>
				<view class="ui-flex-column text-center ui-p bottom-btn-item" @click="$refs.markScoreList.open()">
					<image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
					<view style="line-height: 1;">
						<text class="txt-white f24">点评记录</text>
					</view>
				</view>
				<view class="ui-flex-column text-center ui-p bottom-btn-item" @click="$pageTo('./studentRankedChange')">
					<image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
					<view style="line-height: 1;">
						<text class="txt-white f24">座位调整</text>
					</view>
				</view>

				<view class="ui-flex-column text-center ui-p bottom-btn-item" @click="setMulti">
					<image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
					<view style="line-height: 1;">
						<text class="txt-white f24" v-if="multiSelect">取消多选</text>
						<text class="txt-white f24" v-else>学生多选</text>
					</view>
				</view>
			</view>

			<view class="ui-flex-row">
				<view class="ui-flex-column text-center ui-p bottom-btn-item" @click="showRankList = true">
					<image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
					<view style="line-height: 1;">
						<text class="txt-white f24">排行榜</text>
					</view>
				</view>
				<view class="ui-flex-column text-center ui-p bottom-btn-item">
					<image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
					<view style="line-height: 1;">
						<text class="txt-white f24">切换老师</text>
					</view>
				</view>
				<view class="ui-flex-column text-center ui-p bottom-btn-item">
					<image src="../../static/uni.png" style="width: 30px;height: 30px;" mode=""></image>
					<view style="line-height: 1;">
						<text class="txt-white f24">退出登录</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import markScore from './components/mark-score.vue'
	import markScoreList from './components/mark-score-list.vue'
	import {
		getStuSchoolIdByStuClassId
	} from "@/common/api/stu.js"
	export default {
		components: {
			markScore,
			markScoreList
		},
		data() {
			return {
				show_classes: false,
				id: 1,
				info: {},
				list: [],
				teachList: [],
				chooseClassName: '',
				chooseClassId: '',
				activeList: [],
				multiSelect: false,
				// 排行榜
				showRankList: false,
				tabList: [],
				studentTab: [],
				type: 1,
				stuNameList: [],
				stuName: ''
			}
		},
		mounted() {

			// this.id = this.$route.query.id
			this.id = this.$store.state.teacherInfo.selfclass.id
			this.getstudentTabLog()
			// this.getStudent()
			this.getClassroomList();

			setTimeout(() => {
				this.doChooseClass({
					value: [{
						class_name: "二年级2班",
						id: 2
					}]
				})
			}, 400)
		},
		methods: {
			change(e) {
				this.type = e == 0 ? 1 : 2
				this.getTabs()
			},
			setMulti() {
				this.multiSelect = !this.multiSelect;
				this.activeList = [];
			},
			loginOut() {
				uni.setStorageSync("token", '')
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			doChooseClass(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)

					}
				})

			},
			// 多选学生点评
			commentMulti() {
				this.stuName = this.stuNameList.toString()
				this.getTabs()
				this.$refs.markScore.open(1);
			},
			Comment(item) {

				if (this.multiSelect) {
					let index = this.activeList.indexOf(item.id)
					if (index >= 0) {
						this.activeList.splice(index, 1);
						this.stuNameList.splice(index, 1);
					} else {
						this.activeList.push(item.id);
						this.stuNameList.push(item.title);
					}
					return;
				} else {
					this.activeList = [item.id]
				}
				this.stuName = item.title
				this.getTabs()
				this.$refs.markScore.open(1);
				return;
				//item的id是studentClass的id,需要转换成stu_school_id传到
				this.$api.sendRequest({
					url: getStuSchoolIdByStuClassId,
					data: {
						stu_class_id: item.id
					},
					success: res => {
						let stu_school_id = res.data.stu_school_id
						uni.navigateTo({
							url: "/pages/studentTab/studentTab?stu_school_id=" + stu_school_id
						})
					}
				})
			},
			getStudent() {
				this.$api.sendRequest({
					url: `/mobile/studentTab/seat`,
					data: {
						class_id: this.chooseClassId
					},
					success: res => {
						this.list = res.data
					}
				})
			},
			getTabs() {
				this.$api.sendRequest({
					url: `/mobile/studentTab/getStudentTabs`,

					method: "post",
					data: {
						teacher_id: this.$store.state.teacher_id,

						type: this.type
					},
					success: res => {
						this.tabList = 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()
					}
				})
			},
			close() {
				this.activeList = []
				this.multiSelect = false
				this.getStudent()
				this.getstudentTabLog()
			},
			getstudentTabLog() {
				this.$api.sendRequest({
					url: `/mobile/studentTab/getstudentTabLog`,
					data: {
						class_id: 2
					},
					method: "post",
					success: res => {
						this.studentTab = res.data
					}
				})
			},
			addTab() {
				if (this.studentTab.current_page == this.studentTab.last_page) {
					uni.showToast({
						title: '没有更多数据',
						'icon': 'none',
					});
					return
				}
				this.$api.sendRequest({
					url: `/mobile/studentTab/getstudentTabLog`,
					method: "post",
					data: {
						page: this.studentTab.current_page + 1,
						class_id: 2
					},
					success: res => {
						let arr = [...this.studentTab.data, ...res.data.data]
						this.studentTab = res.data
						this.studentTab.data = arr

					}
				})
			}

		},

	}
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('https://zhxy.obs.cn-hz1.ctyun.cn:443/static/desk_bg/class_bj.jpg');
		background-size: 100% 100%;
		height: 100vh;
		// width: 750rpx;
	}

	.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;
		padding-top: 80rpx;
	}

	.ranked-item-tr {
		position: relative;
		margin-bottom: 26rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		border-radius: 5px;
		box-sizing: border-box;
		width: 100%;
		cursor: pointer;
		transition: 100ms;
		display: flex;
		justify-content: center;
	}

	.active {
		background: #ffffff85;
	}

	.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;
		}
	}

	.stu-tag {
		width: 90px;
		border-radius: 15px;
		overflow: hidden;
	}

	.stu-tag-add {
		background-color: #ecf5ff;
		color: #3c9cff;
		border: 1px solid #fff;
	}

	.stu-tag-sub {
		background-color: #fef0f0;
		color: #f56c6c;
		border: 1px solid #fff;
		border-left: 0;
	}

	.bottom-btn-item {
		position: relative;
	}

	.bottom-btn-item:hover {
		cursor: pointer;
		background-color: #ffffff3b;
		border-radius: 8px;
	}
</style>