vue開發微信商城項目總結之五--vue實現九宮格抽獎

CoorChice 發布于2019-08-21 16:51 / 2894人閱讀

摘要：根據產品提出的需求，需要做一個抽獎活動頁面需求簡介九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，實物類獎品，收貨人信息可編輯，默認為登陸用戶，可生成訂單福幣類獎品，直接發放，可在交易明細中查看優惠劵類獎品，交易明細中

根據產品提出的需求，
需要做一個抽獎活動頁面

需求簡介

九宮格抽獎，中獎概率可配置，以九宮格轉盤的形式進行抽獎，獎品分為三類，

實物類獎品，收貨人信息可編輯，默認為登陸用戶，可生成訂單

福幣類獎品，直接發放，可在交易明細中查看

優惠劵類獎品，交易明細中查看

九宮格轉動之后，中獎之前，要進行降速處理，獲獎后可以在右上角查看中獎記錄，
活動未開始不能抽獎，并且更換按鈕狀態

示意圖

該項目脫離了Jquery，采用原生js和vue實現
項目地址在這里

后臺接口結構

{
  "bizCode": "000000",
  "bizMessage": "",
  "data": {
    "prizeDesc": "每人100次$utf8$一等獎華為p10",
    "winners": [{
      "randomId": "11120fba76224eda8f819f0d0058606a",
      "level": 1,
      "name": "張三",
      "mobile": "153****91106",
      "commodityName": "華為 P10 Plus 全網通 4G 手機 雙卡雙待-6G+128G-玫瑰金"
    }, {
      "randomId": "fd47133f9bb4453a86a659f81640d1ef",
      "level": 4,
      "name": "張四",
      "mobile": "189****01366",
      "commodityName": "15福幣"
    }, {
      "randomId": "e9ba39c8773b4edebf45e1e3c35f3fc1",
      "level": 2,
      "name": "張五",
      "mobile": "189****01366",
      "commodityName": "200優惠券"
    }, {
      "randomId": "88e3ecdabc354d7a8c0b56a822a6f5a5",
      "level": 3,
      "name": "張六",
      "mobile": "150****00451",
      "commodityName": "100優惠券"
    }, {
      "randomId": "784227fd523841afac3dee0e6a377113",
      "level": 8,
      "name": "李四",
      "mobile": "189****01366",
      "commodityName": "3福幣"
    }, {
      "randomId": "7a95ad0b9522442a8ca12859e41f1fb9",
      "level": 8,
      "name": "李五",
      "mobile": "151****73957",
      "commodityName": "3福幣"
    }, {
      "randomId": "0b92100d0a354ad3be334edf826c61e5",
      "level": 8,
      "name": "李六",
      "mobile": "151****73957",
      "commodityName": "3福幣"
    }, {
      "randomId": "4b0a012886cd473d962f5ad9b60ba7e6",
      "level": 8,
      "name": "李七",
      "mobile": "151****73957",
      "commodityName": "3福幣"
    }, {
      "randomId": "46e31a4dfd0d4cf889f1c0b8f9f04075",
      "level": 7,
      "name": "李八",
      "mobile": "136****49120",
      "commodityName": "5福幣"
    }],
    "defineId": "b1dffba5c02f4fe19f3ac766f3432018",
    "remainingTimes": 45,
    "hasDrawed": true,
    "prizeInfo": [{
      "level": 1,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/1-2.png",
      "prizeId": "436066c40529401287658bfd67c1d346",
      "commodityName": "3福幣"
    }, {
      "level": 2,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/2-2.png",
      "prizeId": "acdcb838bda74ec8b1fd202234f852ec",
      "commodityName": "200優惠劵"
    }, {
      "level": 3,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/3-2.png",
      "prizeId": "484bf4c856b94265960b3e182e9f597f",
      "commodityName": "100優惠劵"
    }, {
      "level": 4,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/4-2.png",
      "prizeId": "d5c7784c4c4d4a33b141fc1be3b11a71",
      "commodityName": "15福幣"
    }, {
      "level": 5,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/5-2.png",
      "prizeId": "7221846d585a4bed80bf486f94fcabae",
      "commodityName": "10福幣"
    }, {
      "level": 6,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/6-1.png",
      "prizeId": "33c6413801fd44c594cbf6642840a614",
      "commodityName": "8福幣"
    }, {
      "level": 7,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/7-1.png",
      "prizeId": "e453f94905334ea083fca649e87b3308",
      "commodityName": "5福幣"
    }, {
      "level": 8,
      "picUrlDesc":"http://qdtalk.com/wp-content/uploads/2017/09/8-1.png",
      "prizeId": "e8df88de1878428bb58d0cc9152d8849",
      "commodityName": "3"
    }],
    "beginTime": 1506519900000,
    "endTime": 1601446191000,
    "currTime": 1506751791732,
    "title": "獎品豐厚",
    "lotteryDesc": "100中獎$utf8$抓緊機會"
  },
  "success": true
}

