SpaceOfCheng
/
wechat
Vērot 3
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 3 Izmaiņu pieprasījumi 0 Laidieni 1 Aktivitāte
Pārlūkot izejas kodu

ytj

yuantianjiao 6 gadus atpakaļ
vecāks
a95fd35a84
revīzija
362bc11a0a
25 mainītis faili ar 1630 papildinājumiem un 668 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 2
    2
      config/index.js
  2. 1
    1
      dist/index.html
  3. 2
    0
      dist/static/css/app.6007a8f11a7cabe0778472191d8bcfeb.css
  4. 1
    0
      dist/static/css/app.6007a8f11a7cabe0778472191d8bcfeb.css.map
  5. 0
    2
      dist/static/css/app.d2f7bd75c017c941e03e9a99feb19cb6.css
  6. 0
    1
      dist/static/css/app.d2f7bd75c017c941e03e9a99feb19cb6.css.map
  7. Binārs
      dist/static/img/indexlogo.66ddd32.jpg
  8. 0
    2
      dist/static/js/app.260a58d569dd508b835c.js
  9. 0
    1
      dist/static/js/app.260a58d569dd508b835c.js.map
  10. 2
    0
      dist/static/js/app.2c14deca9a16434eb54b.js
  11. 1
    0
      dist/static/js/app.2c14deca9a16434eb54b.js.map
  12. 1
    1
      dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map
  13. Binārs
      src/assets/icon.png
  14. Binārs
      src/assets/right.png
  15. 236
    0
      src/components/model1/index.vue
  16. 361
    0
      src/components/model1/page.scss
  17. 259
    0
      src/components/model2/index.vue
  18. 277
    0
      src/components/model2/page.scss
  19. 164
    0
      src/components/model3/index.vue
  20. 244
    0
      src/components/model3/page.scss
  21. 0
    51
      src/page/getCode/getCode.vue
  22. 67
    229
      src/page/index/index.vue
  23. 0
    371
      src/page/index/page.scss
  24. 0
    6
      src/router/index.js
  25. 12
    1
      src/store/app.js

+ 2
- 2
config/index.js Parādīt failu 

