• Stars
    star
    751
  • Rank 60,419 (Top 2 %)
  • Language Vue
  • License
    MIT License
  • Created almost 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

一个用来搞定「送礼问题」的「纯前端」解决方案

Gift logo

Giftie

Powered by kyrieliu version license vue node version wechat

✨ 介绍

广东省一键预约结婚 Chrome 插件 marie 现已开源,用完 giftie 就可以考虑用 marie 了 😏

Giftie 是一个用来搞定「送礼问题」的终极解决方案
采用「自定义文案」+「自定义礼物」+「抽奖」的形式,让礼物的接收方(母亲/妻子/女友)感受到来自于你的真心和爱意。

💍我用这个小工具,求婚成功啦!

有趣的小故事:Part.1Part.2

注意:运行环境仅支持 Node v14.15.0




🌰 示例

demo

(仅支持微信内访问,请用微信扫描二维码查看示例)




🔖 使用指引

点击 star

在 Github 上点击 star,就会持续关注当前项目(可通过个人主页快速找到当前项目);以及,可以小小的满足一下作者的虚荣心,为以后的迭代提供动力。

科普:star 相当于关注/收藏/点赞。


点击 fork 并自定义配置文件

Fork 之后,你就可以在这份「自己的代码」仓库中进行定制化的配置了。
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 后的文件直接放在自己的服务器上即可。如果没有自己的服务器,推荐使用腾讯云的静态网站托管服务

Tip: 本项目是一个「纯前端」项目,关键状态都保存在客户端(localStorage)中,毕竟是一个 MVP 的产品,也不会有谁的母亲/老婆/女友会删掉客户端状态重新抽(zuò)奖(bì)吧,不会吧不会吧?如果有觉得不稳妥的朋友,也可以改造成数据库中保存用户状态的模式。




🎏 未来规划

  • 支持多种字体
  • 支持多种主题
  • 支持根据自定义抽奖模式(转盘 or 九宫格)
  • 更灵活的文案配置

🌟 如果 Giftie 对你有帮助,欢迎用 star 来表达对我的支持,Thx~
如果你希望第一时间 get 我的新开源项目,一定要记得在 Github 上关注我~




Star 趋势

Star History Chart
实时更新中...




💚 最后

关注我的个人原创公众号,第一时间 get 更多好玩有趣的文章/项目,让前端变得更有趣 😝