专栏首页前端进阶vue开发微信商城项目总结之五--vue实现九宫格抽奖

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript面向对象与原型

    工厂模式创建的对象,像工厂一样来创建对象,创建的每一个对象都是通过new Object()来创建的,原型直指Object() 构造函数似乎不错,但有的时候我们需...

    陌上寒
  • 谈一谈javascript异步

    我们知道JavaScript的单线程的,这与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程...

    陌上寒
  • js导入导出总结与实践

    在上一篇文章中JavaScript中AMD和ES6模块的导入导出对比,偏向于理论层面,还有一些同学在微信群里或是私下里针对一些问题进行了沟通,所以有了这一篇文章...

    陌上寒
  • 极客大挑战2019PHP题目详解

    网页中提到了备份网站,因此可以尝试使用一个网站备份文件名的字典来进行爆破,发现网站中有www.zip文件。

    KevinBruce
  • 亚马逊引用积极的用例来反驳对其面部识别技术的指责,但人们真的会买账吗?

    面部识别算法,特别是亚马逊的基于云的图像分析服务Rekognition,最近成为日益严格审查的主题,这已不是什么秘密。

    AiTechYun
  • 桌面虚拟化spice协议研究(一)

    最近在搞VDI安全研究,公司正好用的是redhat的spice协议,所以正好想把研究结果做个总结记录。

    半月弧
  • js基础-表单验证和提交

    基础知识: 原始提交如下: 1 <form action="/login" method="post" id="form1"> 2 <span>用户<...

    Ryan-Miao
  • iOS开发CoreAnimation解读之二——对CALayer的分析

            每一个UIView的对象中都有一个layer这样的属性,并且layer会负责view中有关图形绘制的相关操作,例如我们设置view的背景颜色和设...

    珲少
  • 一网打进Linux下那些查找命令

    查找是我们每天都在做的事情,早上醒来找下手机,出门之前查下公交,坐下之后查下资料,分析数据查下模式。 查找文件,查找信息,查找错误是应用起来更为具体的一些工作,...

    生信宝典
  • [译]关于Node.js streams你需要知道的一切

    Node.js的stream模块是有名的应用困难,更别说理解了。那现在可以告诉你,这些都不是问题了。

    frontoldman

扫码关注云+社区

领取腾讯云代金券