完成

README.md

-# 2019
+## 2018-2019年度颁奖页
 
-> A Vue.js project
+luckdraw2019
 
-## Build Setup
+---
 
-``` bash
-# install dependencies
-npm install
+## 启动项目
 
-# serve with hot reload at localhost:8080
-npm run dev
+* clone 下来项目后先装好相关依赖
+  * `npm install`
 
-# build for production with minification
-npm run build
+* 然后运行下面方法启动项目
+  * `npm run dev`
 
-# build for production and view the bundle analyzer report
-npm run build --report
+---
 
-# run unit tests
-npm run unit
+## 维护
 
-# run e2e tests
-npm run e2e
+* 该项目为年度颁奖页面，无需后期维护
 
-# run all tests
-npm test
-```
+---
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+## 抽奖原理
+
+* 抽奖页面为 `luckPrize.vue`。
+* 将所有拥有抽奖资格的人(`this.members`)，制成卡片显示显示在页面上，开始抽奖后，将卡片翻转覆盖。
+* 每张卡片的位置通过 `this.members` 下的属性 `sort` 计算得出。
+* 洗牌时，利用 `Math.random` 方法生成随机数，从而改变 `sort` 影响 `this.members` 的排列顺序。
+
+## 开发者
+
+* QQ：1072907338 (林)
+* Vx：lcb961212 (林)

package-lock.json

@@ -886,6 +886,15 @@
       "resolved": "http://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz",
       "integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8="
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "http://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -5077,7 +5086,6 @@
       "version": "1.6.0",
       "resolved": "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.6.0.tgz",
       "integrity": "sha1-0SRSwDHoxn62Y32GG/x6gJAWeTM=",
-      "dev": true,
       "requires": {
         "debug": "=3.1.0"
       },
@@ -5086,7 +5094,6 @@
           "version": "3.1.0",
           "resolved": "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
           "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -6654,8 +6661,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "http://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz",
-      "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=",
-      "dev": true
+      "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -8475,8 +8481,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",

package.json

@@ -14,6 +14,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "node-sass": "^4.11.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"

src/components/index/switch/home.vue

@@ -40,11 +40,11 @@ export default {
       },
       pageTitle: [
         '年度优秀员工',
-        '年度优秀主管',
+        '小组年度优秀员工',
+        '年度优秀负责人',
         '年度优秀部门',
-        '部门优秀员工',
-        '最佳新人',
-        '运气奖'
+        '最佳新人奖',
+        '幸运奖'
       ]
     }
   }

src/components/index/switch/homepage/awardPage.vue

@@ -5,6 +5,17 @@
       <effect class="effect" :home-data="homeData" :page-title="pageTitle" />
 
       <div class="content">
+        <!-- 年度优秀员工 -->
+        <excellent-employees-of-the-year v-if="homeData.page === 1" />
+        <!-- 小组年度优秀员工 -->
+        <excellent-employees-of-the-group-in-the-year v-if="homeData.page === 2" />
+        <!-- 年度优秀负责人 -->
+        <excellent-person-in-charge-of-the-year v-if="homeData.page === 3" />
+        <!-- 年度优秀部门 -->
+        <excellent-department-of-the-year v-if="homeData.page === 4" />
+        <!-- 最佳新人奖 -->
+        <best-new-artist v-if="homeData.page === 5" />
+        <!-- 幸运奖 -->
         <lucky-prize v-if="homeData.page === 6" />
       </div>
     </div>
@@ -15,11 +26,21 @@
 <script>
 import effect from './effect'
 import luckyPrize from './prizePages/luckyPrize'