部分字段說明

prizeDesc：獎品說明，采用“$utf8$”分割，前端截取成數組，進行展示

winners：獲獎名單

defineId：活動id

remainingTimes：剩余抽獎次數

beginTime：活動開始時間

endTime活動結束時間

currTime:當前時間

title：活動標題

prizeInfo：獎品信息

lotteryDesc：抽獎活動說明規則,同獎品說明prizeDesc

vue開發微信商城項目總結之一–項目介紹
vue開發微信商城項目總結之二–Eslint配置
vue開發微信商城項目總結之三–根據不同的開發環境做配置
vue開發微信商城項目總結之四--本地代理處理跨域問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88832.html

vue開發微信商城項目總結之四--本地代理處理跨域問題

摘要：關于項目的基本描述，參見開發微信商城項目總結之一項目介紹開發微信商城項目總結之二配置開發微信商城項目總結之三根據不同的開發環境做配置之前處理跨域問題是通過，但是只有開發環境是跨域的，代碼打包后上傳到服務器便不再跨域，所以在本地做了判斷，判斷關于項目的基本描述，參見 vue開發微信商城項目總結之一–項目介紹 vue開發微信商城項目總結之二–Eslint配置 vue開發微信商城項目總結之...

Leck1e 2019-08-21 16:40 評論0 收藏0
vue開發微信商城項目總結之六--關于vuex的思考

先對項目進行一下簡單的介紹 vue開發微信商城項目總結之一–項目介紹項目開發初期，由于項目比較著急上線，前端的框架在選型上比較倉促，只是因為vue學習成本較低，就選了它，沒有什么別的原因，之前看過angular2一段時間，又趁著周末看了兩天vue，就倉促開發，所以埋下了很多坑，項目（項目目前沒有對游客開放，是2B2C的模式）上線后，回頭填坑，發現了很多問題，因為之前一直是基于Jquery模式的...

PrototypeZ 2019-08-21 17:08 評論0 收藏0
vue開發微信商城項目總結之三--根據不同的開發環境做配置

摘要：項目是基于搭建，項目分為開發環境，測試環境，預生產環境，生產環境，其中開發環境和測試環境調用同一個接口，開發環境調用服務器端的測試接口會跨域，以上需求就引發了一些問題，問題一測試環境包括開發環境，并且開發環境跨域，預生產環境，生產環境，有項目是基于vue-cli搭建，項目分為開發環境，測試環境，預生產環境，生產環境，其中開發環境和測試環境調用同一個接口，開發環境調用服務器端的測試接口...

Magicer 2019-08-22 11:10 評論0 收藏0
vue抽獎組件之九宮格

摘要：寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度谷歌求教，久而久之便養成了伸手即來的本領。。。可能是出于懶的原因沒錯，就是因為懶，從未發表過技術文章或開發經驗，深感慚愧，故洗心革面，決心分享一些東西。寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度/谷歌求教，久而久之便養成了伸手即來的‘本領’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發表過技...

wenhai.he 2019-08-30 15:54 評論0 收藏0
vue抽獎組件之九宮格

摘要：寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度谷歌求教，久而久之便養成了伸手即來的本領。。。可能是出于懶的原因沒錯，就是因為懶，從未發表過技術文章或開發經驗，深感慚愧，故洗心革面，決心分享一些東西。寫在前面本人自從事前端工作以來，每每遇到技術問題后，都是向百度/谷歌求教，久而久之便養成了伸手即來的‘本領’。。。可能是出于‘懶’的原因（沒錯，就是因為懶），從未發表過技...

dendoink 2019-08-23 14:11 評論0 收藏0