优化首页公告与轮播图
This commit is contained in:
yml
@@ -48,6 +48,14 @@ func (h *Handler) Upload(c *gin.Context) {
|
||||
}
|
||||
|
||||
func (h *Handler) Object(c *gin.Context) {
|
||||
h.writeObject(c, false)
|
||||
}
|
||||
|
||||
func (h *Handler) PublicObject(c *gin.Context) {
|
||||
h.writeObject(c, true)
|
||||
}
|
||||
|
||||
func (h *Handler) writeObject(c *gin.Context, publicOnly bool) {
|
||||
if h.storage == nil {
|
||||
response.ServiceUnavailable(c, "文件存储未连接")
|
||||
return
|
||||
@@ -57,6 +65,10 @@ func (h *Handler) Object(c *gin.Context) {
|
||||
response.BadRequest(c, "文件 key 不正确")
|
||||
return
|
||||
}
|
||||
if publicOnly && !strings.HasPrefix(key, "home-banner/") {
|
||||
response.Error(c, http.StatusNotFound, "not_found", "文件不存在或暂不可访问")
|
||||
return
|
||||
}
|
||||
object, err := h.storage.Get(c.Request.Context(), key)
|
||||
if err != nil {
|
||||
response.Error(c, http.StatusNotFound, "not_found", "文件不存在或暂不可访问")
|
||||
|
||||
@@ -48,9 +48,13 @@ func (s *Service) Upload(req uploadRequest) (*UploadDTO, error) {
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
url := "/api/files/object?key=" + key
|
||||
if scene == "home-banner" {
|
||||
url = "/api/public/files/object?key=" + key
|
||||
}
|
||||
return &UploadDTO{
|
||||
ObjectKey: key,
|
||||
URL: "/api/files/object?key=" + key,
|
||||
URL: url,
|
||||
Filename: req.Header.Filename,
|
||||
ContentType: contentType,
|
||||
Size: req.Header.Size,
|
||||
@@ -60,7 +64,7 @@ func (s *Service) Upload(req uploadRequest) (*UploadDTO, error) {
|
||||
func normalizeScene(scene string) string {
|
||||
scene = strings.TrimSpace(strings.ToLower(scene))
|
||||
switch scene {
|
||||
case "listing", "handoff", "dispute", "realname", "avatar":
|
||||
case "listing", "handoff", "dispute", "realname", "avatar", "home-banner":
|
||||
return scene
|
||||
default:
|
||||
return "misc"
|
||||
|
||||
@@ -17,6 +17,25 @@ type UpdateRequest struct {
|
||||
Description string `json:"description"`
|
||||
}
|
||||
|
||||
type HomeAnnouncementsDTO struct {
|
||||
Items []string `json:"items"`
|
||||
}
|
||||
|
||||
type HomeConfigDTO struct {
|
||||
Announcements []string `json:"announcements"`
|
||||
Banners []HomeBannerItem `json:"banners"`
|
||||
PublishOptions PublishOptionsDTO `json:"publish_options"`
|
||||
}
|
||||
|
||||
type HomeBannerItem struct {
|
||||
Eyebrow string `json:"eyebrow"`
|
||||
Title string `json:"title"`
|
||||
Badge string `json:"badge"`
|
||||
Pill string `json:"pill"`
|
||||
Tone string `json:"tone"`
|
||||
ImageURL string `json:"image_url,omitempty"`
|
||||
}
|
||||
|
||||
type PublishOptionsDTO struct {
|
||||
ServerOptions []string `json:"server_options"`
|
||||
FaceOptions []string `json:"face_options"`
|
||||
|
||||
@@ -36,6 +36,24 @@ func (h *Handler) PublishOptions(c *gin.Context) {
|
||||
response.OK(c, options)
|
||||
}
|
||||
|
||||
func (h *Handler) HomeAnnouncements(c *gin.Context) {
|
||||
announcements, err := h.service.HomeAnnouncements()
|
||||
if err != nil {
|
||||
writeConfigError(c, err)
|
||||
return
|
||||
}
|
||||
response.OK(c, announcements)
|
||||
}
|
||||
|
||||
func (h *Handler) HomeConfig(c *gin.Context) {
|
||||
config, err := h.service.HomeConfig()
|
||||
if err != nil {
|
||||
writeConfigError(c, err)
|
||||
return
|
||||
}
|
||||
response.OK(c, config)
|
||||
}
|
||||
|
||||
func (h *Handler) Update(c *gin.Context) {
|
||||
adminID, ok := currentAdminID(c)
|
||||
if !ok {
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
package systemconfig
|
||||
|
||||
import "encoding/json"
|
||||
|
||||
const homeAnnouncementsConfigKey = "mobile.home_announcements"
|
||||
const homeBannersConfigKey = "mobile.home_banners"
|
||||
|
||||
func defaultHomeAnnouncements() []string {
|
||||
return []string{
|
||||
"平台担保交易，拒绝私下转账/共享验证码，交接全程留痕。",
|
||||
"优先推荐同地区账号，减少异地登录保护触发。",
|
||||
"下单前请核对哈夫币、保险、体力负重和截图信息。",
|
||||
}
|
||||
}
|
||||
|
||||
func defaultHomeAnnouncementsConfigValue() string {
|
||||
raw, err := json.Marshal(defaultHomeAnnouncements())
|
||||
if err != nil {
|
||||
return "[]"
|
||||
}
|
||||
return string(raw)
|
||||
}
|
||||
|
||||
func defaultHomeBanners() []HomeBannerItem {
|
||||
return []HomeBannerItem{
|
||||
{
|
||||
Eyebrow: "三角洲行动账号专区",
|
||||
Title: "高哈夫币 · 安全交接 · 随租随玩",
|
||||
Badge: "HOT",
|
||||
Pill: "新人领券最高减 20 元",
|
||||
Tone: "blue",
|
||||
ImageURL: "",
|
||||
},
|
||||
{
|
||||
Eyebrow: "平台担保交易",
|
||||
Title: "交接全程留痕，拒绝私下转账",
|
||||
Badge: "SAFE",
|
||||
Pill: "租号前先验实名与资料",
|
||||
Tone: "green",
|
||||
ImageURL: "",
|
||||
},
|
||||
{
|
||||
Eyebrow: "高效筛选",
|
||||
Title: "按区服、段位、哈夫币快速找号",
|
||||
Badge: "FAST",
|
||||
Pill: "支持扫码号与账密号",
|
||||
Tone: "orange",
|
||||
ImageURL: "",
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
func defaultHomeBannersConfigValue() string {
|
||||
raw, err := json.Marshal(defaultHomeBanners())
|
||||
if err != nil {
|
||||
return "[]"
|
||||
}
|
||||
return string(raw)
|
||||
}
|
||||
@@ -38,6 +38,8 @@ var defaultConfigs = []defaultConfig{
|
||||
{Key: "settlement.platform_fee_rate", Value: "0.00", Description: "平台抽成比例"},
|
||||
{Key: "settlement.owner_cycle_days", Value: "0", Description: "号主结算周期天数"},
|
||||
{Key: "withdraw.min_amount", Value: "100", Description: "提现最低金额预留"},
|
||||
{Key: homeAnnouncementsConfigKey, Value: defaultHomeAnnouncementsConfigValue(), Description: "移动端首页公告 JSON 数组"},
|
||||
{Key: homeBannersConfigKey, Value: defaultHomeBannersConfigValue(), Description: "移动端首页轮播图 JSON 数组"},
|
||||
{Key: publishOptionsConfigKey, Value: defaultPublishOptionsConfigValue(), Description: "发布页选项配置 JSON"},
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ package systemconfig
|
||||
import (
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"strings"
|
||||
)
|
||||
|
||||
var (
|
||||
@@ -29,16 +30,82 @@ func (s *Service) PublishOptions() (*PublishOptionsDTO, error) {
|
||||
if s.repo == nil {
|
||||
return nil, ErrDependencyUnavailable
|
||||
}
|
||||
value, err := s.repo.FindValue(publishOptionsConfigKey)
|
||||
options, err := s.publishOptions()
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
return &options, nil
|
||||
}
|
||||
|
||||
func (s *Service) publishOptions() (PublishOptionsDTO, error) {
|
||||
value, err := s.repo.FindValue(publishOptionsConfigKey)
|
||||
if err != nil {
|
||||
return PublishOptionsDTO{}, err
|
||||
}
|
||||
options := DefaultPublishOptions()
|
||||
if err := json.Unmarshal([]byte(value), &options); err != nil {
|
||||
options = DefaultPublishOptions()
|
||||
}
|
||||
normalizePublishOptions(&options)
|
||||
return &options, nil
|
||||
return options, nil
|
||||
}
|
||||
|
||||
func (s *Service) HomeAnnouncements() (*HomeAnnouncementsDTO, error) {
|
||||
if s.repo == nil {
|
||||
return nil, ErrDependencyUnavailable
|
||||
}
|
||||
items, err := s.homeAnnouncements()
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
return &HomeAnnouncementsDTO{Items: items}, nil
|
||||
}
|
||||
|
||||
func (s *Service) HomeConfig() (*HomeConfigDTO, error) {
|
||||
if s.repo == nil {
|
||||
return nil, ErrDependencyUnavailable
|
||||
}
|
||||
announcements, err := s.homeAnnouncements()
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
banners, err := s.homeBanners()
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
publishOptions, err := s.publishOptions()
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
return &HomeConfigDTO{
|
||||
Announcements: announcements,
|
||||
Banners: banners,
|
||||
PublishOptions: publishOptions,
|
||||
}, nil
|
||||
}
|
||||
|
||||
func (s *Service) homeAnnouncements() ([]string, error) {
|
||||
value, err := s.repo.FindValue(homeAnnouncementsConfigKey)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
items := defaultHomeAnnouncements()
|
||||
if err := json.Unmarshal([]byte(value), &items); err != nil {
|
||||
items = defaultHomeAnnouncements()
|
||||
}
|
||||
return normalizeAnnouncements(items), nil
|
||||
}
|
||||
|
||||
func (s *Service) homeBanners() ([]HomeBannerItem, error) {
|
||||
value, err := s.repo.FindValue(homeBannersConfigKey)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
items := defaultHomeBanners()
|
||||
if err := json.Unmarshal([]byte(value), &items); err != nil {
|
||||
items = defaultHomeBanners()
|
||||
}
|
||||
return normalizeHomeBanners(items), nil
|
||||
}
|
||||
|
||||
func (s *Service) Update(actorID uint64, key string, req UpdateRequest, meta AuditMeta) (*ConfigDTO, error) {
|
||||
@@ -51,6 +118,43 @@ func (s *Service) Update(actorID uint64, key string, req UpdateRequest, meta Aud
|
||||
return s.repo.Update(actorID, key, req, meta)
|
||||
}
|
||||
|
||||
func normalizeAnnouncements(items []string) []string {
|
||||
normalized := make([]string, 0, len(items))
|
||||
for _, item := range items {
|
||||
item = strings.TrimSpace(item)
|
||||
if item != "" {
|
||||
normalized = append(normalized, item)
|
||||
}
|
||||
}
|
||||
if len(normalized) == 0 {
|
||||
return defaultHomeAnnouncements()
|
||||
}
|
||||
return normalized
|
||||
}
|
||||
|
||||
func normalizeHomeBanners(items []HomeBannerItem) []HomeBannerItem {
|
||||
normalized := make([]HomeBannerItem, 0, len(items))
|
||||
for _, item := range items {
|
||||
item.Eyebrow = strings.TrimSpace(item.Eyebrow)
|
||||
item.Title = strings.TrimSpace(item.Title)
|
||||
item.Badge = strings.TrimSpace(item.Badge)
|
||||
item.Pill = strings.TrimSpace(item.Pill)
|
||||
item.Tone = strings.TrimSpace(item.Tone)
|
||||
item.ImageURL = strings.TrimSpace(item.ImageURL)
|
||||
if item.Title == "" && item.ImageURL == "" {
|
||||
continue
|
||||
}
|
||||
if item.Tone != "green" && item.Tone != "orange" {
|
||||
item.Tone = "blue"
|
||||
}
|
||||
normalized = append(normalized, item)
|
||||
}
|
||||
if len(normalized) == 0 {
|
||||
return defaultHomeBanners()
|
||||
}
|
||||
return normalized
|
||||
}
|
||||
|
||||
func normalizePublishOptions(options *PublishOptionsDTO) {
|
||||
defaults := DefaultPublishOptions()
|
||||
if len(options.ServerOptions) == 0 {
|
||||
|
||||
@@ -127,6 +127,9 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
|
||||
{
|
||||
api.GET("/health", health.Check)
|
||||
api.GET("/listing-publish-options", systemConfigHandler.PublishOptions)
|
||||
api.GET("/home-announcements", systemConfigHandler.HomeAnnouncements)
|
||||
api.GET("/mobile-home-config", systemConfigHandler.HomeConfig)
|
||||
api.GET("/public/files/object", fileHandler.PublicObject)
|
||||
|
||||
authRoutes := api.Group("/auth")
|
||||
{
|
||||
@@ -208,6 +211,7 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
|
||||
{
|
||||
adminRoutes.GET("/me", adminAuthHandler.Me)
|
||||
adminRoutes.POST("/auth/logout", adminAuthHandler.Logout)
|
||||
adminRoutes.POST("/files/upload", fileHandler.Upload)
|
||||
adminRoutes.GET("/dashboard", adminDashboardHandler.Summary)
|
||||
adminRoutes.GET("/files/object", fileHandler.Object)
|
||||
adminRoutes.GET("/users", adminUserHandler.List)
|
||||
|
||||
@@ -24,6 +24,16 @@ export async function uploadFile(file: File, scene: string) {
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function uploadAdminFile(file: File, scene: string) {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
form.append('scene', scene)
|
||||
const { data } = await apiClient.post<ApiResponse<UploadedFile>>('/admin/files/upload', form, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchAdminFileBlob(key: string) {
|
||||
const { data } = await apiClient.get<Blob>('/admin/files/object', {
|
||||
params: { key },
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
import { apiClient } from './client'
|
||||
import {
|
||||
defaultListingPublishOptions,
|
||||
mergeListingPublishOptions,
|
||||
type ListingPublishOptions,
|
||||
} from './listingOptions'
|
||||
|
||||
export interface HomeBannerSlide {
|
||||
eyebrow: string
|
||||
title: string
|
||||
badge: string
|
||||
pill: string
|
||||
tone: string
|
||||
image_url?: string
|
||||
}
|
||||
|
||||
export interface MobileHomeConfig {
|
||||
announcements: string[]
|
||||
banners: HomeBannerSlide[]
|
||||
publish_options: ListingPublishOptions
|
||||
}
|
||||
|
||||
interface ApiResponse<T> {
|
||||
code: string
|
||||
message: string
|
||||
data: T
|
||||
}
|
||||
|
||||
export const defaultHomeAnnouncements = [
|
||||
'平台担保交易，拒绝私下转账/共享验证码，交接全程留痕。',
|
||||
'优先推荐同地区账号，减少异地登录保护触发。',
|
||||
'下单前请核对哈夫币、保险、体力负重和截图信息。',
|
||||
]
|
||||
|
||||
export const defaultHomeBanners: HomeBannerSlide[] = [
|
||||
{
|
||||
eyebrow: '三角洲行动账号专区',
|
||||
title: '高哈夫币 · 安全交接 · 随租随玩',
|
||||
badge: 'HOT',
|
||||
pill: '新人领券最高减 20 元',
|
||||
tone: 'blue',
|
||||
image_url: '',
|
||||
},
|
||||
{
|
||||
eyebrow: '平台担保交易',
|
||||
title: '交接全程留痕，拒绝私下转账',
|
||||
badge: 'SAFE',
|
||||
pill: '租号前先验实名与资料',
|
||||
tone: 'green',
|
||||
image_url: '',
|
||||
},
|
||||
{
|
||||
eyebrow: '高效筛选',
|
||||
title: '按区服、段位、哈夫币快速找号',
|
||||
badge: 'FAST',
|
||||
pill: '支持扫码号与账密号',
|
||||
tone: 'orange',
|
||||
image_url: '',
|
||||
},
|
||||
]
|
||||
|
||||
export async function fetchMobileHomeConfig() {
|
||||
const { data } = await apiClient.get<ApiResponse<MobileHomeConfig>>('/mobile-home-config')
|
||||
return mergeHomeConfig(data.data)
|
||||
}
|
||||
|
||||
export function mergeHomeConfig(config?: Partial<MobileHomeConfig>): MobileHomeConfig {
|
||||
const announcements =
|
||||
config?.announcements
|
||||
?.map((item) => (typeof item === 'string' ? item.trim() : ''))
|
||||
.filter(Boolean) || []
|
||||
const banners =
|
||||
config?.banners
|
||||
?.map((item) => {
|
||||
const banner = isBannerLike(item) ? item : ({} as Partial<HomeBannerSlide>)
|
||||
return {
|
||||
eyebrow: banner.eyebrow?.trim() || '',
|
||||
title: banner.title?.trim() || '',
|
||||
badge: banner.badge?.trim() || '',
|
||||
pill: banner.pill?.trim() || '',
|
||||
tone: normalizeBannerTone(banner.tone),
|
||||
image_url: banner.image_url?.trim() || '',
|
||||
}
|
||||
})
|
||||
.filter((item) => item.title || item.image_url) || []
|
||||
|
||||
return {
|
||||
announcements: announcements.length ? announcements : defaultHomeAnnouncements,
|
||||
banners: banners.length ? banners : defaultHomeBanners,
|
||||
publish_options: mergeListingPublishOptions(config?.publish_options || defaultListingPublishOptions),
|
||||
}
|
||||
}
|
||||
|
||||
function isBannerLike(value: unknown): value is Partial<HomeBannerSlide> {
|
||||
return typeof value === 'object' && value !== null
|
||||
}
|
||||
|
||||
function normalizeBannerTone(tone?: string) {
|
||||
if (tone === 'green' || tone === 'orange') return tone
|
||||
return 'blue'
|
||||
}
|
||||
@@ -7,6 +7,13 @@ import {
|
||||
mergeListingPublishOptions,
|
||||
type ListingPublishOptions,
|
||||
} from '@/api/listingOptions'
|
||||
import {
|
||||
defaultHomeAnnouncements,
|
||||
defaultHomeBanners,
|
||||
mergeHomeConfig,
|
||||
type HomeBannerSlide,
|
||||
} from '@/api/homeConfig'
|
||||
import { uploadAdminFile } from '@/api/files'
|
||||
import { fetchSystemConfigs, updateSystemConfig, type SystemConfig } from '@/api/systemConfigs'
|
||||
|
||||
const loading = ref(false)
|
||||
@@ -16,10 +23,24 @@ const activeConfig = ref<SystemConfig | null>(null)
|
||||
const value = ref('')
|
||||
const description = ref('')
|
||||
const publishOptionsDraft = ref<ListingPublishOptions>(cloneOptions(defaultListingPublishOptions))
|
||||
const homeAnnouncementLines = ref(itemsToLines(defaultHomeAnnouncements))
|
||||
const homeBannersDraft = ref<HomeBannerSlide[]>(cloneHomeBanners(defaultHomeBanners))
|
||||
const uploadingBannerIndex = ref<number | null>(null)
|
||||
|
||||
const publishConfig = computed(() => configs.value.find((item) => item.key === 'listing.publish_options') || null)
|
||||
const regularConfigs = computed(() => configs.value.filter((item) => item.key !== 'listing.publish_options'))
|
||||
const homeAnnouncementsConfig = computed(() => configs.value.find((item) => item.key === 'mobile.home_announcements') || null)
|
||||
const homeBannersConfig = computed(() => configs.value.find((item) => item.key === 'mobile.home_banners') || null)
|
||||
const regularConfigs = computed(() =>
|
||||
configs.value.filter(
|
||||
(item) =>
|
||||
item.key !== 'listing.publish_options' &&
|
||||
item.key !== 'mobile.home_announcements' &&
|
||||
item.key !== 'mobile.home_banners',
|
||||
),
|
||||
)
|
||||
const isPublishOptionsConfig = computed(() => activeConfig.value?.key === 'listing.publish_options')
|
||||
const isHomeAnnouncementsConfig = computed(() => activeConfig.value?.key === 'mobile.home_announcements')
|
||||
const isHomeBannersConfig = computed(() => activeConfig.value?.key === 'mobile.home_banners')
|
||||
const publishStats = computed(() => {
|
||||
const options = safeParsePublishOptions(publishConfig.value?.value || '')
|
||||
return {
|
||||
@@ -34,13 +55,31 @@ const publishStats = computed(() => {
|
||||
regionCount: options.region_options.length,
|
||||
}
|
||||
})
|
||||
const homeStats = computed(() => {
|
||||
const announcements = parseHomeAnnouncements(homeAnnouncementsConfig.value?.value || '', false)
|
||||
const banners = parseHomeBanners(homeBannersConfig.value?.value || '', false)
|
||||
return {
|
||||
announcementCount: announcements.length,
|
||||
bannerCount: banners.length,
|
||||
}
|
||||
})
|
||||
|
||||
const isStructuredConfig = computed(() => {
|
||||
const trimmed = value.value.trim()
|
||||
return isPublishOptionsConfig.value || trimmed.startsWith('{') || trimmed.startsWith('[')
|
||||
return (
|
||||
isPublishOptionsConfig.value ||
|
||||
isHomeAnnouncementsConfig.value ||
|
||||
isHomeBannersConfig.value ||
|
||||
trimmed.startsWith('{') ||
|
||||
trimmed.startsWith('[')
|
||||
)
|
||||
})
|
||||
|
||||
const dialogWidth = computed(() => (isPublishOptionsConfig.value ? '920px' : '560px'))
|
||||
const dialogWidth = computed(() => {
|
||||
if (isPublishOptionsConfig.value || isHomeBannersConfig.value) return '920px'
|
||||
if (isHomeAnnouncementsConfig.value) return '680px'
|
||||
return '560px'
|
||||
})
|
||||
|
||||
onMounted(loadConfigs)
|
||||
|
||||
@@ -60,6 +99,12 @@ function openEdit(row: SystemConfig) {
|
||||
if (row.key === 'listing.publish_options') {
|
||||
publishOptionsDraft.value = parsePublishOptions(row.value)
|
||||
}
|
||||
if (row.key === 'mobile.home_announcements') {
|
||||
homeAnnouncementLines.value = itemsToLines(parseHomeAnnouncements(row.value, true))
|
||||
}
|
||||
if (row.key === 'mobile.home_banners') {
|
||||
homeBannersDraft.value = parseHomeBanners(row.value, true)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
@@ -69,6 +114,16 @@ async function handleSave() {
|
||||
if (isPublishOptionsConfig.value) {
|
||||
value.value = JSON.stringify(publishOptionsDraft.value, null, 2)
|
||||
}
|
||||
if (isHomeAnnouncementsConfig.value) {
|
||||
value.value = JSON.stringify(linesToItems(homeAnnouncementLines.value), null, 2)
|
||||
}
|
||||
if (isHomeBannersConfig.value) {
|
||||
value.value = JSON.stringify(
|
||||
homeBannersDraft.value.filter((item) => item.title.trim() || item.image_url?.trim()),
|
||||
null,
|
||||
2,
|
||||
)
|
||||
}
|
||||
await updateSystemConfig(activeConfig.value.key, {
|
||||
value: value.value,
|
||||
description: description.value,
|
||||
@@ -102,10 +157,34 @@ function safeParsePublishOptions(raw: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function parseHomeAnnouncements(raw: string, showWarning = false) {
|
||||
try {
|
||||
const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeAnnouncements
|
||||
return mergeHomeConfig({ announcements: Array.isArray(parsed) ? parsed : [] }).announcements
|
||||
} catch {
|
||||
if (showWarning) ElMessage.warning('首页公告 JSON 解析失败，已使用默认配置')
|
||||
return [...defaultHomeAnnouncements]
|
||||
}
|
||||
}
|
||||
|
||||
function parseHomeBanners(raw: string, showWarning = false) {
|
||||
try {
|
||||
const parsed = raw.trim() ? JSON.parse(raw) : defaultHomeBanners
|
||||
return cloneHomeBanners(mergeHomeConfig({ banners: Array.isArray(parsed) ? parsed : [] }).banners)
|
||||
} catch {
|
||||
if (showWarning) ElMessage.warning('首页轮播 JSON 解析失败，已使用默认配置')
|
||||
return cloneHomeBanners(defaultHomeBanners)
|
||||
}
|
||||
}
|
||||
|
||||
function cloneOptions(options: ListingPublishOptions) {
|
||||
return JSON.parse(JSON.stringify(options)) as ListingPublishOptions
|
||||
}
|
||||
|
||||
function cloneHomeBanners(banners: HomeBannerSlide[]) {
|
||||
return JSON.parse(JSON.stringify(banners)) as HomeBannerSlide[]
|
||||
}
|
||||
|
||||
function linesToItems(value: string) {
|
||||
return value
|
||||
.split('\n')
|
||||
@@ -169,6 +248,57 @@ function resetPublishOptions() {
|
||||
publishOptionsDraft.value = cloneOptions(defaultListingPublishOptions)
|
||||
}
|
||||
|
||||
function addHomeBanner() {
|
||||
homeBannersDraft.value.push({
|
||||
eyebrow: '首页推荐',
|
||||
title: '',
|
||||
badge: 'NEW',
|
||||
pill: '',
|
||||
tone: 'blue',
|
||||
image_url: '',
|
||||
})
|
||||
}
|
||||
|
||||
function removeHomeBanner(index: number) {
|
||||
homeBannersDraft.value.splice(index, 1)
|
||||
}
|
||||
|
||||
function resetHomeAnnouncements() {
|
||||
homeAnnouncementLines.value = itemsToLines(defaultHomeAnnouncements)
|
||||
}
|
||||
|
||||
function resetHomeBanners() {
|
||||
homeBannersDraft.value = cloneHomeBanners(defaultHomeBanners)
|
||||
}
|
||||
|
||||
async function handleHomeBannerUpload(event: Event, index: number) {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0]
|
||||
input.value = ''
|
||||
if (!file) return
|
||||
uploadingBannerIndex.value = index
|
||||
try {
|
||||
const uploaded = await uploadAdminFile(file, 'home-banner')
|
||||
const banner = homeBannersDraft.value[index]
|
||||
if (banner) {
|
||||
banner.image_url = uploaded.url
|
||||
if (!banner.title) {
|
||||
banner.title = banner.eyebrow || '首页轮播图'
|
||||
}
|
||||
}
|
||||
ElMessage.success('图片已上传')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '图片上传失败'))
|
||||
} finally {
|
||||
uploadingBannerIndex.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function formatHomeConfigStatus(row: SystemConfig | null, fallback: string) {
|
||||
if (!row) return fallback
|
||||
return row.updated_at || fallback
|
||||
}
|
||||
|
||||
function formatConfigValue(row: SystemConfig) {
|
||||
const trimmed = row.value.trim()
|
||||
if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
|
||||
@@ -227,6 +357,42 @@ function readError(error: unknown, fallback: string) {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="homeAnnouncementsConfig || homeBannersConfig" class="publish-config-panel">
|
||||
<div class="publish-config-main">
|
||||
<div>
|
||||
<p class="eyebrow">Home Content</p>
|
||||
<h2>移动端首页运营配置</h2>
|
||||
<span>管理首页公告滚动内容和顶部轮播图，保存后移动端会从接口读取最新配置。</span>
|
||||
</div>
|
||||
<div class="panel-actions">
|
||||
<el-button v-if="homeAnnouncementsConfig" @click="openEdit(homeAnnouncementsConfig)">编辑公告</el-button>
|
||||
<el-button v-if="homeBannersConfig" type="primary" @click="openEdit(homeBannersConfig)">编辑轮播图</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="publish-stat-grid home-stat-grid">
|
||||
<div class="publish-stat">
|
||||
<strong>{{ homeStats.announcementCount }}</strong>
|
||||
<span>公告条数</span>
|
||||
</div>
|
||||
<div class="publish-stat">
|
||||
<strong>{{ homeStats.bannerCount }}</strong>
|
||||
<span>轮播图</span>
|
||||
</div>
|
||||
<div class="publish-stat">
|
||||
<strong>接口</strong>
|
||||
<span>/api/mobile-home-config</span>
|
||||
</div>
|
||||
<div class="publish-stat">
|
||||
<strong>公告</strong>
|
||||
<span>{{ formatHomeConfigStatus(homeAnnouncementsConfig, '未初始化') }}</span>
|
||||
</div>
|
||||
<div class="publish-stat">
|
||||
<strong>轮播</strong>
|
||||
<span>{{ formatHomeConfigStatus(homeBannersConfig, '未初始化') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-table v-loading="loading" class="table-panel" :data="regularConfigs">
|
||||
<el-table-column prop="key" label="配置项" min-width="260" />
|
||||
<el-table-column label="当前值" min-width="180" show-overflow-tooltip>
|
||||
@@ -394,6 +560,74 @@ function readError(error: unknown, fallback: string) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="isHomeAnnouncementsConfig" class="home-config-editor">
|
||||
<div class="editor-toolbar">
|
||||
<span>首页公告</span>
|
||||
<el-button size="small" @click="resetHomeAnnouncements">恢复默认公告</el-button>
|
||||
</div>
|
||||
<el-form-item label="公告内容">
|
||||
<el-input
|
||||
v-model="homeAnnouncementLines"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
placeholder="一行一条公告，移动端会自动轮播展示"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-else-if="isHomeBannersConfig" class="home-config-editor">
|
||||
<div class="editor-toolbar">
|
||||
<span>首页轮播图</span>
|
||||
<div class="panel-actions">
|
||||
<el-button size="small" @click="resetHomeBanners">恢复默认轮播</el-button>
|
||||
<el-button size="small" type="primary" @click="addHomeBanner">添加轮播</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="homeBannersDraft" size="small" border>
|
||||
<el-table-column label="图片" min-width="240">
|
||||
<template #default="{ row, $index }">
|
||||
<div class="banner-image-editor">
|
||||
<el-input v-model="row.image_url" placeholder="图片 URL，留空使用文字卡片" />
|
||||
<div class="banner-image-tools">
|
||||
<img v-if="row.image_url" :src="row.image_url" alt="轮播图预览" />
|
||||
<span v-else>无图</span>
|
||||
<label class="upload-trigger">
|
||||
<input type="file" accept="image/jpeg,image/png,image/webp" @change="handleHomeBannerUpload($event, $index)" />
|
||||
{{ uploadingBannerIndex === $index ? '上传中' : '上传图片' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="眉标" min-width="160">
|
||||
<template #default="{ row }"><el-input v-model="row.eyebrow" placeholder="如 三角洲行动账号专区" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="主标题" min-width="220">
|
||||
<template #default="{ row }"><el-input v-model="row.title" placeholder="轮播主文案" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角标" width="110">
|
||||
<template #default="{ row }"><el-input v-model="row.badge" placeholder="HOT" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="胶囊文案" min-width="220">
|
||||
<template #default="{ row }"><el-input v-model="row.pill" placeholder="底部补充文案" /></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="色调" width="130">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.tone" placeholder="色调">
|
||||
<el-option label="蓝色" value="blue" />
|
||||
<el-option label="绿色" value="green" />
|
||||
<el-option label="橙色" value="orange" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90">
|
||||
<template #default="{ $index }">
|
||||
<el-button size="small" type="danger" plain @click="removeHomeBanner($index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-input v-else-if="isStructuredConfig" v-model="value" type="textarea" :rows="12" placeholder="配置值 JSON" />
|
||||
<el-input v-else v-model="value" placeholder="配置值" />
|
||||
<el-input v-model="description" type="textarea" :rows="3" placeholder="配置说明" />
|
||||
@@ -424,6 +658,12 @@ function readError(error: unknown, fallback: string) {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.publish-config-main h2 {
|
||||
margin: 4px 0 6px;
|
||||
color: #111827;
|
||||
@@ -441,6 +681,10 @@ function readError(error: unknown, fallback: string) {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-stat-grid .publish-stat strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.publish-stat {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
@@ -466,6 +710,60 @@ function readError(error: unknown, fallback: string) {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.home-config-editor {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.banner-image-editor {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.banner-image-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.banner-image-tools img,
|
||||
.banner-image-tools span {
|
||||
width: 68px;
|
||||
height: 38px;
|
||||
border-radius: 6px;
|
||||
background: #f3f4f6;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-image-tools span {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.upload-trigger {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.upload-trigger input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editor-toolbar,
|
||||
.editor-block-title {
|
||||
display: flex;
|
||||
|
||||
@@ -5,12 +5,10 @@
|
||||
padding-bottom: 58px;
|
||||
}
|
||||
|
||||
/* ========== Hero 区域：纯色蓝色头部 ========== */
|
||||
/* ========== 顶部信息区 ========== */
|
||||
.mobile-hero {
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 24px 24px;
|
||||
background: #1479ff;
|
||||
padding: 14px 14px 18px;
|
||||
padding: 14px 14px 8px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.mobile-topbar,
|
||||
@@ -20,22 +18,25 @@
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
color: #ffffff;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
flex: 0 0 auto;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #1479ff;
|
||||
color: #ff6a00;
|
||||
box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -46,34 +47,46 @@
|
||||
|
||||
.mobile-brand small {
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 12px;
|
||||
color: #7b8798;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mobile-brand strong {
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #ffffff;
|
||||
padding: 7px 12px;
|
||||
background: #ffffff;
|
||||
color: #1477ff;
|
||||
padding: 7px 10px;
|
||||
box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ========== van-search 覆盖样式 ========== */
|
||||
.home-search {
|
||||
margin-top: 12px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content) {
|
||||
border-radius: 999px;
|
||||
border: 1px solid #eef1f5;
|
||||
background: #ffffff;
|
||||
padding: 8px 14px;
|
||||
padding: 6px 10px;
|
||||
box-shadow: 0 8px 20px rgba(23, 35, 61, 0.06);
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content .van-field__control) {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ========== 防骗提示卡片 ========== */
|
||||
@@ -83,13 +96,28 @@
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #ffe6bd;
|
||||
background: #fffaf0;
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #5c3b00;
|
||||
}
|
||||
|
||||
.announcement-swipe {
|
||||
flex: 1;
|
||||
height: 18px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.announcement-swipe span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #5c3b00;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fraud-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
@@ -101,7 +129,7 @@
|
||||
|
||||
/* ========== Content 区 ========== */
|
||||
.mobile-content {
|
||||
padding: 14px;
|
||||
padding: 8px 14px 14px;
|
||||
}
|
||||
|
||||
/* ========== Banner 轮播 ========== */
|
||||
@@ -123,10 +151,12 @@
|
||||
.banner-swipe :deep(.van-swipe__indicator--active) {
|
||||
width: 16px;
|
||||
border-radius: 999px;
|
||||
background: #1479ff;
|
||||
background: #ff6a00;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
@@ -137,6 +167,34 @@
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.mobile-banner.has-image {
|
||||
min-height: 132px;
|
||||
align-items: flex-end;
|
||||
background: #17233d;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mobile-banner.has-image::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
background: linear-gradient(90deg, rgba(10, 18, 32, 0.64), rgba(10, 18, 32, 0.12));
|
||||
}
|
||||
|
||||
.mobile-banner.has-image > div:not(.banner-badge) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 78%;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-green {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
||||
}
|
||||
@@ -151,11 +209,17 @@
|
||||
}
|
||||
|
||||
.mobile-banner p {
|
||||
color: #1479ff;
|
||||
color: #1477ff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mobile-banner.has-image p,
|
||||
.mobile-banner.has-image h1 {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 6px;
|
||||
font-size: 22px;
|
||||
@@ -174,6 +238,8 @@
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
align-self: flex-start;
|
||||
border-radius: 12px;
|
||||
background: #ff6a00;
|
||||
|
||||
@@ -5,10 +5,15 @@ import { showToast } from "vant";
|
||||
|
||||
import {
|
||||
defaultListingPublishOptions,
|
||||
fetchListingPublishOptions,
|
||||
type ListingPublishOptions,
|
||||
} from "@/api/listingOptions";
|
||||
import { fetchListings, type Listing } from "@/api/listings";
|
||||
import {
|
||||
defaultHomeAnnouncements,
|
||||
defaultHomeBanners,
|
||||
fetchMobileHomeConfig,
|
||||
type HomeBannerSlide,
|
||||
} from "@/api/homeConfig";
|
||||
import MobileHomeFilterSheet, {
|
||||
type FilterSection,
|
||||
} from "./MobileHomeFilterSheet.vue";
|
||||
@@ -45,6 +50,8 @@ const selectedFilters = ref<Record<string, string[]>>({});
|
||||
const rangeFilters = ref<Record<string, { min: string; max: string }>>({});
|
||||
const refreshing = ref(false);
|
||||
const searchValue = ref("");
|
||||
const announcements = ref<string[]>(defaultHomeAnnouncements);
|
||||
const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
|
||||
|
||||
const sortOptions = [
|
||||
{ key: "comprehensive", label: "综合排序" },
|
||||
@@ -70,30 +77,6 @@ const rangePresets: Record<string, Array<{ label: string; min: string; max: stri
|
||||
],
|
||||
};
|
||||
|
||||
const bannerSlides = [
|
||||
{
|
||||
eyebrow: "三角洲行动账号专区",
|
||||
title: "高哈夫币 · 安全交接 · 随租随玩",
|
||||
badge: "HOT",
|
||||
pill: "新人领券最高减 20 元",
|
||||
tone: "blue",
|
||||
},
|
||||
{
|
||||
eyebrow: "平台担保交易",
|
||||
title: "交接全程留痕，拒绝私下转账",
|
||||
badge: "SAFE",
|
||||
pill: "租号前先验实名与资料",
|
||||
tone: "green",
|
||||
},
|
||||
{
|
||||
eyebrow: "高效筛选",
|
||||
title: "按区服、段位、哈夫币快速找号",
|
||||
badge: "FAST",
|
||||
pill: "支持扫码号与账密号",
|
||||
tone: "orange",
|
||||
},
|
||||
];
|
||||
|
||||
const fallbackListings = computed(() => buildFallbackListings(publishOptions.value));
|
||||
|
||||
const sourceListings = computed(() =>
|
||||
@@ -178,7 +161,7 @@ function isNavActive(path: string) {
|
||||
|
||||
onMounted(() => {
|
||||
loadListings();
|
||||
loadPublishOptions();
|
||||
loadHomeConfig();
|
||||
});
|
||||
|
||||
async function loadListings() {
|
||||
@@ -193,10 +176,15 @@ async function loadListings() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPublishOptions() {
|
||||
async function loadHomeConfig() {
|
||||
try {
|
||||
publishOptions.value = await fetchListingPublishOptions();
|
||||
const config = await fetchMobileHomeConfig();
|
||||
announcements.value = config.announcements;
|
||||
bannerSlides.value = config.banners;
|
||||
publishOptions.value = config.publish_options;
|
||||
} catch {
|
||||
announcements.value = defaultHomeAnnouncements;
|
||||
bannerSlides.value = defaultHomeBanners;
|
||||
publishOptions.value = defaultListingPublishOptions;
|
||||
}
|
||||
}
|
||||
@@ -204,12 +192,14 @@ async function loadPublishOptions() {
|
||||
async function onRefresh() {
|
||||
refreshing.value = true;
|
||||
try {
|
||||
const [nextListings, nextOptions] = await Promise.all([
|
||||
const [nextListings, nextHomeConfig] = await Promise.all([
|
||||
fetchListings(),
|
||||
fetchListingPublishOptions(),
|
||||
fetchMobileHomeConfig(),
|
||||
]);
|
||||
listings.value = nextListings;
|
||||
publishOptions.value = nextOptions;
|
||||
announcements.value = nextHomeConfig.announcements;
|
||||
bannerSlides.value = nextHomeConfig.banners;
|
||||
publishOptions.value = nextHomeConfig.publish_options;
|
||||
showToast({ message: "刷新成功", icon: "passed" });
|
||||
} catch {
|
||||
// 静默处理
|
||||
@@ -335,7 +325,7 @@ function uniqueOptions(values: string[]) {
|
||||
|
||||
<template>
|
||||
<main class="mobile-shell">
|
||||
<!-- ========== Hero 区域：纯色蓝色头部 ========== -->
|
||||
<!-- ========== Hero 区域：顶部搜索与公告 ========== -->
|
||||
<section class="mobile-hero">
|
||||
<div class="mobile-topbar">
|
||||
<div class="mobile-brand">
|
||||
@@ -345,21 +335,30 @@ function uniqueOptions(values: string[]) {
|
||||
<small>哈夫币租号</small>
|
||||
</div>
|
||||
</div>
|
||||
<van-search
|
||||
v-model="searchValue"
|
||||
shape="round"
|
||||
placeholder="搜区服 / 段位"
|
||||
class="home-search"
|
||||
/>
|
||||
<button class="mobile-service" type="button">客服</button>
|
||||
</div>
|
||||
|
||||
<van-search
|
||||
v-model="searchValue"
|
||||
shape="round"
|
||||
placeholder="搜区服 / 段位 / 哈夫币数量"
|
||||
class="home-search"
|
||||
/>
|
||||
|
||||
<!-- 防骗提示卡片（不用 van-notice-bar） -->
|
||||
<div class="fraud-tip">
|
||||
<van-icon name="warning-o" :size="16" color="#b8860b" />
|
||||
<span class="fraud-dot"></span>
|
||||
<span>平台担保交易，拒绝私下转账/共享验证码，交接全程留痕。</span>
|
||||
<van-swipe
|
||||
class="announcement-swipe"
|
||||
vertical
|
||||
:autoplay="3200"
|
||||
:show-indicators="false"
|
||||
touchable
|
||||
>
|
||||
<van-swipe-item v-for="item in announcements" :key="item">
|
||||
<span>{{ item }}</span>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -370,15 +369,24 @@ function uniqueOptions(values: string[]) {
|
||||
<van-swipe class="banner-swipe" :autoplay="3600" lazy-render>
|
||||
<van-swipe-item
|
||||
v-for="slide in bannerSlides"
|
||||
:key="slide.title"
|
||||
:key="slide.title || slide.image_url"
|
||||
>
|
||||
<div class="mobile-banner" :class="`tone-${slide.tone}`">
|
||||
<div
|
||||
class="mobile-banner"
|
||||
:class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
|
||||
>
|
||||
<img
|
||||
v-if="slide.image_url"
|
||||
class="banner-image"
|
||||
:src="slide.image_url"
|
||||
:alt="slide.title || slide.eyebrow || '首页轮播图'"
|
||||
/>
|
||||
<div>
|
||||
<p>{{ slide.eyebrow }}</p>
|
||||
<h1>{{ slide.title }}</h1>
|
||||
<span>{{ slide.pill }}</span>
|
||||
<p v-if="slide.eyebrow">{{ slide.eyebrow }}</p>
|
||||
<h1 v-if="slide.title">{{ slide.title }}</h1>
|
||||
<span v-if="slide.pill">{{ slide.pill }}</span>
|
||||
</div>
|
||||
<div class="banner-badge">{{ slide.badge }}</div>
|
||||
<div v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
@@ -127,7 +127,7 @@ const maskedPhone = computed(() =>
|
||||
<van-icon
|
||||
name="setting-o"
|
||||
:size="22"
|
||||
color="rgba(255,255,255,0.85)"
|
||||
color="#64748b"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -247,19 +247,14 @@ const maskedPhone = computed(() =>
|
||||
padding: 0 0 60px;
|
||||
}
|
||||
|
||||
/* ========== 已登录区 - Hero蓝色横幅 ========== */
|
||||
/* ========== 已登录区 - 个人信息卡 ========== */
|
||||
.profile-hero {
|
||||
position: relative;
|
||||
padding: 28px 20px 40px;
|
||||
border-radius: 0 0 24px 24px;
|
||||
overflow: hidden;
|
||||
padding: 14px 12px 0;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #1479ff;
|
||||
z-index: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-hero-content {
|
||||
@@ -268,6 +263,11 @@ const maskedPhone = computed(() =>
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
box-shadow: 0 8px 24px rgba(23, 35, 61, 0.06);
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
@@ -279,9 +279,10 @@ const maskedPhone = computed(() =>
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
font-size: 28px;
|
||||
border-radius: 16px;
|
||||
background: #fff3e8;
|
||||
color: #ff6a00;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.hero-user {
|
||||
@@ -294,14 +295,14 @@ const maskedPhone = computed(() =>
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
color: #17233d;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero-user p {
|
||||
margin: 4px 0 0;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
color: #7b8798;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -311,15 +312,15 @@ const maskedPhone = computed(() =>
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
background: #f4f6f8;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ========== 余额卡片 - 白色浮层 ========== */
|
||||
.balance-card {
|
||||
position: relative;
|
||||
margin: -24px 12px 0;
|
||||
margin: 12px 12px 0;
|
||||
padding: 18px 16px 14px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
|
||||
Reference in New Issue
Block a user