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

CoorChice 发布于2019-08-21 16:51 / 2656人阅读

摘要：根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单福币类奖品，直接发放，可在交易明细中查看优惠劵类奖品，交易明细中

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

需求简介

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

实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单

福币类奖品，直接发放，可在交易明细中查看

优惠劵类奖品，交易明细中查看

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

示意图

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

混合云专线服务 html 九宫格抽奖 VUE实现webrtc Vue实现分页 PHP开发微信支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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