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="ranked" v-if="chooseClassName">
            <view v-for="(item,index) in list" :key="index" class="ranked-item">
                <view @click="Comment(item1)" v-for="(item1,index1) in item.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="'https://zhxy.obs.cn-hz1.ctyun.cn:443/static/student_icon/'+ (index1%7) +'.png'"
                        mode=""></image>
                    <view class="stu-tag ui-flex-row ui-mt10">
                        <view class="stu-tag-add ui-flex-1">72</view>
                        <view class="stu-tag-sub ui-flex-1">-32</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 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 ref="markScore"></markScore>

        <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">{{chooseClassName || '加载中...'}}</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">
                    <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 {
        getStuSchoolIdByStuClassId
    } from "@/common/api/stu.js"
    export default {
        components: {
            markScore
        },
        data() {
            return {
                show_classes: false,
                id: 1,
                info: {},
                list: [],
                teachList: [],
                chooseClassName: '',
                chooseClassId: '',
                
                activeList : [],
                multiSelect : false,
            }
        },
        mounted() {
            // this.id = this.$route.query.id
            this.id = this.$store.state.teacherInfo.selfclass.id
            // this.getStudent()
            this.getClassroomList();

            setTimeout(() => {
                this.doChooseClass({
                    value: [{
                        class_name: "二年级2班",
                        id: 2
                    }]
                })
            }, 400)
        },
        methods: {
            setMulti(){
                this.multiSelect = !this.multiSelect;
                this.activeList = [];
            },
            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);
                    }
                })

            },
            // 多选学生点评
            commentMulti(){
                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);
                    }else{
                        this.activeList.push(item.id);
                    }
                    return;
                }
                console.log(item, "sgism");
                
                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 => {
                        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
                        })
                    }
                })
            },
            getStudent() {
                this.$api.sendRequest({
                    url: `/mobile/getSeat?classroom_id=${this.chooseClassId}`,
                    success: res => {
                        this.list = 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()
                    }
                })
            }
        }
    }
</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 {
            flex: 1;
            box-sizing: border-box;

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

                display: flex;
                justify-content: center;
            }
            
            .ranked-item-tr:last-child {
                margin-bottom: 0;
            }

            .active {
                background: #ffffff85;
            }
        }

        .ranked-item:nth-child(1n) {
            margin-right: 0;
            margin-left: 10px;
        }

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

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

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