成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue開發(fā)微信商城項目總結(jié)之五--vue實現(xiàn)九宮格抽獎

CoorChice / 2905人閱讀

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

根據(jù)產(chǎn)品提出的需求，
需要做一個抽獎活動頁面

需求簡介

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

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

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

優(yōu)惠劵類獎品，交易明細中查看

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

示意圖

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

后臺接口結(jié)構(gòu) 
{
  "bizCode": "000000",
  "bizMessage": "",
  "data": {
    "prizeDesc": "每人100次$utf8$一等獎華為p10",
    "winners": [{
      "randomId": "11120fba76224eda8f819f0d0058606a",
      "level": 1,
      "name": "張三",
      "mobile": "153****91106",
      "commodityName": "華為 P10 Plus 全網(wǎng)通 4G 手機 雙卡雙待-6G+128G-玫瑰金"
    }, {
      "randomId": "fd47133f9bb4453a86a659f81640d1ef",
      "level": 4,
      "name": "張四",
      "mobile": "189****01366",
      "commodityName": "15福幣"
    }, {
      "randomId": "e9ba39c8773b4edebf45e1e3c35f3fc1",
      "level": 2,
      "name": "張五",
      "mobile": "189****01366",
      "commodityName": "200優(yōu)惠券"
    }, {
      "randomId": "88e3ecdabc354d7a8c0b56a822a6f5a5",
      "level": 3,
      "name": "張六",
      "mobile": "150****00451",
      "commodityName": "100優(yōu)惠券"
    }, {
      "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優(yōu)惠劵"
    }, {
      "level": 3,
      "picUrlDesc": "http://qdtalk.com/wp-content/uploads/2017/09/3-2.png",
      "prizeId": "484bf4c856b94265960b3e182e9f597f",
      "commodityName": "100優(yōu)惠劵"
    }, {
      "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$”分割，前端截取成數(shù)組，進行展示

winners：獲獎名單

defineId：活動id

remainingTimes：剩余抽獎次數(shù)

beginTime：活動開始時間

endTime活動結(jié)束時間

currTime:當前時間

title：活動標題

prizeInfo：獎品信息

lotteryDesc：抽獎活動說明規(guī)則,同獎品說明prizeDesc

vue開發(fā)微信商城項目總結(jié)之一–項目介紹
vue開發(fā)微信商城項目總結(jié)之二–Eslint配置
vue開發(fā)微信商城項目總結(jié)之三–根據(jù)不同的開發(fā)環(huán)境做配置
vue開發(fā)微信商城項目總結(jié)之四--本地代理處理跨域問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88832.html

相關(guān)文章

  • vue開發(fā)微信商城項目總結(jié)之四--本地代理處理跨域問題

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

    Leck1e 評論0 收藏0

  • vue開發(fā)微信商城項目總結(jié)之六--關(guān)于vuex的思考

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

    PrototypeZ 評論0 收藏0

  • vue開發(fā)微信商城項目總結(jié)之三--根據(jù)不同的開發(fā)環(huán)境做配置

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

    Magicer 評論0 收藏0

  • vue抽獎組件之九宮格

    摘要：寫在前面本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度谷歌求教，久而久之便養(yǎng)成了伸手即來的本領。。?？赡苁浅鲇趹械脑驔]錯，就是因為懶，從未發(fā)表過技術(shù)文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。 寫在前面 本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度/谷歌求教，久而久之便養(yǎng)成了伸手即來的‘本領’。。?？赡苁浅鲇凇畱小脑颍]錯，就是因為懶），從未發(fā)表過技...

    wenhai.he 評論0 收藏0

  • vue抽獎組件之九宮格

    摘要：寫在前面本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度谷歌求教，久而久之便養(yǎng)成了伸手即來的本領。。?？赡苁浅鲇趹械脑驔]錯，就是因為懶，從未發(fā)表過技術(shù)文章或開發(fā)經(jīng)驗，深感慚愧，故洗心革面，決心分享一些東西。 寫在前面 本人自從事前端工作以來，每每遇到技術(shù)問題后，都是向百度/谷歌求教，久而久之便養(yǎng)成了伸手即來的‘本領’。。?？赡苁浅鲇凇畱小脑颍]錯，就是因為懶），從未發(fā)表過技...

    dendoink 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<