幸运大抽奖案例 - 博客详情

幸运大抽奖案例
代码如下：
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>陕西科技大学-数学与数据科学学院迎新晚会抽奖程序</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet"
      href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css">

  </head>
  <div id="app">
    <el-container>
      <el-header>2023年数学与数据科学学院-新年晚会抽奖程序</el-header>

      <el-row style="margin: 0px auto;">
        <el-tag type="danger" v-for="(stu,index) in studentsList">{{stu}}</el-tag>
      </el-row>

      <el-main>
        <el-table :data="prizeData" style="width:60%">
          <el-table-column prop="levelName" label="奖项" width="180">
          </el-table-column>
          <el-table-column prop="number" label="数量" width="80">
          </el-table-column>
          <el-table-column prop="name" label="奖品" width="180">
          </el-table-column>
          <el-table-column prop="result" label="中奖结果">
          </el-table-column>
          <el-table-column fixed="right" width="60" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="draw(scope.$index,scope.row)" v-show="scope.$index==currentLevel"
                size="small">抽奖
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="saveResult" :disabled="!canSaveResult">保存中奖结果</el-button>
        </div>

        <div class="drawlotto" v-show="!isHidden">
          <div>
            <h3 style="color:#666">{{currentChineseLevel}}等奖抽奖面板(还剩:{{counter}}人)</h3>
          </div>
          <div style="font-size: xx-large;text-align: center">
            {{currentRandomName}}
          </div>
          <div>
            <el-button @click="getRandomStudentName">开始</el-button>
          </div>
        </div>
      </el-main>

      <el-footer>华清远见西安中心 版权所有&copy;2018-2023 &nbsp;&nbsp;作者：西蒙牛</el-footer>
    </el-container>
  </div>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        studentsList: ['李四 ', '王五 ', '赵六 ', '孙琦 ', '李白 ', '刘备 ', '曹操 ', '关羽 ', '赵云 ', '孙权 ', '郭靖 ', '黄蓉 ',
          '张飞 ', '黄忠 ', '夏侯惇 ', '洪七公 ', '黄药师 ', '周伯通 ', '欧阳锋 ', '王重阳 ', '令狐冲 ', '任盈盈 '
        ],
        prizeData: [{
          year: '2023',
          levelName: '一等奖',
          number: 1,
          name: '金士顿64G高速U盘',
          result: []
        }, {
          year: '2023',
          levelName: '二等奖',
          number: 3,
          name: '裸机罗技鼠标垫一张',
          result: []

        }, {
          year: '2023',
          levelName: '三等奖',
          number: 10,
          name: '安慕希酸奶一瓶',
          result: []
        }],
        currentChineseLevel: '三', //当前中文抽奖奖品等级
        isHidden: true, // 抽奖面板是否隐藏，页面初始化完毕后时应该隐藏
        currentLevel: -1, //当前抽奖奖品等级
        currentRandomName: '', //每次抽取出的随机学生名字
        counter: -1, //当前计数器
        canSaveResult: false //能否保存中奖结果
      },
      computed: {

      },
      mounted() {
        this.currentLevel = this.prizeData.length - 1;
        this.counter = this.prizeData[this.currentLevel].number;
      },

      methods: {
        draw: function(index, row) {
          console.log(index);
          console.log(row);
          console.log(this.counter);
          switch (index) {
            case 0:
              this.currentChineseLevel = '一';
              break;
            case 1:
              this.currentChineseLevel = '二';
              break;
            case 2:
              this.currentChineseLevel = '三';
              break;
            case 3:
              this.currentChineseLevel = '四';
              break;
          }
          this.isHidden = false;
        },

        getRandomStudentName: function() {
          if (this.counter <= 0) {
            this.$alert('该奖段名单已经抽完！', '提示信息', {
              confirmButtonText: '确定'
            })
            return;
          }
          let pos = parseInt(Math.random() * 1000) % this.studentsList.length;
          console.log("随机下标是：" + pos);
          this.currentRandomName = this.studentsList[pos];
          this.prizeData[this.currentLevel].result.push(this.currentRandomName);
          this.counter--;
          this.removeStudentsFromList(pos);

          if (this.counter == 0) {
            this.currentLevel--;
            if (this.currentLevel >= 0) {
              this.counter = this.prizeData[this.currentLevel].number;
            } else {
              this.canSaveResult = true;
            }
            this.isHidden = true;
            this.currentRandomName = '';
            //console.log("currentLevel改变了："+this.currentLevel);
          }
        },

        removeStudentsFromList: function(pos) {
          this.studentsList.splice(pos, 1);
        },
        saveResult: function() {
          console.log('保存中奖结果！');
          console.log(this.prizeData);
        }

      }
    })
  </script>

  <style>
    .drawlotto {
      width: 60%;
      margin: 0px auto;
      background: white;
      border-radius: 12px;
      border: 2px solid #CCC;
    }

    .el-table {
      margin: 0px auto;
      border-radius: 12px;
      border: 2px solid #CCC;
    }

    .el-header,
    .el-footer {
      background-color: #FF6600;
      color: #F8F8FF;
      text-align: center;
      line-height: 60px;
    }

    .el-header {
      font-size: xx-large;
      text-shadow: 0px 2px 1px #83ACDB;
    }

    .el-footer {
      font-size: smaller;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 70px;
    }
  </style>

</html>