由@kkkyrieliu程序員開發的小工具，用來給女朋友送禮物的抽獎小工具，反饋非常不錯
- 支持自定義頁面文案
- 支持自定義禮物
- 支持指定中獎的禮物
掃碼查看 demo
（僅支持微信內訪問，請用微信掃描二維碼查看示例）
使用方式（手把手教學）
如果是前端程序員應該不需要怎麼教了，但還是寫了非常詳細的使用指南（ README ）給有需要的非前端專業人員。
Giftie 是一個用來搞定「送禮問題」的終極解決方案。
採用「自定義文案」+「自定義禮物」+「抽獎」的形式，讓禮物的接收方（母親/妻子/女友）感受到來自於你的真心和愛意。
使用指引和源代碼都在下面這個地址里了：
項目地址：https://github.com/KKKyrie/giftie
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 後的文件直接放在自己的服務器上即可。如果沒有自己的服務器，推薦使用騰訊雲的靜態網站託管服務。
可以