zhxy-desk/pages/studentRanked/components/random-roll-call.vue

<template>
    <el-dialog :visible.sync="show" title="随机点名" custom-class="content" center :close-on-click-modal="false"
        style="background-color: #00142f63;backdrop-filter: blur(4px);" width="640px">

        <view style="min-height: 250px;" class="ui-flex-center ui-flex-row">
            <view class="text-center user-item" v-for="(item, index) in viewList" :key="item.id" @click="toCheck(item)">
                <text v-if="!item.isEmpty" class="user-check" :class="[checkList.includes(item.id) ? 'el-icon-success' : 'el-icon-circle-check']"></text>
                <el-avatar :size="70" :src="item.student_cartoon_photo"></el-avatar>
                <view class="f34 text-center txt-white">{{item.title}}</view>
            </view>
        </view>

        <view class="text-center ui-mt40">
            <el-input-number v-model="num" :min="1" @change="numChange" label="确认人数"></el-input-number>
            <el-button class="ui-ml20" type="" @click="makeRandom">确认人数</el-button>
            <el-button class="ui-ml20" type="primary" @click="$emit('comment', stuList)">批量点评</el-button>
        </view>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            list: {},
        },
        data() {
            return {
                show: false,
                num: 3,
                stuList: [],
                checkList : [],
            }
        },
        computed: {
            viewList() {
                let list = [];
                for (var i = 0; i < this.num; i++) {
                    if (this.stuList[i]) {
                        list.push(this.stuList[i])
                    } else {
                        list.push({
                            isEmpty : true,
                            id: i,
                            student_cartoon_photo: 'https://zhxy.obs.cn-hz1.ctyun.cn/static/student_icon/B6.png',
                            title: '匿名'
                        })
                    }
                }
                return list;
            }
        },
        methods: {
            open() {
                this.show = true;
            },
            numChange(e){
                this.stuList = [];
                this.checkList = [];
            },
            toCheck(item){
                let index = this.checkList.indexOf(item.id)
                if (index >= 0) {
                    this.checkList.splice(index, 1);
                } else {
                    this.checkList.push(item.id);
                }
            },
            makeRandom() {
                this.checkList = [];
                let max = this.list.length - 1;
                let numList = this.generateUniqueRandomNumbers(this.num, 0, max);
                this.stuList = [];
                this.viewList.forEach((item, index) => {
                    setTimeout(() => {
                        this.stuList.push(this.list[numList[index]])
                        this.checkList.push(this.list[numList[index]].id);
                    }, 40 * index);
                })
            },
            // 生成随机数
            makeRandomNum(max) {
                let min = 1;
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            // 生成不同数值的随机数
            generateUniqueRandomNumbers(count, min, max) {
                let result = [];
                while (result.length < count) {
                    let randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
                    if (result.indexOf(randomNum) === -1) {
                        result.push(randomNum);
                    }
                }
                return result;
            },
            
        }
    }
</script>

<style>
    /deep/ .content {
        background-image: url('https://zhxy.obs.cn-hz1.ctyun.cn:443/static/desk_bg/class_bj.jpg');
        background-size: auto;
        border: 1px solid #0d5396;
    }

    /deep/ .el-dialog__header {
        background: #022c5a80;
        border-bottom: 2px solid #051d37;
    }

    /deep/ .el-dialog__title {
        color: #fff;
    }

    /deep/ .el-dialog__body {
        background-color: rgba(255, 255, 255, .12);
    }
    
    .user-check{
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: red;
        background-color: #fff;
        border-radius: 100px;
        overflow: hidden;
    }
    .el-icon-success{
        color: #e61010;
    }
    .el-icon-circle-check{
        color: #d1d1d1;
    }
    .user-item {
        /* float: left; */
        position: relative;
        margin: 20px;
        cursor: pointer;
    }
</style>