抽奖·

59e5a7ed · 华国豪 · 5638ff35 · 59e5a7ed · 59e5a7ed · 59e5a7ed
Commit 59e5a7ed authored Jan 03, 2020 by 华国豪 🙄
8 changed files
--- a/index.html
+++ b/index.html
@@ -5,6 +5,8 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
+    <script src="/static/js/three.min.js"></script>
+    <script src="/static/js/CSS3DRenderer.min.js"></script>
    <title>四川和平国际旅行社</title>
  </head>
  <body>

--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
    "element-ui": "^2.13.0",
    "signalr": "^2.4.1",
    "socket.io-client": "^2.2.0",
-    "three": "^0.111.0",
    "vue": "^2.5.2",
    "vue-baberrage": "^2.1.9",
    "vue-router": "^3.0.1",

--- a/src/assets/css/LuckDraw.css
+++ b/src/assets/css/LuckDraw.css
@@ -25,17 +25,17 @@
    background-repeat: no-repeat;
    position: relative;
    left: 1px;
-    top: 10px;
+    top: -16px;
 }
 .container .box{
-    width: 40%;
+    width: 48%;
-    height: 72%;
+    height: 50%;
    background: url(/static/image/draw/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    left: 50%;
-    top: 50%;
+    top: 29%;
    transform: translate(-50%, -50%);
 }
 .container .box .title {
@@ -49,12 +49,12 @@
    position: absolute;
    left: 50%;
    margin-left: -150px;
-    top: 38px;
+    top: 26px;
    font-size: 3.4rem;
 }
 .jiangpin-box{
    width: 100%;
-    margin-top: -4rem;
+    margin-top: -7rem;
 }
 .jiangpin-box p {
    text-align: center;
@@ -64,7 +64,7 @@
 }
 .jiangpin-box .img-box{
    width: 230px;
-    height: 358.1px;
+    height: 230px;
    background: url(/static/image/draw/award_box.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
@@ -75,7 +75,7 @@
 }
 .jiangpin-box .img-box img{
    width: 180px;
-    height: 290.1px;
+    height: 180px;
    border-radius: 50%;
 }
 .join-total-box{
@@ -88,26 +88,28 @@
    padding: 0 2rem;
    box-sizing: border-box;
    position: absolute;
-    top: 70px;
+    top: 45px;
 }
 .join-total-box span{
    color: #eaa30a;
 }
 .choujiang-btn{
    width: 100%;
+    position: absolute;
+    bottom: 0;
 }
 .choujiang-btn div{
-    height: 80px;
+    height: 64px;
-    width: 170px;
+    width: 196px;
    background: url(/static/image/draw/btn_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
-    margin: 60px auto 0 auto;
+    margin: 16px 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: 80px;
+    line-height: 64px;
    cursor: pointer;
    position: relative;
 }
@@ -162,15 +164,16 @@
 }
 .award-ctrl{
    position: absolute;
-    bottom: 1rem;
+    bottom: .5rem;
    left: 1rem;
    color: #6a6a6a;
+    z-index: 30;
 }
 .award-ctrl .iconfont{
    cursor: pointer;
 }
 .w60{
-    width: 60px;
+    width: 68px;
 }
 .award-in{
    width: 100%;
@@ -191,3 +194,112 @@
    background-color: red;
    animation: head_move1 4s infinite ease;
 }
+#container {
+    height: 400px;
+}
+.box.box_2 .jiangpin-box {
+    position: absolute;
+    top: 85px;
+    z-index: 20;
+}
+.box.box_2 .jiangpin-box .img-box{
+    width: 100px;
+    height: 100px;
+}
+.box.box_2 .jiangpin-box .img-box img{
+    width: 80px;
+    height: 80px;
+}
+.f2{
+    font-size: 2rem !important;
+}
+.f2b{
+    font-size: 2.4rem !important;
+}
+.pp-box{
+    width: 100%;
+    height: 52%;
+    margin-top: -40px;
+    -webkit-mask-image: url(/static/image/draw/mask.png);
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-image: url(/static/image/draw/mask.png);
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+.pp-box .people {
+    width: 160px;
+    height: 160px;
+    overflow: hidden;
+    font-size: 1.4rem;
+    color: #dbe7f7;
+    position: relative;
+    transition: all .35s;
+    -webkit-transition: all .35s;
+    -moz-transition: all .35s;
+    -ms-transition: all .35s;
+    -o-transition: all .35s;
+    text-align: center;
+    z-index: 1;
+}
+.pp-box .people .people-div{
+    width: 120px;
+    height: 120px;
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
+}
+.pp-box .people .people-div img{
+    width: 80%;
+    height: 80%;
+    margin-top: 10%;
+    border-radius: 50%;
+}
+.people-div-bs{
+    width: 100%;
+    height: 100%;
+    background: url(/static/image/draw/head_box.png) no-repeat;
+    background-size: 100% 100%;
+    padding: 1px;
+    position: absolute;
+    animation: circleLeft 3s infinite linear;
+    top: 0;
+}
+.pp-box .people .people-name {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    font-size: 2rem;
+    margin: 0 auto;
+    line-height: 160%;
+    font-weight: bold;
+    width: 80%;
+    text-align: center;
+    color: #ffff72;
+    text-shadow: #ff7a4d 1px 1px 5px, #ff7a4d 0 1px 5px, #ff7a4d 1px 0 5px, #ff7a4d 1px 1px 5px;
+}
+@keyframes circleLeft {
+	0% {
+		transform: rotate(0)
+	}
+	100% {
+		transform: rotate(-360deg)
+	}
+}
+@-webkit-keyframes circleLeft {
+	0% {
+		transform: rotate(0)
+	}
+	100% {
+		transform: rotate(-360deg)
+	}
+}
\ No newline at end of file
--- a/src/components/playGame/LuckDraw.vue
+++ b/src/components/playGame/LuckDraw.vue
@@ -4,20 +4,20 @@
      <div class="bg_video_box">
        <video src="/static/video/cjbj1.mp4" autoplay="autoplay" muted="muted" loop="loop" ref="homeBGvideo"></video>
      </div>
+    </div>
    <div class="container">
        <!-- 未开始 -->
-        <div class="box" v-if="awardData[awardIndex].nameList.length === 0 && awardNo">
+        <div class="box" v-if="awardData.length && awardData[awardIndex].nameList.length === 0 && awardNo">
          <div class="jinbian"></div>
          <p class="title">幸运抽奖</p>
          <div class="join-total-box">
            <div>
-              <span>中奖人数：</span>{{awardData[awardIndex].nameList.length}}
+              <span>中奖人数：</span>{{awardData.length &&  awardData[awardIndex].nameList.length}}
            </div>
            <div>
              <span>参与人数：</span>{{dataList2.length}}
            </div>
          </div>
          <div class="jiangpin-box" >
            <p>{{awardData[awardIndex].name}}</p>
            <div class="img-box">
@@ -26,11 +26,11 @@
            <p>{{awardData[awardIndex].proName}}</p>
          </div>
          <div class="award-ctrl">
-            <span class="iconfont iconzuosanjiaoxing" @click="awardIndex === 0 ? '' : switchAward(1)"></span>
+            <span class="iconfont iconzuosanjiaoxing" @click="switchAward(1)"></span>
            <span>一次抽取</span>&nbsp;&nbsp;
            <el-select v-model="awardPP" class="w60">
              <el-option
-                v-for="item in awardData[awardIndex].options"
+                v-for="item in awardData[awardIndex].maxNum"
                :key="item"
                :label="item"
                :value="item">
@@ -38,19 +38,59 @@
            </el-select>
            &nbsp;&nbsp;
            <span>人</span>
-            <span class="iconfont iconyousanjiaoxing"  @click="awardIndex === awardData.length-1 ? '' : switchAward(2)"></span>
+            <span class="iconfont iconyousanjiaoxing"  @click="switchAward(2)"></span>
          </div>
          <div class="choujiang-btn">
            <div @click="awardGo()"><span class="btn-light"></span>开始抽奖</div>
          </div>
        </div>
        <!-- 抽奖中 -->
-        <div v-if="awardIn" class="award-in">
+        <div v-show="awardIn" id="lottery3d-stage"></div>
-          <img v-for="item in dataList2" :class="item.class" :src="item.photo" alt="">
+        <!-- 抽奖后 显示中奖名单 -->
+        <div class="box box_2" v-if="(awardData.length && awardData[awardIndex].nameList.length !== 0 && !awardIn) || awardOut">
+          <div class="jinbian"></div>
+          <div class="join-total-box">
+            <div>
+              <span>中奖人数：</span>{{awardData.length &&  awardData[awardIndex].nameList.length}}
            </div>
-        <!-- 抽奖后 -->
+            <div>
-        <div v-if="awardOut">
+              <span>参与人数：</span>{{dataList2.length}}
+            </div>
+          </div>
+          <div class="jiangpin-box" >
+            <div class="img-box">
+              <img :src="awardData[awardIndex].img" alt="">
+            </div>
+            <p class="f2">{{awardData[awardIndex].proName}}</p>
+            <p class="f2b">{{awardData[awardIndex].name}}</p>
+          </div>
+          <div class="pp-box">
+            <div class="people" v-for="item in awardData[awardIndex].nameList">
+              <div class="people-div">
+                <img :src="item.Img">
+                <div class="people-div-bs">
+              </div>
+              </div>
+              <p class="people-name">{{item.EmpName}}</p>
+            </div>
+          </div>
+          <div class="award-ctrl">
+            <span class="iconfont iconzuosanjiaoxing" @click="switchAward(1)"></span>
+            <span>一次抽取</span>&nbsp;&nbsp;
+            <el-select v-model="awardPP" class="w60">
+              <el-option
+                v-for="item in awardData[awardIndex].maxNum"
+                :key="item"
+                :label="item"
+                :value="item">
+              </el-option>
+            </el-select>
+            &nbsp;&nbsp;
+            <span>人</span>
+            <span class="iconfont iconyousanjiaoxing"  @click="switchAward(2)"></span>
+          </div>
+          <div class="choujiang-btn">
+            <div @click="awardGo()"><span class="btn-light"></span>开始抽奖</div>
          </div>
        </div>
      </div>
@@ -76,51 +116,18 @@ export default {
      },
      awardPP: 1,
      awardIndex: 0,
-      awardData: [
+      awardData: [],
-        {
+      dataList2: [],
-          name: '一等奖',
-          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: [],
-          options: [1,2,3,4,5,6,7,8,9,10]
-        },
-        {
-          name: '二等奖',
-          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: [],
-          options: [1,2,3,4,5,10,20]
-        },
-        {
-          name: '三等奖',
-          maxNum: 30,
-          proName: '耳机',
-          id: 3,
-          img: 'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1939050805.jpg',
-          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,
+      camera: '',
-      moveIndex: 0,
+      scene: '',
-      classIndex: 1
+      cards: [],
+      renderer: null,
+      speed: 50,
+      stageStop: false,
+      AwardId: ''
    }
  },
  created () {
@@ -145,33 +152,119 @@ export default {
        })
        that.dataList2 = data
      });