@@ -10,7 +10,7 @@ module.exports = {
10 10 
     assetsSubDirectory: 'static',
11 11 
     assetsPublicPath: '/game/luckdraw/',
12 12 
     proxyTable: {
13 
-      '/check-api': {
13 
+      '/api': {
14 14 
         // target: 'https://dp.huiju360.com.cn/hj_operations',
15 15 
         // target: 'http://192.168.0.62:8788', //wf
16 16 
         target: 'http://dev.ycjcjy.com', //dev
 
@@ -42,7 +42,7 @@ module.exports = {
42 42 
      */
43 43
44 44 
     // https://webpack.js.org/configuration/devtool/#development
45 
-    devtool: 'cheap-module-eval-source-map',
45 
+    devtool: 'source-map',
46 46
47 47 
     // If you have problems debugging vue-files in devtools,
48 48 
     // set this to false - it *may* help

+ 1
- 1
dist/index.html Parādīt failu 

@@ -4,4 +4,4 @@
4 4 
         overflow-x: hidden;
5 5 
         overflow-y: scroll;
6 6 
         -webkit-overflow-scrolling: touch;
7 
-      }</style><link href=./static/css/app.d2f7bd75c017c941e03e9a99feb19cb6.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.2a96777d0d5038fab28c.js></script><script type=text/javascript src=./static/js/app.260a58d569dd508b835c.js></script></body></html>
7 
+      }</style><link href=./static/css/app.6007a8f11a7cabe0778472191d8bcfeb.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.2a96777d0d5038fab28c.js></script><script type=text/javascript src=./static/js/app.2c14deca9a16434eb54b.js></script></body></html>

+ 2
- 0
dist/static/css/app.6007a8f11a7cabe0778472191d8bcfeb.css
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 0
dist/static/css/app.6007a8f11a7cabe0778472191d8bcfeb.css.map
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 0
- 2
dist/static/css/app.d2f7bd75c017c941e03e9a99feb19cb6.css
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 0
- 1
dist/static/css/app.d2f7bd75c017c941e03e9a99feb19cb6.css.map
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


Binārs
dist/static/img/indexlogo.66ddd32.jpg Parādīt failu


+ 0
- 2
dist/static/js/app.260a58d569dd508b835c.js
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 0
- 1
dist/static/js/app.260a58d569dd508b835c.js.map
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 2
- 0
dist/static/js/app.2c14deca9a16434eb54b.js
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 0
dist/static/js/app.2c14deca9a16434eb54b.js.map
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map Parādīt failu 

@@ -1 +1 @@
1 
-{"version":3,"sources":["webpack:///webpack/bootstrap 3a70ec7ac0841c986663"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,KAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.3ad1d5771e9b13dbdad2.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 3a70ec7ac0841c986663"],"sourceRoot":""}
1 
+{"version":3,"sources":["webpack:///webpack/bootstrap 8a12b9db6b1eb7477c25"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","p","oe","err","console","error"],"mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,EAAAC,KACQD,EAAAN,EAAAQ,OAAoBF,IAC5BF,EAAAJ,EAAAM,GACAG,EAAAL,IACAG,EAAAG,KAAAD,EAAAL,GAAA,IAEAK,EAAAL,GAAA,EAEA,IAAAD,KAAAF,EACAU,OAAAC,UAAAC,eAAAC,KAAAb,EAAAE,KACAY,EAAAZ,GAAAF,EAAAE,IAIA,IADAL,KAAAE,EAAAC,EAAAC,GACAK,EAAAC,QACAD,EAAAS,OAAAT,GAEA,GAAAL,EACA,IAAAI,EAAA,EAAYA,EAAAJ,EAAAM,OAA2BF,IACvCD,EAAAY,IAAAC,EAAAhB,EAAAI,IAGA,OAAAD,GAIA,IAAAc,KAGAV,GACAW,EAAA,GAIA,SAAAH,EAAAd,GAGA,GAAAgB,EAAAhB,GACA,OAAAgB,EAAAhB,GAAAkB,QAGA,IAAAC,EAAAH,EAAAhB,IACAG,EAAAH,EACAoB,GAAA,EACAF,YAUA,OANAN,EAAAZ,GAAAW,KAAAQ,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAT,EAGAE,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACAhB,OAAAmB,eAAAT,EAAAM,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAX,EAAAiB,EAAA,SAAAZ,GACA,IAAAM,EAAAN,KAAAa,WACA,WAA2B,OAAAb,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAO,EAAAC,GAAsD,OAAA1B,OAAAC,UAAAC,eAAAC,KAAAsB,EAAAC,IAGtDpB,EAAAqB,EAAA,KAGArB,EAAAsB,GAAA,SAAAC,GAA8D,MAApBC,QAAAC,MAAAF,GAAoBA","file":"static/js/manifest.3ad1d5771e9b13dbdad2.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 8a12b9db6b1eb7477c25"],"sourceRoot":""}

Binārs
src/assets/icon.png Parādīt failu


Binārs
src/assets/right.png Parādīt failu


+ 236
- 0
src/components/model1/index.vue Parādīt failu 

@@ -0,0 +1,236 @@
1 
+<style lang="scss" scoped>
2 
+@font-face {
3 
+  font-family: myFont;
4 
+  src: url("https://spaceofcheng.oss-cn-beijing.aliyuncs.com/hkhb.ttf");
5 
+}
6 
+@import "page.scss";
7 
+</style>
8 
+
9 
+<template>
10 
+  <div class="bg mainPage">
11 
+    <img class="bg-img" :src="bg" alt="" width="100%">
12 
+    <transition name="fade">
13 
+      <div class="dialog" v-if="showDialog" @click="close">
14 
+        <div class="box">
15 
+          <img class='dialog-bg' @click.stop="close" :src="dialog" alt="">
16 
+          <div class='dialog-title'>恭喜你！<span>成功获得</span></div>
17 
+          <div class="dialog-name">{{winning}}</div>
18 
+          <img class="qrCode" :src="qrCode" alt="">
19 
+          <div v-if="showBtn" @click="get">
20 
+            <img class="lq" :src="lq" alt="">
21 
+          </div>
22 
+          <div class="desc">长按二维码“城的空间”，进入会员中心查看奖品吧</div>
23 
+        </div>
24 
+      </div>
25 
+    </transition>
26 
+    <div class="turntable">
27 
+      <div :class='{ "round": round }' class="turntable-body">
28 
+        <div v-for='(item, index) in data.prizeList' :key='index' :class='item.class' >
29 
+          <img :src="item.img" alt="">
30 
+          <span :class='item.font' v-html="item.PrizeName">{{item.PrizeName}}</span>
31 
+        </div>
32 
+        <img :src="turntable" alt="" width="100%" height="100%">
33 
+      </div>
34 
+      <img class="pointer"  @click="run" :src="pointer" alt="">
35 
+      <div class="titleText">山的艺墅季 金秋送好礼</div>
36 
+      <img class="down" :src="down" alt="">
37 
+      <img class="yf1" :src="yf1" alt="">
38 
+      <img class="yf2" :src="yf2" alt="">
39 
+      <img class="yf3" :src="yf3" alt="">
40 
+      <img class="yf4" :src="yf4" alt="">
41 
+      <img class="yf5" :src="yf3" alt="">
42 
+      <img class="yf6" :src="yf4" alt="">
43 
+      <img class="hx" :src="blackStar" alt="">
44 
+      <img class="hux" :src="xian" alt="">
45 
+      <img class="sl" :src="sl" alt="">
46 
+      <img class="sl2" :src="sl" alt="">
47 
+      <img class="jx" :src="jx" alt="">
48 
+    </div>
49 
+    <div class="paper">
50 
+      <img :src="paper" alt="" width="100%">
51 
+      <div class="winningList">
52 
+        <div class="title">
53 
+          <img :src="blackStar" alt="">
54 
+          <span>中奖名单</span>
55 
+          <img :src="jt" alt="">
56 
+        </div>
57 
+        <div class="list">
58 
+          <div v-for='(item, index) in  data.list' :key='index'>
59 
+            <img :src="item.UserHeadImg" alt="">
60 
+            <span>
61 
+              <div>{{item.UserName}}</div>
62 
+              <div>{{toolClass.dateFormatM(item.CreateDate)}}</div>
63 
+            </span>
64 
+            <span>{{item.PrizeName}}</span>
65 
+          </div>
66 
+        </div>
67 
+      </div>
68 
+      <div class="rule">
69 
+        <div class="title">
70 
+          <img :src="sy" alt="">
71 
+          <span>活动规则</span>
72 
+          <img :src="jt" alt="">
73 
+        </div>
74 
+        <div class="content">
75 
+          <pre>{{data.prize.LuckdrawRule}}</pre>
76 
+        </div>
77 
+      </div>
78 
+      <img class="bird" :src="bird" alt="">
79 
+      <img class="quan1" :src="quan" alt="">
80 
+      <img class="quan2" :src="quan" alt="">
81 
+      <img class="bl1" :src="bl" alt="">
82 
+      <img class="bl2" :src="bl" alt="">
83 
+      <img class="jx2" :src="jx" alt="">
84 
+    </div>
85 
+  </div>
86 
+</template>
87 
+
88 
+<script>
89 
+import turntable from '@/assets/zhuanpan.png'
90 
+import pointer from '@/assets/zhizhen.png'
91 
+import paper from '@/assets/zhi.png'
92 
+import blackStar from '@/assets/heixing.png'
93 
+import jt from '@/assets/jiantou.png'
94 
+import tx from '@/assets/touxiang.png'
95 
+import sy from '@/assets/shuangyuan.png'
96 
+import bird from '@/assets/xiaoniao.png'
97 
+import yf1 from '@/assets/yinfu1.png'
98 
+import yf2 from '@/assets/yinfu2.png'
99 
+import yf3 from '@/assets/yinfu3.png'
100 
+import yf4 from '@/assets/yinfu4.png'
101 
+import xian from '@/assets/huxian.png'
102 
+import sl from '@/assets/xiaosenlin.png'
103 
+import jx from '@/assets/juxing.png'
104 
+import quan from '@/assets/quan.png'
105 
+import bl from '@/assets/bolang.png'
106 
+import down from '@/assets/down.png'
107 
+import dialog from '@/assets/dialog.png'
108 
+import lq from '@/assets/lq.png'
109 
+import qrCode from '@/assets/qrCode.jpg'
110 
+import line1 from '@/assets/line4.png'
111 
+import line2 from '@/assets/line5.png'
112 
+import line3 from '@/assets/line6.png'
113 
+import line4 from '@/assets/line7.png'
114 
+import line5 from '@/assets/line8.png'
115 
+import line6 from '@/assets/line9.png'
116 
+import line7 from '@/assets/line1.png'
117 
+import line8 from '@/assets/line2.png'
118 
+import line9 from '@/assets/line3.png'
119 
+import { createNamespacedHelpers } from 'vuex'
120 
+const { mapActions: mapAppActions } = createNamespacedHelpers('app')
121 
+export default {
122 
+  data () {
123 
+    return {
124 
+      turntable,
125 
+      pointer,
126 
+      paper,
127 
+      blackStar,
128 
+      jt,
129 
+      sl,
130 
+      jx,
131 
+      tx,
132 
+      sy,
133 
+      yf1,
134 
+      yf2,
135 
+      yf3,
136 
+      yf4,
137 
+      xian,
138 
+      bird,
139 
+      quan,
140 
+      bl,
141 
+      down,
142 
+      dialog,
143 
+      qrCode,
144 
+      lq,
145 
+      line1,
146 
+      line2,
147 
+      line3,
148 
+      line4,
149 
+      line5,
150 
+      line6,
151 
+      line7,
152 
+      line8,
153 
+      line9,
154 
+      round: false,
155 
+      showDialog: false,
156 
+      showBtn: false,
157 
+      winning: '',
158 
+      jump: '',
159 
+      style: null,
160 
+      stylesheet: null
161 
+    }
162 
+  },
163 
+  props: ['prizeData', 'prizeNum', 'data', 'bg', 'activityStatus'],
164 
+  created () {
165 
+    this.init()
166 
+  },
167 
+  methods: {
168 
+    ...mapAppActions(['setRunState']),
169 
+    init () {
170 
+      let lineList = [this.line1, this.line2, this.line3, this.line4, this.line5, this.line6, this.line7, this.line8, this.line9]
171 
+      if (Math.ceil(this.data.prizeList.length / lineList.length) > 1) {
172 
+        let length = Math.ceil(this.data.prizeList.length / lineList.length)
173 
+        for (let i = 1; i < length; i++) {
174 
+          lineList = lineList.concat(lineList)
175 
+        }
176 
+      }
177 
+      let deg = 360 / this.data.prizeList.length
178 
+      let rule = ''
179 
+      for (let i = 0; i < this.data.prizeList.length; i++) {
180 
+        this.data.prizeList[i].class = 'prize' + i
181 
+        this.data.prizeList[i].font = 'font' + i
182 
+        this.data.prizeList[i].img = lineList[i]
183 
+        console.log(deg * (i + 1))
184 
+        rule += `.prize${i}{transform: rotate(${deg * (i + 1)}deg);transform-origin:0 0;} .font${i}{transform: rotate(${(deg / 3)}deg);transform-origin:0 0;}`
185 
+      }
186 
+      let style = document.createElement('style')
187 
+      style.type = 'text/css'
188 
+      style.innerHTML = rule
189 
+      document.getElementsByTagName('head')[0].appendChild(style)
190 
+    },
191 
+    start () {
192 
+      if (this.stylesheet) {
193 
+        document.getElementsByTagName('head')[0].removeChild(this.stylesheet)
194 
+      }
195 
+      setTimeout(() => {
196 
+        let dynamicValue = -3690
197 
+        dynamicValue -= ((360 / this.data.prizeList.length * (this.prizeNum + 1)) + 360 / this.data.prizeList.length / 2)
198 
+        let rule = `@keyframes round {0% {transform: rotate(0deg);}100% {transform: rotate(${dynamicValue}deg);}}`
199 
+        let style = document.createElement('style')
200 
+        style.type = 'text/css'
201 
+        style.innerHTML = rule
202 
+        document.getElementsByTagName('head')[0].appendChild(style)
203 
+        this.stylesheet = style
204 
+        this.round = true
205 
+      }, 50)
206 
+      this.winning = this.prizeData.prize.PrizeName
207 
+      // this.showBtn = this.prizeData.detail.Url ? 1 : 0
208 
+      // this.jump = this.prizeData.detail.Url
209 
+      setTimeout(() => {
210 
+        this.showDialog = true
211 
+        this.setRunState(2)
212 
+      }, 10000)
213 
+    },
214 
+    get () {
215 
+      console.log('去领取')
216 
+      window.location.href = this.jump
217 
+    },
218 
+    close (data) {
219 
+      this.showDialog = false
220 
+    },
221 
+    run () {
222 
+      this.$emit('run')
223 
+    }
224 
+  },
225 
+  watch: {
226 
+    prizeData: {
227 
+      handler (cur, old) {
228 
+        console.log(cur)
229 
+        this.start()
230 
+      },
231 
+      immediate: false,
232 
+      deep: false
233 
+    }
234 
+  }
235 
+}
236 
+</script>

+ 361
- 0
src/components/model1/page.scss Parādīt failu 

@@ -0,0 +1,361 @@
1 
+body * {
2 
+  font-family: myFont;
3 
+}
4 
+
5 
+.bg {
6 
+  position: relative;
7 
+  width: 100%;
8 
+  .turntable {
9 
+    position: absolute;
10 
+    top: 2.2rem;
11 
+    width: 100%;
12 
+    height: 3rem;
13 
+    display: flex;
14 
+    justify-content: center;
15 
+    align-items: center;
16 
+    > img {
17 
+      position: absolute;
18 
+      z-index: 10;
19 
+    }
20 
+    .yf1 {
21 
+      bottom: -0.25rem;
22 
+      right: 0.05rem;
23 
+      width: 0.2rem;
24 
+    }
25 
+    .yf2 {
26 
+      bottom: 0;
27 
+      right: 0.8rem;
28 
+      width: 0.1rem;
29 
+    }
30 
+    .yf3 {
31 
+      bottom: -0.41rem;
32 
+      right: 0.45rem;
33 
+      width: 0.25rem;
34 
+    }
35 
+    .yf4 {
36 
+      bottom: -0.3rem;
37 
+      right: 1.3rem;
38 
+      width: 0.25rem;
39 
+    }
40 
+    .yf5 {
41 
+      bottom: 0.15rem;
42 
+      left: 0.65rem;
43 
+      width: 0.25rem;
44 
+      transform: rotate(25deg);
45 
+    }
46 
+    .yf6 {
47 
+      top: 0.3rem;
48 
+      left: 0.4rem;
49 
+      width: 0.25rem;
50 
+      transform: rotate(-60deg);
51 
+    }
52 
+    .hx {
53 
+      top: 0.1rem;
54 
+      right: 0.7rem;
55 
+      width: 0.3rem;
56 
+    }
57 
+    .hux {
58 
+      top: 0.45rem;
59 
+      right: 0.3rem;
60 
+      width: 0.4rem;
61 
+    }
62 
+    .sl {
63 
+      top: 0.15rem;
64 
+      right: 0;
65 
+      width: 1rem;
66 
+      height: 0.5rem;
67 
+      z-index: 1;
68 
+    }
69 
+    .sl2 {
70 
+      bottom: -0.4rem;
71 
+      left: 0;
72 
+      width: 0.95rem;
73 
+      height: 0.5rem;
74 
+      z-index: 1;
75 
+    }
76 
+    .jx {
77 
+      bottom: 0.3rem;
78 
+      right: 0.02rem;
79 
+      width: 0.5rem;
80 
+      height: 0.06rem;
81 
+      z-index: 1;
82 
+      transform: rotate(180deg);
83 
+    }
84 
+    .down {
85 
+      top: -0.3rem;
86 
+      left: 50%;
87 
+      transform: translateX(-50%);
88 
+      width: 0.3rem;
89 
+      z-index: 1;
90 
+    }
91 
+    .titleText{
92 
+      position: absolute;
93 
+      top: -0.6rem;
94 
+      left: 50%;
95 
+      transform: translateX(-50%);
96 
+      z-index: 1;
97 
+      font-size: .16rem;
98 
+      color: #12532d;
99 
+    }
100 
+    .turntable-body {
101 
+      width: 3rem;
102 
+      height: 3rem;
103 
+      position: relative;
104 
+      z-index: 9;
105 
+      div {
106 
+        position: absolute;
107 
+        width: 1.5rem;
108 
+        height: 1.5rem;
109 
+        line-height: 0.18rem;
110 
+        right: 0;
111 
+        bottom: 0;
112 
+        img{
113 
+          width: 93%;
114 
+          position: absolute;
115 
+          top: -0.04rem;
116 
+          left: 0;
117 
+        }
118 
+        span{
119 
+          overflow : hidden;
120 
+          text-overflow: ellipsis;
121 
+          display: -webkit-box;
122 
+          -webkit-line-clamp: 2;
123 
+          -webkit-box-orient: vertical;
124 
+          margin: 0 auto;
125 
+          position: absolute;
126 
+          top: 0rem;
127 
+          left: 0rem;
128 
+          width: 100%;
129 
+          text-align: right;
130 
+          padding: 0 .3rem 0 .5rem;
131 
+          box-sizing: border-box;
132 
+        }
133 
+      }
134 
+    }
135 
+    .round {
136 
+      animation: round 10s ease;
137 
+      animation-fill-mode: forwards;
138 
+    }
139 
+    .pointer {
140 
+      position: absolute;
141 
+      top: 50%;
142 
+      left: 50%;
143 
+      transform: translate(-50%, -60%);
144 
+      width: 0.8rem;
145 
+    }
146 
+  }
147 
+  .dialog {
148 
+    width: 100%;
149 
+    height: 100%;
150 
+    background: rgba(0, 0, 0, 0.5);
151 
+    position: fixed;
152 
+    top: 0;
153 
+    left: 0;
154 
+    z-index: 999;
155 
+    display: flex;
156 
+    justify-content: center;
157 
+    align-items: center;
158 
+    .box {
159 
+      width: 3.1rem;
160 
+      height: 2.35rem;
161 
+      position: relative;
162 
+      display: flex;
163 
+      flex-flow: column nowrap;
164 
+      justify-content: center;
165 
+      align-items: center;
166 
+      .dialog-bg {
167 
+        position: absolute;
168 
+        top: -0.3rem;
169 
+        width: 100%;
170 
+        left: -0.05rem;
171 
+        z-index: -10;
172 
+      }
173 
+      .dialog-title {
174 
+        font-size: 0.18rem;
175 
+        span {
176 
+          font-family: Arial, Helvetica, sans-serif;
177 
+        }
178 
+      }
179 
+      .dialog-name {
180 
+        font-size: 0.18rem;
181 
+        margin: 0.1rem 0;
182 
+      }
183 
+      .qrCode {
184 
+        width: 0.8rem;
185 
+        display: block;
186 
+      }
187 
+      .lq {
188 
+        width: 1rem;
189 
+        margin: 0.1rem 0 0.05rem;
190 
+      }
191 
+      .desc {
192 
+        font-size: 0.12rem;
193 
+        font-family: Arial, Helvetica, sans-serif;
194 
+        color: rgba(160, 160, 160, 1);
195 
+        width: 85%;
196 
+        margin-top: .1rem;
197 
+      }
198 
+    }
199 
+  }
200 
+  .paper {
201 
+    width: 100%;
202 
+    position: absolute;
203 
+    top: 5.6rem;
204 
+    left: 0;
205 
+    .winningList {
206 
+      width: 2.8rem;
207 
+      height: 2.8rem;
208 
+      position: absolute;
209 
+      top: 0.8rem;
210 
+      left: 50%;
211 
+      transform: translateX(-50%);
212 
+      .title {
213 
+        display: flex;
214 
+        align-items: center;
215 
+        justify-content: center;
216 
+        img:nth-of-type(1) {
217 
+          width: 0.25rem;
218 
+        }
219 
+        img:nth-of-type(2) {
220 
+          width: 0.14rem;
221 
+        }
222 
+        span {
223 
+          font-size: 0.14rem;
224 
+          padding: 0 0.1rem;
225 
+        }
226 
+      }
227 
+      .list {
228 
+        overflow-x: hidden;
229 
+        overflow-y: scroll;
230 
+        height: 2.6rem;
231 
+        div {
232 
+          display: flex;
233 
+          align-items: center;
234 
+          justify-content: space-between;
235 
+          img {
236 
+            width: 0.18rem;
237 
+            height: 0.18rem;
238 
+            border-radius: 50%;
239 
+          }
240 
+          span:nth-of-type(1) {
241 
+            flex: 1;
242 
+            text-align: left;
243 
+            margin: 0.1rem 0.1rem;
244 
+            display: flex;
245 
+            flex-flow: column nowrap;
246 
+            div{
247 
+              text-align: left;
248 
+            }
249 
+            div:nth-last-of-type(1){
250 
+              font-family: initial;
251 
+            }
252 
+          }
253 
+          span:nth-of-type(2) {
254 
+            text-align: right;
255 
+          }
256 
+          // span:nth-of-type(1) {
257 
+          //   text-align: left;
258 
+          //   margin: .1rem;
259 
+          //   width: 28%;
260 
+          //   overflow: hidden;
261 
+          //   text-overflow: ellipsis;
262 
+          //   white-space: nowrap;
263 
+          //   font-size: 12px;
264 
+          // }
265 
+          // span:nth-of-type(2) {
266 
+          //   flex: 1;
267 
+          //   margin: .1rem;
268 
+          //   font-size: 12px;
269 
+          // }
270 
+          // span:nth-of-type(3) {
271 
+          //   text-align: right;
272 
+          //   width: 13%;
273 
+          //   overflow: hidden;
274 
+          //   text-overflow: ellipsis;
275 
+          //   white-space: nowrap;
276 
+          //   margin: .1rem;
277 
+          //   font-size: 12px;
278 
+          // }
279 
+        }
280 
+      }
281 
+    }
282 
+    .rule {
283 
+      width: 2.8rem;
284 
+      height: 2.4rem;
285 
+      position: absolute;
286 
+      top: 3.8rem;
287 
+      left: 50%;
288 
+      transform: translateX(-50%);
289 
+      .title {
290 
+        display: flex;
291 
+        align-items: center;
292 
+        justify-content: center;
293 
+        margin-bottom: 0.2rem;
294 
+        img:nth-of-type(1) {
295 
+          width: 0.25rem;
296 
+        }
297 
+        img:nth-of-type(2) {
298 
+          width: 0.14rem;
299 
+        }
300 
+        span {
301 
+          font-size: 0.14rem;
302 
+          padding: 0 0.1rem;
303 
+        }
304 
+      }
305 
+      .content {
306 
+        pre{
307 
+          white-space:pre-line;
308 
+          text-align: left;
309 
+          line-height: .18rem;
310 
+        }
311 
+      }
312 
+    }
313 
+    .bird {
314 
+      position: absolute;
315 
+      bottom: 0.55rem;
316 
+      left: 50%;
317 
+      transform: translateX(-50%);
318 
+      width: 1.2rem;
319 
+    }
320 
+    .quan1 {
321 
+      position: absolute;
322 
+      top: 1.1rem;
323 
+      left: 0;
324 
+      width: 0.28rem;
325 
+    }
326 
+    .quan2 {
327 
+      position: absolute;
328 
+      bottom: 4rem;
329 
+      right: -0.1rem;
330 
+      width: 0.28rem;
331 
+    }
332 
+    .bl1 {
333 
+      position: absolute;
334 
+      bottom: 2rem;
335 
+      right: 0rem;
336 
+      width: 0.5rem;
337 
+      height: 0.16rem;
338 
+    }
339 
+    .bl2 {
340 
+      position: absolute;
341 
+      bottom: 3.6rem;
342 
+      left: -0.1rem;
343 
+      width: 0.5rem;
344 
+      height: 0.16rem;
345 
+    }
346 
+    .jx2 {
347 
+      position: absolute;
348 
+      bottom: 0.3rem;
349 
+      left: 0;
350 
+      width: 0.8rem;
351 
+      z-index: 1;
352 
+    }
353 
+  }
354 
+}
355 
+
356 
+.fade-enter-active, .fade-leave-active {
357 
+  transition: opacity .5s;
358 
+}
359 
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
360 
+  opacity: 0;
361 
+}

+ 259
- 0
src/components/model2/index.vue Parādīt failu 

@@ -0,0 +1,259 @@
1 
+<style lang='scss' scoped>
2 
+@import "page.scss";
3 
+</style>
4 
+
5 
+<template>
6 
+  <div class='bg mainPage'>
7 
+    <img class='bg-img' :src='bg' alt='' width='100%'>
8 
+    <transition name='fade'>
9 
+      <div class='dialog' v-if='showDialog' @click='close'>
10 
+        <div class='box' @click.stop='stop'>
11 
+          <img class='dialog-bg' @click.stop='close' :src='dialog' alt=''>
12 
+          <div class='dialog-title'>恭喜你！<span>成功获得</span></div>
13 
+          <div class='dialog-name'>{{winning}}</div>
14 
+          <img class='qrCode' :src='qrCode' alt=''>
15 
+          <div v-if='showBtn' @click='get'>
16 
+            <img class='lq' :src='lq' alt=''>
17 
+          </div>
18 
+          <div class='desc'>长按二维码“城的空间”，进入会员中心查看奖品吧</div>
19 
+        </div>
20 
+      </div>
21 
+    </transition>
22 
+    <div class='sudoku-border'>
23 
+      <div class='sudoku'>
24 
+        <div v-for='(item,index) in square' :key='index' :class='item.class'>
25 
+          <div class='light' v-show='item.light'></div>
26 
+          <div v-if='item.title' @click='run()'>
27 
+            <p>{{item.title.split(',')[0]}}</p>
28 
+            <p>{{item.title.split(',')[1]}}</p>
29 
+          </div>
30 
+          <img v-if='item.pic' class='square-prize' :src='item.pic' alt=''>
31 
+          <span v-if='item.text' class=''>{{item.text}}</span>
32 
+        </div>
33 
+      </div>
34 
+    </div>
35 
+    <div class="times">您当前还剩余<span>4</span>次抽奖机会</div>
36 
+    <div class="list-area">
37 
+      <div class="winningList">
38 
+        <div class="title">
39 
+          <span>中奖名单</span>
40 
+          <img :src="right" alt="">
41 
+        </div>
42 
+        <div class="list">
43 
+          <div v-for='(item, index) in  data.list' :key='index'>
44 
+            <img :src="item.UserHeadImg" alt="">
45 
+            <span>
46 
+              <div>{{item.UserName}}</div>
47 
+              <div>{{toolClass.dateFormatM(item.CreateDate)}}</div>
48 
+            </span>
49 
+            <span>{{item.PrizeName}}</span>
50 
+          </div>
51 
+        </div>
52 
+      </div>
53 
+      <div class="rule">
54 
+        <div class="title">
55 
+          <span>活动规则</span>
56 
+          <img :src="right" alt="">
57 
+        </div>
58 
+        <div class="content">
59 
+          <pre>{{data.prize.LuckdrawRule}}</pre>
60 
+        </div>
61 
+      </div>
62 
+    </div>
63 
+  </div>
64 
+</template>
65 
+
66 
+<script>
67 
+import dialog from '@/assets/dialog.png'
68 
+import lq from '@/assets/lq.png'
69 
+import qrCode from '@/assets/qrCode.jpg'
70 
+import right from '@/assets/right.png'
71 
+import { createNamespacedHelpers } from 'vuex'
72 
+const { mapActions: mapAppActions } = createNamespacedHelpers('app')
73 
+export default {
74 
+  data () {
75 
+    return {
76 
+      dialog,
77 
+      qrCode,
78 
+      lq,
79 
+      right,
80 
+      showDialog: false,
81 
+      showBtn: false,
82 
+      winning: '',
83 
+      jump: '',
84 
+      square: [
85 
+        {
86 
+          title: '',
87 
+          text: '奖品',
88 
+          class: 'prize-box',
89 
+          pic: '',
90 
+          light: false
91 
+        },
92 
+        {
93 
+          title: '',
94 
+          text: '奖品',
95 
+          class: 'prize-box',
96 
+          pic: '',
97 
+          light: false
98 
+        },
99 
+        {
100 
+          title: '',
101 
+          text: '奖品',
102 
+          class: 'prize-box',
103 
+          pic: '',
104 
+          light: false
105 
+        },
106 
+        {
107 
+          title: '',
108 
+          text: '奖品',
109 
+          class: 'prize-box',
110 
+          pic: '',
111 
+          light: false
112 
+        },
113 
+        {
114 
+          title: '立即,抽奖',
115 
+          text: '',
116 
+          pic: '',
117 
+          class: 'check-btn',
118 
+          light: false
119 
+        },
120 
+        {
121 
+          title: '',
122 
+          text: '奖品',
123 
+          class: 'prize-box',
124 
+          pic: lq,
125 
+          light: false
126 
+        },
127 
+        {
128 
+          title: '',
129 
+          text: '奖品',
130 
+          class: 'prize-box',
131 
+          pic: '',
132 
+          light: false
133 
+        },
134 
+        {
135 
+          title: '',
136 
+          text: '奖品',
137 
+          class: 'prize-box',
138 
+          pic: '',
139 
+          light: false
140 
+        },
141 
+        {
142 
+          title: '',
143 
+          text: '奖品',
144 
+          class: 'prize-box',
145 
+          pic: '',
146 
+          light: false
147 
+        }
148 
+      ],
149 
+      ORDER: [],
150 
+      END: 0,
151 
+      ROUND: 0,
152 
+      num: 0,
153 
+      nowRound: 0
154 
+    }
155 
+  },
156 
+  props: ['prizeData', 'prizeNum', 'data', 'bg', 'activityStatus'],
157 
+  created () {
158 
+    this.init()
159 
+    console.log(1)
160 
+  },
161 
+  methods: {
162 
+    ...mapAppActions(['setRunState']),
163 
+    init () {
164 
+      let data = this.data.prizeList
165 
+      data = this.checkLength(data)
166 
+      data.splice(4, 0, {})
167 
+      if (this.activityStatus === 0) {
168 
+        this.square[4].title = '活动,未开始'
169 
+      } else if (this.activityStatus === 1) {
170 
+        this.square[4].title = '立即,抽奖'
171 
+      } else if (this.activityStatus === 2) {
172 
+        this.square[4].title = '活动,已结束'
173 
+      }
174 
+      for (let i = 0; i < data.length; i++) {
175 
+        this.square[i].text = data[i].PrizeName
176 
+        this.square[i].pic = data[i].pic
177 
+      }
178 
+    },
179 
+    checkLength (arr) {
180 
+      if (arr.length >= 8) {
181 
+        arr = arr.slice(0, 8)
182 
+      } else {
183 
+        let length = Math.floor(8 / arr.length)
184 
+        for (let i = 0; i < length; i++) {
185 
+          arr = arr.concat(arr)
186 
+        }
187 
+        arr = arr.slice(0, 8)
188 
+      }
189 
+      return arr
190 
+    },
191 
+    start () {
192 
+      this.ORDER = [0, 1, 2, 5, 8, 7, 6, 3]
193 
+      this.END = this.prizeNum
194 
+      this.ROUND = 8
195 
+      this.num = 0
196 
+      this.nowRound = 1
197 
+      if (this.square.filter(item => item.light === true).length > 0) {
198 
+        this.square.filter(item => item.light === true)[0].light = false
199 
+      }
200 
+      this.square[0].light = true
201 
+      this.loop()
202 
+      this.winning = this.prizeData.prize.PrizeName
203 
+      // this.showBtn = this.prizeData.detail.Url ? 1 : 0
204 
+      // this.jump = this.prizeData.detail.Url
205 
+    },
206 
+    loop () {
207 
+      let speed = [4, 3, 2, 1, 2, 3, 4, 5]
208 
+      let timeOut = speed[this.nowRound - 1] * 40
209 
+      setTimeout(() => {
210 
+        this.square[this.ORDER[this.num]].light = true
211 
+        let old = this.num === 0 ? 7 : this.num - 1
212 
+        this.square[this.ORDER[old]].light = false
213 
+        if (this.END >= 4) {
214 
+          if ((this.ORDER[this.num] - 1) === this.END && this.nowRound === this.ROUND) {
215 
+            setTimeout(() => {
216 
+              this.showDialog = true
217 
+            }, 300)
218 
+            this.setRunState(2)
219 
+            return false
220 
+          }
221 
+        } else {
222 
+          if (this.ORDER[this.num] === this.END && this.nowRound === this.ROUND) {
223 
+            setTimeout(() => {
224 
+              this.showDialog = true
225 
+            }, 300)
226 
+            this.setRunState(2)
227 
+            return false
228 
+          }
229 
+        }
230 
+        this.num = this.num === 7 ? 0 : this.num + 1
231 
+        if (this.num === 7) {
232 
+          this.nowRound++
233 
+        }
234 
+        this.loop()
235 
+      }, timeOut)
236 
+    },
237 
+    get () {
238 
+      console.log('去领取')
239 
+      window.location.href = this.jump
240 
+    },
241 
+    close (data) {
242 
+      this.showDialog = false
243 
+    },
244 
+    run () {
245 
+      this.$emit('run')
246 
+    }
247 
+  },
248 
+  watch: {
249 
+    prizeData: {
250 
+      handler (cur, old) {
251 
+        console.log(cur)
252 
+        this.start()
253 
+      },
254 
+      immediate: false,
255 
+      deep: false
256 
+    }
257 
+  }
258 
+}
259 
+</script>

+ 277
- 0
src/components/model2/page.scss Parādīt failu 

@@ -0,0 +1,277 @@
1 
+.bg {
2 
+  position: relative;
3 
+  width: 100%;
4 
+  .dialog {
5 
+    width: 100%;
6 
+    height: 100%;
7 
+    background: rgba(0, 0, 0, 0.5);
8 
+    position: fixed;
9 
+    top: 0;
10 
+    left: 0;
11 
+    z-index: 999;
12 
+    display: flex;
13 
+    justify-content: center;
14 
+    align-items: center;
15 
+    .box {
16 
+      width: 3.1rem;
17 
+      height: 2.35rem;
18 
+      position: relative;
19 
+      display: flex;
20 
+      flex-flow: column nowrap;
21 
+      justify-content: center;
22 
+      align-items: center;
23 
+      .dialog-bg {
24 
+        position: absolute;
25 
+        top: -0.3rem;
26 
+        width: 100%;
27 
+        left: -0.05rem;
28 
+        z-index: -10;
29 
+      }
30 
+      .dialog-title {
31 
+        font-size: 0.18rem;
32 
+        span {
33 
+          font-family: Arial, Helvetica, sans-serif;
34 
+        }
35 
+      }
36 
+      .dialog-name {
37 
+        font-size: 0.18rem;
38 
+        margin: 0.1rem 0;
39 
+      }
40 
+      .qrCode {
41 
+        width: 0.8rem;
42 
+        display: block;
43 
+      }
44 
+      .lq {
45 
+        width: 1rem;
46 
+        margin: 0.1rem 0 0.05rem;
47 
+      }
48 
+      .desc {
49 
+        font-size: 0.12rem;
50 
+        font-family: Arial, Helvetica, sans-serif;
51 
+        color: rgba(160, 160, 160, 1);
52 
+        width: 85%;
53 
+        margin-top: .1rem;
54 
+      }
55 
+    }
56 
+  }
57 
+  .sudoku-border{
58 
+    width: 3.2rem;
59 
+    height: 3.2rem;
60 
+    display: flex;
61 
+    justify-content: center;
62 
+    align-items: center;
63 
+    position: absolute;
64 
+    top: 1.7rem;
65 
+    left: 50%;
66 
+    background-color: #FAEFDC;
67 
+    box-shadow:0px 6px 1px 0px #E3D3B7;
68 
+    transform: translateX(-50%);
69 
+    border-radius: .1rem;
70 
+    opacity: .9;
71 
+    .sudoku{
72 
+      display: flex;
73 
+      flex-flow: row wrap;
74 
+      padding: .03rem;
75 
+      width: 3rem;
76 
+      height: 3rem;
77 
+      background-color: #E9DCC3;
78 
+      border-radius: .1rem;
79 
+      >div{
80 
+        width: .94rem;
81 
+        height: .94rem;
82 
+        margin: .03rem;
83 
+        display: flex;
84 
+        flex-flow: column nowrap;
85 
+        justify-content: center;
86 
+        box-shadow:0px 3px 1px 0px #E3D3B7;
87 
+        align-items: center;
88 
+        border-radius:.1rem;
89 
+        background: #FAEFDC;
90 
+        position: relative;
91 
+      }
92 
+      .check-btn{
93 
+        background:linear-gradient(-10deg,rgba(230,212,181,1) 0%,rgba(255,241,222,1) 100%);
94 
+        div{
95 
+          width: 100%;
96 
+          height: 100%;
97 
+          display: flex;
98 
+          flex-flow: column nowrap;
99 
+          justify-content: center;
100 
+          align-items: center;
101 
+        }
102 
+        p{
103 
+          font-size: .25rem;
104 
+          font-family: 'Times New Roman', Times, serif;
105 
+          font-weight: 900;
106 
+          color: #802520;
107 
+          text-shadow:0px 4px 13px rgba(119,91,44,0.3);
108 
+        }
109 
+      }
110 
+      .prize-box{
111 
+        .square-prize{
112 
+          width: 100%;
113 
+          height: .6rem;
114 
+        }
115 
+        span{
116 
+          font-size: .09rem;
117 
+          color: rgba(139,111,71,1);
118 
+          font-weight: bold;
119 
+          width: 85%;
120 
+          // white-space: nowrap;
121 
+          // overflow: hidden;
122 
+          // text-overflow: ellipsis;
123 
+        }
124 
+      }
125 
+      .light{
126 
+        width: 100%;
127 
+        height: 100%;
128 
+        position: absolute;
129 
+        z-index: 2;
130 
+        top: 0;
131 
+        left: 0;
132 
+        background: rgba(255, 255, 255, 0.8);
133 
+        border-radius:.1rem;
134 
+      }
135 
+    }
136 
+  }
137 
+  .times{
138 
+    position: absolute;
139 
+    width: 2.3rem;
140 
+    height: .3rem;
141 
+    top: 5.2rem;
142 
+    left: 50%;
143 
+    transform: translateX(-50%);
144 
+    background-color: rgba(168,107,48,.1);
145 
+    line-height: .3rem;
146 
+    border-radius: .2rem;
147 
+    font-size: .1rem;
148 
+    color: #9E7C60;
149 
+    span{
150 
+      color: #E60012;
151 
+    }
152 
+  }
153 
+  .list-area{
154 
+    width: 3.33rem;
155 
+    height: 6.6rem;
156 
+    background-color: rgba(168,107,48,.1);
157 
+    position: absolute;
158 
+    top: 5.8rem;
159 
+    left: 50%;
160 
+    transform: translateX(-50%);
161 
+    z-index: 2;
162 
+    .winningList {
163 
+      width: 2.8rem;
164 
+      height: 2.8rem;
165 
+      position: absolute;
166 
+      top: 0.2rem;
167 
+      left: 50%;
168 
+      transform: translateX(-50%);
169 
+      .title {
170 
+        display: flex;
171 
+        align-items: center;
172 
+        justify-content: center;
173 
+        img:nth-of-type(1) {
174 
+          width: 0.18rem;
175 
+        }
176 
+        span {
177 
+          font-size: 0.16rem;
178 
+          padding: 0 0.1rem;
179 
+          color: #895B2F;
180 
+        }
181 
+      }
182 
+      .list {
183 
+        overflow-x: hidden;
184 
+        overflow-y: scroll;
185 
+        height: 2.6rem;
186 
+        div {
187 
+          display: flex;
188 
+          align-items: center;
189 
+          justify-content: space-between;
190 
+          img {
191 
+            width: 0.18rem;
192 
+            height: 0.18rem;
193 
+            border-radius: 50%;
194 
+          }
195 
+          span:nth-of-type(1) {
196 
+            flex: 1;
197 
+            text-align: left;
198 
+            margin: 0.1rem 0.1rem;
199 
+            display: flex;
200 
+            flex-flow: column nowrap;
201 
+            div{
202 
+              text-align: left;
203 
+              color: #895B2F;
204 
+            }
205 
+            div:nth-last-of-type(1){
206 
+              font-family: initial;
207 
+            }
208 
+          }
209 
+          span:nth-of-type(2) {
210 
+            text-align: right;
211 
+            color: #895B2F;
212 
+          }
213 
+          // span:nth-of-type(1) {
214 
+          //   text-align: left;
215 
+          //   margin: .1rem;
216 
+          //   width: 28%;
217 
+          //   overflow: hidden;
218 
+          //   text-overflow: ellipsis;
219 
+          //   white-space: nowrap;
220 
+          //   font-size: 12px;
221 
+          // }
222 
+          // span:nth-of-type(2) {
223 
+          //   flex: 1;
224 
+          //   margin: .1rem;
225 
+          //   font-size: 12px;
226 
+          // }
227 
+          // span:nth-of-type(3) {
228 
+          //   text-align: right;
229 
+          //   width: 13%;
230 
+          //   overflow: hidden;
231 
+          //   text-overflow: ellipsis;
232 
+          //   white-space: nowrap;
233 
+          //   margin: .1rem;
234 
+          //   font-size: 12px;
235 
+          // }
236 
+        }
237 
+      }
238 
+    }
239 
+    .rule {
240 
+      width: 2.8rem;
241 
+      height: 2.4rem;
242 
+      position: absolute;
243 
+      top: 3.2rem;
244 
+      left: 50%;
245 
+      transform: translateX(-50%);
246 
+      .title {
247 
+        display: flex;
248 
+        align-items: center;
249 
+        justify-content: center;
250 
+        margin-bottom: 0.2rem;
251 
+        img:nth-of-type(1) {
252 
+          width: 0.18rem;
253 
+        }
254 
+        span {
255 
+          font-size: 0.16rem;
256 
+          padding: 0 0.1rem;
257 
+          color: #895B2F;
258 
+        }
259 
+      }
260 
+      .content {
261 
+        pre{
262 
+          white-space:pre-line;
263 
+          text-align: left;
264 
+          line-height: .18rem;
265 
+          color: #895B2F;
266 
+        }
267 
+      }
268 
+    }
269 
+  }
270 
+}
271 
+
272 
+.fade-enter-active, .fade-leave-active {
273 
+  transition: opacity .5s;
274 
+}
275 
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
276 
+  opacity: 0;
277 
+}

+ 164
- 0
src/components/model3/index.vue Parādīt failu 

@@ -0,0 +1,164 @@
1 
+<style lang='scss' scoped>
2 
+@import "page.scss";
3 
+</style>
4 
+
5 
+<template>
6 
+  <div class='bg mainPage'>
7 
+    <img class='bg-img' :src='bg' alt='' width='100%'>
8 
+    <transition name='fade'>
9 
+      <div class='dialog' v-if='showDialog' @click='close'>
10 
+        <div class='box' @click.stop='stop'>
11 
+          <img class='dialog-bg' @click.stop='close' :src='dialog' alt=''>
12 
+          <div class='dialog-title'>恭喜你！<span>成功获得</span></div>
13 
+          <div class='dialog-name'>{{winning}}</div>
14 
+          <img class='qrCode' :src='qrCode' alt=''>
15 
+          <div v-if='showBtn' @click='get'>
16 
+            <img class='lq' :src='lq' alt=''>
17 
+          </div>
18 
+          <div class='desc'>长按二维码“城的空间”，进入会员中心查看奖品吧</div>
19 
+        </div>
20 
+      </div>
21 
+    </transition>
22 
+    <div class="scrape" ref='box'>
23 
+      <div>小洋房</div>
24 
+      <canvas ref='canvas'></canvas>
25 
+    </div>
26 
+    <div class='times'>您当前还剩余<span>4</span>次抽奖机会 <p>再来一次</p></div>
27 
+    <div class="list-area">
28 
+      <div class="list-top"></div>
29 
+      <div class='winningList'>
30 
+        <div class='title'>
31 
+          <span>中奖名单</span>
32 
+        </div>
33 
+        <div class='list'>
34 
+          <div v-for='(item, index) in  data.list' :key='index'>
35 
+            <img :src='item.UserHeadImg' alt=''>
36 
+            <span>
37 
+              <div>{{item.UserName}}</div>
38 
+              <div>{{toolClass.dateFormatM(item.CreateDate)}}</div>
39 
+            </span>
40 
+            <span>{{item.PrizeName}}</span>
41 
+          </div>
42 
+        </div>
43 
+      </div>
44 
+    </div>
45 
+    <div>
46 
+      <div class='rule'>
47 
+        <div class='title'>
48 
+          <span>活动规则</span>
49 
+        </div>
50 
+        <div class='content'>
51 
+          <pre>{{data.prize.LuckdrawRule}}</pre>
52 
+        </div>
53 
+      </div>
54 
+    </div>
55 
+  </div>
56 
+</template>
57 
+
58 
+<script>
59 
+import dialog from '@/assets/dialog.png'
60 
+import lq from '@/assets/lq.png'
61 
+import qrCode from '@/assets/qrCode.jpg'
62 
+import icon from '@/assets/icon.png'
63 
+import { createNamespacedHelpers } from 'vuex'
64 
+const { mapActions: mapAppActions } = createNamespacedHelpers('app')
65 
+export default {
66 
+  data () {
67 
+    return {
68 
+      dialog,
69 
+      qrCode,
70 
+      lq,
71 
+      icon,
72 
+      showDialog: false,
73 
+      showBtn: false,
74 
+      winning: '',
75 
+      jump: '',
76 
+      canvas: null,
77 
+      area: 0
78 
+    }
79 
+  },
80 
+  props: ['prizeData', 'prizeNum', 'data', 'bg', 'activityStatus'],
81 
+  created () {
82 
+    this.init()
83 
+  },
84 
+  methods: {
85 
+    ...mapAppActions(['setRunState']),
86 
+    init () {
87 
+      this.$nextTick(() => {
88 
+        // if (this.activityStatus === 0) {
89 
+        //   this.square[4].title = '活动,未开始'
90 
+        // } else if (this.activityStatus === 1) {
91 
+        //   this.square[4].title = '立即,抽奖'
92 
+        // } else if (this.activityStatus === 2) {
93 
+        //   this.square[4].title = '活动,已结束'
94 
+        // }
95 
+        this.context = this.$refs.canvas.getContext('2d')
96 
+        // 画蒙布
97 
+        this.context.beginPath()
98 
+        this.context.fillStyle = '#9D876D'
99 
+        this.context.fillRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
100 
+        let img = new Image()
101 
+        img.src = this.icon
102 
+        img.onload = () => {
103 
+          // let pattern = this.context.createPattern(img, 'repeat')
104 
+          // this.context.fillStyle = pattern
105 
+          // this.context.fillRect(10, 10, this.$refs.canvas.width*0.9, this.$refs.canvas.height*0.85)
106 
+        }
107 
+        this.area = this.$refs.canvas.width * this.$refs.canvas.height
108 
+        this.$refs.canvas.addEventListener('touchstart', this.startFunc, false)
109 
+        this.$refs.canvas.addEventListener('touchmove', this.moveFunc, false)
110 
+        this.$refs.canvas.addEventListener('touchend', this.endFunc, false)
111 
+      })
112 
+    },
113 
+    startFunc () {
114 
+      console.log('start')
115 
+    },
116 
+    moveFunc (e) {
117 
+      let l = this.$refs.box.offsetLeft
118 
+      let t = this.$refs.box.offsetTop
119 
+      console.log(e)
120 
+      // 获取鼠标坐标
121 
+      let x = e.touches[0].clientX - l + this.$refs.canvas.width / 2
122 
+      let y = e.touches[0].clientY - t
123 
+      // destination-out             显示原来的不在后来区域的部分
124 
+      this.context.globalCompositeOperation = 'destination-out'
125 
+      this.context.beginPath()
126 
+      this.context.arc(x, y, 18, 0, Math.PI * 2)
127 
+      this.context.fill()
128 
+      e.preventDefault()
129 
+    },
130 
+    endFunc () {
131 
+      console.log('end')
132 
+      let areaData = this.context.getImageData(0, 0, this.$refs.canvas.width, this.$refs.canvas.height).data
133 
+      let scrapeNum = 0
134 
+      for (var i = 3, len = areaData.length; i < len; i += 4) {
135 
+        if (areaData[i] === 0) {
136 
+          scrapeNum++
137 
+        }
138 
+      }
139 
+      if (scrapeNum > this.area * 0.3) {
140 
+        this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
141 
+        this.$refs.canvas.removeEventListener('touchmove', this.moveFunc, false)
142 
+        this.$refs.canvas.removeEventListener('touchend', this.endFunc, false)
143 
+        setTimeout(() => {
144 
+          this.showDialog = true
145 
+        }, 300)
146 
+        this.setRunState(2)
147 
+        // that.winning = this.prizeData.prize.PrizeName
148 
+        // this.showBtn = this.prizeData.detail.Url ? 1 : 0
149 
+        // this.jump = this.prizeData.detail.Url
150 
+      }
151 
+    },
152 
+    get () {
153 
+      console.log('去领取')
154 
+      window.location.href = this.jump
155 
+    },
156 
+    close (data) {
157 
+      this.showDialog = false
158 
+    },
159 
+    run () {
160 
+      this.$emit('run')
161 
+    }
162 
+  }
163 
+}
164 
+</script>

+ 244
- 0
src/components/model3/page.scss Parādīt failu 

@@ -0,0 +1,244 @@
1 
+.bg {
2 
+  position: relative;
3 
+  width: 100%;
4 
+  .dialog {
5 
+    width: 100%;
6 
+    height: 100%;
7 
+    background: rgba(0, 0, 0, 0.5);
8 
+    position: fixed;
9 
+    top: 0;
10 
+    left: 0;
11 
+    z-index: 999;
12 
+    display: flex;
13 
+    justify-content: center;
14 
+    align-items: center;
15 
+    .box {
16 
+      width: 3.1rem;
17 
+      height: 2.35rem;
18 
+      position: relative;
19 
+      display: flex;
20 
+      flex-flow: column nowrap;
21 
+      justify-content: center;
22 
+      align-items: center;
23 
+      .dialog-bg {
24 
+        position: absolute;
25 
+        top: -0.3rem;
26 
+        width: 100%;
27 
+        left: -0.05rem;
28 
+        z-index: -10;
29 
+      }
30 
+      .dialog-title {
31 
+        font-size: 0.18rem;
32 
+        span {
33 
+          font-family: Arial, Helvetica, sans-serif;
34 
+        }
35 
+      }
36 
+      .dialog-name {
37 
+        font-size: 0.18rem;
38 
+        margin: 0.1rem 0;
39 
+      }
40 
+      .qrCode {
41 
+        width: 0.8rem;
42 
+        display: block;
43 
+      }
44 
+      .lq {
45 
+        width: 1rem;
46 
+        margin: 0.1rem 0 0.05rem;
47 
+      }
48 
+      .desc {
49 
+        font-size: 0.12rem;
50 
+        font-family: Arial, Helvetica, sans-serif;
51 
+        color: rgba(160, 160, 160, 1);
52 
+        width: 85%;
53 
+        margin-top: .1rem;
54 
+      }
55 
+    }
56 
+  }
57 
+  .scrape{
58 
+    width: 3.35rem;
59 
+    height: 1.35rem;
60 
+    background: #cec9c3;
61 
+    position: absolute;
62 
+    top: 1.7rem;
63 
+    left: 50%;
64 
+    transform: translateX(-50%);
65 
+    div{
66 
+      width: 100%;
67 
+      height: 100%;
68 
+      display: flex;
69 
+      justify-content: center;
70 
+      align-items: center;
71 
+    }
72 
+    canvas{
73 
+      width: 100%;
74 
+      height: 100%;
75 
+      position: absolute;
76 
+      top: 0;
77 
+      left: 0;
78 
+      z-index: 2;
79 
+    }
80 
+  }
81 
+  .times{
82 
+    position: absolute;
83 
+    width: 2rem;
84 
+    height: .3rem;
85 
+    top: 3.3rem;
86 
+    left: 50%;
87 
+    transform: translateX(-50%);
88 
+    background-color: rgba(157,135,109,.5);
89 
+    line-height: .3rem;
90 
+    font-size: .1rem;
91 
+    color: #9E7C60;
92 
+    span{
93 
+      color: #E60012;
94 
+    }
95 
+    p{
96 
+      position: absolute;
97 
+      right: -0.6rem;
98 
+      top: 50%;
99 
+      transform: translateY(-50%);
100 
+      color: #9D876D;
101 
+    }
102 
+  }
103 
+  .list-area{
104 
+    width: 100%;
105 
+    height: 3rem;
106 
+    position: absolute;
107 
+    top: 3.85rem;
108 
+    left: 50%;
109 
+    transform: translateX(-50%);
110 
+    z-index: 2;
111 
+    border-top: 1px dashed rgba(157,135,109,1);
112 
+    border-bottom: 1px dashed rgba(157,135,109,1);
113 
+    .list-top{
114 
+      width: 3.35rem;
115 
+      height: .2rem;
116 
+      background:rgba(157,135,109,1);
117 
+      border-radius: .1rem;
118 
+      box-shadow: 0px 6px 3px -1px rgba(157, 135, 109, 0.6);
119 
+      position: absolute;
120 
+      top: .18rem;
121 
+      left: 50%;
122 
+      transform: translateX(-50%);
123 
+    }
124 
+    .winningList {
125 
+      width: 3.2rem;
126 
+      height: 2.4rem;
127 
+      position: absolute;
128 
+      top: 0.3rem;
129 
+      left: 50%;
130 
+      transform: translateX(-50%);
131 
+      // background: #fff;
132 
+      background-image: radial-gradient(15px at 4px 4px, transparent 50px, #fff 50px);
133 
+      background-image: radial-gradient(15px at 4px 3.16rem, transparent 50px, #fff 50px);
134 
+      background-image: radial-gradient(15px at 4px 4px, transparent 50px, #fff 50px);
135 
+      background-image: radial-gradient(15px at 4px 4px, transparent 50px, #fff 50px);
136 
+      .title {
137 
+        display: flex;
138 
+        align-items: center;
139 
+        justify-content: center;
140 
+        img:nth-of-type(1) {
141 
+          width: 0.18rem;
142 
+        }
143 
+        span {
144 
+          font-size: 0.16rem;
145 
+          padding: 0 0.1rem;
146 
+          color: #895B2F;
147 
+        }
148 
+      }
149 
+      .list {
150 
+        overflow-x: hidden;
151 
+        overflow-y: scroll;
152 
+        height: 2.6rem;
153 
+        div {
154 
+          display: flex;
155 
+          align-items: center;
156 
+          justify-content: space-between;
157 
+          img {
158 
+            width: 0.18rem;
159 
+            height: 0.18rem;
160 
+            border-radius: 50%;
161 
+          }
162 
+          span:nth-of-type(1) {
163 
+            flex: 1;
164 
+            text-align: left;
165 
+            margin: 0.1rem 0.1rem;
166 
+            display: flex;
167 
+            flex-flow: column nowrap;
168 
+            div{
169 
+              text-align: left;
170 
+              color: #895B2F;
171 
+            }
172 
+            div:nth-last-of-type(1){
173 
+              font-family: initial;
174 
+            }
175 
+          }
176 
+          span:nth-of-type(2) {
177 
+            text-align: right;
178 
+            color: #895B2F;
179 
+          }
180 
+          // span:nth-of-type(1) {
181 
+          //   text-align: left;
182 
+          //   margin: .1rem;
183 
+          //   width: 28%;
184 
+          //   overflow: hidden;
185 
+          //   text-overflow: ellipsis;
186 
+          //   white-space: nowrap;
187 
+          //   font-size: 12px;
188 
+          // }
189 
+          // span:nth-of-type(2) {
190 
+          //   flex: 1;
191 
+          //   margin: .1rem;
192 
+          //   font-size: 12px;
193 
+          // }
194 
+          // span:nth-of-type(3) {
195 
+          //   text-align: right;
196 
+          //   width: 13%;
197 
+          //   overflow: hidden;
198 
+          //   text-overflow: ellipsis;
199 
+          //   white-space: nowrap;
200 
+          //   margin: .1rem;
201 
+          //   font-size: 12px;
202 
+          // }
203 
+        }
204 
+      }
205 
+    }
206 
+    .rule {
207 
+      width: 2.8rem;
208 
+      height: 2.4rem;
209 
+      position: absolute;
210 
+      top: 3.2rem;
211 
+      left: 50%;
212 
+      transform: translateX(-50%);
213 
+      .title {
214 
+        display: flex;
215 
+        align-items: center;
216 
+        justify-content: center;
217 
+        margin-bottom: 0.2rem;
218 
+        img:nth-of-type(1) {
219 
+          width: 0.18rem;
220 
+        }
221 
+        span {
222 
+          font-size: 0.16rem;
223 
+          padding: 0 0.1rem;
224 
+          color: #895B2F;
225 
+        }
226 
+      }
227 
+      .content {
228 
+        pre{
229 
+          white-space:pre-line;
230 
+          text-align: left;
231 
+          line-height: .18rem;
232 
+          color: #895B2F;
233 
+        }
234 
+      }
235 
+    }
236 
+  }
237 
+}
238 
+
239 
+.fade-enter-active, .fade-leave-active {
240 
+  transition: opacity .5s;
241 
+}
242 
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
243 
+  opacity: 0;
244 
+}

+ 0
- 51
src/page/getCode/getCode.vue Parādīt failu 

@@ -1,51 +0,0 @@
1 
-<template>
2 
-  <div></div>
3 
-</template>
4 
-
5 
-<script>
6 
-import wechatConfig from '@/config/index'
7 
-import { mapState, createNamespacedHelpers } from 'vuex'
8 
-const { mapActions: mapAppActions } = createNamespacedHelpers('app')
9 
-export default {
10 
-  data () {
11 
-    return {
12 
-      name: 'index'
13 
-    }
14 
-  },
15 
-  created () {
16 
-    let redirect = encodeURIComponent(window.location.href)
17 
-    if (location.search) {
18 
-      if (this.toolClass.UrlSearch(location.search).code) {
19 
-        this.code = this.toolClass.UrlSearch(location.search).code
20 
-        this.getUserInfo({ code: this.code, luckdrawid: this.lotteryId }).then((res) => {
21 
-          localStorage.setItem('userInfo', JSON.stringify(res))
22 
-          if (this.$route.query.toName) {
23 
-            this.$router.replace({ name: this.$route.query.toName })
24 
-          } else {
25 
-            this.$router.replace({ name: this.name })
26 
-          }
27 
-        }).catch(() => {
28 
-          let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatConfig.appid}&redirect_uri=${redirect}&response_type=${wechatConfig.response_type}&scope=${wechatConfig.scope}&state=${wechatConfig.state}#wechat_redirect`
29 
-          window.location.href = url
30 
-        })
31 
-      } else {
32 
-        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatConfig.appid}&redirect_uri=${redirect}&response_type=${wechatConfig.response_type}&scope=${wechatConfig.scope}&state=${wechatConfig.state}#wechat_redirect`
33 
-        window.location.href = url
34 
-      }
35 
-    } else {
36 
-      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatConfig.appid}&redirect_uri=${redirect}&response_type=${wechatConfig.response_type}&scope=${wechatConfig.scope}&state=${wechatConfig.state}#wechat_redirect`
37 
-      window.location.href = url
38 
-    }
39 
-  },
40 
-  computed: {
41 
-    ...mapState({
42 
-      userInfo: x => x.app.userInfo
43 
-    })
44 
-  },
45 
-  methods: {
46 
-    ...mapAppActions(['getUserInfo'])
47 
-  }
48 
-}
49 
-</script>
50 
- <style lang="scss" scoped>
51 
-</style>

+ 67
- 229
src/page/index/index.vue Parādīt failu 

@@ -1,166 +1,30 @@
1 
-<style lang="scss" scoped>
2 
-@font-face {
3 
-  font-family: myFont;
4 
-  src: url("https://spaceofcheng.oss-cn-beijing.aliyuncs.com/hkhb.ttf");
1 
+<style>
2 
+.van-dialog__message--has-title {
3 
+  color: #000 !important;
5 4 
 }
6 
-@import "page.scss";
7 5 
 </style>
8 6
9 7 
 <template>
10 
-  <div class="bg mainPage">
11 
-    <img class="bg-img" :src="bg" alt="" width="100%">
12 
-    <transition name="fade">
13 
-      <div class="dialog" v-if="showDialog" @click="close">
14 
-        <div class="box" @click.stop='stop'>
15 
-          <img class='dialog-bg' @click.stop="close" :src="dialog" alt="">
16 
-          <div class='dialog-title'>恭喜你！<span>成功获得</span></div>
17 
-          <div class="dialog-name">{{winning}}</div>
18 
-          <img class="qrCode" :src="qrCode" alt="">
19 
-          <div v-if="showBtn" @click="get">
20 
-            <img class="lq" :src="lq" alt="">
21 
-          </div>
22 
-          <!-- <div v-else @click="get">
23 
-            <img class="lq" :src="lq" alt="">
24 
-          </div> -->
25 
-          <div class="desc">长按二维码“城的空间”，进入会员中心查看奖品吧</div>
26 
-        </div>
27 
-      </div>
28 
-    </transition>
29 
-    <div class="turntable">
30 
-      <div :class='{ "round": round }' class="turntable-body">
31 
-        <div v-for='(item, index) in data.prizeList' :key='index' :class='item.class' >
32 
-          <img :src="item.img" alt="">
33 
-          <span :class='item.font' v-html="item.PrizeName">{{item.PrizeName}}</span>
34 
-        </div>
35 
-        <img :src="turntable" alt="" width="100%" height="100%">
36 
-      </div>
37 
-      <img class="pointer"  @click="run" :src="pointer" alt="">
38 
-      <div class="titleText">山的艺墅季 金秋送好礼</div>
39 
-      <img class="down" :src="down" alt="">
40 
-      <img class="yf1" :src="yf1" alt="">
41 
-      <img class="yf2" :src="yf2" alt="">
42 
-      <img class="yf3" :src="yf3" alt="">
43 
-      <img class="yf4" :src="yf4" alt="">
44 
-      <img class="yf5" :src="yf3" alt="">
45 
-      <img class="yf6" :src="yf4" alt="">
46 
-      <img class="hx" :src="blackStar" alt="">
47 
-      <img class="hux" :src="xian" alt="">
48 
-      <img class="sl" :src="sl" alt="">
49 
-      <img class="sl2" :src="sl" alt="">
50 
-      <img class="jx" :src="jx" alt="">
51 
-    </div>
52 
-    <div class="paper">
53 
-      <img :src="paper" alt="" width="100%">
54 
-      <div class="winningList">
55 
-        <div class="title">
56 
-          <img :src="blackStar" alt="">
57 
-          <span>中奖名单</span>
58 
-          <img :src="jt" alt="">
59 
-        </div>
60 
-        <div class="list">
61 
-          <div v-for='(item, index) in  data.list' :key='index'>
62 
-            <img :src="item.UserHeadImg" alt="">
63 
-            <span>
64 
-              <div>{{item.UserName}}</div>
65 
-              <div>{{toolClass.dateFormatM(item.CreateDate)}}</div>
66 
-            </span>
67 
-            <span>{{item.PrizeName}}</span>
68 
-          </div>
69 
-        </div>
70 
-      </div>
71 
-      <div class="rule">
72 
-        <div class="title">
73 
-          <img :src="sy" alt="">
74 
-          <span>活动规则</span>
75 
-          <img :src="jt" alt="">
76 
-        </div>
77 
-        <div class="content">
78 
-          <pre style="white-space:pre-line; text-align: left;line-height: .18rem;">{{data.prize.LuckdrawRule}}</pre>
79 
-        </div>
80 
-      </div>
81 
-      <img class="bird" :src="bird" alt="">
82 
-      <img class="quan1" :src="quan" alt="">
83 
-      <img class="quan2" :src="quan" alt="">
84 
-      <img class="bl1" :src="bl" alt="">
85 
-      <img class="bl2" :src="bl" alt="">
86 
-      <img class="jx2" :src="jx" alt="">
87 
-    </div>
8 
+  <div v-if="showPage">
9 
+    <model1 v-if="model === 1" @run='run' :prizeData='prizeData' :prizeNum='prizeNum' :data='data' :bg='bg' :activityStatus='activityStatus'></model1>
10 
+    <model2 v-if="model === 2" @run='run' :prizeData='prizeData' :prizeNum='prizeNum' :data='data' :bg='bg' :activityStatus='activityStatus'></model2>
11 
+    <model3 v-if="model === 3" @run='run' :prizeData='prizeData' :prizeNum='prizeNum' :data='data' :bg='bg' :activityStatus='activityStatus'></model3>
88 12 
   </div>
89 13 
 </template>
90 14
91 15 
 <script>
92 16 
 // import { getToLogin } from '@/util/util'
93 
-import wxsdk from '@/util/share'
94 
-import logo from '@/assets/indexlogo.jpg'
95 17 
 import bg from '@/assets/bg.jpg'
96 
-import turntable from '@/assets/zhuanpan.png'
97 
-import pointer from '@/assets/zhizhen.png'
98 
-import paper from '@/assets/zhi.png'
99 
-import blackStar from '@/assets/heixing.png'
100 
-import jt from '@/assets/jiantou.png'
101 
-import tx from '@/assets/touxiang.png'
102 
-import sy from '@/assets/shuangyuan.png'
103 
-import bird from '@/assets/xiaoniao.png'
104 
-import yf1 from '@/assets/yinfu1.png'
105 
-import yf2 from '@/assets/yinfu2.png'
106 
-import yf3 from '@/assets/yinfu3.png'
107 
-import yf4 from '@/assets/yinfu4.png'
108 
-import xian from '@/assets/huxian.png'
109 
-import sl from '@/assets/xiaosenlin.png'
110 
-import jx from '@/assets/juxing.png'
111 
-import quan from '@/assets/quan.png'
112 
-import bl from '@/assets/bolang.png'
113 
-import down from '@/assets/down.png'
114 
-import dialog from '@/assets/dialog.png'
115 
-import lq from '@/assets/lq.png'
116 
-import qrCode from '@/assets/qrCode.jpg'
117 
-import line1 from '@/assets/line4.png'
118 
-import line2 from '@/assets/line5.png'
119 
-import line3 from '@/assets/line6.png'
120 
-import line4 from '@/assets/line7.png'
121 
-import line5 from '@/assets/line8.png'
122 
-import line6 from '@/assets/line9.png'
123 
-import line7 from '@/assets/line1.png'
124 
-import line8 from '@/assets/line2.png'
125 
-import line9 from '@/assets/line3.png'
18 
+import wxsdk from '@/util/share'
19 
+import model1 from '@/components/model1'
20 
+import model2 from '@/components/model2'
21 
+import model3 from '@/components/model3'
126 22 
 import { mapState, createNamespacedHelpers } from 'vuex'
127 23 
 const { mapActions: mapAppActions } = createNamespacedHelpers('app')
128 24 
 export default {
129 25 
   data () {
130 26 
     return {
131 27 
       bg,
132 
-      turntable,
133 
-      pointer,
134 
-      paper,
135 
-      blackStar,
136 
-      jt,
137 
-      sl,
138 
-      jx,
139 
-      tx,
140 
-      sy,
141 
-      yf1,
142 
-      yf2,
143 
-      yf3,
144 
-      yf4,
145 
-      xian,
146 
-      bird,
147 
-      quan,
148 
-      bl,
149 
-      down,
150 
-      dialog,
151 
-      qrCode,
152 
-      lq,
153 
-      line1,
154 
-      line2,
155 
-      line3,
156 
-      line4,
157 
-      line5,
158 
-      line6,
159 
-      line7,
160 
-      line8,
161 
-      line9,
162 
-      logo,
163 
-      isRun: false,
164 28 
       round: false,
165 29 
       showDialog: false,
166 30 
       data: {

@@ -169,115 +33,91 @@ export default {
169 33 
         prizeList: [],
170 34 
         list: []
171 35 
       },
36 
+      prizeData: {},
37 
+      prizeNum: false,
172 38 
       winning: '',
173 39 
       showBtn: false,
174 
-      jump: ''
40 
+      jump: '',
41 
+      model: 0,
42 
+      showPage: false,
43 
+      activityStatus: 0
175 44 
     }
176 45 
   },
46 
+  components: {
47 
+    model1,
48 
+    model2,
49 
+    model3
50 
+  },
177 51 
   created () {
178 
-    if (location.search && this.toolClass.UrlSearch(location.search).code) {
179 
-      this.code = this.toolClass.UrlSearch(location.search).code
180 
-    } else {
181 
-      this.code = null
182 
-    }
183 
-    this.getUserInfo({ code: this.code, luckdrawid: this.lotteryId }).then((res) => {
184 
-      if (typeof (res) === 'object') {
185 
-        if (res.appid && res.appid !== '') {
186 
-          this.toolClass.getCode(res.appid)
187 
-        } else {
188 
-          this.data.userInfo = this.userInfo
189 
-          this.getData()
190 
-        }
191 
-      }
192 
-    }).catch((err) => {
193 
-      console.log(err)
194 
-    })
52 
+    this.showPage = true
53 
+    this.model = 3 // 模板
54 
+    // if (location.search && this.toolClass.UrlSearch(location.search).code) {
55 
+    //   this.code = this.toolClass.UrlSearch(location.search).code
56 
+    // } else {
57 
+    //   this.code = null
58 
+    // }
59 
+    // this.getUserInfo({ code: this.code, luckdrawid: this.lotteryId }).then((res) => {
60 
+    //   if (typeof (res) === 'object') {
61 
+    //     if (res.appid && res.appid !== '') {
62 
+    //       this.toolClass.getCode(res.appid)
63 
+    //     } else {
64 
+    //       this.data.userInfo = this.userInfo
65 
+    //       this.getData()
66 
+    //     }
67 
+    //   }
68 
+    // }).catch((err) => {
69 
+    //   console.log(err)
70 
+    // })
195 71 
   },
196 72 
   computed: {
197 73 
     ...mapState({
198 74 
       userInfo: x => x.app.userInfo,
199 75 
       prize: x => x.app.prize,
200 76 
       list: x => x.app.record,
201 
-      lotteryId: x => x.app.lotteryId
77 
+      lotteryId: x => x.app.lotteryId,
78 
+      isRun: x => x.app.runState
202 79 
     })
203 80 
   },
204 81 
   methods: {
205 
-    ...mapAppActions(['getUserInfo', 'getPrize', 'setPrize', 'getRecord', 'setUser']),
82 
+    ...mapAppActions(['getUserInfo', 'getPrize', 'setPrize', 'getRecord', 'setUser', 'setRunState']),
206 83 
     getData () {
207 84 
       this.getPrize({ id: this.lotteryId }).then((res) => {
85 
+        this.showPage = true
208 86 
         this.data.prize = this.prize
209 87 
         this.data.prizeList = this.data.prize.Prizes
210 
-        this.init()
88 
+        this.model = 3 // 模板
211 89 
       })
212 90 
       this.getRecord({ id: this.lotteryId }).then((res) => {
213 91 
         this.data.list = this.list
214 92 
       })
215 
-      // let logo = this.logo.substring(2, this.logo.length)
216 
-      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
93 
+      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, { // 随模板变动
217 94 
         title: '悦见山，金秋送好礼',
218 95 
         desc: '扫码分享，免费抽取赢森林音乐节门票，机会有限，速来参加',
219 
-        link: `${window.location.origin}${window.location.pathname}#/from/${this.data.userInfo.user.Id}`,
96 
+        link: `${window.location.origin}${window.location.pathname}#/from/${this.data.userInfo.user.CustomerId}`,
220 97 
         thu_image: `https://spaceofcheng.oss-cn-beijing.aliyuncs.com/indexlogo.jpg?x-oss-process=style/wxicon`
221 98 
       })
222 99 
     },
223 
-    init () {
224 
-      let lineList = [this.line1, this.line2, this.line3, this.line4, this.line5, this.line6, this.line7, this.line8, this.line9]
225 
-      if (Math.ceil(this.data.prizeList.length / lineList.length) > 1) {
226 
-        let length = Math.ceil(this.data.prizeList.length / lineList.length)
227 
-        for (let i = 1; i < length; i++) {
228 
-          lineList = lineList.concat(lineList)
229 
-        }
230 
-      }
231 
-      let deg = 360 / this.data.prizeList.length
232 
-      let rule = ''
233 
-      for (let i = 0; i < this.data.prizeList.length; i++) {
234 
-        this.data.prizeList[i].class = 'prize' + i
235 
-        this.data.prizeList[i].font = 'font' + i
236 
-        this.data.prizeList[i].img = lineList[i]
237 
-        console.log(deg * (i + 1))
238 
-        rule += `.prize${i}{transform: rotate(${deg * (i + 1)}deg);transform-origin:0 0;} .font${i}{transform: rotate(${(deg / 3)}deg);transform-origin:0 0;}`
239 
-      }
240 
-      let style = document.createElement('style')
241 
-      style.type = 'text/css'
242 
-      style.innerHTML = rule
243 
-      document.getElementsByTagName('head')[0].appendChild(style)
244 
-      this.stylesheet = document.styleSheets[document.styleSheets.length - 1]
245 
-    },
246 100 
     start () {
247 101 
       return new Promise((resolve, reject) => {
248 102 
         if (this.isRun) {
249 103 
         } else {
250 
-          this.isRun = true
251 
-          let dynamicValue = -3690
104 
+          this.setRunState(1)
252 105 
           this.setPrize({ id: this.lotteryId }).then((res) => {
253 106 
             for (let i = 0; i < this.data.prizeList.length; i++) {
254 107 
               if (this.data.prizeList[i].Id === res.prize.Id) {
255 
-                dynamicValue -= ((360 / this.data.prizeList.length * (i + 1)) + 360 / this.data.prizeList.length / 2)
108 
+                this.prizeData = res // 中奖数据
109 
+                this.prizeNum = i // 奖品位于奖品列表的第几条
256 110 
               }
257 111 
             }
258 
-            let rule = `@keyframes round {0% {transform: rotate(0deg);}100% {transform: rotate(${dynamicValue}deg);}}`
259 
-            let style = document.createElement('style')
260 
-            style.type = 'text/css'
261 
-            style.innerHTML = rule
262 
-            document.getElementsByTagName('head')[0].appendChild(style)
263 
-            this.stylesheet = document.styleSheets[document.styleSheets.length - 1]
264 
-            this.round = true
265 112 
             resolve(res)
266 113 
           }).catch((err) => {
267 114 
             console.log(err)
268 115 
             reject(err)
269 
-            this.isRun = false
116 
+            this.setRunState(0)
270 117 
           })
271 118 
         }
272 119 
       })
273 120 
     },
274 
-    get () {
275 
-      console.log('去领取')
276 
-      window.location.href = this.jump
277 
-    },
278 
-    close (data) {
279 
-      this.showDialog = false
280 
-    },
281 121 
     run () {
282 122 
       if (this.data.userInfo.user.Phone === '') {
283 123 
         this.$dialog.confirm({

@@ -295,29 +135,27 @@ export default {
295 135 
         })
296 136 
       } else {
297 137 
         this.start().then((res) => {
298 
-          window.setTimeout(() => {
299 
-            this.showDialog = true
300 
-            this.isRun = false
301 
-          }, 10000)
302 
-          window.setTimeout(() => {
303 
-            this.getRecord({ id: this.lotteryId }).then((res) => {
304 
-              this.data.list = this.list
305 
-            })
306 
-          }, 10000)
307 
-
308 138 
           if (this.$route.params.id) {
309 139 
             this.setUser({ toId: this.lotteryId, fromId: this.$route.params.id })
310 140 
           }
311 
-          this.winning = res.prize.PrizeName
312 
-          this.showBtn = res.detail.Url ? 1 : 0
313 
-          this.jump = res.detail.Url
314 141 
         }).catch(() => {
315 
-          this.isRun = false
142 
+          this.setRunState(0)
316 143 
         })
317 144 
       }
318 
-    },
319 
-    stop () {
320 
-      console.log('stop')
145 
+    }
146 
+  },
147 
+  watch: {
148 
+    isRun: {
149 
+      handler (cur, old) {
150 
+        if (cur === 2) {
151 
+          this.setRunState(0)
152 
+          this.getRecord({ id: this.lotteryId }).then((res) => {
153 
+            this.data.list = this.list
154 
+          })
155 
+        }
156 
+      },
157 
+      immediate: false,
158 
+      deep: false
321 159 
     }
322 160 
   }
323 161 
 }

+ 0
- 371
src/page/index/page.scss Parādīt failu 

@@ -1,378 +1,7 @@
1 
-// @import  '../../assets/hkhb.ttf'
2 
-body * {
3 
-  font-family: myFont;
4 
-}
5 
-
6 1 
 body{
7 2 
   width: 100%;
8 3 
   height: 100%;
9 4 
   overflow-x: hidden;
10 5 
   overflow-y: scroll;
11 6 
   -webkit-overflow-scrolling: touch;
12 
-}
13 
-
14 
-.bg {
15 
-  position: relative;
16 
-  width: 100%;
17 
-  .turntable {
18 
-    position: absolute;
19 
-    top: 2.2rem;
20 
-    width: 100%;
21 
-    height: 3rem;
22 
-    display: flex;
23 
-    justify-content: center;
24 
-    align-items: center;
25 
-    > img {
26 
-      position: absolute;
27 
-      z-index: 10;
28 
-    }
29 
-    .yf1 {
30 
-      bottom: -0.25rem;
31 
-      right: 0.05rem;
32 
-      width: 0.2rem;
33 
-    }
34 
-    .yf2 {
35 
-      bottom: 0;
36 
-      right: 0.8rem;
37 
-      width: 0.1rem;
38 
-    }
39 
-    .yf3 {
40 
-      bottom: -0.41rem;
41 
-      right: 0.45rem;
42 
-      width: 0.25rem;
43 
-    }
44 
-    .yf4 {
45 
-      bottom: -0.3rem;
46 
-      right: 1.3rem;
47 
-      width: 0.25rem;
48 
-    }
49 
-    .yf5 {
50 
-      bottom: 0.15rem;
51 
-      left: 0.65rem;
52 
-      width: 0.25rem;
53 
-      transform: rotate(25deg);
54 
-    }
55 
-    .yf6 {
56 
-      top: 0.3rem;
57 
-      left: 0.4rem;
58 
-      width: 0.25rem;
59 
-      transform: rotate(-60deg);
60 
-    }
61 
-    .hx {
62 
-      top: 0.1rem;
63 
-      right: 0.7rem;
64 
-      width: 0.3rem;
65 
-    }
66 
-    .hux {
67 
-      top: 0.45rem;
68 
-      right: 0.3rem;
69 
-      width: 0.4rem;
70 
-    }
71 
-    .sl {
72 
-      top: 0.15rem;
73 
-      right: 0;
74 
-      width: 1rem;
75 
-      height: 0.5rem;
76 
-      z-index: 1;
77 
-    }
78 
-    .sl2 {
79 
-      bottom: -0.4rem;
80 
-      left: 0;
81 
-      width: 0.95rem;
82 
-      height: 0.5rem;
83 
-      z-index: 1;
84 
-    }
85 
-    .jx {
86 
-      bottom: 0.3rem;
87 
-      right: 0.02rem;
88 
-      width: 0.5rem;
89 
-      height: 0.06rem;
90 
-      z-index: 1;
91 
-      transform: rotate(180deg);
92 
-    }
93 
-    .down {
94 
-      top: -0.3rem;
95 
-      left: 50%;
96 
-      transform: translateX(-50%);
97 
-      width: 0.3rem;
98 
-      z-index: 1;
99 
-    }
100 
-    .titleText{
101 
-      position: absolute;
102 
-      top: -0.6rem;
103 
-      left: 50%;
104 
-      transform: translateX(-50%);
105 
-      z-index: 1;
106 
-      font-size: .16rem;
107 
-      color: #12532d;
108 
-    }
109 
-    .turntable-body {
110 
-      width: 3rem;
111 
-      height: 3rem;
112 
-      position: relative;
113 
-      z-index: 9;
114 
-      div {
115 
-        position: absolute;
116 
-        width: 1.5rem;
117 
-        height: 1.5rem;
118 
-        line-height: 0.18rem;
119 
-        right: 0;
120 
-        bottom: 0;
121 
-        img{
122 
-          width: 93%;
123 
-          position: absolute;
124 
-          top: -0.04rem;
125 
-          left: 0;
126 
-        }
127 
-        span{
128 
-          overflow : hidden;
129 
-          text-overflow: ellipsis;
130 
-          display: -webkit-box;
131 
-          -webkit-line-clamp: 2;
132 
-          -webkit-box-orient: vertical;
133 
-          margin: 0 auto;
134 
-          position: absolute;
135 
-          top: 0rem;
136 
-          left: 0rem;
137 
-          width: 100%;
138 
-          text-align: right;
139 
-          padding: 0 .3rem 0 .5rem;
140 
-          box-sizing: border-box;
141 
-        }
142 
-      }
143 
-    }
144 
-    .round {
145 
-      animation: round 10s ease;
146 
-      animation-fill-mode: forwards;
147 
-    }
148 
-    .pointer {
149 
-      position: absolute;
150 
-      top: 50%;
151 
-      left: 50%;
152 
-      transform: translate(-50%, -60%);
153 
-      width: 0.8rem;
154 
-    }
155 
-  }
156 
-  .dialog {
157 
-    width: 100%;
158 
-    height: 100%;
159 
-    background: rgba(0, 0, 0, 0.5);
160 
-    position: fixed;
161 
-    top: 0;
162 
-    left: 0;
163 
-    z-index: 999;
164 
-    display: flex;
165 
-    justify-content: center;
166 
-    align-items: center;
167 
-    .box {
168 
-      width: 3.1rem;
169 
-      height: 2.35rem;
170 
-      position: relative;
171 
-      display: flex;
172 
-      flex-flow: column nowrap;
173 
-      justify-content: center;
174 
-      align-items: center;
175 
-      .dialog-bg {
176 
-        position: absolute;
177 
-        top: -0.3rem;
178 
-        width: 100%;
179 
-        left: -0.05rem;
180 
-        z-index: -10;
181 
-      }
182 
-      .dialog-title {
183 
-        font-size: 0.18rem;
184 
-        span {
185 
-          font-family: Arial, Helvetica, sans-serif;
186 
-        }
187 
-      }
188 
-      .dialog-name {
189 
-        font-size: 0.18rem;
190 
-        margin: 0.1rem 0;
191 
-      }
192 
-      .qrCode {
193 
-        width: 0.8rem;
194 
-        display: block;
195 
-      }
196 
-      .lq {
197 
-        width: 1rem;
198 
-        margin: 0.1rem 0 0.05rem;
199 
-      }
200 
-      .desc {
201 
-        font-size: 0.12rem;
202 
-        font-family: Arial, Helvetica, sans-serif;
203 
-        color: rgba(160, 160, 160, 1);
204 
-        width: 85%;
205 
-        margin-top: .1rem;
206 
-      }
207 
-    }
208 
-  }
209 
-  .paper {
210 
-    width: 100%;
211 
-    position: absolute;
212 
-    top: 5.6rem;
213 
-    left: 0;
214 
-    .winningList {
215 
-      width: 2.8rem;
216 
-      height: 2.8rem;
217 
-      position: absolute;
218 
-      top: 0.8rem;
219 
-      left: 50%;
220 
-      transform: translateX(-50%);
221 
-      .title {
222 
-        display: flex;
223 
-        align-items: center;
224 
-        justify-content: center;
225 
-        img:nth-of-type(1) {
226 
-          width: 0.25rem;
227 
-        }
228 
-        img:nth-of-type(2) {
229 
-          width: 0.14rem;
230 
-        }
231 
-        span {
232 
-          font-size: 0.14rem;
233 
-          padding: 0 0.1rem;
234 
-        }
235 
-      }
236 
-      .list {
237 
-        overflow-x: hidden;
238 
-        overflow-y: scroll;
239 
-        height: 2.6rem;
240 
-        div {
241 
-          display: flex;
242 
-          align-items: center;
243 
-          justify-content: space-between;
244 
-          img {
245 
-            width: 0.18rem;
246 
-            height: 0.18rem;
247 
-            border-radius: 50%;
248 
-          }
249 
-          span:nth-of-type(1) {
250 
-            flex: 1;
251 
-            text-align: left;
252 
-            margin: 0.1rem 0.1rem;
253 
-            display: flex;
254 
-            flex-flow: column nowrap;
255 
-            div{
256 
-              text-align: left;
257 
-            }
258 
-            div:nth-last-of-type(1){
259 
-              font-family: initial;
260 
-            }
261 
-          }
262 
-          span:nth-of-type(2) {
263 
-            text-align: right;
264 
-          }
265 
-          // span:nth-of-type(1) {
266 
-          //   text-align: left;
267 
-          //   margin: .1rem;
268 
-          //   width: 28%;
269 
-          //   overflow: hidden;
270 
-          //   text-overflow: ellipsis;
271 
-          //   white-space: nowrap;
272 
-          //   font-size: 12px;
273 
-          // }
274 
-          // span:nth-of-type(2) {
275 
-          //   flex: 1;
276 
-          //   margin: .1rem;
277 
-          //   font-size: 12px;
278 
-          // }
279 
-          // span:nth-of-type(3) {
280 
-          //   text-align: right;
281 
-          //   width: 13%;
282 
-          //   overflow: hidden;
283 
-          //   text-overflow: ellipsis;
284 
-          //   white-space: nowrap;
285 
-          //   margin: .1rem;
286 
-          //   font-size: 12px;
287 
-          // }
288 
-        }
289 
-      }
290 
-    }
291 
-    .rule {
292 
-      width: 2.8rem;
293 
-      height: 2.4rem;
294 
-      position: absolute;
295 
-      top: 3.8rem;
296 
-      left: 50%;
297 
-      transform: translateX(-50%);
298 
-      .title {
299 
-        display: flex;
300 
-        align-items: center;
301 
-        justify-content: center;
302 
-        margin-bottom: 0.2rem;
303 
-        img:nth-of-type(1) {
304 
-          width: 0.25rem;
305 
-        }
306 
-        img:nth-of-type(2) {
307 
-          width: 0.14rem;
308 
-        }
309 
-        span {
310 
-          font-size: 0.14rem;
311 
-          padding: 0 0.1rem;
312 
-        }
313 
-      }
314 
-      .content {
315 
-        .mb {
316 
-          margin-bottom: 0.1rem;
317 
-        }
318 
-        .mt {
319 
-          margin-top: 0.1rem;
320 
-        }
321 
-        div {
322 
-          display: flex;
323 
-          justify-content: space-between;
324 
-          align-items: center;
325 
-          margin-bottom: 0.05rem;
326 
-          text-align: left;
327 
-        }
328 
-      }
329 
-    }
330 
-    .bird {
331 
-      position: absolute;
332 
-      bottom: 0.55rem;
333 
-      left: 50%;
334 
-      transform: translateX(-50%);
335 
-      width: 1.2rem;
336 
-    }
337 
-    .quan1 {
338 
-      position: absolute;
339 
-      top: 1.1rem;
340 
-      left: 0;
341 
-      width: 0.28rem;
342 
-    }
343 
-    .quan2 {
344 
-      position: absolute;
345 
-      bottom: 4rem;
346 
-      right: -0.1rem;
347 
-      width: 0.28rem;
348 
-    }
349 
-    .bl1 {
350 
-      position: absolute;
351 
-      bottom: 2rem;
352 
-      right: 0rem;
353 
-      width: 0.5rem;
354 
-      height: 0.16rem;
355 
-    }
356 
-    .bl2 {
357 
-      position: absolute;
358 
-      bottom: 3.6rem;
359 
-      left: -0.1rem;
360 
-      width: 0.5rem;
361 
-      height: 0.16rem;
362 
-    }
363 
-    .jx2 {
364 
-      position: absolute;
365 
-      bottom: 0.3rem;
366 
-      left: 0;
367 
-      width: 0.8rem;
368 
-      z-index: 1;
369 
-    }
370 
-  }
371 
-}
372 
-
373 
-.fade-enter-active, .fade-leave-active {
374 
-  transition: opacity .5s;
375 
-}
376 
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
377 
-  opacity: 0;
378 7 
 }

+ 0
- 6
src/router/index.js Parādīt failu 

@@ -8,13 +8,7 @@ import lotteryDetail from '@/page/lotteryDetail'
8 8 
 Vue.use(Router)
9 9
10 10 
 export default new Router({
11 
-  // mode: 'history',
12 11 
   routes: [
13 
-    // {
14 
-    //   path: '/',
15 
-    //   name: 'getCode',
16 
-    //   component: getCode
17 
-    // },
18 12 
     {
19 13 
       path: '/',
20 14 
       name: 'index',

+ 12
- 1
src/store/app.js Parādīt failu 

@@ -101,7 +101,8 @@ export default {
101 101 
     lotteryId: '1',
102 102 
     userInfo: {}, // 用户信息
103 103 
     prize: {}, // 抽奖信息
104 
-    record: [] // 中奖列表
104 
+    record: [], // 中奖列表
105 
+    runState: 0 // 0为未启动，1为进行中，2为已结束
105 106 
   },
106 107 
   mutations: {
107 108 
     setUserInfo (state, data) {

@@ -112,6 +113,9 @@ export default {
112 113 
     },
113 114 
     setRecord (state, data) {
114 115 
       state.record = data
116 
+    },
117 
+    runState (state, data) {
118 
+      state.runState = data
115 119 
     }
116 120 
   },
117 121 
   actions: {

@@ -146,6 +150,9 @@ export default {
146 150 
     getRecord (context, data) {
147 151 
       return new Promise((resolve) => {
148 152 
         http.getRecord(data).then((res) => {
153 
+          if (res.length >= 100) {
154 
+            res = res.slice(0, 100)
155 
+          }
149 156 
           context.commit('setRecord', res)
150 157 
           resolve(res)
151 158 
         })

@@ -159,6 +166,10 @@ export default {
159 166 
           resolve(res)
160 167 
         })
161 168 
       })
169 
+    },
170 
+
171 
+    setRunState (context, data) {
172 
+      context.commit('runState', data)
162 173 
     }
163 174 
   }
164 175 
 }