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">
                <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" label="确认人数"></el-input-number>
            <el-button class="ui-ml20" type="" @click="makeRandom">确认人数</el-button>
            <el-button class="ui-ml20" type="primary" @click="$emit('comment', checkList)">批量点评</el-button>
        </view>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            list: {},
        },
        data() {
            return {
                show: false,
                num: 3,
                checkList: []
            }
        },
        computed: {
            viewList() {
                let list = [];
                for (var i = 0; i < this.num; i++) {
                    if (this.checkList[i]) {
                        list.push(this.checkList[i])
                    } else {
                        list.push({
                            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;
            },
            makeRandom() {
                let max = this.list.length - 1;
                let numList = this.generateUniqueRandomNumbers(this.num, 0, max);
                this.checkList = [];
                this.viewList.forEach((item, index) => {
                    setTimeout(() => {
                        this.checkList.push(this.list[numList[index]])
                    }, 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-item {
        /* float: left; */
        margin: 20px;
    }
</style>