+      that.$PROXY.invoke("GetLottery", '', '').done(data => {
+        data.map(x=>{
+          let obj = {
+            name: x.n,
+            maxNum: Number(x.a),
+            proName: x.award,
+            id: x.i,
+            img: x.img,
+            nameList: JSON.parse(x.lotteryHistoryList)
+          }
+          that.awardData.push(obj)
+        })
+      })
    }, 2000)
+    // 空格键结束抽奖
+    document.onkeydown = function(e){
+      var keyNum = window.event ? e.keyCode :e.which;
+      if(keyNum==32){ 
+      }
+    }
  },
  methods: {
+    init() {
+      let $this = this;
+      $this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
+      $this.camera.position.z = 3500;
+      $this.scene = new THREE.Scene();
+      var k = document.createElement("img");
+      k.className = "headImg";
+      var s;
+      var h = Math.sqrt(50),
+      u = Math.floor(h / 2);
+      for (var p = 0; p < 50; p++) {
+          var x = Math.floor(p / h) % h;
+          var j = (p % h);
+          if (x == u && j == u) {
+              continue
+          }
+          var o = k.cloneNode();
+          o.src = $this.dataList2[p].photo;
+          var m = new THREE.CSS3DSprite(o);
+          var w = window.innerWidth / h,
+          q = window.innerHeight / h;
+          var g = w / q;
+          var l = 300,
+          t = l * g;
+          m.position.x = (j * w - window.innerWidth / 2 + w / 2) + (j - 2) * t;
+          m.position.y = (x * q - window.innerHeight / 2 + q / 2) * -1 - (x - 2) * l;
+          m.position.z = -$this.getRandom(26000, 50000);
+          $this.scene.add(m);
+          $this.cards.push(m)
+      }
+      $this.renderer = new THREE.CSS3DRenderer();
+      $this.renderer.setSize(window.innerWidth, window.innerHeight);
+      $this.renderer.domElement.style.position = "absolute";
+      document.getElementById("lottery3d-stage").appendChild($this.renderer.domElement);
+      $this.animate()
+    },
+    animate() {
+      let $this = this;
+      requestAnimationFrame(function() {
+        $this.animate()
+      });
+      $this.speed -= 0.8;
+      if ($this.speed < 400) {
+        $this.speed = 400
+      }
+      var g = $this.cards.length;
+      if ($this.stageStop === false) {
+          for (var j = 0; j < g; j++) {
+              var h = $this.cards[j];
+              h.position.z += $this.speed;
+              if (h.position.z > 3500) {
+                  var l = $this.dataList2[$this.getRandom(0, $this.dataList2.length)];
+                  if (l) {
+                      h.element.src = l.photo;
+                      h.position.z = -$this.getRandom(26000, 50000)
+                  }
+              }
+          }
+      }
+      $this.renderer.render($this.scene, $this.camera)
+    },
+    getRandom(d, a) {
+        var b = a - d;
+        var c = Math.random() * b + d;
+        return parseInt(c, 10)
+    },
    headMove: function () {
+      this.init()
      let $this = this 
-      setTimeout(x=>{
+      $this.$PROXY.invoke("GetLottery", $this.awardData[$this.awardIndex].id, $this.awardPP).done(data => {
-        $this.dataList2[$this.moveIndex].class = `head1 stylie${$this.classIndex}`
+        console.log(data)
-        $this.classIndex++
+      })
-        if ($this.classIndex > 8 ){
-          $this.classIndex = 1
-        }
-        $this.moveIndex++
-        $this.headMove()
-      }, 100)
    },
    // 启动抽奖
    awardGo: function () {
+      if (this.awardIn) return
      this.awardNo = false
      this.awardIn = true
      this.headMove()
    },
    switchAward: function (type) {
+      console.log(type, this.awardIndex )
      if (type === 1) {
+        if (this.awardIndex === 0) return
        this.awardIndex--
      } else {
+        if (this.awardIndex === this.awardData.length-1) return
        this.awardIndex++
      }
+      this.awardPP = 1
    },
    windowResize: function () {
      let WindowW = window.innerWidth
@@ -184,6 +277,16 @@ export default {
  }
 }
 </script>
-<style scoped>
+<style>
 @import "../../assets/css/LuckDraw.css";
+#lottery3d-stage>div{
+    height: calc(100vh) !important;
+}
+.headImg{
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    border: 2px solid #fce3a0;
+    box-shadow: 0 0 18px 3px #97312d;
+}
 </style>
