抽奖

src/App.vue

@@ -161,7 +161,7 @@ export default {
 </script>
 
 <style>
-@import url("//at.alicdn.com/t/font_1574056_jsd5ri47jy.css");
+@import url("//at.alicdn.com/t/font_1574056_9kor82kqrdl.css");
 @import "./assets/css/init.css";
 @import "./assets/css/animate.css";
 #app {

src/assets/css/LuckDraw.css

@@ -97,17 +97,17 @@
     width: 100%;
 }
 .choujiang-btn div{
-    height: 100px;
-    width: 184px;
+    height: 80px;
+    width: 170px;
     background: url(/static/image/draw/btn_bg.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    margin: 24px auto 0 auto;
+    margin: 60px auto 0 auto;
     color: #ffff72;
     text-shadow: #ff7a4d 1px 1px 10px, #ff7a4d 0 1px 10px, #ff7a4d 1px 0 10px, #ff7a4d 1px 1px 10px;
     font-size: 3rem;
     text-align: center;
-    line-height: 100px;
+    line-height: 80px;
     cursor: pointer;
     position: relative;
 }
@@ -119,32 +119,111 @@
     height: 100%;
     background: url(/static/image/draw/2.png);
     display: block;
-    -webkit-animation: lightMove .5s 4s infinite ease;
-	animation: lightMove .2s 4s infinite ease;
+    -webkit-animation: lightMove 4s infinite ease;
+    animation: lightMove 4s infinite ease;
 }
 @keyframes lightMove {
-	12.5% {
+	0%,75% {
+        opacity: 0;
         background: url(/static/image/draw/2.png);
     }
-    25% {
+    76.5% {
+        opacity: 1;
+        background: url(/static/image/draw/2.png);
+    }
+    78.5% {
+        opacity: 1;
         background: url(/static/image/draw/3.png);
     }
-    37.5% {
+    82% {
+        opacity: 1;
         background: url(/static/image/draw/4.png);
     }
-    50% {
+    85.5% {
+        opacity: 1;
         background: url(/static/image/draw/5.png);
     }
-    62.5% {
+    89% {
+        opacity: 1;
         background: url(/static/image/draw/6.png);
     }
-    75% {
+    92.5% {
+        opacity: 1;
         background: url(/static/image/draw/7.png);
     }
-    87.5% {
+    96% {
+        opacity: 1;
         background: url(/static/image/draw/8.png);
     }
     100% {
+        opacity: 1;
         background: url(/static/image/draw/9.png);
     }
+}
+.award-ctrl{
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+    color: #6a6a6a;
+}
+.award-ctrl .iconfont{
+    cursor: pointer;
+}
+.w60{
+    width: 60px;
+}
+.award-in{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.head1{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scaleY(1.5);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transition:  all linear 1.5s;
+    background-color: red;
+}
+.head_move1{
+    top: 300%;
+    width: 150px;
+    height: 150px;
+}
+.head_move2{
+    left: 300%;
+    width: 150px;
+    height: 150px;
+}
+.head_move3{
+    left: 300%;
+    top: 60%;
+    width: 150px;
+    height: 150px;
+}
+.head_move4{
+    left: initial;
+    right: 300%;
+    top: 60%;
+    width: 150px;
+    height: 150px;
+}
+.head_move5{
+    left: initial;
+    right: 300%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+}
+.head_move6{
+    left: initial;
+    right: 300%;
+    top: 70%;
+    width: 150px;
+    height: 150px;
 }
\ No newline at end of file

src/assets/js/menuJson.js

@@ -7,11 +7,26 @@ const leftNavMenu = [
     bgm: '/static/audio/bg_m_000.mp3',
   },
   {
-    Class: 'iconfont iconqiandao',
-    Name: '签到',
-    Url: 'SignIn',
-    children: [],
-    bgm: '/static/audio/signIn.mp3',
+    Class: 'iconfont iconjiemu',
+    Name: '开场',
+    Url: '',
+    children: [
+      {
+        Class: 'iconfont icondaojishi',
+        Name: '倒计时',
+        Url: 'CountDown',
+        children: [],
+        bgm: '',
+      },
+      {
+        Class: 'iconfont iconqiandao',
+        Name: '签到',
+        Url: 'SignIn',
+        children: [],
+        bgm: '/static/audio/game_mouse_bg.mp3',
+      },
+    ],
+    bgm: '',
   },
   {
     Class: 'iconfont iconyouxi',
@@ -49,11 +64,11 @@ const leftNavMenu = [
     bgm: '/static/audio/choujiang.mp3',
   },
   {
-    Class: 'iconfont iconzu',
-    Name: '投票',
+    Class: 'iconfont iconstart',
+    Name: '节目单',
     Url: '',
     children: [],
-    bgm: '/static/audio/toupiao.mp3',
+    bgm: '',
   },
   {
     Class: 'iconfont iconpaihangbang',

src/components/PerformRanking.vue

@@ -33,7 +33,7 @@
       </div>
     </div>
     <!-- 投票 -->
-    <div v-else class="PerformRanking">
+    <div v-if="dataObj.type!==0 && ProgramEnd" class="PerformRanking">
       <img class="logo" src="/static/image/jiemu/logo.png" alt="">
       <div class="tit-box">
         <p class="tit yinxiang2020">
@@ -137,6 +137,9 @@ export default {
         this.ProgramEnd = true
         if (this.$refs.homeBGvideo) this.$refs.homeBGvideo.pause()
       }
+      if (this.dataObj.type === 0){
+        this.ProgramEnd = true
+      }
     },
     // 节目重置
     Reset: function () {

src/components/index.vue

@@ -55,9 +55,6 @@ export default {
     this.windowResize()
   },
   mounted () {
-    this.MsgBus.$on('inceptMessage', (msg) => {
-      console.log(msg)
-    })
     const that = this
     window.onresize = () => {
       return (() => {

src/components/pageNav.vue

@@ -72,9 +72,9 @@ export default {
       $this.nextMusic()
     })
     setTimeout(()=>{
-      $this.$PROXY.invoke("SendVoteProgarm", 1).done(m=>{
-        leftNavMenu.map(x=>{
-          if (x.Name === '投票') {
+      $this.$PROXY.invoke("SendVoteProgarm", 1, "").done(m=>{
+        $this.leftNavMenu.map(x=>{
+          if (x.Name === '节目单') {
             let list = []
             m.map(y=>{
               let obj = {
@@ -84,6 +84,7 @@ export default {
                 mv: y.m,
                 brc: y.b,
                 pp: y.p,
+                type: y.type,
                 Url: 'PerformRanking'
               }
               list.push(obj)
@@ -172,8 +173,7 @@ export default {
       }
     },
     goPage: function (obj) {
-      this.MsgBus.$emit('inceptMessage', '666')
-      if (obj.Name === '签到') {
+      if (obj.Name === '签到' && !obj.Id) {
         window.open('http://activity.oytour.com/html/SignIn/signin.html')
         return
       }
@@ -184,7 +184,11 @@ export default {
         })
         return
       }
-      this.MsgBus.$emit('changeBGM', obj.bgm)
+      if(obj.bgm) {
+        this.MsgBus.$emit('changeBGM', obj.bgm)
+      } else {
+        this.MsgBus.$emit('audioPlay', 1)
+      }
       if (!obj.children.length && this.$route.name !== obj.Url) {
         this.$router.push({
           name: obj.Url

src/components/playGame/LuckDraw.vue

@@ -5,7 +5,8 @@
         <video src="/static/video/cjbj1.mp4" autoplay="autoplay" muted="muted" loop="loop" ref="homeBGvideo"></video>
       </div>
       <div class="container">
-        <div class="box">
+        <!-- 未开始 -->
+        <div class="box" v-if="awardData[awardIndex].nameList.length === 0 && awardNo">
           <div class="jinbian"></div>
           <p class="title">幸运抽奖</p>
           <div class="join-total-box">
@@ -13,23 +14,44 @@
               <span>中奖人数：</span>{{awardData[awardIndex].nameList.length}}
             </div>
             <div>
-              <span>参与人数：</span>{{awardData[awardIndex].nameList.length}}
+              <span>参与人数：</span>{{dataList2.length}}
             </div>
           </div>
-          <div class="jiangpin-box" v-if="awardData[awardIndex].nameList.length === 0">
+          
+          <div class="jiangpin-box" >
             <p>{{awardData[awardIndex].name}}</p>
             <div class="img-box">
               <img :src="awardData[awardIndex].img" alt="">
             </div>
             <p>{{awardData[awardIndex].proName}}</p>
           </div>
-          <div v-else>
-
+          <div class="award-ctrl">
+            <span class="iconfont iconzuosanjiaoxing" @click="awardIndex === 0 ? '' : switchAward(1)"></span>
+            <span>一次抽取</span>&nbsp;&nbsp;
+            <el-select v-model="awardPP" class="w60">
+              <el-option
+                v-for="item in awardData[awardIndex].options"
+                :key="item"
+                :label="item"
+                :value="item">
+              </el-option>
+            </el-select>
+            &nbsp;&nbsp;
+            <span>人</span>
+            <span class="iconfont iconyousanjiaoxing"  @click="awardIndex === awardData.length-1 ? '' : switchAward(2)"></span>
           </div>
           <div class="choujiang-btn">
-            <div><span class="btn-light"></span>开始抽奖</div>
+            <div @click="awardGo()"><span class="btn-light"></span>开始抽奖</div>
           </div>
         </div>
+        <!-- 抽奖中 -->
+        <div v-if="awardIn" class="award-in">
+          <img v-for="item in dataList2" :class="item.class" :src="item.photo" alt="">
+        </div>
+        <!-- 抽奖后 -->
+        <div v-if="awardOut">
+
+        </div>
       </div>
     </div>
   </div>
@@ -52,33 +74,53 @@ export default {
         transformScale1: 0,
         transformScale2: 0
       },
+      awardPP: 1,
       awardIndex: 0,
       awardData: [
         {
           name: '一等奖',
-          maxNum: 1,
+          maxNum: 10,
           proName: '电话1',
           id: 1,
           img: 'https://paimgcdn.baidu.com/6A033253EF5FBFE0?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F2018218531.jpg&rz=bxt_2_968_600&v=0',
-          nameList: []
+          nameList: [],
+          options: [1,2,3,4,5,6,7,8,9,10]
         },
         {
           name: '二等奖',
-          maxNum: 10,
+          maxNum: 20,
           proName: '电话2',
           id: 2,
           img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2834960552,2586725046&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=a34f2bae0cfaecb2150ca2d8d67442e2',
-          nameList: []
+          nameList: [],
+          options: [1,2,3,4,5,10,20]
         },
         {
           name: '三等奖',
-          maxNum: 20,
+          maxNum: 30,
           proName: '耳机',
           id: 3,
           img: 'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1939050805.jpg',
-          nameList: []
+          nameList: [],
+          options: [1,2,3,4,5,10,20,30]
         }
-      ]
+      ],
+      dataList2: [
+        {
+          img: 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2988564731,2262824079&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=ad5118c4e0fe7df400c0ebba337753b7',
+          class: 'head1'
+        },
+        {
+          img: 'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1559282698,742202892&fm=58',
+          class: 'head1'
+        }
+      ],
+      awardNo: true,
+      awardIn: false,
+      awardOut: false,
+      testValue: 666,
+      moveIndex: 0,
+      classIndex: 1
     }
   },
   created () {
@@ -91,8 +133,49 @@ export default {
         that.windowResize()
       })()
     }
+    setTimeout(()=>{
+      that.$PROXY.invoke("SendSignins", '1').done(data => {
+        let i = 0
+        data.map(x=>{
+          i++
+          x.class = `head1`
+          if (i > 11) {
+            i = 0
+          }
+        })
+        that.dataList2 = data
+      });
+    }, 2000)
   },
   methods: {
+    headMove: function () {
+      let $this = this
+      setTimeout(x=>{
+        $this.dataList2[$this.moveIndex].class = `head1 head_move${$this.classIndex}`
+        $this.classIndex++
+        if ($this.classIndex > 6 ){
+          $this.classIndex = 1
+        }
+        if ($this.moveIndex!==0) {
+          $this.dataList2[$this.moveIndex-1].class = `head1`
+        }
+        $this.moveIndex++
+        $this.headMove()
+      }, 500)
+    },
+    // 启动抽奖
+    awardGo: function () {
+      this.awardNo = false
+      this.awardIn = true
+      this.headMove()
+    },
+    switchAward: function (type) {
+      if (type === 1) {
+        this.awardIndex--
+      } else {
+        this.awardIndex++
+      }
+    },
     windowResize: function () {
       let WindowW = window.innerWidth
       let WindowH = window.innerHeight

src/plugin/signalr.js

@@ -4,7 +4,7 @@ let PROXY = null;
 
 let HUB = null;
 
-const HUB_API = 'http://192.168.2.66:7838/signalr';
+const HUB_API = 'http://192.168.2.65:7838/signalr';
 
 // 建立连接
 export function startConnection() {

src/router/index.js

@@ -9,6 +9,7 @@ import PerformRanking2 from '@/components/PerformRanking2'
 import Answer from '@/components/playGame/Answer'
 import SignIn from '@/components/SignIn'
 import PerformRanking from '@/components/PerformRanking'
+import CountDown from '@/components/CountDown'
 Vue.use(Router)
 export default new Router({
   routes: [
@@ -28,6 +29,14 @@ export default new Router({
         title: '首页',
         keepAlive: true
       }
+    }, {
+      path: '/CountDown',
+      name: 'CountDown',
+      component: CountDown,
+      meta: {
+        title: '倒计时',
+        keepAlive: false
+      }
     }, {
       path: '/Mouse',
       name: 'Mouse',