1. 礼物特效
This commit is contained in:
李琦
Binary file not shown.
@@ -37,6 +37,8 @@ func migrateSchema(db *gorm.DB) {
|
||||
{&models.SiteGift{}, "站点礼物", "site_gifts"},
|
||||
{&models.GiftConfig{}, "礼物兑换配置", "gift_configs"},
|
||||
{&models.AiModerationCache{}, "AI审核缓存", "ai_moderation_caches"},
|
||||
{&models.CashGift{}, "礼金记录", "cash_gifts"},
|
||||
{&models.CashGiftConfig{}, "礼金配置", "cash_gift_configs"},
|
||||
{&visit.SiteVisit{}, "访客记录", "site_visits"},
|
||||
}
|
||||
for _, t := range tables {
|
||||
|
||||
@@ -98,3 +98,26 @@ type AiModerationCache struct {
|
||||
}
|
||||
|
||||
func (AiModerationCache) TableName() string { return "ai_moderation_caches" }
|
||||
|
||||
// CashGift 礼金记录
|
||||
type CashGift struct {
|
||||
ID uint `gorm:"primaryKey;comment:主键ID" json:"id"`
|
||||
Name string `gorm:"column:name;size:50;not null;default:'';index;comment:宾客姓名" json:"name"`
|
||||
Amount int `gorm:"column:amount;not null;default:0;comment:礼金金额（元）" json:"amount"`
|
||||
Note string `gorm:"column:note;size:255;not null;default:'';comment:备注" json:"note"`
|
||||
CreatedAt time.Time `gorm:"column:created_at;not null;index;comment:登记时间" json:"created_at"`
|
||||
UpdatedAt time.Time `gorm:"column:updated_at;comment:更新时间" json:"updated_at"`
|
||||
}
|
||||
|
||||
func (CashGift) TableName() string { return "cash_gifts" }
|
||||
|
||||
// CashGiftConfig 礼金备注快捷选项等配置
|
||||
type CashGiftConfig struct {
|
||||
ID uint `gorm:"primaryKey;comment:主键ID" json:"id"`
|
||||
NotesData string `gorm:"type:json;column:notes_data;not null;comment:备注快捷选项JSON数组" json:"notes_data"`
|
||||
ViewPass string `gorm:"column:view_pass;size:64;not null;default:'';comment:前台查看全部口令" json:"view_pass"`
|
||||
EntryPass string `gorm:"column:entry_pass;size:64;not null;default:'';comment:前台记账登记口令" json:"entry_pass"`
|
||||
UpdatedAt time.Time `gorm:"column:updated_at;comment:更新时间" json:"updated_at"`
|
||||
}
|
||||
|
||||
func (CashGiftConfig) TableName() string { return "cash_gift_configs" }
|
||||
|
||||
@@ -10,6 +10,7 @@ import (
|
||||
"mime/multipart"
|
||||
"net/url"
|
||||
"path/filepath"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
@@ -204,6 +205,7 @@ func registerAPI(api *gin.RouterGroup) {
|
||||
api.POST("/ai/blessing", handleAIBlessing)
|
||||
api.POST("/rsvp", handleCreateRsvp)
|
||||
api.GET("/rsvp/list", handleRsvpList)
|
||||
api.DELETE("/rsvp/:id", handleDeleteRsvp)
|
||||
api.GET("/danmaku", handlePublicDanmaku)
|
||||
api.POST("/danmaku", handleCreateDanmaku)
|
||||
api.GET("/danmaku/list", handleDanmakuList)
|
||||
@@ -215,6 +217,20 @@ func registerAPI(api *gin.RouterGroup) {
|
||||
api.GET("/gift/stats", handleGiftStats)
|
||||
api.GET("/gift/costs", handleGetGiftCosts)
|
||||
api.POST("/gift/costs", handleSaveGiftCosts)
|
||||
api.POST("/cash-gift", handleCreateCashGift)
|
||||
api.GET("/cash-gift/recent", handleCashGiftRecent)
|
||||
api.GET("/cash-gift/notes", handleGetCashGiftNotes)
|
||||
api.POST("/cash-gift/notes", handleSaveCashGiftNotes)
|
||||
api.GET("/cash-gift/view-pass", handleGetCashGiftViewPass)
|
||||
api.POST("/cash-gift/view-pass", handleSaveCashGiftViewPass)
|
||||
api.POST("/cash-gift/view/unlock", handleCashGiftViewUnlock)
|
||||
api.GET("/cash-gift/view/list", handleCashGiftViewList)
|
||||
api.GET("/cash-gift/entry-pass", handleGetCashGiftEntryPass)
|
||||
api.POST("/cash-gift/entry-pass", handleSaveCashGiftEntryPass)
|
||||
api.POST("/cash-gift/entry/unlock", handleCashGiftEntryUnlock)
|
||||
api.GET("/cash-gift/list", handleCashGiftList)
|
||||
api.PUT("/cash-gift/:id", handleUpdateCashGift)
|
||||
api.DELETE("/cash-gift/:id", handleDeleteCashGift)
|
||||
|
||||
visit.Register(api, db, utils.RequireAdmin)
|
||||
configsection.Register(api, db, utils.RequireAdmin)
|
||||
@@ -416,6 +432,27 @@ func handleRsvpList(c *gin.Context) {
|
||||
c.JSON(200, gin.H{"code": 200, "data": list})
|
||||
}
|
||||
|
||||
func handleDeleteRsvp(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
id := strings.TrimSpace(c.Param("id"))
|
||||
if id == "" {
|
||||
c.JSON(400, gin.H{"error": "缺少 ID"})
|
||||
return
|
||||
}
|
||||
res := db.Delete(&models.Rsvp{}, id)
|
||||
if res.Error != nil {
|
||||
c.JSON(500, gin.H{"error": "删除失败"})
|
||||
return
|
||||
}
|
||||
if res.RowsAffected == 0 {
|
||||
c.JSON(404, gin.H{"error": "记录不存在"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{"code": 200, "msg": "已删除"})
|
||||
}
|
||||
|
||||
func handlePublicDanmaku(c *gin.Context) {
|
||||
q := db.Where("status = ?", "approved")
|
||||
if after := strings.TrimSpace(c.Query("after_id")); after != "" {
|
||||
@@ -960,3 +997,526 @@ func collectAlbumImages(configData string) []string {
|
||||
}
|
||||
return images
|
||||
}
|
||||
|
||||
func handleCreateCashGift(c *gin.Context) {
|
||||
if !requireCashGiftEntryAccess(c) {
|
||||
return
|
||||
}
|
||||
var body struct {
|
||||
Name string `json:"name"`
|
||||
Amount int `json:"amount"`
|
||||
Note string `json:"note"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&body); err != nil {
|
||||
c.JSON(400, gin.H{"error": "参数错误"})
|
||||
return
|
||||
}
|
||||
name := strings.TrimSpace(body.Name)
|
||||
note := strings.TrimSpace(body.Note)
|
||||
if name == "" {
|
||||
c.JSON(400, gin.H{"error": "请填写姓名"})
|
||||
return
|
||||
}
|
||||
if len([]rune(name)) > 50 {
|
||||
c.JSON(400, gin.H{"error": "姓名过长"})
|
||||
return
|
||||
}
|
||||
if body.Amount <= 0 {
|
||||
c.JSON(400, gin.H{"error": "请填写正确金额"})
|
||||
return
|
||||
}
|
||||
if body.Amount > 10000000 {
|
||||
c.JSON(400, gin.H{"error": "金额过大"})
|
||||
return
|
||||
}
|
||||
if len([]rune(note)) > 200 {
|
||||
c.JSON(400, gin.H{"error": "备注过长"})
|
||||
return
|
||||
}
|
||||
item := models.CashGift{
|
||||
Name: name,
|
||||
Amount: body.Amount,
|
||||
Note: note,
|
||||
}
|
||||
if err := db.Create(&item).Error; err != nil {
|
||||
c.JSON(500, gin.H{"error": "保存失败"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{"code": 200, "msg": "已登记", "data": item})
|
||||
}
|
||||
|
||||
func handleCashGiftRecent(c *gin.Context) {
|
||||
if !requireCashGiftEntryAccess(c) {
|
||||
return
|
||||
}
|
||||
limit := 3
|
||||
if v := strings.TrimSpace(c.Query("limit")); v != "" {
|
||||
if n, err := strconv.Atoi(v); err == nil && n > 0 && n <= 20 {
|
||||
limit = n
|
||||
}
|
||||
}
|
||||
var list []models.CashGift
|
||||
db.Order("created_at desc, id desc").Limit(limit).Find(&list)
|
||||
c.JSON(200, gin.H{"code": 200, "data": list})
|
||||
}
|
||||
|
||||
func defaultCashGiftNotes() []string {
|
||||
return []string{
|
||||
"男方亲戚", "女方亲戚",
|
||||
"男方朋友", "女方朋友",
|
||||
"男方同学", "女方同学",
|
||||
"男方同事", "女方同事",
|
||||
"男方邻居", "女方邻居",
|
||||
"其他",
|
||||
}
|
||||
}
|
||||
|
||||
func normalizeCashGiftNotes(raw []string) []string {
|
||||
seen := map[string]bool{}
|
||||
out := make([]string, 0, len(raw))
|
||||
for _, s := range raw {
|
||||
s = strings.TrimSpace(s)
|
||||
if s == "" || seen[s] {
|
||||
continue
|
||||
}
|
||||
if len([]rune(s)) > 30 {
|
||||
s = string([]rune(s)[:30])
|
||||
}
|
||||
seen[s] = true
|
||||
out = append(out, s)
|
||||
if len(out) >= 40 {
|
||||
break
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
func loadCashGiftNotes() []string {
|
||||
var cfg models.CashGiftConfig
|
||||
if err := db.First(&cfg, 1).Error; err != nil || strings.TrimSpace(cfg.NotesData) == "" {
|
||||
return defaultCashGiftNotes()
|
||||
}
|
||||
var notes []string
|
||||
if err := json.Unmarshal([]byte(cfg.NotesData), ¬es); err != nil {
|
||||
return defaultCashGiftNotes()
|
||||
}
|
||||
notes = normalizeCashGiftNotes(notes)
|
||||
if len(notes) == 0 {
|
||||
return defaultCashGiftNotes()
|
||||
}
|
||||
return notes
|
||||
}
|
||||
|
||||
func saveCashGiftNotes(notes []string) error {
|
||||
notes = normalizeCashGiftNotes(notes)
|
||||
if len(notes) == 0 {
|
||||
notes = defaultCashGiftNotes()
|
||||
}
|
||||
raw, err := json.Marshal(notes)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
var cfg models.CashGiftConfig
|
||||
if err := db.First(&cfg, 1).Error; err != nil {
|
||||
cfg = models.CashGiftConfig{ID: 1, NotesData: string(raw)}
|
||||
return db.Create(&cfg).Error
|
||||
}
|
||||
cfg.NotesData = string(raw)
|
||||
return db.Save(&cfg).Error
|
||||
}
|
||||
|
||||
func loadCashGiftViewPass() string {
|
||||
var cfg models.CashGiftConfig
|
||||
if err := db.First(&cfg, 1).Error; err != nil {
|
||||
return ""
|
||||
}
|
||||
return strings.TrimSpace(cfg.ViewPass)
|
||||
}
|
||||
|
||||
func loadCashGiftEntryPass() string {
|
||||
var cfg models.CashGiftConfig
|
||||
if err := db.First(&cfg, 1).Error; err != nil {
|
||||
return ""
|
||||
}
|
||||
return strings.TrimSpace(cfg.EntryPass)
|
||||
}
|
||||
|
||||
func saveCashGiftViewPass(pass string) error {
|
||||
pass = strings.TrimSpace(pass)
|
||||
if len([]rune(pass)) > 64 {
|
||||
pass = string([]rune(pass)[:64])
|
||||
}
|
||||
var cfg models.CashGiftConfig
|
||||
if err := db.First(&cfg, 1).Error; err != nil {
|
||||
notes, _ := json.Marshal(defaultCashGiftNotes())
|
||||
cfg = models.CashGiftConfig{ID: 1, NotesData: string(notes), ViewPass: pass}
|
||||
return db.Create(&cfg).Error
|
||||
}
|
||||
cfg.ViewPass = pass
|
||||
return db.Save(&cfg).Error
|
||||
}
|
||||
|
||||
func saveCashGiftEntryPass(pass string) error {
|
||||
pass = strings.TrimSpace(pass)
|
||||
if len([]rune(pass)) > 64 {
|
||||
pass = string([]rune(pass)[:64])
|
||||
}
|
||||
var cfg models.CashGiftConfig
|
||||
if err := db.First(&cfg, 1).Error; err != nil {
|
||||
notes, _ := json.Marshal(defaultCashGiftNotes())
|
||||
cfg = models.CashGiftConfig{ID: 1, NotesData: string(notes), EntryPass: pass}
|
||||
return db.Create(&cfg).Error
|
||||
}
|
||||
cfg.EntryPass = pass
|
||||
return db.Save(&cfg).Error
|
||||
}
|
||||
|
||||
func cashGiftViewTokenFromRequest(c *gin.Context) string {
|
||||
if t := strings.TrimSpace(c.GetHeader("X-Cash-Gift-Token")); t != "" {
|
||||
return t
|
||||
}
|
||||
return utils.BearerToken(c)
|
||||
}
|
||||
|
||||
func cashGiftEntryTokenFromRequest(c *gin.Context) string {
|
||||
if t := strings.TrimSpace(c.GetHeader("X-Cash-Gift-Entry-Token")); t != "" {
|
||||
return t
|
||||
}
|
||||
return utils.BearerToken(c)
|
||||
}
|
||||
|
||||
func requireCashGiftViewAccess(c *gin.Context) bool {
|
||||
token := cashGiftViewTokenFromRequest(c)
|
||||
if utils.VerifyCashGiftViewToken(token) {
|
||||
return true
|
||||
}
|
||||
if utils.VerifyToken(token) {
|
||||
return true
|
||||
}
|
||||
c.JSON(403, gin.H{"error": "请先输入查看口令"})
|
||||
return false
|
||||
}
|
||||
|
||||
func requireCashGiftEntryAccess(c *gin.Context) bool {
|
||||
token := cashGiftEntryTokenFromRequest(c)
|
||||
if utils.VerifyCashGiftEntryToken(token) {
|
||||
return true
|
||||
}
|
||||
if utils.VerifyToken(token) {
|
||||
return true
|
||||
}
|
||||
c.JSON(403, gin.H{"error": "请先输入记账口令"})
|
||||
return false
|
||||
}
|
||||
|
||||
func handleGetCashGiftViewPass(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
pass := loadCashGiftViewPass()
|
||||
c.JSON(200, gin.H{
|
||||
"code": 200,
|
||||
"data": gin.H{
|
||||
"has_pass": pass != "",
|
||||
"password": pass,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func handleSaveCashGiftViewPass(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
var body struct {
|
||||
Password string `json:"password"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&body); err != nil {
|
||||
c.JSON(400, gin.H{"error": "参数错误"})
|
||||
return
|
||||
}
|
||||
pass := strings.TrimSpace(body.Password)
|
||||
if pass == "" {
|
||||
c.JSON(400, gin.H{"error": "请设置查看口令"})
|
||||
return
|
||||
}
|
||||
if err := saveCashGiftViewPass(pass); err != nil {
|
||||
c.JSON(500, gin.H{"error": "保存失败"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{"code": 200, "msg": "口令已保存", "data": gin.H{"has_pass": true}})
|
||||
}
|
||||
|
||||
func handleCashGiftViewUnlock(c *gin.Context) {
|
||||
var body struct {
|
||||
Password string `json:"password"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&body); err != nil {
|
||||
c.JSON(400, gin.H{"error": "参数错误"})
|
||||
return
|
||||
}
|
||||
pass := loadCashGiftViewPass()
|
||||
if pass == "" {
|
||||
c.JSON(403, gin.H{"error": "尚未配置查看口令，请先在后台设置"})
|
||||
return
|
||||
}
|
||||
if strings.TrimSpace(body.Password) != pass {
|
||||
c.JSON(403, gin.H{"error": "口令错误"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{
|
||||
"code": 200,
|
||||
"msg": "已解锁",
|
||||
"data": gin.H{"token": utils.SignCashGiftViewToken()},
|
||||
})
|
||||
}
|
||||
|
||||
func handleGetCashGiftEntryPass(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
pass := loadCashGiftEntryPass()
|
||||
c.JSON(200, gin.H{
|
||||
"code": 200,
|
||||
"data": gin.H{
|
||||
"has_pass": pass != "",
|
||||
"password": pass,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func handleSaveCashGiftEntryPass(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
var body struct {
|
||||
Password string `json:"password"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&body); err != nil {
|
||||
c.JSON(400, gin.H{"error": "参数错误"})
|
||||
return
|
||||
}
|
||||
pass := strings.TrimSpace(body.Password)
|
||||
if pass == "" {
|
||||
c.JSON(400, gin.H{"error": "请设置记账口令"})
|
||||
return
|
||||
}
|
||||
if err := saveCashGiftEntryPass(pass); err != nil {
|
||||
c.JSON(500, gin.H{"error": "保存失败"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{"code": 200, "msg": "口令已保存", "data": gin.H{"has_pass": true}})
|
||||
}
|
||||
|
||||
func handleCashGiftEntryUnlock(c *gin.Context) {
|
||||
var body struct {
|
||||
Password string `json:"password"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&body); err != nil {
|
||||
c.JSON(400, gin.H{"error": "参数错误"})
|
||||
return
|
||||
}
|
||||
pass := loadCashGiftEntryPass()
|
||||
if pass == "" {
|
||||
c.JSON(403, gin.H{"error": "尚未配置记账口令，请先在后台设置"})
|
||||
return
|
||||
}
|
||||
if strings.TrimSpace(body.Password) != pass {
|
||||
c.JSON(403, gin.H{"error": "口令错误"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{
|
||||
"code": 200,
|
||||
"msg": "已解锁",
|
||||
"data": gin.H{"token": utils.SignCashGiftEntryToken()},
|
||||
})
|
||||
}
|
||||
|
||||
func handleCashGiftViewList(c *gin.Context) {
|
||||
if !requireCashGiftViewAccess(c) {
|
||||
return
|
||||
}
|
||||
q := strings.TrimSpace(c.Query("q"))
|
||||
note := strings.TrimSpace(c.Query("note"))
|
||||
side := strings.TrimSpace(c.Query("side")) // male | female | other | ""
|
||||
sortKey := strings.TrimSpace(c.Query("sort"))
|
||||
minAmount := 0
|
||||
maxAmount := 0
|
||||
if v := strings.TrimSpace(c.Query("min")); v != "" {
|
||||
if n, err := strconv.Atoi(v); err == nil && n > 0 {
|
||||
minAmount = n
|
||||
}
|
||||
}
|
||||
if v := strings.TrimSpace(c.Query("max")); v != "" {
|
||||
if n, err := strconv.Atoi(v); err == nil && n > 0 {
|
||||
maxAmount = n
|
||||
}
|
||||
}
|
||||
|
||||
tx := db.Model(&models.CashGift{})
|
||||
if q != "" {
|
||||
like := "%" + q + "%"
|
||||
tx = tx.Where("name LIKE ? OR note LIKE ?", like, like)
|
||||
}
|
||||
if note != "" {
|
||||
tx = tx.Where("note = ?", note)
|
||||
}
|
||||
switch side {
|
||||
case "male":
|
||||
tx = tx.Where("note LIKE ?", "男方%")
|
||||
case "female":
|
||||
tx = tx.Where("note LIKE ?", "女方%")
|
||||
case "other":
|
||||
tx = tx.Where("note NOT LIKE ? AND note NOT LIKE ? AND note <> ''", "男方%", "女方%")
|
||||
}
|
||||
if minAmount > 0 {
|
||||
tx = tx.Where("amount >= ?", minAmount)
|
||||
}
|
||||
if maxAmount > 0 {
|
||||
tx = tx.Where("amount <= ?", maxAmount)
|
||||
}
|
||||
|
||||
order := "created_at desc, id desc"
|
||||
switch sortKey {
|
||||
case "time_asc":
|
||||
order = "created_at asc, id asc"
|
||||
case "amount_desc":
|
||||
order = "amount desc, created_at desc"
|
||||
case "amount_asc":
|
||||
order = "amount asc, created_at desc"
|
||||
case "name_asc":
|
||||
order = "name asc, created_at desc"
|
||||
}
|
||||
|
||||
var list []models.CashGift
|
||||
tx.Order(order).Find(&list)
|
||||
total := 0
|
||||
for _, it := range list {
|
||||
total += it.Amount
|
||||
}
|
||||
c.JSON(200, gin.H{
|
||||
"code": 200,
|
||||
"data": gin.H{
|
||||
"list": list,
|
||||
"total": total,
|
||||
"count": len(list),
|
||||
"notes": loadCashGiftNotes(),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func handleGetCashGiftNotes(c *gin.Context) {
|
||||
c.JSON(200, gin.H{
|
||||
"code": 200,
|
||||
"data": gin.H{
|
||||
"notes": loadCashGiftNotes(),
|
||||
"defaults": defaultCashGiftNotes(),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func handleSaveCashGiftNotes(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
var body struct {
|
||||
Notes []string `json:"notes"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&body); err != nil {
|
||||
c.JSON(400, gin.H{"error": "参数错误"})
|
||||
return
|
||||
}
|
||||
notes := normalizeCashGiftNotes(body.Notes)
|
||||
if len(notes) == 0 {
|
||||
c.JSON(400, gin.H{"error": "至少保留一个快捷备注"})
|
||||
return
|
||||
}
|
||||
if err := saveCashGiftNotes(notes); err != nil {
|
||||
c.JSON(500, gin.H{"error": "保存失败"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{"code": 200, "msg": "已保存", "data": gin.H{"notes": notes}})
|
||||
}
|
||||
|
||||
func handleCashGiftList(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
var list []models.CashGift
|
||||
db.Order("created_at desc, id desc").Find(&list)
|
||||
total := 0
|
||||
for _, it := range list {
|
||||
total += it.Amount
|
||||
}
|
||||
c.JSON(200, gin.H{
|
||||
"code": 200,
|
||||
"data": gin.H{
|
||||
"list": list,
|
||||
"total": total,
|
||||
"count": len(list),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func handleUpdateCashGift(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
id, err := strconv.ParseUint(strings.TrimSpace(c.Param("id")), 10, 64)
|
||||
if err != nil || id == 0 {
|
||||
c.JSON(400, gin.H{"error": "无效 ID"})
|
||||
return
|
||||
}
|
||||
var body struct {
|
||||
Name string `json:"name"`
|
||||
Amount int `json:"amount"`
|
||||
Note string `json:"note"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&body); err != nil {
|
||||
c.JSON(400, gin.H{"error": "参数错误"})
|
||||
return
|
||||
}
|
||||
name := strings.TrimSpace(body.Name)
|
||||
note := strings.TrimSpace(body.Note)
|
||||
if name == "" {
|
||||
c.JSON(400, gin.H{"error": "请填写姓名"})
|
||||
return
|
||||
}
|
||||
if body.Amount <= 0 {
|
||||
c.JSON(400, gin.H{"error": "请填写正确金额"})
|
||||
return
|
||||
}
|
||||
var item models.CashGift
|
||||
if err := db.First(&item, id).Error; err != nil {
|
||||
c.JSON(404, gin.H{"error": "记录不存在"})
|
||||
return
|
||||
}
|
||||
item.Name = name
|
||||
item.Amount = body.Amount
|
||||
item.Note = note
|
||||
if err := db.Save(&item).Error; err != nil {
|
||||
c.JSON(500, gin.H{"error": "保存失败"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{"code": 200, "msg": "已更新", "data": item})
|
||||
}
|
||||
|
||||
func handleDeleteCashGift(c *gin.Context) {
|
||||
if !utils.RequireAdmin(c) {
|
||||
return
|
||||
}
|
||||
id := strings.TrimSpace(c.Param("id"))
|
||||
if id == "" {
|
||||
c.JSON(400, gin.H{"error": "缺少 ID"})
|
||||
return
|
||||
}
|
||||
res := db.Delete(&models.CashGift{}, id)
|
||||
if res.Error != nil {
|
||||
c.JSON(500, gin.H{"error": "删除失败"})
|
||||
return
|
||||
}
|
||||
if res.RowsAffected == 0 {
|
||||
c.JSON(404, gin.H{"error": "记录不存在"})
|
||||
return
|
||||
}
|
||||
c.JSON(200, gin.H{"code": 200, "msg": "已删除"})
|
||||
}
|
||||
|
||||
@@ -38,29 +38,65 @@ func SignToken(account string) string {
|
||||
return b64 + "." + sig
|
||||
}
|
||||
|
||||
func VerifyToken(token string) bool {
|
||||
func SignCashGiftViewToken() string {
|
||||
payload := fmt.Sprintf(`{"account":%q,"exp":%d}`, "cash-gift-view", time.Now().Add(7*24*time.Hour).Unix())
|
||||
b64 := base64.StdEncoding.EncodeToString([]byte(payload))
|
||||
mac := hmac.New(sha256.New, []byte(adminSecret))
|
||||
mac.Write([]byte(b64))
|
||||
sig := base64.StdEncoding.EncodeToString(mac.Sum(nil))
|
||||
return b64 + "." + sig
|
||||
}
|
||||
|
||||
func SignCashGiftEntryToken() string {
|
||||
payload := fmt.Sprintf(`{"account":%q,"exp":%d}`, "cash-gift-entry", time.Now().Add(7*24*time.Hour).Unix())
|
||||
b64 := base64.StdEncoding.EncodeToString([]byte(payload))
|
||||
mac := hmac.New(sha256.New, []byte(adminSecret))
|
||||
mac.Write([]byte(b64))
|
||||
sig := base64.StdEncoding.EncodeToString(mac.Sum(nil))
|
||||
return b64 + "." + sig
|
||||
}
|
||||
|
||||
func parseTokenClaims(token string) (account string, exp int64, ok bool) {
|
||||
parts := strings.Split(token, ".")
|
||||
if len(parts) != 2 {
|
||||
return false
|
||||
return "", 0, false
|
||||
}
|
||||
mac := hmac.New(sha256.New, []byte(adminSecret))
|
||||
mac.Write([]byte(parts[0]))
|
||||
expected := base64.StdEncoding.EncodeToString(mac.Sum(nil))
|
||||
if !hmac.Equal([]byte(expected), []byte(parts[1])) {
|
||||
return false
|
||||
return "", 0, false
|
||||
}
|
||||
raw, err := base64.StdEncoding.DecodeString(parts[0])
|
||||
if err != nil {
|
||||
return false
|
||||
return "", 0, false
|
||||
}
|
||||
var claims struct {
|
||||
Account string `json:"account"`
|
||||
Exp int64 `json:"exp"`
|
||||
}
|
||||
if err := json.Unmarshal(raw, &claims); err != nil {
|
||||
return false
|
||||
return "", 0, false
|
||||
}
|
||||
return time.Now().Unix() <= claims.Exp
|
||||
if time.Now().Unix() > claims.Exp {
|
||||
return "", 0, false
|
||||
}
|
||||
return claims.Account, claims.Exp, true
|
||||
}
|
||||
|
||||
func VerifyToken(token string) bool {
|
||||
_, _, ok := parseTokenClaims(token)
|
||||
return ok
|
||||
}
|
||||
|
||||
func VerifyCashGiftViewToken(token string) bool {
|
||||
account, _, ok := parseTokenClaims(token)
|
||||
return ok && account == "cash-gift-view"
|
||||
}
|
||||
|
||||
func VerifyCashGiftEntryToken(token string) bool {
|
||||
account, _, ok := parseTokenClaims(token)
|
||||
return ok && account == "cash-gift-entry"
|
||||
}
|
||||
|
||||
func BearerToken(c *gin.Context) string {
|
||||
@@ -79,7 +115,7 @@ func CORSMiddleware() gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
|
||||
c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT")
|
||||
c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")
|
||||
c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Cash-Gift-Token, X-Cash-Gift-Entry-Token")
|
||||
if c.Request.Method == "OPTIONS" {
|
||||
c.AbortWithStatus(204)
|
||||
return
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/liqi/20260731/1774761336736_compressed_compressed.webp" />
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/liqi/20260731/1774761336736_compressed_compressed.webp" />-->
|
||||
<link rel="icon" type="image/svg+xml" href="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/liqi/20260803/132743000000000_%E6%AF%9B%E7%AC%94%E5%9B%8D%E5%AD%97%E8%AE%BE%E8%AE%A1%20%281%29.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="description" content="💍（公历2026年9月4日）岁在丙午，仲秋之吉，四日佳期。谨订良缘，敢邀台驾。" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
@@ -162,6 +162,72 @@ export function saveGiftCosts(costs) {
|
||||
return service.post('/gift/costs', { costs })
|
||||
}
|
||||
|
||||
export function submitCashGift(form, entryToken = '') {
|
||||
const headers = {}
|
||||
if (entryToken) headers['X-Cash-Gift-Entry-Token'] = entryToken
|
||||
return service.post('/cash-gift', form, { headers })
|
||||
}
|
||||
|
||||
export function getCashGiftRecent(limit = 3, entryToken = '') {
|
||||
const headers = {}
|
||||
if (entryToken) headers['X-Cash-Gift-Entry-Token'] = entryToken
|
||||
return service.get('/cash-gift/recent', { params: { limit }, headers })
|
||||
}
|
||||
|
||||
export function getCashGiftNotes() {
|
||||
return service.get('/cash-gift/notes')
|
||||
}
|
||||
|
||||
export function saveCashGiftNotes(notes) {
|
||||
return service.post('/cash-gift/notes', { notes })
|
||||
}
|
||||
|
||||
export function getCashGiftViewPass() {
|
||||
return service.get('/cash-gift/view-pass')
|
||||
}
|
||||
|
||||
export function saveCashGiftViewPass(password) {
|
||||
return service.post('/cash-gift/view-pass', { password })
|
||||
}
|
||||
|
||||
export function unlockCashGiftView(password) {
|
||||
return service.post('/cash-gift/view/unlock', { password })
|
||||
}
|
||||
|
||||
export function getCashGiftEntryPass() {
|
||||
return service.get('/cash-gift/entry-pass')
|
||||
}
|
||||
|
||||
export function saveCashGiftEntryPass(password) {
|
||||
return service.post('/cash-gift/entry-pass', { password })
|
||||
}
|
||||
|
||||
export function unlockCashGiftEntry(password) {
|
||||
return service.post('/cash-gift/entry/unlock', { password })
|
||||
}
|
||||
|
||||
export function getCashGiftViewList(params = {}, token = '') {
|
||||
const headers = {}
|
||||
if (token) headers['X-Cash-Gift-Token'] = token
|
||||
return service.get('/cash-gift/view/list', { params, headers })
|
||||
}
|
||||
|
||||
export function getCashGiftList() {
|
||||
return service.get('/cash-gift/list')
|
||||
}
|
||||
|
||||
export function updateCashGift(id, form) {
|
||||
return service.put(`/cash-gift/${id}`, form)
|
||||
}
|
||||
|
||||
export function deleteCashGift(id) {
|
||||
return service.delete(`/cash-gift/${id}`)
|
||||
}
|
||||
|
||||
export function deleteRsvp(id) {
|
||||
return service.delete(`/rsvp/${id}`)
|
||||
}
|
||||
|
||||
export function adminLogin(credentials) {
|
||||
return service.post('/admin/login', credentials)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<!-- 始终挂载，用 v-show 隐藏，避免关闭时 v-if 拆树与清空列表打架 -->
|
||||
<div v-show="enabled" class="danmaku-layer" aria-hidden="true">
|
||||
<div
|
||||
v-show="enabled"
|
||||
class="danmaku-layer"
|
||||
:style="layerBoxStyle"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
v-for="row in rows"
|
||||
:key="row.id"
|
||||
@@ -29,15 +34,18 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { getDanmaku } from '@/api/wedding'
|
||||
import { formatRelativeTime } from '@/utils/relativeTime'
|
||||
import { resolveDanmakuColor, resolveDanmakuTint } from '@/utils/danmakuColors'
|
||||
import { DANMAKU_AREA_BOX } from '@/utils/danmakuArea'
|
||||
|
||||
const props = defineProps({
|
||||
enabled: { type: Boolean, default: true },
|
||||
showTime: { type: Boolean, default: true },
|
||||
active: { type: Boolean, default: true },
|
||||
/** top30 | top | bottom | full */
|
||||
area: { type: String, default: 'top30' },
|
||||
})
|
||||
|
||||
const POLL_MS = 30000
|
||||
@@ -46,6 +54,15 @@ const TRACKS = 5
|
||||
/** 同轨占用结束前不可再发，避免重叠 */
|
||||
const TRACK_GAP_MS = 420
|
||||
|
||||
const layerBoxStyle = computed(() => {
|
||||
const box = DANMAKU_AREA_BOX[props.area] || DANMAKU_AREA_BOX.top30
|
||||
return {
|
||||
top: box.top,
|
||||
height: box.height,
|
||||
bottom: 'auto',
|
||||
}
|
||||
})
|
||||
|
||||
const items = ref([])
|
||||
const rows = ref([])
|
||||
let cursor = 0
|
||||
@@ -154,7 +171,8 @@ const buildRow = (item, { force = false } = {}) => {
|
||||
const tint = resolveDanmakuTint(item.color)
|
||||
const id = ++uid
|
||||
const totalDelay = delay + slot.extraDelay
|
||||
const topPct = 7 + slot.track * 14
|
||||
// 轨道分布在当前弹幕层内部（由 area 控制层高度）
|
||||
const topPct = TRACKS <= 1 ? 50 : 12 + (slot.track / (TRACKS - 1)) * 70
|
||||
const isGradient = typeof tint.background === 'string' && tint.background.includes('gradient')
|
||||
|
||||
const timeLabel = force
|
||||
@@ -319,6 +337,15 @@ watch(
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.area,
|
||||
() => {
|
||||
if (!props.enabled) return
|
||||
clearFlying()
|
||||
syncSpawn()
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
if (!props.enabled) return
|
||||
await fetchList()
|
||||
@@ -336,7 +363,10 @@ defineExpose({ refresh: fetchList, pushItem })
|
||||
<style scoped>
|
||||
.danmaku-layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 30%;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -30,6 +30,16 @@ const routes = [
|
||||
component: () => import('@/views/hb/index.vue'),
|
||||
meta: { posterSide: 3 },
|
||||
},
|
||||
{
|
||||
path: '/lijin',
|
||||
name: 'CashGift',
|
||||
component: () => import('@/views/lijin/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/lijin/list',
|
||||
name: 'CashGiftList',
|
||||
component: () => import('@/views/lijin/list.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
|
||||
16
vite-tailwindcss/src/utils/danmakuArea.js
Normal file
16
vite-tailwindcss/src/utils/danmakuArea.js
Normal file
@@ -0,0 +1,16 @@
|
||||
/** 弹幕出现范围选项（图标选择） */
|
||||
export const DANMAKU_AREA_OPTIONS = [
|
||||
{ value: 'top30', label: '上半屏 30%', title: '上半 30%' },
|
||||
{ value: 'top', label: '上半屏', title: '上半屏' },
|
||||
{ value: 'bottom', label: '下半屏', title: '下半屏' },
|
||||
{ value: 'full', label: '全屏', title: '全屏' },
|
||||
]
|
||||
|
||||
export const DANMAKU_AREA_BOX = {
|
||||
top30: { top: '0%', height: '30%' },
|
||||
top: { top: '0%', height: '50%' },
|
||||
bottom: { top: '50%', height: '50%' },
|
||||
full: { top: '0%', height: '100%' },
|
||||
}
|
||||
|
||||
export const DEFAULT_DANMAKU_AREA = 'top30'
|
||||
@@ -1054,11 +1054,176 @@
|
||||
<template v-else-if="column.key==='created_at'">
|
||||
<span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key==='actions'">
|
||||
<a-button size="small" danger type="text" @click="onDeleteRsvp(record)">删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 礼金 -->
|
||||
<section v-if="activeTab === 'cash'">
|
||||
<div class="admin-panel">
|
||||
<div class="flex justify-between items-center mb-4 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">礼金记录</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">
|
||||
共 {{ cashGiftCount }} 笔 · 合计 ¥{{ cashGiftTotal }}
|
||||
· 前台录入 <a class="text-[#a88c6b]" href="/lijin" target="_blank">/lijin</a>
|
||||
· 明细 <a class="text-[#a88c6b]" href="/lijin/list" target="_blank">/lijin/list</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a-button size="small" @click="openCashGiftCreate">新增</a-button>
|
||||
<a-button size="small" :loading="cashGiftLoading" @click="loadCashGifts">
|
||||
<i class="fa-solid fa-rotate-right mr-1"></i>刷新
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
class="admin-table"
|
||||
:columns="cashGiftColumns"
|
||||
:data-source="cashGiftList"
|
||||
:loading="cashGiftLoading"
|
||||
row-key="id"
|
||||
size="middle"
|
||||
:pagination="{ pageSize: 10, hideOnSinglePage: true }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key==='amount'">
|
||||
<span class="text-[#a88c6b] font-medium">¥{{ record.amount }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key==='created_at'">
|
||||
<span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key==='actions'">
|
||||
<a-space>
|
||||
<a-button size="small" type="link" class="!text-[#a88c6b] !px-1" @click="openCashGiftEdit(record)">编辑</a-button>
|
||||
<a-button size="small" danger type="text" @click="onDeleteCashGift(record)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel mt-4">
|
||||
<div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">记账口令</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">
|
||||
前台 <a class="text-[#a88c6b]" href="/lijin" target="_blank">/lijin</a> 登记礼金前需输入此口令
|
||||
</div>
|
||||
</div>
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="!bg-[#a88c6b] !border-[#a88c6b]"
|
||||
:loading="cashEntryPassSaving"
|
||||
@click="saveCashEntryPass"
|
||||
>保存口令</a-button>
|
||||
</div>
|
||||
<a-input-password
|
||||
v-model:value="cashEntryPass"
|
||||
placeholder="设置记账口令"
|
||||
class="!max-w-[320px]"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel mt-4">
|
||||
<div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">查看全部口令</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">
|
||||
前台 <a class="text-[#a88c6b]" href="/lijin/list" target="_blank">/lijin/list</a> 需输入口令后查看完整礼金列表
|
||||
</div>
|
||||
</div>
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="!bg-[#a88c6b] !border-[#a88c6b]"
|
||||
:loading="cashViewPassSaving"
|
||||
@click="saveCashViewPass"
|
||||
>保存口令</a-button>
|
||||
</div>
|
||||
<a-input-password
|
||||
v-model:value="cashViewPass"
|
||||
placeholder="设置查看口令"
|
||||
class="!max-w-[320px]"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel mt-4">
|
||||
<div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">备注快捷选项</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">前台礼金页可一键点选；男方 / 女方分开配置</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a-button size="small" @click="resetCashNotePresets">恢复默认</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="!bg-[#a88c6b] !border-[#a88c6b]"
|
||||
:loading="cashNotesSaving"
|
||||
@click="saveCashNotePresets"
|
||||
>保存选项</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<a-tag
|
||||
v-for="(n, i) in cashNotePresets"
|
||||
:key="`${n}-${i}`"
|
||||
closable
|
||||
color="gold"
|
||||
@close.prevent="removeCashNotePreset(i)"
|
||||
>{{ n }}</a-tag>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center flex-wrap">
|
||||
<a-input
|
||||
v-model:value="cashNoteDraft"
|
||||
placeholder="新增快捷备注，如：男方亲戚"
|
||||
class="!max-w-[280px]"
|
||||
:maxlength="30"
|
||||
@pressEnter="addCashNotePreset"
|
||||
/>
|
||||
<a-button size="small" @click="addCashNotePreset">添加</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
v-model:open="cashGiftModalOpen"
|
||||
:title="cashGiftEditingId ? '编辑礼金' : '新增礼金'"
|
||||
ok-text="保存"
|
||||
cancel-text="取消"
|
||||
:confirm-loading="cashGiftSaving"
|
||||
@ok="saveCashGiftModal"
|
||||
>
|
||||
<a-form layout="vertical" class="mt-2">
|
||||
<a-form-item label="姓名" required>
|
||||
<a-input v-model:value="cashGiftForm.name" placeholder="宾客姓名" :maxlength="20" />
|
||||
</a-form-item>
|
||||
<a-form-item label="金额（元）" required>
|
||||
<a-input-number v-model:value="cashGiftForm.amount" :min="1" :max="10000000" class="w-full" />
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<div class="flex flex-wrap gap-1.5 mb-2">
|
||||
<a-tag
|
||||
v-for="n in cashNotePresets"
|
||||
:key="'m-' + n"
|
||||
class="!cursor-pointer"
|
||||
:color="cashGiftForm.note === n ? 'gold' : undefined"
|
||||
@click="cashGiftForm.note = n"
|
||||
>{{ n }}</a-tag>
|
||||
</div>
|
||||
<a-input v-model:value="cashGiftForm.note" placeholder="可选" :maxlength="100" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</section>
|
||||
|
||||
<!-- 弹幕审核 -->
|
||||
<section v-if="activeTab === 'danmaku'">
|
||||
<div class="admin-panel">
|
||||
@@ -1134,9 +1299,13 @@ import { PieChart } from 'echarts/charts'
|
||||
import { TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import {
|
||||
getConfigSection, saveConfigSection, uploadImage, getRsvpList, getUploadConfig, saveUploadConfig,
|
||||
getConfigSection, saveConfigSection, uploadImage, getRsvpList, deleteRsvp, getUploadConfig, saveUploadConfig,
|
||||
getDanmakuList, updateDanmakuStatus, getVisitStats, getVisitList,
|
||||
getPosterConfig, savePosterConfig, getGiftStats, saveGiftCosts,
|
||||
getCashGiftList, updateCashGift, deleteCashGift, submitCashGift,
|
||||
getCashGiftNotes, saveCashGiftNotes,
|
||||
getCashGiftViewPass, saveCashGiftViewPass,
|
||||
getCashGiftEntryPass, saveCashGiftEntryPass,
|
||||
} from '@/api/wedding'
|
||||
import { useAdminStore } from '@/stores/admin'
|
||||
import ImageField from '@/components/ImageField.vue'
|
||||
@@ -1158,7 +1327,7 @@ const adminStore = useAdminStore()
|
||||
const TAB_KEY = 'wedding_admin_active_tab'
|
||||
const MENU_LAYOUT_KEY = 'wedding_admin_menu_layout'
|
||||
const CONFIG_SECTIONS = ['basic', 'copy', 'visual', 'music', 'photos', 'schedule']
|
||||
const VALID_TABS = ['overview', 'gifts', 'visits', ...CONFIG_SECTIONS, 'upload', 'poster', 'rsvp', 'danmaku']
|
||||
const VALID_TABS = ['overview', 'gifts', 'visits', ...CONFIG_SECTIONS, 'upload', 'poster', 'rsvp', 'cash', 'danmaku']
|
||||
|
||||
/** 后台菜单分组 */
|
||||
const adminMenuGroups = [
|
||||
@@ -1188,6 +1357,7 @@ const adminMenuGroups = [
|
||||
label: '宾客互动',
|
||||
items: [
|
||||
{ key: 'rsvp', label: '出席回执', icon: 'fa-solid fa-envelope-open-text' },
|
||||
{ key: 'cash', label: '礼金', icon: 'fa-solid fa-yen-sign' },
|
||||
{ key: 'danmaku', label: '弹幕审核', icon: 'fa-solid fa-comments' },
|
||||
],
|
||||
},
|
||||
@@ -1258,6 +1428,22 @@ const posterMusicOptions = ref([])
|
||||
const tabLoading = ref(false)
|
||||
const rsvpLoading = ref(false)
|
||||
const rsvpList = ref([])
|
||||
const cashGiftLoading = ref(false)
|
||||
const cashGiftSaving = ref(false)
|
||||
const cashGiftList = ref([])
|
||||
const cashGiftTotal = ref(0)
|
||||
const cashGiftCount = ref(0)
|
||||
const cashGiftModalOpen = ref(false)
|
||||
const cashGiftEditingId = ref(0)
|
||||
const cashGiftForm = reactive({ name: '', amount: 1000, note: '' })
|
||||
const cashNotePresets = ref([])
|
||||
const cashNoteDefaults = ref([])
|
||||
const cashNoteDraft = ref('')
|
||||
const cashNotesSaving = ref(false)
|
||||
const cashViewPass = ref('')
|
||||
const cashViewPassSaving = ref(false)
|
||||
const cashEntryPass = ref('')
|
||||
const cashEntryPassSaving = ref(false)
|
||||
const danmakuLoading = ref(false)
|
||||
const danmakuList = ref([])
|
||||
const danmakuFilter = ref('pending')
|
||||
@@ -2167,6 +2353,10 @@ async function onTabActivate(tab) {
|
||||
await loadRsvp()
|
||||
return
|
||||
}
|
||||
if (tab === 'cash') {
|
||||
await Promise.all([loadCashGifts(), loadCashNotePresets(), loadCashViewPass(), loadCashEntryPass()])
|
||||
return
|
||||
}
|
||||
if (tab === 'danmaku') {
|
||||
await loadDanmaku()
|
||||
}
|
||||
@@ -2190,6 +2380,7 @@ const rsvpColumns = [
|
||||
{ title: '出席', dataIndex: 'guest_count', key: 'guest_count' },
|
||||
{ title: '祝福', dataIndex: 'wishes', key: 'wishes', ellipsis: true },
|
||||
{ title: '提交时间', dataIndex: 'created_at', key: 'created_at' },
|
||||
{ title: '操作', key: 'actions', width: 90 },
|
||||
]
|
||||
const rsvpCountLabel = (v) => ({ '1': '1 人出席', '2': '2 人出席', '3': '3 人及以上', '0': '遗憾缺席' }[v] || v)
|
||||
function formatTime(t) {
|
||||
@@ -2204,6 +2395,182 @@ async function loadRsvp() {
|
||||
catch (e) { /* 忽略 */ }
|
||||
finally { rsvpLoading.value = false }
|
||||
}
|
||||
async function onDeleteRsvp(record) {
|
||||
if (!record?.id) return
|
||||
try {
|
||||
await deleteRsvp(record.id)
|
||||
message.success('已删除')
|
||||
await loadRsvp()
|
||||
} catch (e) {
|
||||
message.error(e?.message || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const cashGiftColumns = [
|
||||
{ title: '姓名', dataIndex: 'name', key: 'name', width: 120 },
|
||||
{ title: '金额', key: 'amount', width: 110 },
|
||||
{ title: '备注', dataIndex: 'note', key: 'note', ellipsis: true },
|
||||
{ title: '时间', dataIndex: 'created_at', key: 'created_at', width: 170 },
|
||||
{ title: '操作', key: 'actions', width: 140 },
|
||||
]
|
||||
async function loadCashGifts() {
|
||||
cashGiftLoading.value = true
|
||||
try {
|
||||
const res = await getCashGiftList()
|
||||
const data = res.data || {}
|
||||
cashGiftList.value = Array.isArray(data.list) ? data.list : []
|
||||
cashGiftTotal.value = Number(data.total) || 0
|
||||
cashGiftCount.value = Number(data.count) || cashGiftList.value.length
|
||||
} catch {
|
||||
cashGiftList.value = []
|
||||
cashGiftTotal.value = 0
|
||||
cashGiftCount.value = 0
|
||||
} finally {
|
||||
cashGiftLoading.value = false
|
||||
}
|
||||
}
|
||||
function openCashGiftCreate() {
|
||||
cashGiftEditingId.value = 0
|
||||
cashGiftForm.name = ''
|
||||
cashGiftForm.amount = 1000
|
||||
cashGiftForm.note = ''
|
||||
cashGiftModalOpen.value = true
|
||||
}
|
||||
function openCashGiftEdit(record) {
|
||||
cashGiftEditingId.value = record.id
|
||||
cashGiftForm.name = record.name || ''
|
||||
cashGiftForm.amount = Number(record.amount) || 0
|
||||
cashGiftForm.note = record.note || ''
|
||||
cashGiftModalOpen.value = true
|
||||
}
|
||||
async function saveCashGiftModal() {
|
||||
const name = String(cashGiftForm.name || '').trim()
|
||||
const amount = Math.round(Number(cashGiftForm.amount))
|
||||
if (!name) {
|
||||
message.error('请填写姓名')
|
||||
return Promise.reject()
|
||||
}
|
||||
if (!Number.isFinite(amount) || amount <= 0) {
|
||||
message.error('请填写正确金额')
|
||||
return Promise.reject()
|
||||
}
|
||||
cashGiftSaving.value = true
|
||||
try {
|
||||
const payload = { name, amount, note: String(cashGiftForm.note || '').trim() }
|
||||
if (cashGiftEditingId.value) await updateCashGift(cashGiftEditingId.value, payload)
|
||||
else await submitCashGift(payload)
|
||||
message.success('已保存')
|
||||
cashGiftModalOpen.value = false
|
||||
await loadCashGifts()
|
||||
} catch (e) {
|
||||
if (e) message.error(e?.message || '保存失败')
|
||||
return Promise.reject(e)
|
||||
} finally {
|
||||
cashGiftSaving.value = false
|
||||
}
|
||||
}
|
||||
async function onDeleteCashGift(record) {
|
||||
if (!record?.id) return
|
||||
try {
|
||||
await deleteCashGift(record.id)
|
||||
message.success('已删除')
|
||||
await loadCashGifts()
|
||||
} catch (e) {
|
||||
message.error(e?.message || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCashNotePresets() {
|
||||
try {
|
||||
const res = await getCashGiftNotes()
|
||||
cashNotePresets.value = Array.isArray(res.data?.notes) ? [...res.data.notes] : []
|
||||
cashNoteDefaults.value = Array.isArray(res.data?.defaults) ? [...res.data.defaults] : []
|
||||
} catch {
|
||||
cashNotePresets.value = []
|
||||
cashNoteDefaults.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCashViewPass() {
|
||||
try {
|
||||
const res = await getCashGiftViewPass()
|
||||
cashViewPass.value = res.data?.password || ''
|
||||
} catch {
|
||||
cashViewPass.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCashViewPass() {
|
||||
const password = String(cashViewPass.value || '').trim()
|
||||
if (!password) return message.error('请设置查看口令')
|
||||
cashViewPassSaving.value = true
|
||||
try {
|
||||
await saveCashGiftViewPass(password)
|
||||
message.success('查看口令已保存')
|
||||
} catch (e) {
|
||||
message.error(e?.message || '保存失败')
|
||||
} finally {
|
||||
cashViewPassSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCashEntryPass() {
|
||||
try {
|
||||
const res = await getCashGiftEntryPass()
|
||||
cashEntryPass.value = res.data?.password || ''
|
||||
} catch {
|
||||
cashEntryPass.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCashEntryPass() {
|
||||
const password = String(cashEntryPass.value || '').trim()
|
||||
if (!password) return message.error('请设置记账口令')
|
||||
cashEntryPassSaving.value = true
|
||||
try {
|
||||
await saveCashGiftEntryPass(password)
|
||||
message.success('记账口令已保存')
|
||||
} catch (e) {
|
||||
message.error(e?.message || '保存失败')
|
||||
} finally {
|
||||
cashEntryPassSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function addCashNotePreset() {
|
||||
const v = String(cashNoteDraft.value || '').trim()
|
||||
if (!v) return
|
||||
if (cashNotePresets.value.includes(v)) {
|
||||
message.warning('已存在该选项')
|
||||
return
|
||||
}
|
||||
cashNotePresets.value.push(v)
|
||||
cashNoteDraft.value = ''
|
||||
}
|
||||
|
||||
function removeCashNotePreset(index) {
|
||||
cashNotePresets.value.splice(index, 1)
|
||||
}
|
||||
|
||||
function resetCashNotePresets() {
|
||||
cashNotePresets.value = cashNoteDefaults.value.length
|
||||
? [...cashNoteDefaults.value]
|
||||
: ['男方亲戚', '女方亲戚', '男方朋友', '女方朋友', '男方同学', '女方同学', '男方同事', '女方同事', '男方邻居', '女方邻居', '其他']
|
||||
}
|
||||
|
||||
async function saveCashNotePresets() {
|
||||
if (!cashNotePresets.value.length) return message.error('至少保留一个快捷备注')
|
||||
cashNotesSaving.value = true
|
||||
try {
|
||||
const res = await saveCashGiftNotes(cashNotePresets.value)
|
||||
cashNotePresets.value = Array.isArray(res.data?.notes) ? [...res.data.notes] : [...cashNotePresets.value]
|
||||
message.success('备注选项已保存')
|
||||
} catch (e) {
|
||||
message.error(e?.message || '保存失败')
|
||||
} finally {
|
||||
cashNotesSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const danmakuColumns = [
|
||||
{ title: '姓名', dataIndex: 'name', key: 'name', width: 100 },
|
||||
@@ -2353,7 +2720,8 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.admin-shell--top {
|
||||
max-width: 1040px;
|
||||
max-width: 80vw;
|
||||
width: 80vw;
|
||||
}
|
||||
.admin-shell--side {
|
||||
max-width: 1220px;
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
ref="danmakuLayerRef"
|
||||
:enabled="!!data.danmakuEnabled && showDanmaku"
|
||||
:show-time="!!data.danmakuShowTime"
|
||||
:area="danmakuArea"
|
||||
:active="effectsActive"
|
||||
/>
|
||||
|
||||
@@ -62,15 +63,43 @@
|
||||
<img v-if="isAutoScroll" src="https://api.iconify.design/lucide:pause.svg?color=%23a88c6b" class="w-4 h-4" />
|
||||
<img v-else src="https://api.iconify.design/lucide:play.svg?color=%23a88c6b" class="w-4 h-4 ml-0.5" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="control-btn cursor-pointer transition-all duration-300"
|
||||
:class="showDanmaku ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30 opacity-55'"
|
||||
:title="showDanmaku ? '关闭弹幕' : '开启弹幕'"
|
||||
@click.stop="toggleShowDanmaku"
|
||||
>
|
||||
<i class="fa-solid fa-comment-dots text-[13px]" :class="showDanmaku ? 'text-[#a88c6b]' : 'text-[#a88c6b]/70'"></i>
|
||||
</button>
|
||||
<div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="control-btn cursor-pointer transition-all duration-300"
|
||||
:class="showDanmaku ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30 opacity-55'"
|
||||
:title="showDanmaku ? '关闭弹幕（长按设范围）' : '开启弹幕（长按设范围）'"
|
||||
style="touch-action: manipulation; user-select: none; -webkit-user-select: none;"
|
||||
@click.stop="onDanmakuBtnClick"
|
||||
@touchstart.prevent="onDanmakuPressStart"
|
||||
@touchend="onDanmakuPressEnd"
|
||||
@touchcancel="onDanmakuPressCancel"
|
||||
@mousedown="onDanmakuPressStart"
|
||||
@mouseup="onDanmakuPressEnd"
|
||||
@mouseleave="onDanmakuPressCancel"
|
||||
>
|
||||
<i class="fa-solid fa-comment-dots text-[13px]" :class="showDanmaku ? 'text-[#a88c6b]' : 'text-[#a88c6b]/70'"></i>
|
||||
</button>
|
||||
<div
|
||||
v-if="showDanmakuAreaMenu"
|
||||
class="danmaku-area-menu"
|
||||
@click.stop
|
||||
>
|
||||
<button
|
||||
v-for="opt in danmakuAreaOptions"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="danmaku-area-opt"
|
||||
:class="{ active: danmakuArea === opt.value }"
|
||||
:title="opt.title"
|
||||
@click="selectDanmakuArea(opt.value)"
|
||||
>
|
||||
<span class="danmaku-area-phone" aria-hidden="true">
|
||||
<span class="danmaku-area-zone" :data-area="opt.value" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="control-btn cursor-pointer transition-all duration-300"
|
||||
@@ -798,6 +827,7 @@ import { DANMAKU_COLORS, DANMAKU_GRADIENT_COLORS, DEFAULT_DANMAKU_COLOR, BLESSIN
|
||||
import { parseLrc, formatAudioTime, findLrcIndex } from '@/utils/parseLrc'
|
||||
import CanvasEffects from '@/components/CanvasEffects.vue'
|
||||
import DanmakuLayer from '@/components/DanmakuLayer.vue'
|
||||
import { DANMAKU_AREA_OPTIONS, DEFAULT_DANMAKU_AREA } from '@/utils/danmakuArea'
|
||||
import LikeBurst from '@/components/LikeBurst.vue'
|
||||
import GiftEffect from '@/components/GiftEffect.vue'
|
||||
import GiftFeed from '@/components/GiftFeed.vue'
|
||||
@@ -1046,6 +1076,7 @@ const handleQuickLike = (n) => {
|
||||
}
|
||||
|
||||
const DANMAKU_PREF_KEY = 'wedding_show_danmaku_v1'
|
||||
const DANMAKU_AREA_KEY = 'wedding_danmaku_area_v1'
|
||||
const GIFT_FX_PREF_KEY = 'wedding_show_gift_fx_v1'
|
||||
const readPref = (key, fallback = true) => {
|
||||
try {
|
||||
@@ -1056,9 +1087,91 @@ const readPref = (key, fallback = true) => {
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
const readDanmakuArea = () => {
|
||||
try {
|
||||
const v = localStorage.getItem(DANMAKU_AREA_KEY)
|
||||
if (DANMAKU_AREA_OPTIONS.some((o) => o.value === v)) return v
|
||||
} catch { /* ignore */ }
|
||||
return DEFAULT_DANMAKU_AREA
|
||||
}
|
||||
const showDanmaku = ref(readPref(DANMAKU_PREF_KEY, true))
|
||||
const showGiftFx = ref(readPref(GIFT_FX_PREF_KEY, true))
|
||||
const danmakuArea = ref(readDanmakuArea())
|
||||
const danmakuAreaOptions = DANMAKU_AREA_OPTIONS
|
||||
const showDanmakuAreaMenu = ref(false)
|
||||
let danmakuPressTimer = null
|
||||
let danmakuPressFired = false
|
||||
let danmakuSkipClick = false
|
||||
let danmakuAreaMenuHideTimer = null
|
||||
|
||||
const hideDanmakuAreaMenuSoon = () => {
|
||||
clearTimeout(danmakuAreaMenuHideTimer)
|
||||
danmakuAreaMenuHideTimer = setTimeout(() => {
|
||||
showDanmakuAreaMenu.value = false
|
||||
}, 4500)
|
||||
}
|
||||
|
||||
const clearDanmakuPressTimer = () => {
|
||||
if (danmakuPressTimer) {
|
||||
clearTimeout(danmakuPressTimer)
|
||||
danmakuPressTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const onDanmakuPressStart = (e) => {
|
||||
if (e.type === 'mousedown' && e.button !== 0) return
|
||||
if (e.type === 'touchstart' && e.cancelable) e.preventDefault()
|
||||
danmakuPressFired = false
|
||||
clearDanmakuPressTimer()
|
||||
danmakuPressTimer = setTimeout(() => {
|
||||
danmakuPressFired = true
|
||||
danmakuSkipClick = true
|
||||
showDanmakuAreaMenu.value = true
|
||||
hideDanmakuAreaMenuSoon()
|
||||
if (typeof navigator !== 'undefined' && navigator.vibrate) {
|
||||
try { navigator.vibrate(12) } catch { /* ignore */ }
|
||||
}
|
||||
}, 420)
|
||||
}
|
||||
|
||||
const onDanmakuPressEnd = (e) => {
|
||||
const longPress = danmakuPressFired
|
||||
clearDanmakuPressTimer()
|
||||
if (e?.type === 'touchend' && !longPress) {
|
||||
danmakuSkipClick = true
|
||||
toggleShowDanmaku()
|
||||
return
|
||||
}
|
||||
if (longPress) danmakuSkipClick = true
|
||||
}
|
||||
|
||||
const onDanmakuPressCancel = () => {
|
||||
clearDanmakuPressTimer()
|
||||
danmakuPressFired = false
|
||||
}
|
||||
|
||||
const onDanmakuBtnClick = () => {
|
||||
if (danmakuSkipClick) {
|
||||
danmakuSkipClick = false
|
||||
return
|
||||
}
|
||||
toggleShowDanmaku()
|
||||
}
|
||||
|
||||
const selectDanmakuArea = (value) => {
|
||||
if (!DANMAKU_AREA_OPTIONS.some((o) => o.value === value)) return
|
||||
danmakuArea.value = value
|
||||
try { localStorage.setItem(DANMAKU_AREA_KEY, value) } catch { /* ignore */ }
|
||||
showDanmakuAreaMenu.value = false
|
||||
// 选了范围后若弹幕关着，顺手打开便于预览
|
||||
if (!showDanmaku.value) {
|
||||
showDanmaku.value = true
|
||||
try { localStorage.setItem(DANMAKU_PREF_KEY, '1') } catch { /* ignore */ }
|
||||
}
|
||||
}
|
||||
|
||||
const toggleShowDanmaku = () => {
|
||||
showDanmakuAreaMenu.value = false
|
||||
showDanmaku.value = !showDanmaku.value
|
||||
try { localStorage.setItem(DANMAKU_PREF_KEY, showDanmaku.value ? '1' : '0') } catch { /* ignore */ }
|
||||
}
|
||||
@@ -2045,6 +2158,8 @@ onUnmounted(() => {
|
||||
clearTimeout(likePressTimer)
|
||||
clearTimeout(likeBubblesHideTimer)
|
||||
clearTimeout(likePulseTimer)
|
||||
clearTimeout(danmakuPressTimer)
|
||||
clearTimeout(danmakuAreaMenuHideTimer)
|
||||
clearGiftPanelCloseTimer()
|
||||
clearBottomReturn()
|
||||
clearBlessingAutoClose()
|
||||
@@ -2106,6 +2221,64 @@ watch(
|
||||
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9999px;
|
||||
backdrop-filter: blur(12px); border: 0.5px solid rgba(168, 140, 107, 0.3); color: #a88c6b; background: rgba(255,255,255,0.6);
|
||||
}
|
||||
.danmaku-area-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(100% + 10px);
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 252, 247, 0.96);
|
||||
border: 1px solid rgba(168, 140, 107, 0.22);
|
||||
box-shadow: 0 10px 28px rgba(88, 68, 42, 0.14);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 5;
|
||||
}
|
||||
.danmaku-area-opt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.danmaku-area-opt:hover {
|
||||
background: rgba(168, 140, 107, 0.1);
|
||||
}
|
||||
.danmaku-area-opt.active {
|
||||
background: rgba(168, 140, 107, 0.16);
|
||||
border-color: rgba(168, 140, 107, 0.35);
|
||||
}
|
||||
.danmaku-area-phone {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid #c4b59e;
|
||||
background: #f7f2ea;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.danmaku-area-zone {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(168, 140, 107, 0.72);
|
||||
}
|
||||
.danmaku-area-zone[data-area='top30'] { top: 0; height: 30%; }
|
||||
.danmaku-area-zone[data-area='top'] { top: 0; height: 50%; }
|
||||
.danmaku-area-zone[data-area='bottom'] { bottom: 0; height: 50%; }
|
||||
.danmaku-area-zone[data-area='full'] { inset: 0; }
|
||||
.danmaku-area-opt.active .danmaku-area-zone {
|
||||
background: #a88c6b;
|
||||
}
|
||||
.danmaku-area-opt.active .danmaku-area-phone {
|
||||
border-color: #a88c6b;
|
||||
}
|
||||
.action-dock {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
||||
781
vite-tailwindcss/src/views/lijin/index.vue
Normal file
781
vite-tailwindcss/src/views/lijin/index.vue
Normal file
@@ -0,0 +1,781 @@
|
||||
<template>
|
||||
<div class="lj-root">
|
||||
<div class="lj-bg" aria-hidden="true">
|
||||
<span class="lj-xi lj-xi-1">囍</span>
|
||||
<span class="lj-xi lj-xi-2">囍</span>
|
||||
<span class="lj-xi lj-xi-3">囍</span>
|
||||
<span class="lj-xi lj-xi-4">囍</span>
|
||||
<i class="lj-spark lj-spark-1"></i>
|
||||
<i class="lj-spark lj-spark-2"></i>
|
||||
<i class="lj-spark lj-spark-3"></i>
|
||||
</div>
|
||||
|
||||
<main class="lj-main">
|
||||
<header class="lj-hero">
|
||||
<div class="lj-seal">囍</div>
|
||||
<h1 class="lj-title calligraphy">礼金登记</h1>
|
||||
<p class="lj-sub">喜结良缘 · 恭贺新禧</p>
|
||||
<div class="lj-divider">
|
||||
<span></span><i>✦</i><span></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section v-if="!unlocked" class="lj-form-block lj-unlock">
|
||||
<label class="lj-label">记账口令</label>
|
||||
<input
|
||||
v-model="passInput"
|
||||
class="lj-input"
|
||||
type="password"
|
||||
maxlength="64"
|
||||
placeholder="请输入口令"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="onUnlock"
|
||||
/>
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
<button type="button" class="lj-submit" :disabled="busy" @click="onUnlock">
|
||||
{{ busy ? '验证中…' : '进入登记' }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<template v-else>
|
||||
<section class="lj-form-block">
|
||||
<div class="lj-form-top">
|
||||
<span class="lj-form-hint">已解锁</span>
|
||||
<button type="button" class="lj-lock-btn" @click="onLock">退出</button>
|
||||
</div>
|
||||
<label class="lj-label">宾客姓名</label>
|
||||
<input
|
||||
v-model="form.name"
|
||||
class="lj-input"
|
||||
type="text"
|
||||
maxlength="20"
|
||||
placeholder="请输入姓名"
|
||||
autocomplete="name"
|
||||
:style="inputStyle"
|
||||
/>
|
||||
|
||||
<label class="lj-label">礼金金额</label>
|
||||
<div class="lj-quick">
|
||||
<button
|
||||
v-for="n in quickAmounts"
|
||||
:key="n"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: Number(form.amount) === n }"
|
||||
@click="pickAmount(n)"
|
||||
>{{ n }}</button>
|
||||
</div>
|
||||
<div class="lj-amount-row">
|
||||
<span class="lj-yen">¥</span>
|
||||
<input
|
||||
v-model="form.amount"
|
||||
class="lj-input lj-amount"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxlength="8"
|
||||
placeholder="或手动输入"
|
||||
:style="amountInputStyle"
|
||||
@input="onAmountInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="lj-label">备注（可选）</label>
|
||||
<div v-if="noteGroups.length" class="lj-notes-groups">
|
||||
<div v-for="g in noteGroups" :key="g.key" class="lj-notes-group">
|
||||
<div class="lj-notes-group-title">{{ g.label }}</div>
|
||||
<div class="lj-notes">
|
||||
<button
|
||||
v-for="n in g.items"
|
||||
:key="n"
|
||||
type="button"
|
||||
class="lj-note-chip"
|
||||
:class="{ active: form.note === n }"
|
||||
@click="pickNote(n)"
|
||||
>{{ n }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.note"
|
||||
class="lj-input"
|
||||
type="text"
|
||||
maxlength="100"
|
||||
placeholder="点选上方或手动填写"
|
||||
:style="inputStyle"
|
||||
/>
|
||||
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="lj-submit"
|
||||
:disabled="busy"
|
||||
@click="onSubmit"
|
||||
>
|
||||
{{ busy ? '登记中…' : '确认登记' }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="lj-recent">
|
||||
<div class="lj-recent-head">
|
||||
<span class="lj-recent-title">最近登记</span>
|
||||
<span class="lj-recent-line"></span>
|
||||
<router-link to="/lijin/list" class="lj-recent-all">查看全部</router-link>
|
||||
</div>
|
||||
<ul v-if="recent.length" class="lj-recent-list">
|
||||
<li v-for="item in recent" :key="item.id" class="lj-recent-item">
|
||||
<div class="lj-recent-left">
|
||||
<span class="lj-recent-name">{{ item.name }}</span>
|
||||
<span v-if="item.note" class="lj-recent-note">{{ item.note }}</span>
|
||||
</div>
|
||||
<div class="lj-recent-right">
|
||||
<span class="lj-recent-amount">¥{{ item.amount }}</span>
|
||||
<span class="lj-recent-time">{{ formatTime(item.created_at) }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="lj-recent-empty">暂无登记记录</div>
|
||||
</section>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import {
|
||||
submitCashGift,
|
||||
getCashGiftRecent,
|
||||
getCashGiftNotes,
|
||||
unlockCashGiftEntry,
|
||||
} from '@/api/wedding'
|
||||
|
||||
const ENTRY_TOKEN_KEY = 'cash_gift_entry_token'
|
||||
const quickAmounts = [200, 500, 600, 800, 1000, 1200, 1500, 2000, 2888, 5200]
|
||||
const form = reactive({ name: '', amount: '', note: '' })
|
||||
const busy = ref(false)
|
||||
const tip = ref('')
|
||||
const tipType = ref('ok')
|
||||
const recent = ref([])
|
||||
const notePresets = ref([])
|
||||
const unlocked = ref(false)
|
||||
const passInput = ref('')
|
||||
const entryToken = ref('')
|
||||
|
||||
/* 内联强制字色/底色，避免继承页面浅色导致「输入看不见」 */
|
||||
const inputStyle = {
|
||||
color: '#4a2018',
|
||||
WebkitTextFillColor: '#4a2018',
|
||||
caretColor: '#9b1b1b',
|
||||
backgroundColor: '#c9ad7a',
|
||||
borderColor: 'rgba(212, 175, 55, 0.55)',
|
||||
fontFamily: 'var(--font-calligraphy)',
|
||||
}
|
||||
const amountInputStyle = {
|
||||
...inputStyle,
|
||||
paddingLeft: '32px',
|
||||
}
|
||||
|
||||
const noteGroups = computed(() => {
|
||||
const list = Array.isArray(notePresets.value) ? notePresets.value : []
|
||||
const groom = []
|
||||
const bride = []
|
||||
const other = []
|
||||
for (const n of list) {
|
||||
const s = String(n || '').trim()
|
||||
if (!s) continue
|
||||
if (s.startsWith('男方')) groom.push(s)
|
||||
else if (s.startsWith('女方')) bride.push(s)
|
||||
else other.push(s)
|
||||
}
|
||||
const groups = []
|
||||
if (groom.length) groups.push({ key: 'groom', label: '男方', items: groom })
|
||||
if (bride.length) groups.push({ key: 'bride', label: '女方', items: bride })
|
||||
if (other.length) groups.push({ key: 'other', label: '其他', items: other })
|
||||
return groups
|
||||
})
|
||||
|
||||
const formatTime = (t) => {
|
||||
if (!t) return ''
|
||||
const d = new Date(t)
|
||||
if (Number.isNaN(d.getTime())) return ''
|
||||
const hh = String(d.getHours()).padStart(2, '0')
|
||||
const mm = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${hh}:${mm}`
|
||||
}
|
||||
|
||||
const showTip = (text, type = 'ok') => {
|
||||
tip.value = text
|
||||
tipType.value = type
|
||||
clearTimeout(showTip._t)
|
||||
showTip._t = setTimeout(() => { tip.value = '' }, 2800)
|
||||
}
|
||||
|
||||
const pickAmount = (n) => {
|
||||
form.amount = String(n)
|
||||
}
|
||||
|
||||
const onAmountInput = (e) => {
|
||||
const digits = String(e?.target?.value || '').replace(/[^\d]/g, '')
|
||||
form.amount = digits
|
||||
if (e?.target && e.target.value !== digits) e.target.value = digits
|
||||
}
|
||||
|
||||
const pickNote = (n) => {
|
||||
form.note = form.note === n ? '' : n
|
||||
}
|
||||
|
||||
const loadRecent = async () => {
|
||||
if (!entryToken.value) {
|
||||
recent.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await getCashGiftRecent(3, entryToken.value)
|
||||
recent.value = Array.isArray(res.data) ? res.data : []
|
||||
} catch (e) {
|
||||
recent.value = []
|
||||
if (/口令|记账/.test(e?.message || '')) onLock()
|
||||
}
|
||||
}
|
||||
|
||||
const loadNotePresets = async () => {
|
||||
try {
|
||||
const res = await getCashGiftNotes()
|
||||
const notes = res.data?.notes
|
||||
notePresets.value = Array.isArray(notes) ? notes : []
|
||||
} catch {
|
||||
notePresets.value = [
|
||||
'男方亲戚', '女方亲戚', '男方朋友', '女方朋友',
|
||||
'男方同学', '女方同学', '男方同事', '女方同事',
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const onUnlock = async () => {
|
||||
const password = String(passInput.value || '').trim()
|
||||
if (!password) return showTip('请输入口令', 'err')
|
||||
busy.value = true
|
||||
tip.value = ''
|
||||
try {
|
||||
const res = await unlockCashGiftEntry(password)
|
||||
const token = res.data?.token
|
||||
if (!token) throw new Error('解锁失败')
|
||||
entryToken.value = token
|
||||
sessionStorage.setItem(ENTRY_TOKEN_KEY, token)
|
||||
unlocked.value = true
|
||||
passInput.value = ''
|
||||
await Promise.all([loadRecent(), loadNotePresets()])
|
||||
} catch (e) {
|
||||
showTip(e?.message || '口令错误', 'err')
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onLock = () => {
|
||||
unlocked.value = false
|
||||
entryToken.value = ''
|
||||
sessionStorage.removeItem(ENTRY_TOKEN_KEY)
|
||||
recent.value = []
|
||||
form.name = ''
|
||||
form.amount = ''
|
||||
form.note = ''
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
const name = String(form.name || '').trim()
|
||||
const amountRaw = String(form.amount || '').replace(/[^\d]/g, '')
|
||||
const amount = Math.round(Number(amountRaw))
|
||||
if (!name) return showTip('请填写姓名', 'err')
|
||||
if (!Number.isFinite(amount) || amount <= 0) return showTip('请填写正确金额', 'err')
|
||||
if (!entryToken.value) return showTip('请先输入记账口令', 'err')
|
||||
form.amount = String(amount)
|
||||
busy.value = true
|
||||
try {
|
||||
await submitCashGift({
|
||||
name,
|
||||
amount,
|
||||
note: String(form.note || '').trim(),
|
||||
}, entryToken.value)
|
||||
showTip(`已登记 ${name} ¥${amount}`, 'ok')
|
||||
form.amount = ''
|
||||
form.note = ''
|
||||
form.name = ''
|
||||
await loadRecent()
|
||||
} catch (e) {
|
||||
const msg = e?.message || '登记失败'
|
||||
showTip(msg, 'err')
|
||||
if (/口令|记账/.test(msg)) onLock()
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const cached = sessionStorage.getItem(ENTRY_TOKEN_KEY) || ''
|
||||
if (!cached) return
|
||||
entryToken.value = cached
|
||||
unlocked.value = true
|
||||
await Promise.all([loadRecent(), loadNotePresets()])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lj-root {
|
||||
--lj-red: #9b1b1b;
|
||||
--lj-deep: #7a0000;
|
||||
--lj-gold: #d4af37;
|
||||
--lj-cream: #f7efe0;
|
||||
--lj-ink: #4a2018;
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
color: var(--lj-cream);
|
||||
background:
|
||||
radial-gradient(ellipse at 50% -10%, rgba(196, 30, 58, 0.35), transparent 55%),
|
||||
linear-gradient(165deg, #5c0000 0%, #8b0000 42%, #6a0a0a 100%);
|
||||
font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei", sans-serif);
|
||||
color-scheme: light;
|
||||
}
|
||||
.lj-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lj-xi {
|
||||
position: absolute;
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
color: rgba(212, 175, 55, 0.08);
|
||||
line-height: 1;
|
||||
}
|
||||
.lj-xi-1 { top: 8%; left: 6%; transform: rotate(-12deg); }
|
||||
.lj-xi-2 { top: 18%; right: 8%; transform: rotate(10deg); font-size: 88px; }
|
||||
.lj-xi-3 { bottom: 22%; left: 10%; transform: rotate(8deg); font-size: 72px; }
|
||||
.lj-xi-4 { bottom: 8%; right: 6%; transform: rotate(-6deg); font-size: 56px; }
|
||||
.lj-spark {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--lj-gold);
|
||||
opacity: 0.45;
|
||||
box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
.lj-spark-1 { top: 28%; left: 18%; }
|
||||
.lj-spark-2 { top: 42%; right: 16%; }
|
||||
.lj-spark-3 { bottom: 30%; left: 40%; }
|
||||
|
||||
.lj-main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 460px);
|
||||
margin: 0 auto;
|
||||
padding: 36px 18px calc(28px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.lj-hero {
|
||||
text-align: center;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.lj-seal {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--lj-gold);
|
||||
color: #ffd76a;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
box-shadow: inset 0 0 0 4px rgba(155, 27, 27, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.lj-title {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.35em;
|
||||
color: #ffe9b0;
|
||||
text-indent: 0.35em;
|
||||
}
|
||||
.lj-sub {
|
||||
margin: 10px 0 0;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32em;
|
||||
color: rgba(247, 239, 224, 0.72);
|
||||
}
|
||||
.lj-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
color: var(--lj-gold);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.lj-divider span {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--lj-gold), transparent);
|
||||
}
|
||||
.lj-divider i {
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.lj-form-block {
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.45);
|
||||
background: rgba(90, 0, 0, 0.28);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.12), 0 16px 40px rgba(0, 0, 0, 0.22);
|
||||
border-radius: 18px;
|
||||
padding: 18px 16px 20px;
|
||||
}
|
||||
.lj-unlock {
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.lj-form-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.lj-form-hint {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
color: rgba(255, 233, 176, 0.55);
|
||||
}
|
||||
.lj-lock-btn {
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
background: transparent;
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lj-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
color: #f0d78a;
|
||||
margin: 12px 0 8px;
|
||||
}
|
||||
.lj-label:first-child { margin-top: 0; }
|
||||
|
||||
.lj-input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.55);
|
||||
background: #c9ad7a;
|
||||
background-color: #c9ad7a;
|
||||
color: #4a2018;
|
||||
-webkit-text-fill-color: #4a2018;
|
||||
caret-color: #9b1b1b;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-calligraphy);
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(90, 30, 20, 0.06);
|
||||
color-scheme: light;
|
||||
}
|
||||
.lj-input::placeholder {
|
||||
color: #9a7464;
|
||||
-webkit-text-fill-color: #9a7464;
|
||||
opacity: 1;
|
||||
}
|
||||
.lj-input:focus {
|
||||
border-color: #ffd76a;
|
||||
background: #d4bc8e;
|
||||
background-color: #d4bc8e;
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28), inset 0 1px 2px rgba(90, 30, 20, 0.04);
|
||||
}
|
||||
.lj-input:-webkit-autofill,
|
||||
.lj-input:-webkit-autofill:hover,
|
||||
.lj-input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #4a2018 !important;
|
||||
caret-color: #9b1b1b !important;
|
||||
border-color: rgba(212, 175, 55, 0.55) !important;
|
||||
box-shadow: 0 0 0 1000px #c9ad7a inset !important;
|
||||
transition: background-color 99999s ease-out;
|
||||
}
|
||||
.lj-notes-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lj-notes-group-title {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
color: rgba(255, 233, 176, 0.72);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.lj-notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.lj-note-chip {
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
background: rgba(255, 248, 235, 0.12);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 7px 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.lj-note-chip:hover {
|
||||
border-color: #ffd76a;
|
||||
}
|
||||
.lj-note-chip.active {
|
||||
background: linear-gradient(135deg, #d4af37, #b8860b);
|
||||
border-color: #ffd76a;
|
||||
color: #5c0000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lj-quick {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lj-chip {
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
background: rgba(255, 248, 235, 0.12);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.lj-chip:hover {
|
||||
border-color: #ffd76a;
|
||||
}
|
||||
.lj-chip.active {
|
||||
background: linear-gradient(135deg, #d4af37, #b8860b);
|
||||
border-color: #ffd76a;
|
||||
color: #5c0000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lj-amount-row { position: relative; }
|
||||
.lj-yen {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #4a2018;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.lj-amount { padding-left: 32px; }
|
||||
|
||||
.lj-tip {
|
||||
margin: 12px 0 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-tip.ok { color: #ffe9b0; }
|
||||
.lj-tip.err { color: #ffb4b4; }
|
||||
|
||||
.lj-submit {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
border: 1px solid rgba(255, 215, 106, 0.65);
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #9b1b1b 55%, #7a0000 100%);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 14px 16px;
|
||||
letter-spacing: 0.32em;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.lj-submit:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.lj-recent {
|
||||
margin-top: 22px;
|
||||
}
|
||||
.lj-recent-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.lj-recent-title {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24em;
|
||||
color: #f0d78a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-recent-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), transparent);
|
||||
}
|
||||
.lj-recent-all {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
color: #ffd76a;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.lj-recent-all:hover {
|
||||
border-color: #ffd76a;
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
.lj-recent-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.lj-recent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.28);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.lj-recent-left {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.lj-recent-name {
|
||||
font-size: 14px;
|
||||
color: #fff6e4;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-recent-note {
|
||||
font-size: 11px;
|
||||
color: rgba(247, 239, 224, 0.55);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-recent-right {
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lj-recent-amount {
|
||||
display: block;
|
||||
color: #ffd76a;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.lj-recent-time {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 10px;
|
||||
color: rgba(247, 239, 224, 0.5);
|
||||
}
|
||||
.lj-recent-empty {
|
||||
text-align: center;
|
||||
padding: 18px 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
color: rgba(247, 239, 224, 0.45);
|
||||
border: 1px dashed rgba(212, 175, 55, 0.28);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.lj-quick { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
|
||||
/* PC：加宽 + 表单与最近登记左右分栏，移动端保持原样 */
|
||||
@media (min-width: 900px) {
|
||||
.lj-main {
|
||||
width: min(100%, 980px);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
|
||||
gap: 20px 28px;
|
||||
align-items: start;
|
||||
padding: 48px 36px calc(40px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.lj-hero {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.lj-seal {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 32px;
|
||||
}
|
||||
.lj-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
.lj-form-block {
|
||||
padding: 24px 28px 28px;
|
||||
}
|
||||
.lj-recent {
|
||||
margin-top: 0;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
}
|
||||
.lj-recent-list {
|
||||
max-height: calc(100dvh - 220px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- 非 scoped：避免继承页面浅色导致输入字看不见 -->
|
||||
<style>
|
||||
.lj-root input.lj-input {
|
||||
color: #4a2018 !important;
|
||||
-webkit-text-fill-color: #4a2018 !important;
|
||||
caret-color: #9b1b1b !important;
|
||||
background-color: #c9ad7a !important;
|
||||
font-family: var(--font-calligraphy) !important;
|
||||
}
|
||||
.lj-root input.lj-input::placeholder {
|
||||
color: #9a7464 !important;
|
||||
-webkit-text-fill-color: #9a7464 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.lj-root input.lj-input:focus {
|
||||
border-color: #ffd76a !important;
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28), inset 0 1px 2px rgba(90, 30, 20, 0.04) !important;
|
||||
}
|
||||
</style>
|
||||
697
vite-tailwindcss/src/views/lijin/list.vue
Normal file
697
vite-tailwindcss/src/views/lijin/list.vue
Normal file
@@ -0,0 +1,697 @@
|
||||
<template>
|
||||
<div class="lj-root">
|
||||
<div class="lj-bg" aria-hidden="true">
|
||||
<span class="lj-xi lj-xi-1">囍</span>
|
||||
<span class="lj-xi lj-xi-2">囍</span>
|
||||
<span class="lj-xi lj-xi-3">囍</span>
|
||||
<span class="lj-xi lj-xi-4">囍</span>
|
||||
<i class="lj-spark lj-spark-1"></i>
|
||||
<i class="lj-spark lj-spark-2"></i>
|
||||
<i class="lj-spark lj-spark-3"></i>
|
||||
</div>
|
||||
|
||||
<main class="lj-main lj-main--wide">
|
||||
<header class="lj-hero">
|
||||
<div class="lj-hero-top">
|
||||
<router-link to="/lijin" class="lj-back">← 返回登记</router-link>
|
||||
</div>
|
||||
<div class="lj-seal">囍</div>
|
||||
<h1 class="lj-title calligraphy">礼金明细</h1>
|
||||
<p class="lj-sub">喜结良缘 · 礼尚往来</p>
|
||||
<div class="lj-divider">
|
||||
<span></span><i>✦</i><span></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 口令解锁 -->
|
||||
<section v-if="!unlocked" class="lj-form-block lj-unlock">
|
||||
<label class="lj-label">查看口令</label>
|
||||
<input
|
||||
v-model="passInput"
|
||||
class="lj-input"
|
||||
type="password"
|
||||
maxlength="64"
|
||||
placeholder="请输入口令"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="onUnlock"
|
||||
/>
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
<button type="button" class="lj-submit" :disabled="busy" @click="onUnlock">
|
||||
{{ busy ? '验证中…' : '进入列表' }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<template v-else>
|
||||
<section class="lj-stats">
|
||||
<div class="lj-stat">
|
||||
<span class="lj-stat-label">笔数</span>
|
||||
<span class="lj-stat-value">{{ count }}</span>
|
||||
</div>
|
||||
<div class="lj-stat">
|
||||
<span class="lj-stat-label">合计</span>
|
||||
<span class="lj-stat-value">¥{{ total }}</span>
|
||||
</div>
|
||||
<button type="button" class="lj-lock-btn" @click="onLock">退出</button>
|
||||
</section>
|
||||
|
||||
<section class="lj-filters">
|
||||
<div class="lj-filter-bar">
|
||||
<input
|
||||
v-model="filters.q"
|
||||
class="lj-input lj-search"
|
||||
type="search"
|
||||
placeholder="搜索姓名 / 备注"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="loadList"
|
||||
/>
|
||||
<input
|
||||
v-model="filters.min"
|
||||
class="lj-input lj-amt"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="最低¥"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="loadList"
|
||||
/>
|
||||
<input
|
||||
v-model="filters.max"
|
||||
class="lj-input lj-amt"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="最高¥"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="loadList"
|
||||
/>
|
||||
<button type="button" class="lj-filter-go" @click="loadList">筛</button>
|
||||
</div>
|
||||
|
||||
<div class="lj-filter-line">
|
||||
<div class="lj-chips">
|
||||
<button
|
||||
v-for="s in sideOptions"
|
||||
:key="'side-' + s.value"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: filters.side === s.value }"
|
||||
@click="setSide(s.value)"
|
||||
>{{ s.label === '全部' ? '归属·全部' : s.label }}</button>
|
||||
</div>
|
||||
<div class="lj-chips lj-chips-sort">
|
||||
<button
|
||||
v-for="s in sortOptions"
|
||||
:key="'sort-' + s.value"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: filters.sort === s.value }"
|
||||
@click="setSort(s.value)"
|
||||
>{{ s.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="notePresets.length" class="lj-notes-scroll">
|
||||
<button
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: !filters.note }"
|
||||
@click="setNote('')"
|
||||
>备注·全部</button>
|
||||
<button
|
||||
v-for="n in notePresets"
|
||||
:key="n"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: filters.note === n }"
|
||||
@click="setNote(n)"
|
||||
>{{ n }}</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
|
||||
<section class="lj-cards" :class="{ loading: loading }">
|
||||
<article v-for="item in list" :key="item.id" class="lj-card">
|
||||
<div class="lj-card-top">
|
||||
<span class="lj-card-name calligraphy">{{ item.name }}</span>
|
||||
<span class="lj-card-amount">¥{{ item.amount }}</span>
|
||||
</div>
|
||||
<div class="lj-card-bottom">
|
||||
<span v-if="item.note" class="lj-card-note">{{ item.note }}</span>
|
||||
<span v-else class="lj-card-note muted">无备注</span>
|
||||
<span class="lj-card-time">{{ formatDateTime(item.created_at) }}</span>
|
||||
</div>
|
||||
</article>
|
||||
<div v-if="!loading && !list.length" class="lj-empty">暂无匹配记录</div>
|
||||
</section>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { unlockCashGiftView, getCashGiftViewList } from '@/api/wedding'
|
||||
|
||||
const TOKEN_KEY = 'cash_gift_view_token'
|
||||
const inputStyle = {
|
||||
color: '#4a2018',
|
||||
WebkitTextFillColor: '#4a2018',
|
||||
caretColor: '#9b1b1b',
|
||||
backgroundColor: '#c9ad7a',
|
||||
borderColor: 'rgba(212, 175, 55, 0.55)',
|
||||
fontFamily: 'var(--font-calligraphy)',
|
||||
}
|
||||
|
||||
const sideOptions = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'male', label: '男方' },
|
||||
{ value: 'female', label: '女方' },
|
||||
{ value: 'other', label: '其他' },
|
||||
]
|
||||
const sortOptions = [
|
||||
{ value: 'time_desc', label: '最新' },
|
||||
{ value: 'time_asc', label: '最早' },
|
||||
{ value: 'amount_desc', label: '金额↓' },
|
||||
{ value: 'amount_asc', label: '金额↑' },
|
||||
{ value: 'name_asc', label: '姓名' },
|
||||
]
|
||||
|
||||
const unlocked = ref(false)
|
||||
const passInput = ref('')
|
||||
const busy = ref(false)
|
||||
const loading = ref(false)
|
||||
const tip = ref('')
|
||||
const tipType = ref('ok')
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
const count = ref(0)
|
||||
const notePresets = ref([])
|
||||
const viewToken = ref('')
|
||||
|
||||
const filters = reactive({
|
||||
q: '',
|
||||
note: '',
|
||||
side: '',
|
||||
min: '',
|
||||
max: '',
|
||||
sort: 'time_desc',
|
||||
})
|
||||
|
||||
const showTip = (text, type = 'ok') => {
|
||||
tip.value = text
|
||||
tipType.value = type
|
||||
clearTimeout(showTip._t)
|
||||
showTip._t = setTimeout(() => { tip.value = '' }, 2800)
|
||||
}
|
||||
|
||||
const formatDateTime = (t) => {
|
||||
if (!t) return ''
|
||||
const d = new Date(t)
|
||||
if (Number.isNaN(d.getTime())) return ''
|
||||
const pad = (n) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
||||
}
|
||||
|
||||
const loadList = async () => {
|
||||
if (!viewToken.value) return
|
||||
loading.value = true
|
||||
tip.value = ''
|
||||
try {
|
||||
const params = {
|
||||
sort: filters.sort || 'time_desc',
|
||||
}
|
||||
const q = String(filters.q || '').trim()
|
||||
if (q) params.q = q
|
||||
if (filters.note) params.note = filters.note
|
||||
if (filters.side) params.side = filters.side
|
||||
const min = String(filters.min || '').replace(/[^\d]/g, '')
|
||||
const max = String(filters.max || '').replace(/[^\d]/g, '')
|
||||
if (min) params.min = min
|
||||
if (max) params.max = max
|
||||
|
||||
const res = await getCashGiftViewList(params, viewToken.value)
|
||||
const data = res.data || {}
|
||||
list.value = Array.isArray(data.list) ? data.list : []
|
||||
total.value = Number(data.total) || 0
|
||||
count.value = Number(data.count) || list.value.length
|
||||
if (Array.isArray(data.notes) && data.notes.length) {
|
||||
notePresets.value = data.notes
|
||||
}
|
||||
} catch (e) {
|
||||
const msg = e?.message || '加载失败'
|
||||
if (/口令|未授权|解锁/.test(msg)) {
|
||||
onLock()
|
||||
showTip(msg, 'err')
|
||||
} else {
|
||||
showTip(msg, 'err')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const setSide = (v) => {
|
||||
filters.side = v
|
||||
loadList()
|
||||
}
|
||||
const setNote = (v) => {
|
||||
filters.note = v
|
||||
loadList()
|
||||
}
|
||||
const setSort = (v) => {
|
||||
filters.sort = v
|
||||
loadList()
|
||||
}
|
||||
|
||||
const onUnlock = async () => {
|
||||
const password = String(passInput.value || '').trim()
|
||||
if (!password) return showTip('请输入口令', 'err')
|
||||
busy.value = true
|
||||
tip.value = ''
|
||||
try {
|
||||
const res = await unlockCashGiftView(password)
|
||||
const token = res.data?.token
|
||||
if (!token) throw new Error('解锁失败')
|
||||
viewToken.value = token
|
||||
sessionStorage.setItem(TOKEN_KEY, token)
|
||||
unlocked.value = true
|
||||
passInput.value = ''
|
||||
await loadList()
|
||||
} catch (e) {
|
||||
showTip(e?.message || '口令错误', 'err')
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onLock = () => {
|
||||
unlocked.value = false
|
||||
viewToken.value = ''
|
||||
sessionStorage.removeItem(TOKEN_KEY)
|
||||
list.value = []
|
||||
total.value = 0
|
||||
count.value = 0
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const cached = sessionStorage.getItem(TOKEN_KEY) || ''
|
||||
if (!cached) return
|
||||
viewToken.value = cached
|
||||
unlocked.value = true
|
||||
await loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lj-root {
|
||||
--lj-red: #9b1b1b;
|
||||
--lj-deep: #7a0000;
|
||||
--lj-gold: #d4af37;
|
||||
--lj-cream: #f7efe0;
|
||||
--lj-ink: #4a2018;
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
color: var(--lj-cream);
|
||||
background:
|
||||
radial-gradient(ellipse at 50% -10%, rgba(196, 30, 58, 0.35), transparent 55%),
|
||||
linear-gradient(165deg, #5c0000 0%, #8b0000 42%, #6a0a0a 100%);
|
||||
font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei", sans-serif);
|
||||
color-scheme: light;
|
||||
}
|
||||
.lj-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lj-xi {
|
||||
position: absolute;
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
color: rgba(212, 175, 55, 0.08);
|
||||
line-height: 1;
|
||||
}
|
||||
.lj-xi-1 { top: 8%; left: 6%; transform: rotate(-12deg); }
|
||||
.lj-xi-2 { top: 18%; right: 8%; transform: rotate(10deg); font-size: 88px; }
|
||||
.lj-xi-3 { bottom: 22%; left: 10%; transform: rotate(8deg); font-size: 72px; }
|
||||
.lj-xi-4 { bottom: 8%; right: 6%; transform: rotate(-6deg); font-size: 56px; }
|
||||
.lj-spark {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--lj-gold);
|
||||
opacity: 0.45;
|
||||
box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
.lj-spark-1 { top: 12%; left: 48%; }
|
||||
.lj-spark-2 { top: 42%; right: 18%; }
|
||||
.lj-spark-3 { bottom: 30%; left: 40%; }
|
||||
|
||||
.lj-main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 460px);
|
||||
margin: 0 auto;
|
||||
padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.lj-main--wide {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding-left: max(18px, 3vw);
|
||||
padding-right: max(18px, 3vw);
|
||||
}
|
||||
|
||||
.lj-hero { text-align: center; margin-bottom: 22px; }
|
||||
.lj-hero-top {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.lj-back {
|
||||
color: rgba(255, 233, 176, 0.85);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.lj-back:hover { color: #ffd76a; }
|
||||
.lj-seal {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--lj-gold);
|
||||
color: #ffd76a;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
box-shadow: inset 0 0 0 4px rgba(155, 27, 27, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.lj-title {
|
||||
margin: 0;
|
||||
font-size: clamp(32px, 6vw, 44px);
|
||||
color: #ffd76a;
|
||||
letter-spacing: 0.12em;
|
||||
font-weight: 400;
|
||||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.lj-sub {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.28em;
|
||||
color: rgba(247, 239, 224, 0.72);
|
||||
}
|
||||
.lj-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
color: var(--lj-gold);
|
||||
}
|
||||
.lj-divider span {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--lj-gold), transparent);
|
||||
}
|
||||
.lj-divider i { font-style: normal; font-size: 11px; }
|
||||
|
||||
.lj-form-block {
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.45);
|
||||
background: rgba(90, 0, 0, 0.28);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.12), 0 16px 40px rgba(0, 0, 0, 0.22);
|
||||
border-radius: 18px;
|
||||
padding: 18px 16px 20px;
|
||||
}
|
||||
.lj-unlock { max-width: 420px; margin: 0 auto; }
|
||||
|
||||
.lj-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
color: #f0d78a;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.lj-input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.55);
|
||||
background: #c9ad7a;
|
||||
color: #4a2018;
|
||||
-webkit-text-fill-color: #4a2018;
|
||||
caret-color: #9b1b1b;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-calligraphy);
|
||||
outline: none;
|
||||
}
|
||||
.lj-input::placeholder {
|
||||
color: #9a7464;
|
||||
-webkit-text-fill-color: #9a7464;
|
||||
opacity: 1;
|
||||
}
|
||||
.lj-input:focus {
|
||||
border-color: #ffd76a;
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28);
|
||||
}
|
||||
|
||||
.lj-tip {
|
||||
margin: 12px 0 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-tip.ok { color: #ffe9b0; }
|
||||
.lj-tip.err { color: #ffb4b4; }
|
||||
|
||||
.lj-submit {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
border: 1px solid rgba(255, 215, 106, 0.65);
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #9b1b1b 55%, #7a0000 100%);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 14px 16px;
|
||||
letter-spacing: 0.32em;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.lj-submit:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.lj-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
border-radius: 12px;
|
||||
background: rgba(90, 0, 0, 0.22);
|
||||
}
|
||||
.lj-stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
.lj-stat-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgba(255, 233, 176, 0.65);
|
||||
}
|
||||
.lj-stat-value {
|
||||
font-size: 16px;
|
||||
color: #ffd76a;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lj-lock-btn {
|
||||
margin-left: auto;
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
background: transparent;
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lj-filters {
|
||||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||
background: rgba(90, 0, 0, 0.18);
|
||||
border-radius: 12px;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.lj-filter-bar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.lj-search { flex: 1; min-width: 0; }
|
||||
.lj-amt {
|
||||
width: 72px;
|
||||
flex-shrink: 0;
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
text-align: center;
|
||||
}
|
||||
.lj-filters .lj-input {
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.lj-filter-go {
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(255, 215, 106, 0.5);
|
||||
background: linear-gradient(135deg, #c41e3a, #7a0000);
|
||||
color: #ffe9b0;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lj-filter-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 10px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.lj-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.lj-chips-sort {
|
||||
margin-left: auto;
|
||||
}
|
||||
.lj-chip {
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
background: rgba(255, 248, 235, 0.1);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-chip.active {
|
||||
background: linear-gradient(135deg, #d4af37, #b8860b);
|
||||
border-color: #ffd76a;
|
||||
color: #5c0000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lj-notes-scroll {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.lj-notes-scroll::-webkit-scrollbar { height: 3px; }
|
||||
.lj-notes-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(212, 175, 55, 0.35);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.lj-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.lj-cards.loading { opacity: 0.7; }
|
||||
.lj-card {
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.4);
|
||||
background: rgba(90, 0, 0, 0.32);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.08), 0 10px 24px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.lj-card-top {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.lj-card-name {
|
||||
font-size: 22px;
|
||||
color: #ffe9b0;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-card-amount {
|
||||
font-size: 18px;
|
||||
color: #ffd76a;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lj-card-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.lj-card-note {
|
||||
font-size: 12px;
|
||||
color: rgba(247, 239, 224, 0.72);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-card-note.muted { opacity: 0.45; }
|
||||
.lj-card-time {
|
||||
font-size: 11px;
|
||||
color: rgba(247, 239, 224, 0.48);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lj-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 36px 12px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.16em;
|
||||
color: rgba(247, 239, 224, 0.55);
|
||||
border: 1px dashed rgba(212, 175, 55, 0.28);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.lj-filter-bar { flex-wrap: wrap; }
|
||||
.lj-search { flex: 1 1 100%; }
|
||||
.lj-amt { flex: 1; width: auto; min-width: 0; }
|
||||
.lj-chips-sort { margin-left: 0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.lj-root input.lj-input {
|
||||
color: #4a2018 !important;
|
||||
-webkit-text-fill-color: #4a2018 !important;
|
||||
caret-color: #9b1b1b !important;
|
||||
background-color: #c9ad7a !important;
|
||||
font-family: var(--font-calligraphy) !important;
|
||||
}
|
||||
.lj-root input.lj-input::placeholder {
|
||||
color: #9a7464 !important;
|
||||
-webkit-text-fill-color: #9a7464 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user