1 Star 0 Fork 0

holten / giftie

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Gift logo

Giftie

Powered by kyrieliu version license vue wechat

:sparkles: 介绍

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

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




:chestnut: 示例

demo

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




:bookmark: 使用指引

:star: 点击 star

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

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


:loop: 点击 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: '「不同造型需求,全面满足」' },
];

注意,配置礼物时请自行找礼物图片,为了保障视觉体验,请选用正方形且已经过体积压缩的图片。


:rocket: 部署

修改完配置检查没问题后,就可以上线了。
Build 后的文件直接放在自己的服务器上即可。如果没有自己的服务器,推荐使用腾讯云的静态网站托管服务

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




:flags: 未来规划

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

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




:star: Star 趋势

Star History Chart
实时更新中...




:green_heart: 最后

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

MIT License Copyright (c) 2021 kyrieliu Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

giftiegiftiegiftiegiftiegiftie 展开 收起
Vue 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/holten/giftie.git
git@gitee.com:holten/giftie.git
holten
giftie
giftie
main

搜索帮助