zhxy-desk/pages/studentRanked/studentRanked.vue

<template>
    <view class="page">
        <view class="txt-white ui-flex-row ui-flex-align-center" style="border-bottom: 4px solid #4472C4;padding-left: 40rpx;height: 54px;position: fixed;top:0;width: 750rpx;z-index: 10;backdrop-filter: blur(4px);"
            :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>
            </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="platform" v-if="chooseClassName">
            <view class="platform-text txt-white">讲台</view>
            <view class="ranked-radio"></view>
        </view> -->

        <view class="ui-flex-row ui-flex-space-around" style="padding:140rpx 0 200rpx 0;">
            <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>

        <!-- 切换班级 -->
        <!-- <u-picker :show="show_classes" @confirm="doChooseClass" :columns="classesList" keyName="class_name"
			@cancel="show_classes=false"></u-picker> -->
            <!-- <u-grid :border="false" >
                <u-grid-item v-for="(item,baseListIndex) in classesList" :key="item.id">
                    <text class="grid-text">{{item.class_name}}</text>
                </u-grid-item>
            </u-grid> -->

        <!-- 点评 -->
        <markScore @change='change' @close='onScoreClose' :stuList='activeList' ref="markScore"></markScore>

        <!-- 点评记录 -->
        <markScoreList ref="markScoreList"></markScoreList>
        
        <!-- 随机点名 -->
        <randomRollCall ref="randomRollCall" :list="studentList" @comment="randomRollComment"></randomRollCall>

        <!-- 计时器 -->
        <timerClock ref="timerClock"></timerClock>

        <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;backdrop-filter: blur(4px);border-top: 1px solid #616161;">
            <view class="ui-flex-1 ui-flex-row">
                <!--   -->
                <el-dropdown trigger="click" @command="doChooseClass">
                    <view class="ui-flex-column text-center ui-p bottom-btn-item">
                        <image src="../../static/jyicon/shubao.png" style="width: 40px;height: 40px;" mode=""></image>
                        <view style="line-height: 1;">
                            <text class="txt-white f24">选择班级</text>
                        </view>
                    </view>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item) in classesList" :key="item.id" :command="item">
                            <text class="ui-mr10">{{item.class_name}}</text>
                            <text v-if="item.id == chooseClassId" class="el-icon-check"></text>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                    
                <view class="ui-flex-column text-center ui-p bottom-btn-item" @click="$refs.markScoreList.open()">
                    <image src="../../static/jyicon/kedan.png" style="width: 40px;height: 40px;" 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/jyicon/xuewei.png" style="width: 40px;height: 40px;" 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/jyicon/gerenzhongxin.png" style="width: 40px;height: 40px;" 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 class="ui-flex-column text-center ui-p bottom-btn-item" @click="$refs.randomRollCall.open()">
                    <image src="../../static/jyicon/fangfa.png" style="width: 40px;height: 40px;" 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.timerClock.open()">
                    <image src="../../static/jyicon/shalou.png" style="width: 40px;height: 40px;" mode=""></image>
                    <view style="line-height: 1;">
                        <text class="txt-white f24">计时器</text>
                    </view>
                </view>

                <view class="ui-flex-column text-center ui-p" :class="[lastTipBatchId ? 'bottom-btn-item' : 'bottom-btn-item-disabled']" @click="repealScore()">
                    <image src="../../static/jyicon/naozhong.png" style="width: 40px;height: 40px;" mode=""></image>
                    <view style="line-height: 1;">
                        <text class="txt-white f24">撤销点评</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/jyicon/jiangpai.png" style="width: 40px;height: 40px;" 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: 40px;height: 40px;" 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="loginOut()">
                    <image src="../../static/jyicon/xiaoxi.png" style="width: 40px;height: 40px;" 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 randomRollCall from './components/random-roll-call.vue'
    import timerClock from './components/timer-clock.vue'
    import {
        getStuSchoolIdByStuClassId
    } from "@/common/api/stu.js"
    export default {
        components: {
            markScore,
            markScoreList,
            randomRollCall,
            timerClock,
        },
        data() {
            return {
                // show_classes: false,
                id: 1,
                list: [],
                classesList: [],
                chooseClassName: '',
                chooseClassId: '',
                activeList: [],
                multiSelect: false,
                // 排行榜
                showRankList: false,
                // tabList: [],
                // studentTab: [],
                // type: 1,
                lastTipBatchId : ''
            }
        },
        computed : {
            studentList(){
                let list = [];
                this.list.forEach(item => {
                    item.nodes.forEach(el => {
                        if (el.id) {
                            list.push(el)
                        }
                    })
                })
                return list;
            }
        },
        mounted() {
            console.log(this.$store.state.teacherInfo)
            this.id = this.$store.state.teacherInfo.selfclass.id
            this.getClassroomList();
        },
        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) {
                // console.log(val);
                uni.setStorage({
                    key: 'lastClasses',
                    data: val,
                    success(e) {
                        console.log(e)
                    }
                });

                this.chooseClassId = val.id
                this.chooseClassName = val.class_name
                this.getStudent()
                // this.show_classes = false
            },
            // DelectSuccess(index) {
            //     console.log(index);
            //     this.getStudent()
            //     this.getstudentTabLog()
            // },
            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.classesList = res.data;
                        if (res.data.length) {
                            let value = uni.getStorageSync('lastClasses')
                            this.$nextTick(() => {
                                this.doChooseClass(value || res.data[0])
                            })
                        }
                    }
                })
            },
            // 随机点名后批量评价
            randomRollComment(checkList){
                this.activeList = checkList.map(item => {
                    return item.id
                });
                this.commentMulti();
            },
            // 多选学生点评
            commentMulti() {
                // this.stuName = this.stuNameList.toString()
                let title = this.activeList.map(stuId => {
                    return this.studentList.find(el => {
                        return el.id == stuId;
                    }).title;
                }).join( );
                
                // this.getTabs()
                this.$refs.markScore.open(title);
            },
            Comment(item) {
                if (this.multiSelect) {
                    let index = this.activeList.indexOf(item.id)
                    if (index >= 0) {
                        this.activeList.splice(index, 1);
                    } else {
                        this.activeList.push(item.id);
                    }
                    return;
                }
                
                this.activeList = [item.id];
                this.commentMulti();
            },
            // 获取学生列表
            getStudent() {
                this.$api.sendRequest({
                    url: `/mobile/studentTab/seat`,
                    data: {
                        class_id: this.chooseClassId
                    },
                    success: res => {
                        this.list = res.data.reverse().map(item => {
                            item.nodes = item.nodes.reverse().filter(el => {
                                return !!el.id;
                            })
                            return item;
                        })
                    }
                })
            },
            // 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
            //         }
            //     })
            // },
            onScoreClose(lastTipBatchId = false) {
                if(lastTipBatchId){
                    this.activeList = []
                    this.multiSelect = false
                    this.getStudent();
                    this.lastTipBatchId = lastTipBatchId;
                }
                // this.getstudentTabLog()
            },
            repealScore(){
                this.$api.sendRequest({
                    url: `/mobile/studentTab/multiDelStudentTabLog`,
                    method: "post",
                    data: {
                        batch_id : this.lastTipBatchId
                    },
                    success: res => {
                        this.lastTipBatchId = null;
                    }
                })
            }
        },
    }
</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: auto;
        // 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-bottom: 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%);
        bottom: 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,
    .bottom-btn-item-disabled{
        position: relative;
    }
    .bottom-btn-item-disabled{
        opacity: 0.5;
    }

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