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>
            </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;">
                    <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>
        </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="'https://zhxy.obs.cn-hz1.ctyun.cn:443/static/student_icon/'+ (index1%7) +'.png'" mode=""></image>

                        <view class="stu-tag text-center 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>

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

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