vue开发微信商城项目总结之五--vue实现九宫格抽奖

根据产品提出的需求，
需要做一个抽奖活动页面

需求简介

九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，

1. 实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单
2. 福币类奖品，直接发放，可在交易明细中查看
3. 优惠劵类奖品，交易明细中查看

九宫格转动之后，中奖之前，要进行降速处理，获奖后可以在右上角查看中奖记录，
活动未开始不能抽奖，并且更换按钮状态

示意图

该项目脱离了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开发微信商城项目总结之四--本地代理处理跨域问题