根据产品提出的需求,
需要做一个抽奖活动页面
需求简介
九宫格抽奖,中奖概率可配置,以九宫格转盘的形式进行抽奖,奖品分为三类,
- 实物类奖品,收货人信息可编辑,默认为登陆用户,可生成订单
- 福币类奖品,直接发放,可在交易明细中查看
- 优惠劵类奖品,交易明细中查看
九宫格转动之后,中奖之前,要进行降速处理,获奖后可以在右上角查看中奖记录,
活动未开始不能抽奖,并且更换按钮状态
该项目脱离了Jquery,采用原生js和vue实现
后台接口结构
n{ "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开发微信商城项目总结之四–本地代理处理跨域问题
为什么我的插件实现代码高亮必须要刷新一次才会有颜色?
不清楚,我这正常,你百度看看呢