lw_test/app/home/view/select/index.html

{extend name="public/base_el"/}
{block name="css"}
<style>
    .box {
        width: 800px;
        margin: 0 auto;
    }

    .title {
        margin-top: 50px;
        text-align: center;
        font-size: 24px;
        padding-bottom: 50px;
    }

    .name-list {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .name-list .name {
        width: 266px;
        text-align: center;
        margin-top: 20px;
        font-size: 24px;
    }
</style>
{/block}
{block name="body"}
<div class="box">
    <div class="input_number" v-show="showBox == 'number'">
        <div class="title">请输入人数</div>
        <el-row>
            <el-col :span="12" :offset="6">
                <el-form-item label="抽取人数">
                    <el-input v-model="number" placeholder="请输入抽取人数"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <div style="margin-top:50px;text-align: center;">
            <el-button type="primary" @click="toSelect">提交</el-button>
            <el-button type="primary" @click="onRest">重置</el-button>
        </div>
    </div>
    <div class="select_name" v-show="showBox == 'select'">
        <div class="title">抽取中奖人员</div>
        <div class="name-list">
            <div class="name" v-for="item in list_now">{{item}}</div>
        </div>
        <div style="margin-top:50px;text-align: center;">
            <el-button type="primary" @click="onStart" v-show="status == 'unstart'">开始</el-button>
            <el-button type="success" @click="onEnd" v-show="status == 'start'">确定</el-button>
            <el-button type="danger" @click="onBack" v-show="status == 'end'">返回</el-button>
        </div>
    </div>

    <div style="margin-top: 10px;">
        已排除人员：
        <span  v-for="item in ext_list">
            <el-tag type="danger" style="margin-left: 10px;margin-top: 5px;">{{item}}</el-tag>
        </span>
    </div>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.showBox = Vue.ref('number');
        base.number = Vue.ref(3);
        base.list = Vue.ref({$list});
        base.list_now = Vue.ref([]);
        base.ext_list = Vue.ref([]);
        base.set = null;
        base.status = Vue.ref('unstart');

        base.toSelect = () => {
            base.showBox.value = 'select';
            base.status.value = 'unstart';
            const { selected, rest } =base.getRandomUniqueItems(base.list.value, base.number.value);
            base.list_now.value = selected;
        }

        base.onRest = () => {
            location.reload();
        }

        base.onStart = () => {
            if (base.number.value > base.list.value.length) {
                alert('剩余人数不满足需要中奖人数');
                return false;
            }
            base.status.value = 'start';
            base.set = setInterval(() => {
                const { selected, rest } =base.getRandomUniqueItems(base.list.value, base.number.value);
                base.list_now.value = selected;
            },100)
        }

        base.onEnd = () => {
            clearInterval(base.set);
            const { selected, rest } =base.getRandomUniqueItems(base.list.value, base.number.value);
            base.list_now.value = selected;
            base.list.value = rest;
            base.ext_list.value = [...base.ext_list.value,...selected];
            base.status.value = 'end'
        }

        base.onBack = () => {
            base.showBox.value = 'number';
        }

        base.getRandomUniqueItems = (array, count) => {
            const shuffled = [...array];

            // 只需打乱前 count 个位置即可（优化版 Fisher-Yates）
            for (let i = 0; i < count; i++) {
                const j = Math.floor(Math.random() * (array.length - i)) + i;
                [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
            }
            // 前 count 个是随机选出的，后面的是剩余的
            const selected = shuffled.slice(0, count);
            const rest = shuffled.slice(count);

            return {selected, rest};
        }

        return base;
    }
</script>
{/block}