+import excellentEmployeesOfTheYear from './prizePages/excellentEmployeesOfTheYear'
+import excellentEmployeesOfTheGroupInTheYear from './prizePages/excellentEmployeesOfTheGroupInTheYear'
+import excellentPersonInChargeOfTheYear from './prizePages/excellentPersonInChargeOfTheYear'
+import bestNewArtist from './prizePages/bestNewArtist'
+import excellentDepartmentOfTheYear from './prizePages/excellentDepartmentOfTheYear'
 
 export default {
   components: {
     effect,
-    luckyPrize
+    luckyPrize,
+    excellentEmployeesOfTheYear,
+    excellentEmployeesOfTheGroupInTheYear,
+    excellentPersonInChargeOfTheYear,
+    bestNewArtist,
+    excellentDepartmentOfTheYear
   },
   props: {
     homeData: {},

src/components/index/switch/homepage/prizePages/bestNewArtist.vue

+<template lang="html">
+  <div class="bestNewArtistVue">
+
+    <characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
+
+  </div>
+</template>
+
+<script>
+import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
+
+export default {
+  components: {
+    characterCard
+  },
+  data () {
+    return {
+      winners: [
+        '龚书浩',
+        '陈青',
+        '余琼'
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bestNewArtistVue{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  .card{}
+}
+</style>

src/components/index/switch/homepage/prizePages/characterCard.vue

+<template lang="html">
+  <div class="characterCardVue">
+
+    <!-- 卡片 -->
+    <div class="cardWrap" :class="{ 'active': show }" @click="show = !show">
+
+      <!-- 卡片正面 -->
+      <div class="positive">
+        <div class="avatarWrap">
+          <div class="avatar" :style="{ 'background-image': `url(static/img/avatar/${name}.png)` }"></div>
+          <div class="lace"></div>
+        </div>
+        <p class="name">{{ name }}</p>
+      </div>
+
+      <!-- 卡片反面 -->
+      <div class="negative"></div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.characterCardVue{
+  transform-style: preserve-3d;
+  /*! autoprefixer: off */
+  perspective: 800px;
+  /* autoprefixer: on */
+  .cardWrap{
+    position: relative;
+    width: 300px;
+    height: 460px;
+    transform-style: preserve-3d;
+    transform: rotateY(-180deg);
+    transition: all 1s ease;
+    &.active{
+      transform: rotateY(0deg);
+    }
+    .positive, .negative{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: #1A1C36;
+      border-radius: 6px;
+      transform-style: preserve-3d;
+      overflow: hidden;
+    }
+    // 卡片正面
+    .positive{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-image: url('~static/img/font-bg.png');
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: 8px 267px;
+      box-shadow: 0 0 40px rgba(61, 201, 249, .5);
+      .avatarWrap{
+        margin: 85px 0;
+        position: relative;
+        .avatar, .lace{
+          position: absolute;
+          background-size: calc(100% + 10px * 2);
+          background-repeat: no-repeat;
+          background-position: center center;
+          transform: translate(-50%, -50%);
+        }
+        .avatar{
+          width: calc(165px * .9);
+          height: calc(165px * .9);
+          border-radius: 50%;
+          box-shadow: 0 0 40px #3ECDFD;
+        }
+        .lace{
+          width: calc(165px * 1.8);
+          height: calc(165px * 1.8);
+          background-image: url('~static/img/lace.png');
+          top: 30px;
+          left: -3px;
+        }
+      }
+      .name{
+        color: #3ECDFD;
+        font-size: 30px;
+        margin-top: 100px;
+        text-shadow: 0 0 8px currentColor;
+      }
+    }
+    // 卡片反面
+    .negative{
+      transform: rotateY(180deg) translateZ(1px);
+      background-image: url('~static/img/card-bg2.gif');
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: calc(50% + 11px) center;
+    }
+  }
+}
+</style>

src/components/index/switch/homepage/prizePages/excellentDepartmentOfTheYear.vue

+<template lang="html">
+  <div class="excellentDepartmentOfTheYearVue">
+
+    <characterCard name="腾讯组" />
+
+  </div>
+</template>
+
+<script>
+import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
+
+export default {
+  components: {
+    characterCard
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.excellentDepartmentOfTheYearVue{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  .card{}
+}
+</style>

src/components/index/switch/homepage/prizePages/excellentEmployeesOfTheGroupInTheYear.vue

+<template lang="html">
+  <div class="excellentEmployeesOfTheGroupInTheYearVue">
+
+    <characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
+
+  </div>
+</template>
+
+<script>
+import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
+
+export default {
+  components: {
+    characterCard
+  },
+  data () {
+    return {
+      winners: [
+        '陈晋豪',
+        '周琴',
+        '章航嘉',
+        '胡旭倩',
+        '沈晓慧',
+        '叶鑫'
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.excellentEmployeesOfTheGroupInTheYearVue{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  height: 100%;
+  .card{
+    width: 33.33%;
+    display: flex;
+    justify-content: center;
+    transform: scale(.7);
+    &:nth-of-type(n + 4){
+      margin-top: -120px;
+    }
+  }
+}
+</style>

src/components/index/switch/homepage/prizePages/excellentEmployeesOfTheYear.vue

+<template lang="html">
+  <div class="excellentEmployeesOfTheYearVue">
+
+    <characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
+
+  </div>
+</template>
+
+<script>
+import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
+
+export default {
+  components: {
+    characterCard
+  },
+  data () {
+    return {
+      winners: [
+        '沈涛',
+        '叶敏霞',
+        '王佳艳'
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.excellentEmployeesOfTheYearVue{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  .card{}
+}
+</style>

src/components/index/switch/homepage/prizePages/excellentPersonInChargeOfTheYear.vue

+<template lang="html">
+  <div class="excellentPersonInChargeOfTheYearVue">
+
+    <characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
+
+  </div>
+</template>
+
+<script>
+import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
+
+export default {
+  components: {
+    characterCard
+  },
+  data () {
+    return {
+      winners: [
+        '陈秋平'
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.excellentPersonInChargeOfTheYearVue{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  .card{}
+}
+</style>

src/components/index/switch/homepage/prizePages/luckyCard.vue

@@ -29,8 +29,11 @@ export default {
   },
   methods: {
     egg (name) {
+      // 文字彩蛋，中奖时会显示在名字后面
       let eggs = {
-        '林程彪': '实锤 (๑•ㅂ•́)و✧'
+        '林程彪': '实锤？！ Σ(っ °Д °;)っ',
+        '钟志苗': '感谢CCTV!',
+        '龚书浩': 'emmmmmmmmmm？'
       }
       if (eggs[name]) {
         return name + '：' + eggs[name]

src/components/index/switch/homepage/prizePages/luckyPrize.vue

@@ -11,6 +11,11 @@
       :style="n.style"
       @luck-draw="luckDraw" />
 
+    <p class="settings" v-if="isStartBtn">
+      <span>抽取名额</span>
+      <input type="number" min="1" max="6" v-model="luckyQuota">
+    </p>
+
     <span class="startBtn" @click="start()" v-if="isStartBtn">开始洗牌</span>
 
   </div>
@@ -27,7 +32,7 @@ export default {
   data () {
     return {
       canDraw: false, // 是否可以翻牌
-      luckyQuota: 3, // 中奖名额
+      luckyQuota: 6, // 中奖名额
       isShowList: false,
       speedList: [
         1500,
@@ -170,6 +175,16 @@ export default {
   .luckyCard{
     position: absolute;
   }
+  .settings{
+    position: absolute;
+    bottom: 55px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 20px;
+    input{
+      width: 40px;
+    }
+  }
   .startBtn{
     position: absolute;
     bottom: 0px;

src/main.js

@@ -7,9 +7,12 @@ import 'static/css/style.ini.css'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import axios from 'axios'
 
 Vue.config.productionTip = false
 
+Vue.prototype.$axios = axios
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',