--- a/src/plugin/signalr.js
+++ b/src/plugin/signalr.js
@@ -9,7 +9,7 @@ const HUB_API = 'http://192.168.2.65:7838/signalr';
 // 建立连接
 export function startConnection() {
    HUB = $.hubConnection(HUB_API, {
-        qs: `i=888888&n=罗超&p=${encodeURIComponent("http://imgfile.oytour.com/New/Upload/User/20191018150051176.png")}`
+        qs: `i=888888&n=罗超&e=2020-01-01&p=${encodeURIComponent("http://imgfile.oytour.com/New/Upload/User/20191018150051176.png")}`
    })
    let PROXY = HUB.createHubProxy(HUBNAME)
    HUB.start().done((connection) => {

--- a/static/image/draw/head_box.png
+++ b/static/image/draw/head_box.png
--- a/static/js/CSS3DRenderer.min.js
+++ b/static/js/CSS3DRenderer.min.js
+THREE.CSS3DObject=function(a){THREE.Object3D.call(this);this.element=a;this.element.style.position="absolute";this.addEventListener("removed",function(){if(this.element.parentNode!==null){this.element.parentNode.removeChild(this.element)}})};THREE.CSS3DObject.prototype=Object.create(THREE.Object3D.prototype);THREE.CSS3DObject.prototype.constructor=THREE.CSS3DObject;THREE.CSS3DSprite=function(a){THREE.CSS3DObject.call(this,a)};THREE.CSS3DSprite.prototype=Object.create(THREE.CSS3DObject.prototype);THREE.CSS3DSprite.prototype.constructor=THREE.CSS3DSprite;THREE.CSS3DRenderer=function(){console.log("THREE.CSS3DRenderer",THREE.REVISION);var d,g;var n,l;var m=new THREE.Matrix4();var a={camera:{fov:0,style:""},objects:{}};var i=document.createElement("div");i.style.overflow="hidden";this.domElement=i;var j=document.createElement("div");j.style.WebkitTransformStyle="preserve-3d";j.style.MozTransformStyle="preserve-3d";j.style.transformStyle="preserve-3d";i.appendChild(j);var c=/Trident/i.test(navigator.userAgent);this.setClearColor=function(){};this.getSize=function(){return{width:d,height:g}};this.setSize=function(q,p){d=q;g=p;n=d/2;l=g/2;i.style.width=q+"px";i.style.height=p+"px";j.style.width=q+"px";j.style.height=p+"px"};function o(p){return Math.abs(p)<1e-10?0:p}function k(p){var q=p.elements;return"matrix3d("+o(q[0])+","+o(-q[1])+","+o(q[2])+","+o(q[3])+","+o(q[4])+","+o(-q[5])+","+o(q[6])+","+o(q[7])+","+o(q[8])+","+o(-q[9])+","+o(q[10])+","+o(q[11])+","+o(q[12])+","+o(-q[13])+","+o(q[14])+","+o(q[15])+")"}function f(p,s){var q=p.elements;var r="matrix3d("+o(q[0])+","+o(q[1])+","+o(q[2])+","+o(q[3])+","+o(-q[4])+","+o(-q[5])+","+o(-q[6])+","+o(-q[7])+","+o(q[8])+","+o(q[9])+","+o(q[10])+","+o(q[11])+","+o(q[12])+","+o(q[13])+","+o(q[14])+","+o(q[15])+")";if(c){return"translate(-50%,-50%)translate("+n+"px,"+l+"px)"+s+r}return"translate(-50%,-50%)"+r}function b(q,v,w){if(q instanceof THREE.CSS3DObject){var u;if(q instanceof THREE.CSS3DSprite){m.copy(v.matrixWorldInverse);m.transpose();m.copyPosition(q.matrixWorld);m.scale(q.scale);m.elements[3]=0;m.elements[7]=0;m.elements[11]=0;m.elements[15]=1;u=f(m,w)}else{u=f(q.matrixWorld,w)}var s=q.element;var t=a.objects[q.id]&&a.objects[q.id].style;if(t===undefined||t!==u){s.style.WebkitTransform=u;s.style.MozTransform=u;s.style.transform=u;a.objects[q.id]={style:u};if(c){a.objects[q.id].distanceToCameraSquared=e(v,q)}}if(s.parentNode!==j){j.appendChild(s)}}for(var r=0,p=q.children.length;r<p;r++){b(q.children[r],v,w)}}var e=function(){var q=new THREE.Vector3();var p=new THREE.Vector3();return function(s,r){q.setFromMatrixPosition(s.matrixWorld);p.setFromMatrixPosition(r.matrixWorld);return q.distanceToSquared(p)}}();function h(r){var p=Object.keys(a.objects).sort(function(t,s){return a.objects[t].distanceToCameraSquared-a.objects[s].distanceToCameraSquared});var q=p.length;r.traverse(function(t){var s=p.indexOf(t.id+"");if(s!==-1){t.element.style.zIndex=q-s}})}this.render=function(s,r){var p=r.projectionMatrix.elements[5]*l;if(a.camera.fov!==p){i.style.WebkitPerspective=p+"px";i.style.MozPerspective=p+"px";i.style.perspective=p+"px";a.camera.fov=p}s.updateMatrixWorld();if(r.parent===null){r.updateMatrixWorld()}var t="translateZ("+p+"px)"+k(r.matrixWorldInverse);var q=t+"translate("+n+"px,"+l+"px)";if(a.camera.style!==q&&!c){j.style.WebkitTransform=q;j.style.MozTransform=q;j.style.transform=q;a.camera.style=q}b(s,r,t);if(c){h(s)}}};
\ No newline at end of file
--- a/static/js/three.min.js
+++ b/static/js/three.min.js