Giftie 是一个用来搞定「送礼问题」的终极解决方案。由用户@KKKyrie开发的送礼小工具。
Giftie采用「自定义文案」+「自定义礼物」+「抽奖」的形式,所以的奖品和图片都可以自定义,前提是你得有点折腾精神,哈哈,下面是抽奖的页面。
可以用微信扫码查看demo,或者微信打开demo链接:https://valentine.kyrieliu.cn
🔖 使用指引
Giftie 将一切可以 DIY 的变量都放在了配置文件 gift.setting.js
中,每个字段上都标记了详细的注释,这里我们可以快速的过一下关键字段:
// 控制项目全局状态的关键 key,如非特殊情况或覆盖使用,则不用修改 export const GLOBAL_KEYS = { EXIST_KEY: 'HAS_GIFT', NAME_KEY: 'GIFT_NAME', IMAGE_KEY: 'GIFT_IMAGE_URL', }; // 是否允许对方在抽奖结束后重新抽奖 // 建议调试的时候保留,给对方使用时去掉 export const IS_SHOW_RESTART = false; // 首页配置(主要是文案,暂不支持修改主题) export const homeConfig = { // 主标题 title: '520送礼抽奖', // 留言,数组的每一项代表一行 messages: [ { key: 'a', wording: '这是第一行文案', }, { key: 's', wording: '这是第二行文案', }, { key: 'd', wording: '然后,这里是第三行文案', }, ], // 最终解释权归属人 owner: 'XXX', // 抽奖转盘的动画时间,单位毫秒 timeout: 5000, // 指定中奖的礼物下标,从 0 开始 targetGiftIndex: null, }; // 礼物清单 // 字段 key 不用改,只要保证每个礼物的 key 字段是不同的即可 // 图片放在 public/images 中,建议是正方形,否则影响视觉体验 // name 是礼物的全称;alias 是礼物的简称(用来显示在抽奖方格里) export const gifts = [ { key: 'q', name: 'Dior双飞套装', alias: 'Dior双飞', image: '/images/1.png', description: '「经典迷人色彩,彰显奢华魅力」' }, { key: 'w', name: '腾讯视频终身VIP', alias: 'VIP', image: '/images/2.png', description: '“为你承包一辈子的 VIP”' }, { key: 'e', name: '兰蔻小黑瓶套装', alias: '小黑瓶套装', image: '/images/3.png', description: '「强维稳,快修护」' }, { key: 'r', name: '520红包', alias: '520', image: '/images/6.png', description: '“想给你唱一百首情歌”' }, { key: 't', name: 'Dior星空套装', alias: 'Dior星空', image: '/images/5.png', description: '「百变唇妆,精美雕琢」' }, { key: 'y', name: '1314红包', alias: '1314', image: '/images/6.png', description: '“从今往后,我都会在你旁边”' }, { key: 'u', name: 'UR购物券:¥1,000', alias: 'UR', image: '/images/7.png', description: '“UR!买!”' }, { key: 'i', name: 'Dyson美发套装', alias: '戴森', image: '/images/8.png', description: '「不同造型需求,全面满足」' }, ];
注意,配置礼物时请自行找礼物图片,为了保障视觉体验,请选用正方形且已经过体积压缩的图片。
🚀 部署
修改完配置检查没问题后,就可以上线了。
Build 后的文件直接放在自己的服务器上即可。如果没有自己的服务器,推荐使用腾讯云的静态网站托管服务。
项目GitHub地址:https://github.com/KKKyrie/giftie
本文链接:https://www.fooliji.com/13461/
- 转载请保留原文链接谢谢!
- 本站所有资源文章出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。
- 本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户擦亮眼睛自行鉴别,做一个有主见和判断力的用户。
- 本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
- 联系方式(#替换成@):feedback#abskoop.com