feat: P2阶段完成 - listings和auth模块迁移
## P2.1: 商品浏览模块（listings）✅ ### 完整迁移（23个文件） - API: listings.ts, listingOptions.ts, homeConfig.ts - Views: 5个页面（HomeView, ListingsView, ListingDetailView + 移动端2个） - Composables: 3个（useHomeFilters, useFilterOptions, useListingQuery） - Components: 9个（ListingCard, 各种过滤器组件） - Tests: 2个测试文件 **功能：** - 首页浏览、商品列表、详情查看 - 高级筛选（服务器、等级、哈夫币、皮肤等） - 排序和分区功能 - 横幅、公告、统计展示 **技术改进：** - 更新所有导入路径到 @/shared/ - 建立清晰的模块导出 --- ## P2.2: 用户认证模块（auth）✅ ### 完整迁移（12个文件） - API: auth.ts, realname.ts, notifications.ts - Views: 8个页面（登录、注册、个人资料、实名认证、通知 + 移动端） - 模块导出 **功能：** - 用户注册、登录、Token管理 - 实名认证、风险检查 - 个人资料编辑、头像上传 - 消息/通知中心 **技术改进：** - 统一 API 导入路径 - 类型安全增强 --- ## 里程碑 🎉 **P2 阶段完成！** **累计完成：** 6个模块 - ✅ P0: shared（基础设施）- 22个文件 - ✅ P1: wallet, chats, orders - 24个文件 - ✅ P2: listings, auth - 35个文件 **总计：** 81个文件已迁移 **剩余：** P3阶段（seller, disputes, admin）+ 清理工作 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yml2213
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
f415832c19
commit
405abfa4f7
@@ -0,0 +1,95 @@
|
||||
import { apiClient } from '@/shared/api/client'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
import {
|
||||
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
|
||||
}
|
||||
|
||||
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),
|
||||
}
|
||||
}
|
||||
|
||||
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'
|
||||
}
|
||||
@@ -0,0 +1,398 @@
|
||||
import { apiClient } from '@/shared/api/client'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
|
||||
export type ChargeMode = '赠送' | '收费'
|
||||
|
||||
export type QuantityKey = string
|
||||
|
||||
export type ScreenshotKey = string
|
||||
|
||||
export type SkinCategoryKey = string
|
||||
|
||||
export interface PublishOptionGroup {
|
||||
key: SkinCategoryKey | string
|
||||
title: string
|
||||
options: string[]
|
||||
}
|
||||
|
||||
export interface PublishQuantityItem {
|
||||
key: QuantityKey
|
||||
label: string
|
||||
price: string
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
export interface PublishScreenshotSlot {
|
||||
key: ScreenshotKey
|
||||
label: string
|
||||
required: boolean
|
||||
hint: string
|
||||
}
|
||||
|
||||
export interface PublishPriceConfig {
|
||||
deposit_placeholder: string
|
||||
price_placeholder: string
|
||||
ratio_description: string
|
||||
}
|
||||
|
||||
export interface PublishDepositSkinGroupRule {
|
||||
group_key: string
|
||||
label: string
|
||||
amount_per_item: number
|
||||
}
|
||||
|
||||
export interface PublishDepositRecommendConfig {
|
||||
base_amount: number
|
||||
skin_group_rules: PublishDepositSkinGroupRule[]
|
||||
}
|
||||
|
||||
export interface PublishInsuranceBaseRatio {
|
||||
insurance: string
|
||||
ratio: number
|
||||
}
|
||||
|
||||
export interface PublishRatioConfigItem {
|
||||
key: string
|
||||
label: string
|
||||
kind: string
|
||||
group_key?: string
|
||||
missing_penalty: number
|
||||
}
|
||||
|
||||
export interface PublishCoinCorrection {
|
||||
threshold_m: number
|
||||
correction: number
|
||||
}
|
||||
|
||||
export interface PublishSaleFixedMarkupRule {
|
||||
min_m: number
|
||||
max_m: number
|
||||
markup_amount: number
|
||||
}
|
||||
|
||||
export interface PublishSaleRatioAdjustmentRule {
|
||||
min_m: number
|
||||
max_m: number
|
||||
ratio_subtract: number
|
||||
}
|
||||
|
||||
export interface PublishRatioConfig {
|
||||
insurance_base_ratios: PublishInsuranceBaseRatio[]
|
||||
config_items: PublishRatioConfigItem[]
|
||||
coin_corrections: PublishCoinCorrection[]
|
||||
}
|
||||
|
||||
export interface PublishSalePriceConfig {
|
||||
fixed_markup_rules: PublishSaleFixedMarkupRule[]
|
||||
ratio_adjustment_rules: PublishSaleRatioAdjustmentRule[]
|
||||
}
|
||||
|
||||
export interface ListingPublishOptions {
|
||||
server_options: string[]
|
||||
face_options: string[]
|
||||
rank_options: string[]
|
||||
insurance_options: string[]
|
||||
level_options: string[]
|
||||
login_method_options: string[]
|
||||
region_options: string[]
|
||||
skin_groups: PublishOptionGroup[]
|
||||
quantity_items: PublishQuantityItem[]
|
||||
screenshot_slots: PublishScreenshotSlot[]
|
||||
ban_record_options: string[]
|
||||
ban_evidence_options: string[]
|
||||
fire_level_min: number
|
||||
price_config: PublishPriceConfig
|
||||
deposit_recommend_config: PublishDepositRecommendConfig
|
||||
ratio_config: PublishRatioConfig
|
||||
}
|
||||
|
||||
export const emptyListingPublishOptions: ListingPublishOptions = {
|
||||
server_options: [],
|
||||
face_options: [],
|
||||
rank_options: [],
|
||||
insurance_options: [],
|
||||
level_options: [],
|
||||
login_method_options: [],
|
||||
region_options: [],
|
||||
skin_groups: [],
|
||||
quantity_items: [],
|
||||
screenshot_slots: [],
|
||||
ban_record_options: [],
|
||||
ban_evidence_options: [],
|
||||
fire_level_min: 38,
|
||||
price_config: {
|
||||
deposit_placeholder: '',
|
||||
price_placeholder: '',
|
||||
ratio_description: '',
|
||||
},
|
||||
deposit_recommend_config: {
|
||||
base_amount: 50,
|
||||
skin_group_rules: [
|
||||
{ group_key: 'melee', label: '刀皮', amount_per_item: 5 },
|
||||
{ group_key: 'operatorGold', label: '干员金皮', amount_per_item: 10 },
|
||||
{ group_key: 'operatorRed', label: '干员红皮', amount_per_item: 30 },
|
||||
],
|
||||
},
|
||||
ratio_config: {
|
||||
insurance_base_ratios: [],
|
||||
config_items: [],
|
||||
coin_corrections: [],
|
||||
},
|
||||
}
|
||||
|
||||
export const emptyListingSalePriceConfig: PublishSalePriceConfig = {
|
||||
fixed_markup_rules: [
|
||||
{ min_m: 10, max_m: 30, markup_amount: 28 },
|
||||
{ min_m: 30, max_m: 50, markup_amount: 31 },
|
||||
{ min_m: 50, max_m: 70, markup_amount: 34 },
|
||||
{ min_m: 70, max_m: 90, markup_amount: 38 },
|
||||
],
|
||||
ratio_adjustment_rules: [
|
||||
{ min_m: 90, max_m: 150, ratio_subtract: 5 },
|
||||
{ min_m: 150, max_m: 230, ratio_subtract: 4 },
|
||||
{ min_m: 230, max_m: 310, ratio_subtract: 3.5 },
|
||||
{ min_m: 310, max_m: 390, ratio_subtract: 3 },
|
||||
{ min_m: 390, max_m: 470, ratio_subtract: 0 },
|
||||
{ min_m: 470, max_m: 550, ratio_subtract: 0 },
|
||||
{ min_m: 550, max_m: 0, ratio_subtract: 0 },
|
||||
],
|
||||
}
|
||||
|
||||
export async function fetchListingPublishOptions() {
|
||||
const { data } = await apiClient.get<ApiResponse<ListingPublishOptions>>('/listing-publish-options')
|
||||
return mergeListingPublishOptions(data.data)
|
||||
}
|
||||
|
||||
export async function fetchListingSalePriceConfig() {
|
||||
const { data } = await apiClient.get<ApiResponse<PublishSalePriceConfig>>('/listing-sale-price-config')
|
||||
return mergeListingSalePriceConfig(data.data)
|
||||
}
|
||||
|
||||
export function mergeListingPublishOptions(options?: Partial<ListingPublishOptions>): ListingPublishOptions {
|
||||
return {
|
||||
server_options: normalizeStringList(options?.server_options),
|
||||
face_options: normalizeStringList(options?.face_options),
|
||||
rank_options: normalizeStringList(options?.rank_options),
|
||||
insurance_options: normalizeStringList(options?.insurance_options),
|
||||
level_options: normalizeStringList(options?.level_options),
|
||||
login_method_options: normalizeStringList(options?.login_method_options),
|
||||
region_options: normalizeStringList(options?.region_options),
|
||||
skin_groups: normalizeOptionGroups(options?.skin_groups),
|
||||
quantity_items: normalizeQuantityItems(options?.quantity_items),
|
||||
screenshot_slots: normalizeScreenshotSlots(options?.screenshot_slots),
|
||||
ban_record_options: normalizeStringList(options?.ban_record_options),
|
||||
ban_evidence_options: normalizeStringList(options?.ban_evidence_options),
|
||||
fire_level_min: readPositiveInteger(options?.fire_level_min, 38),
|
||||
price_config: normalizePriceConfig(options?.price_config),
|
||||
deposit_recommend_config: normalizeDepositRecommendConfig(options?.deposit_recommend_config),
|
||||
ratio_config: normalizeRatioConfig(options?.ratio_config),
|
||||
}
|
||||
}
|
||||
|
||||
export function mergeListingSalePriceConfig(options?: Partial<PublishSalePriceConfig>): PublishSalePriceConfig {
|
||||
return normalizeSalePriceConfig(options)
|
||||
}
|
||||
|
||||
function normalizeStringList(values?: unknown[]) {
|
||||
return Array.isArray(values)
|
||||
? values.map((item) => (typeof item === 'string' ? item.trim() : '')).filter(Boolean)
|
||||
: []
|
||||
}
|
||||
|
||||
function normalizeOptionGroups(values?: unknown[]): PublishOptionGroup[] {
|
||||
if (!Array.isArray(values)) return []
|
||||
return values
|
||||
.map((item) => {
|
||||
const group = isRecord(item) ? item : {}
|
||||
return {
|
||||
key: typeof group.key === 'string' ? group.key.trim() : '',
|
||||
title: typeof group.title === 'string' ? group.title.trim() : '',
|
||||
options: normalizeStringList(Array.isArray(group.options) ? group.options : []),
|
||||
}
|
||||
})
|
||||
.filter((item) => item.key && item.title)
|
||||
}
|
||||
|
||||
function normalizeQuantityItems(values?: unknown[]): PublishQuantityItem[] {
|
||||
if (!Array.isArray(values)) return []
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
key: typeof row.key === 'string' ? row.key.trim() : '',
|
||||
label: typeof row.label === 'string' ? row.label.trim() : '',
|
||||
price: typeof row.price === 'string' ? row.price.trim() : '',
|
||||
placeholder: typeof row.placeholder === 'string' ? row.placeholder.trim() : undefined,
|
||||
}
|
||||
})
|
||||
.filter((item) => item.key && item.label)
|
||||
}
|
||||
|
||||
function normalizeScreenshotSlots(values?: unknown[]): PublishScreenshotSlot[] {
|
||||
if (!Array.isArray(values)) return []
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
key: typeof row.key === 'string' ? row.key.trim() : '',
|
||||
label: typeof row.label === 'string' ? row.label.trim() : '',
|
||||
required: row.required === true,
|
||||
hint: typeof row.hint === 'string' ? row.hint.trim() : '',
|
||||
}
|
||||
})
|
||||
.filter((item) => item.key && item.label)
|
||||
}
|
||||
|
||||
function normalizePriceConfig(value?: unknown): PublishPriceConfig {
|
||||
const row = isRecord(value) ? value : {}
|
||||
return {
|
||||
deposit_placeholder: typeof row.deposit_placeholder === 'string' ? row.deposit_placeholder.trim() : '',
|
||||
price_placeholder: typeof row.price_placeholder === 'string' ? row.price_placeholder.trim() : '',
|
||||
ratio_description: typeof row.ratio_description === 'string' ? row.ratio_description.trim() : '',
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeDepositRecommendConfig(value?: unknown): PublishDepositRecommendConfig {
|
||||
const row = isRecord(value) ? value : {}
|
||||
const config = {
|
||||
base_amount: readNumber(row.base_amount),
|
||||
skin_group_rules: normalizeDepositSkinGroupRules(
|
||||
Array.isArray(row.skin_group_rules) ? row.skin_group_rules : [],
|
||||
),
|
||||
}
|
||||
if (config.base_amount <= 0) {
|
||||
config.base_amount = emptyListingPublishOptions.deposit_recommend_config.base_amount
|
||||
}
|
||||
if (config.skin_group_rules.length === 0) {
|
||||
config.skin_group_rules = [...emptyListingPublishOptions.deposit_recommend_config.skin_group_rules]
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
function normalizeDepositSkinGroupRules(values: unknown[]): PublishDepositSkinGroupRule[] {
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
group_key: typeof row.group_key === 'string' ? row.group_key.trim() : '',
|
||||
label: typeof row.label === 'string' ? row.label.trim() : '',
|
||||
amount_per_item: readNumber(row.amount_per_item),
|
||||
}
|
||||
})
|
||||
.filter((item) => item.group_key && item.label && item.amount_per_item >= 0)
|
||||
}
|
||||
|
||||
function normalizeRatioConfig(value?: unknown): PublishRatioConfig {
|
||||
const row = isRecord(value) ? value : {}
|
||||
return {
|
||||
insurance_base_ratios: normalizeInsuranceBaseRatios(
|
||||
Array.isArray(row.insurance_base_ratios) ? row.insurance_base_ratios : [],
|
||||
),
|
||||
config_items: normalizeRatioConfigItems(
|
||||
Array.isArray(row.config_items) ? row.config_items : [],
|
||||
),
|
||||
coin_corrections: normalizeCoinCorrections(
|
||||
Array.isArray(row.coin_corrections) ? row.coin_corrections : [],
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeSalePriceConfig(value?: unknown): PublishSalePriceConfig {
|
||||
const row = isRecord(value) ? value : {}
|
||||
const config = {
|
||||
fixed_markup_rules: normalizeSaleFixedMarkupRules(
|
||||
Array.isArray(row.fixed_markup_rules) ? row.fixed_markup_rules : [],
|
||||
),
|
||||
ratio_adjustment_rules: normalizeSaleRatioAdjustmentRules(
|
||||
Array.isArray(row.ratio_adjustment_rules) ? row.ratio_adjustment_rules : [],
|
||||
),
|
||||
}
|
||||
if (config.fixed_markup_rules.length === 0 && config.ratio_adjustment_rules.length === 0) {
|
||||
return JSON.parse(JSON.stringify(emptyListingSalePriceConfig)) as PublishSalePriceConfig
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
function normalizeInsuranceBaseRatios(values: unknown[]): PublishInsuranceBaseRatio[] {
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
insurance: typeof row.insurance === 'string' ? row.insurance.trim() : '',
|
||||
ratio: readNumber(row.ratio),
|
||||
}
|
||||
})
|
||||
.filter((item) => item.insurance && item.ratio > 0)
|
||||
}
|
||||
|
||||
function normalizeRatioConfigItems(values: unknown[]): PublishRatioConfigItem[] {
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
key: typeof row.key === 'string' ? row.key.trim() : '',
|
||||
label: typeof row.label === 'string' ? row.label.trim() : '',
|
||||
kind: typeof row.kind === 'string' ? row.kind.trim() : '',
|
||||
group_key: typeof row.group_key === 'string' ? row.group_key.trim() : '',
|
||||
missing_penalty: readNumber(row.missing_penalty),
|
||||
}
|
||||
})
|
||||
.filter((item) => item.key && item.label && item.kind)
|
||||
}
|
||||
|
||||
function normalizeCoinCorrections(values: unknown[]): PublishCoinCorrection[] {
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
threshold_m: readNumber(row.threshold_m),
|
||||
correction: readNumber(row.correction),
|
||||
}
|
||||
})
|
||||
.filter((item) => item.threshold_m >= 0 && item.correction > 0)
|
||||
}
|
||||
|
||||
function normalizeSaleFixedMarkupRules(values: unknown[]): PublishSaleFixedMarkupRule[] {
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
min_m: readNumber(row.min_m),
|
||||
max_m: readNumber(row.max_m),
|
||||
markup_amount: readNumber(row.markup_amount),
|
||||
}
|
||||
})
|
||||
.filter((item) => item.min_m >= 0 && item.max_m >= item.min_m && item.markup_amount >= 0)
|
||||
}
|
||||
|
||||
function normalizeSaleRatioAdjustmentRules(values: unknown[]): PublishSaleRatioAdjustmentRule[] {
|
||||
return values
|
||||
.map((item) => {
|
||||
const row = isRecord(item) ? item : {}
|
||||
return {
|
||||
min_m: readNumber(row.min_m),
|
||||
max_m: readNumber(row.max_m),
|
||||
ratio_subtract: readNumber(row.ratio_subtract),
|
||||
}
|
||||
})
|
||||
.filter(
|
||||
(item) =>
|
||||
item.min_m >= 0 &&
|
||||
(item.max_m === 0 || item.max_m >= item.min_m) &&
|
||||
item.ratio_subtract >= 0,
|
||||
)
|
||||
}
|
||||
|
||||
function readNumber(value: unknown) {
|
||||
const parsed = Number(value)
|
||||
return Number.isFinite(parsed) ? parsed : 0
|
||||
}
|
||||
|
||||
function readPositiveInteger(value: unknown, fallback: number) {
|
||||
const parsed = Math.trunc(readNumber(value))
|
||||
return parsed > 0 ? parsed : fallback
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
import { apiClient } from '@/shared/api/client'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
import type { ListingReviewStatus, ListingStatus } from '@/shared/types/status'
|
||||
|
||||
export interface Listing {
|
||||
id: number
|
||||
account_id: number
|
||||
owner_id: number
|
||||
owner_phone?: string
|
||||
owner_nickname?: string
|
||||
title: string
|
||||
description: string
|
||||
game_name: string
|
||||
server_region: string
|
||||
login_platform: string
|
||||
rank_level: string
|
||||
haf_coin_amount: number
|
||||
asset_summary?: Record<string, unknown>
|
||||
screenshot_urls: string[]
|
||||
cover_url: string
|
||||
price: number
|
||||
deposit_amount: number
|
||||
is_accelerated_sale?: boolean
|
||||
in_transaction: boolean
|
||||
status: ListingStatus
|
||||
review_status: ListingReviewStatus
|
||||
review_reason: string
|
||||
published_at?: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface ListingPayload {
|
||||
title: string
|
||||
description: string
|
||||
server_region: string
|
||||
login_platform: string
|
||||
rank_level: string
|
||||
haf_coin_amount: number
|
||||
asset_summary?: Record<string, unknown>
|
||||
screenshot_urls: string[]
|
||||
price: number
|
||||
deposit_amount: number
|
||||
}
|
||||
|
||||
export interface PublicListingQuery {
|
||||
page?: number
|
||||
page_size?: number
|
||||
keyword?: string
|
||||
sort?: string
|
||||
zone?: string
|
||||
server?: string
|
||||
region?: string
|
||||
login_method?: string
|
||||
rank?: string
|
||||
insurance?: string
|
||||
stamina?: string
|
||||
load?: string
|
||||
skin_group?: string
|
||||
skin_name?: string
|
||||
min_coin?: number
|
||||
max_coin?: number
|
||||
min_price?: number
|
||||
max_price?: number
|
||||
min_deposit?: number
|
||||
max_deposit?: number
|
||||
min_total?: number
|
||||
max_total?: number
|
||||
min_fire_level?: number
|
||||
max_fire_level?: number
|
||||
min_secret_kd?: number
|
||||
max_secret_kd?: number
|
||||
[key: `resource_${string}_min`]: number | undefined
|
||||
[key: `resource_${string}_max`]: number | undefined
|
||||
}
|
||||
|
||||
export interface PublicListingPage {
|
||||
items: Listing[]
|
||||
total: number
|
||||
page: number
|
||||
page_size: number
|
||||
zone_counts: Record<string, number>
|
||||
}
|
||||
|
||||
export async function fetchListings(query: PublicListingQuery = {}) {
|
||||
const page = await fetchListingsPage(query)
|
||||
return page.items
|
||||
}
|
||||
|
||||
export async function fetchListingsPage(query: PublicListingQuery = {}) {
|
||||
const params = Object.fromEntries(
|
||||
Object.entries(query).filter(([, value]) => value !== '' && value !== undefined && value !== null)
|
||||
)
|
||||
const { data } = await apiClient.get<ApiResponse<Partial<PublicListingPage>>>('/listings', { params })
|
||||
return normalizePublicListingPage(data.data, query)
|
||||
}
|
||||
|
||||
function normalizePublicListingPage(data: Partial<PublicListingPage>, query: PublicListingQuery): PublicListingPage {
|
||||
const items = Array.isArray(data.items) ? data.items : []
|
||||
return {
|
||||
items,
|
||||
total: Number.isFinite(Number(data.total)) ? Number(data.total) : items.length,
|
||||
page: Number.isFinite(Number(data.page)) ? Number(data.page) : Number(query.page || 1),
|
||||
page_size: Number.isFinite(Number(data.page_size)) ? Number(data.page_size) : Number(query.page_size || items.length || 20),
|
||||
zone_counts: data.zone_counts && typeof data.zone_counts === 'object' ? data.zone_counts : {},
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchListing(id: string | number) {
|
||||
const { data } = await apiClient.get<ApiResponse<Listing>>(`/listings/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchSellerListings() {
|
||||
const { data } = await apiClient.get<ApiResponse<{ items: Listing[] }>>('/seller/listings')
|
||||
return data.data.items
|
||||
}
|
||||
|
||||
export async function createListing(payload: ListingPayload) {
|
||||
const { data } = await apiClient.post<ApiResponse<Listing>>('/listings', payload)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function submitListingReview(id: number) {
|
||||
const { data } = await apiClient.post<ApiResponse<Listing>>(`/listings/${id}/submit-review`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function offlineListing(id: number) {
|
||||
const { data } = await apiClient.delete<ApiResponse<{ offline: boolean }>>(`/listings/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchPendingReviewListings() {
|
||||
const { data } = await apiClient.get<ApiResponse<{ items: Listing[] }>>('/admin/listings/pending')
|
||||
return data.data.items
|
||||
}
|
||||
|
||||
export interface AdminListingQuery {
|
||||
owner_id?: string
|
||||
status?: ListingStatus | ''
|
||||
review_status?: ListingReviewStatus | ''
|
||||
limit?: number
|
||||
page?: number
|
||||
page_size?: number
|
||||
}
|
||||
|
||||
export interface AdminListingPage {
|
||||
items: Listing[]
|
||||
total: number
|
||||
page: number
|
||||
page_size: number
|
||||
}
|
||||
|
||||
export async function fetchAdminListings(query: AdminListingQuery = {}) {
|
||||
const params = Object.fromEntries(Object.entries(query).filter(([, value]) => value !== '' && value !== undefined))
|
||||
const { data } = await apiClient.get<ApiResponse<AdminListingPage>>('/admin/listings', { params })
|
||||
return normalizeAdminListingPage(data.data, query)
|
||||
}
|
||||
|
||||
function normalizeAdminListingPage(data: Partial<AdminListingPage>, query: AdminListingQuery): AdminListingPage {
|
||||
const items = Array.isArray(data.items) ? data.items : []
|
||||
return {
|
||||
items,
|
||||
total: Number.isFinite(Number(data.total)) ? Number(data.total) : items.length,
|
||||
page: Number.isFinite(Number(data.page)) ? Number(data.page) : Number(query.page || 1),
|
||||
page_size: Number.isFinite(Number(data.page_size)) ? Number(data.page_size) : Number(query.page_size || items.length || 10),
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchAdminListing(id: string | number) {
|
||||
const { data } = await apiClient.get<ApiResponse<Listing>>(`/admin/listings/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function adminOfflineListing(id: number, reason: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/offline`, { reason })
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function adminMarkListingAbnormal(id: number, reason: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/mark-abnormal`, { reason })
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function approveListing(id: number) {
|
||||
const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/approve`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function rejectListing(id: number, reason: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<Listing>>(`/admin/listings/${id}/reject`, { reason })
|
||||
return data.data
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { Bell } from '@element-plus/icons-vue'
|
||||
import { ElCarousel, ElCarouselItem, ElIcon } from 'element-plus'
|
||||
|
||||
interface Props {
|
||||
announcements: string[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-announcement">
|
||||
<el-icon><Bell /></el-icon>
|
||||
<el-carousel
|
||||
height="22px"
|
||||
direction="vertical"
|
||||
indicator-position="none"
|
||||
:autoplay="true"
|
||||
:interval="3200"
|
||||
>
|
||||
<el-carousel-item v-for="item in announcements" :key="item">
|
||||
<span>{{ item }}</span>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-announcement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
color: #854d0e;
|
||||
background: #fefce8;
|
||||
border: 1px solid #fef08a;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
|
||||
}
|
||||
|
||||
.home-announcement :deep(.el-carousel) {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
import { ElCarousel, ElCarouselItem } from 'element-plus'
|
||||
|
||||
interface HomeBannerSlide {
|
||||
title?: string
|
||||
eyebrow?: string
|
||||
pill?: string
|
||||
badge?: string
|
||||
tone?: string
|
||||
image_url?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
banners: HomeBannerSlide[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="hero-board">
|
||||
<el-carousel height="240px" indicator-position="outside" :interval="3600">
|
||||
<el-carousel-item v-for="slide in banners" :key="slide.title || slide.image_url">
|
||||
<div
|
||||
class="hero-slide"
|
||||
:class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
|
||||
>
|
||||
<img
|
||||
v-if="slide.image_url"
|
||||
:src="slide.image_url"
|
||||
:alt="slide.title || slide.eyebrow || '首页轮播'"
|
||||
/>
|
||||
<div class="hero-copy">
|
||||
<span v-if="slide.eyebrow">{{ slide.eyebrow }}</span>
|
||||
<h1 v-if="slide.title">{{ slide.title }}</h1>
|
||||
<p v-if="slide.pill">{{ slide.pill }}</p>
|
||||
</div>
|
||||
<em v-if="slide.badge">{{ slide.badge }}</em>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hero-board {
|
||||
min-width: 0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.hero-slide.tone-orange {
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
|
||||
}
|
||||
.hero-slide.tone-green {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
}
|
||||
|
||||
.hero-slide img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-slide.has-image::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.hero-slide.has-image .hero-copy {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 12px 0;
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<script setup lang="ts">
|
||||
import { Filter, Refresh, ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElButton, ElIcon } from 'element-plus'
|
||||
import RangeFilter from './RangeFilter.vue'
|
||||
import StringFilter from './StringFilter.vue'
|
||||
import SkinFilter from './SkinFilter.vue'
|
||||
import {
|
||||
coinRangeOptions,
|
||||
moneyRangeOptions,
|
||||
totalRangeOptions,
|
||||
fireLevelRangeOptions,
|
||||
} from '@/composables/home/useFilterOptions'
|
||||
import type { ListingPublishOptions } from '@/api/listingOptions'
|
||||
import type { FilterPopoverKey, HomeFilters } from '@/composables/home/useHomeFilters'
|
||||
|
||||
interface Props {
|
||||
filters: HomeFilters
|
||||
totalListings: number
|
||||
publishOptions: ListingPublishOptions
|
||||
regionOptions: string[]
|
||||
loginMethodOptions: string[]
|
||||
skinFilterGroups: Array<{ key: string; title: string; options: string[] }>
|
||||
skinChipLabel: string
|
||||
activeFilterPopover: FilterPopoverKey | ''
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:filters': [filters: Partial<HomeFilters>]
|
||||
'reset': []
|
||||
'setFilterPopover': [key: FilterPopoverKey, visible: boolean]
|
||||
'closeFilterPopover': []
|
||||
}>()
|
||||
|
||||
const filterPopoverBaseProps = {
|
||||
placement: 'bottom-start',
|
||||
popperClass: 'home-filter-popover',
|
||||
trigger: 'click',
|
||||
showAfter: 0,
|
||||
hideAfter: 0,
|
||||
transition: 'none',
|
||||
} as const
|
||||
|
||||
function filterPopoverProps(key: FilterPopoverKey) {
|
||||
return {
|
||||
...filterPopoverBaseProps,
|
||||
visible: props.activeFilterPopover === key,
|
||||
'onUpdate:visible': (visible: boolean) => emit('setFilterPopover', key, visible),
|
||||
}
|
||||
}
|
||||
|
||||
function updateFilter(key: keyof HomeFilters, value: any) {
|
||||
emit('update:filters', { [key]: value })
|
||||
}
|
||||
|
||||
function closePopover() {
|
||||
emit('closeFilterPopover')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="horizontal-filter-card">
|
||||
<div class="filter-header">
|
||||
<div class="filter-title">
|
||||
<el-icon><Filter /></el-icon>
|
||||
<strong>筛选大厅</strong>
|
||||
<span>{{ totalListings }} 个结果</span>
|
||||
</div>
|
||||
<el-button :icon="Refresh" link @click="emit('reset')">
|
||||
重置全部条件
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="filter-chip-row">
|
||||
<StringFilter
|
||||
label="保险"
|
||||
placeholder="保险"
|
||||
:model-value="filters.insurance"
|
||||
:options="publishOptions.insurance_options"
|
||||
:popover-props="filterPopoverProps('insurance')"
|
||||
@update:model-value="updateFilter('insurance', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="体力"
|
||||
placeholder="体力"
|
||||
:model-value="filters.stamina"
|
||||
:options="publishOptions.level_options"
|
||||
:popover-props="filterPopoverProps('stamina')"
|
||||
@update:model-value="updateFilter('stamina', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="负载"
|
||||
placeholder="负载"
|
||||
:model-value="filters.load"
|
||||
:options="publishOptions.level_options"
|
||||
:popover-props="filterPopoverProps('load')"
|
||||
@update:model-value="updateFilter('load', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="登录方式"
|
||||
placeholder="登录方式"
|
||||
:model-value="filters.loginMethod"
|
||||
:options="loginMethodOptions"
|
||||
:popover-props="filterPopoverProps('loginMethod')"
|
||||
@update:model-value="updateFilter('loginMethod', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="地区"
|
||||
placeholder="地区选择"
|
||||
:model-value="filters.region"
|
||||
:options="regionOptions"
|
||||
:popover-props="filterPopoverProps('region')"
|
||||
:wide="true"
|
||||
@update:model-value="updateFilter('region', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="哈夫币(M)"
|
||||
:model-min="filters.minCoin"
|
||||
:model-max="filters.maxCoin"
|
||||
:options="coinRangeOptions"
|
||||
:popover-props="filterPopoverProps('coin')"
|
||||
:wide="true"
|
||||
@update:model-min="updateFilter('minCoin', $event)"
|
||||
@update:model-max="updateFilter('maxCoin', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="租金"
|
||||
:model-min="filters.minPrice"
|
||||
:model-max="filters.maxPrice"
|
||||
:options="moneyRangeOptions"
|
||||
:popover-props="filterPopoverProps('price')"
|
||||
@update:model-min="updateFilter('minPrice', $event)"
|
||||
@update:model-max="updateFilter('maxPrice', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="押金"
|
||||
:model-min="filters.minDeposit"
|
||||
:model-max="filters.maxDeposit"
|
||||
:options="moneyRangeOptions"
|
||||
:popover-props="filterPopoverProps('deposit')"
|
||||
@update:model-min="updateFilter('minDeposit', $event)"
|
||||
@update:model-max="updateFilter('maxDeposit', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="合计金额"
|
||||
:model-min="filters.minTotal"
|
||||
:model-max="filters.maxTotal"
|
||||
:options="totalRangeOptions"
|
||||
:popover-props="filterPopoverProps('total')"
|
||||
:wide="true"
|
||||
@update:model-min="updateFilter('minTotal', $event)"
|
||||
@update:model-max="updateFilter('maxTotal', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<SkinFilter
|
||||
:skin-group="filters.skinGroup"
|
||||
:skin-name="filters.skinName"
|
||||
:groups="skinFilterGroups"
|
||||
:popover-props="filterPopoverProps('skin')"
|
||||
@update:skin-group="updateFilter('skinGroup', $event)"
|
||||
@update:skin-name="updateFilter('skinName', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<StringFilter
|
||||
label="段位"
|
||||
placeholder="段位"
|
||||
:model-value="filters.rank"
|
||||
:options="publishOptions.rank_options"
|
||||
:popover-props="filterPopoverProps('rank')"
|
||||
@update:model-value="updateFilter('rank', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
|
||||
<RangeFilter
|
||||
label="等级"
|
||||
:model-min="filters.minFireLevel"
|
||||
:model-max="filters.maxFireLevel"
|
||||
:options="fireLevelRangeOptions"
|
||||
:popover-props="filterPopoverProps('fireLevel')"
|
||||
@update:model-min="updateFilter('minFireLevel', $event)"
|
||||
@update:model-max="updateFilter('maxFireLevel', $event)"
|
||||
@close="closePopover"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
interface StatCard {
|
||||
label: string
|
||||
value: string
|
||||
hint: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
stats: StatCard[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-stats-v2">
|
||||
<div v-for="item in stats" :key="item.label" class="stat-item">
|
||||
<div class="stat-main">
|
||||
<strong>{{ item.value }}</strong>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
<small>{{ item.hint }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-stats-v2 {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.stat-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item strong {
|
||||
font-size: 24px;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.stat-item span {
|
||||
font-weight: 700;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.stat-item small {
|
||||
margin-top: 4px;
|
||||
color: #7b8798;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import { ElRadioGroup, ElRadioButton } from 'element-plus'
|
||||
|
||||
interface ZoneOption {
|
||||
key: string
|
||||
label: string
|
||||
hint: string
|
||||
count: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
zones: ZoneOption[]
|
||||
activeZone: string
|
||||
sortBy: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:activeZone': [value: string]
|
||||
'update:sortBy': [value: string]
|
||||
}>()
|
||||
|
||||
function selectZone(key: string) {
|
||||
emit('update:activeZone', key)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="zones-and-sort">
|
||||
<div class="zone-tabs">
|
||||
<button
|
||||
v-for="zone in zones"
|
||||
:key="zone.key"
|
||||
type="button"
|
||||
class="zone-tab"
|
||||
:class="{ active: activeZone === zone.key }"
|
||||
@click="selectZone(zone.key)"
|
||||
>
|
||||
<div class="zone-main">
|
||||
<strong>{{ zone.label }}</strong>
|
||||
<span class="zone-count">{{ zone.count }}</span>
|
||||
</div>
|
||||
<small>{{ zone.hint }}</small>
|
||||
</button>
|
||||
</div>
|
||||
<div class="list-actions">
|
||||
<el-radio-group :model-value="sortBy" size="small" @update:model-value="(val) => emit('update:sortBy', val as string)">
|
||||
<el-radio-button label="recommended">综合推荐</el-radio-button>
|
||||
<el-radio-button label="coinDesc">哈夫币</el-radio-button>
|
||||
<el-radio-button label="awmDesc">AWM数量</el-radio-button>
|
||||
<el-radio-button label="priceAsc">价格最低</el-radio-button>
|
||||
<el-radio-button label="priceDesc">价格最高</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.zones-and-sort {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.zone-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.zone-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 14px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.zone-tab:hover {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.zone-tab.active {
|
||||
border-color: #ff6a00;
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
|
||||
}
|
||||
|
||||
.zone-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.zone-tab strong {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.zone-count {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.zone-tab small {
|
||||
font-size: 11px;
|
||||
color: #7b8798;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,344 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink } from 'vue-router'
|
||||
import type { Listing } from '@/api/listings'
|
||||
import {
|
||||
formatHafCoinM,
|
||||
getCoinWan,
|
||||
getListingDisplayPrice,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getServerRegion,
|
||||
hasAcceleratedSaleRatio,
|
||||
hasGiftResources,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
getResourceQuantity,
|
||||
getOnlineTimeText,
|
||||
getSkinNames,
|
||||
getRatioValue,
|
||||
getDailyLoss,
|
||||
} from '@/utils/listingDisplay'
|
||||
|
||||
interface Props {
|
||||
listing: Listing
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink class="listing-card-v2" :to="`/listings/${listing.id}`">
|
||||
<div class="card-cover">
|
||||
<img
|
||||
v-if="listing.cover_url"
|
||||
:data-src="listing.cover_url"
|
||||
:alt="getListingTitle(listing)"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="lazy-image"
|
||||
/>
|
||||
<div v-else class="empty-cover">HFB</div>
|
||||
<div class="cover-badges">
|
||||
<span v-if="hasAcceleratedSaleRatio(listing)" class="badge sale">特惠</span>
|
||||
<span v-if="hasGiftResources(listing)" class="badge gift">有赠送</span>
|
||||
</div>
|
||||
<div class="ratio-tag">比例 1:{{ getRatioValue(listing).toFixed(1) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-details">
|
||||
<div class="card-title-row">
|
||||
<h3>{{ getListingTitle(listing) }}</h3>
|
||||
<span class="daily-loss">日耗 {{ getDailyLoss(listing) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>哈夫币</label>
|
||||
<strong>{{ formatHafCoinM(getCoinWan(listing)) }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>保险格数</label>
|
||||
<span>{{ readAssetString(listing, 'season_insurance') || '--' }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>体力/负重</label>
|
||||
<span>{{ readAssetString(listing, 'stamina_level') }}/{{ readAssetString(listing, 'load_level') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>AWM子弹</label>
|
||||
<span :class="{ highlight: getResourceQuantity(listing, 'awmAmmo') > 0 }">
|
||||
{{ getResourceQuantity(listing, 'awmAmmo') }}发
|
||||
</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>六级头甲</label>
|
||||
<span>
|
||||
{{ getResourceQuantity(listing, 'helmet6') }}头 / {{ getResourceQuantity(listing, 'armor6') }}甲
|
||||
</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>其他重器</label>
|
||||
<span>巴雷特 {{ getResourceQuantity(listing, 'barrett') }} / 喷子 {{ getResourceQuantity(listing, 'shotgun') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>绝密KD</label>
|
||||
<strong>{{ readAssetNumber(listing, 'secret_kd') || '--' }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>游戏段位</label>
|
||||
<span>{{ listing.rank_level || '未公开' }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>所属区服</label>
|
||||
<span>{{ getServerRegion(listing) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>上号方式</label>
|
||||
<span>{{ getLoginMethod(listing) }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>方便上号</label>
|
||||
<span class="time-text">{{ getOnlineTimeText(listing) || '全天候' }}</span>
|
||||
</div>
|
||||
<div class="stat-row skins-row">
|
||||
<label>持有皮肤</label>
|
||||
<span class="skins-text" :title="getSkinNames(listing).join(', ')">
|
||||
{{ getSkinNames(listing).slice(0, 2).join(', ') || '暂无皮肤' }}
|
||||
<em v-if="getSkinNames(listing).length > 2">...</em>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-price">
|
||||
<div class="price-item total">
|
||||
<small>总租金</small>
|
||||
<strong>¥{{ getListingDisplayPrice(listing) }}</strong>
|
||||
</div>
|
||||
<div class="price-item deposit">
|
||||
<small>押金</small>
|
||||
<span>¥{{ listing.deposit_amount }}</span>
|
||||
</div>
|
||||
<div class="price-action">
|
||||
<button class="rent-btn">立即租用</button>
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.listing-card-v2 {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr) 160px;
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.listing-card-v2:hover {
|
||||
border-color: #ff6a00;
|
||||
box-shadow: 0 8px 24px rgba(255, 106, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.empty-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.cover-badges {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.badge.sale {
|
||||
background: #ef4444;
|
||||
}
|
||||
.badge.gift {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.ratio-tag {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 4px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fbbf24;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title-row h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.daily-loss {
|
||||
padding: 4px 10px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stats-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-row label {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-row span,
|
||||
.stat-row strong {
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-row strong {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.stat-row .highlight {
|
||||
color: #10b981;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.price-item small {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-item.total strong {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.price-item.deposit span {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.rent-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rent-btn:hover {
|
||||
background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElInputNumber, ElPopover } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
import { rangeLabel, isRangeSelected } from '@/composables/home/useFilterOptions'
|
||||
|
||||
interface RangeOption {
|
||||
label: string
|
||||
min: number | undefined
|
||||
max: number | undefined
|
||||
}
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
modelMin: number | undefined
|
||||
modelMax: number | undefined
|
||||
options: RangeOption[]
|
||||
popoverProps: Record<string, any>
|
||||
wide?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelMin': [value: number | undefined]
|
||||
'update:modelMax': [value: number | undefined]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const minValue = computed({
|
||||
get: () => props.modelMin,
|
||||
set: (val) => emit('update:modelMin', val),
|
||||
})
|
||||
|
||||
const maxValue = computed({
|
||||
get: () => props.modelMax,
|
||||
set: (val) => emit('update:modelMax', val),
|
||||
})
|
||||
|
||||
const isActive = computed(() => {
|
||||
return props.modelMin !== undefined || props.modelMax !== undefined
|
||||
})
|
||||
|
||||
const chipLabel = computed(() => {
|
||||
return rangeLabel(props.modelMin, props.modelMax, props.label)
|
||||
})
|
||||
|
||||
function selectRange(min: number | undefined, max: number | undefined) {
|
||||
emit('update:modelMin', min)
|
||||
emit('update:modelMax', max)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function isSelected(item: RangeOption) {
|
||||
return isRangeSelected(props.modelMin, props.modelMax, item.min, item.max)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-popover v-bind="popoverProps" :width="350">
|
||||
<template #reference>
|
||||
<button
|
||||
class="filter-chip"
|
||||
:class="{ active: isActive, wide }"
|
||||
type="button"
|
||||
>
|
||||
<span>{{ chipLabel }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<div class="range-menu">
|
||||
<button
|
||||
v-for="item in options"
|
||||
:key="item.label"
|
||||
type="button"
|
||||
:class="{ active: isSelected(item) }"
|
||||
@click="selectRange(item.min, item.max)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
<div class="range-manual">
|
||||
<el-input-number
|
||||
v-model="minValue"
|
||||
:controls="false"
|
||||
:min="0"
|
||||
placeholder="最小值"
|
||||
/>
|
||||
<span>-</span>
|
||||
<el-input-number
|
||||
v-model="maxValue"
|
||||
:controls="false"
|
||||
:min="0"
|
||||
placeholder="最大值"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElPopover } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface SkinGroup {
|
||||
key: string
|
||||
title: string
|
||||
options: string[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
skinGroup: string
|
||||
skinName: string
|
||||
groups: SkinGroup[]
|
||||
popoverProps: Record<string, any>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:skinGroup': [value: string]
|
||||
'update:skinName': [value: string]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const isActive = computed(() => {
|
||||
return !!props.skinGroup || !!props.skinName
|
||||
})
|
||||
|
||||
const chipLabel = computed(() => {
|
||||
if (props.skinName) return props.skinName
|
||||
if (props.skinGroup) {
|
||||
return props.groups.find((g) => g.key === props.skinGroup)?.title || '皮肤'
|
||||
}
|
||||
return '皮肤'
|
||||
})
|
||||
|
||||
function selectSkin(group: string, name = '') {
|
||||
emit('update:skinGroup', group)
|
||||
emit('update:skinName', name)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function resetSkin() {
|
||||
emit('update:skinGroup', '')
|
||||
emit('update:skinName', '')
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-popover v-bind="popoverProps" :width="320">
|
||||
<template #reference>
|
||||
<button class="filter-chip" :class="{ active: isActive }" type="button">
|
||||
<span>{{ chipLabel }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<div class="skin-filter-menu">
|
||||
<button
|
||||
class="skin-reset"
|
||||
type="button"
|
||||
:class="{ active: !skinGroup && !skinName }"
|
||||
@click="resetSkin"
|
||||
>
|
||||
全部皮肤
|
||||
</button>
|
||||
<div v-for="group in groups" :key="group.key" class="skin-filter-group">
|
||||
<div class="skin-filter-title">
|
||||
<strong>{{ group.title }}</strong>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: skinGroup === group.key && !skinName }"
|
||||
@click="selectSkin(group.key)"
|
||||
>
|
||||
全部{{ group.title.replace('干员', '') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="skin-filter-options">
|
||||
<button
|
||||
v-for="skin in group.options"
|
||||
:key="skin"
|
||||
type="button"
|
||||
:class="{ active: skinGroup === group.key && skinName === skin }"
|
||||
@click="selectSkin(group.key, skin)"
|
||||
>
|
||||
{{ skin }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ElPopover } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
placeholder: string
|
||||
modelValue: string
|
||||
options: string[]
|
||||
popoverProps: Record<string, any>
|
||||
wide?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const isActive = computed(() => {
|
||||
return !!props.modelValue
|
||||
})
|
||||
|
||||
const displayLabel = computed(() => {
|
||||
return props.modelValue || props.placeholder
|
||||
})
|
||||
|
||||
function selectOption(value: string) {
|
||||
emit('update:modelValue', value)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-popover v-bind="popoverProps" :width="220">
|
||||
<template #reference>
|
||||
<button
|
||||
class="filter-chip"
|
||||
:class="{ active: isActive, wide }"
|
||||
type="button"
|
||||
>
|
||||
<span>{{ displayLabel }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</button>
|
||||
</template>
|
||||
<div class="filter-menu">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: !modelValue }"
|
||||
@click="selectOption('')"
|
||||
>
|
||||
{{ placeholder }}
|
||||
</button>
|
||||
<button
|
||||
v-for="item in options"
|
||||
:key="item"
|
||||
type="button"
|
||||
:class="{ active: modelValue === item }"
|
||||
@click="selectOption(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<style src="@/styles/home-filters.css"></style>
|
||||
@@ -0,0 +1,30 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { rangeLabel, isRangeSelected } from '@/composables/home/useFilterOptions'
|
||||
|
||||
describe('useFilterOptions', () => {
|
||||
describe('rangeLabel', () => {
|
||||
it('应该返回双向范围标签', () => {
|
||||
expect(rangeLabel(100, 500, '哈夫币')).toBe('100-500')
|
||||
})
|
||||
|
||||
it('应该返回最小值+标签', () => {
|
||||
expect(rangeLabel(500, undefined, '哈夫币')).toBe('500+')
|
||||
})
|
||||
|
||||
it('应该返回最大值标签', () => {
|
||||
expect(rangeLabel(undefined, 500, '哈夫币')).toBe('≤500')
|
||||
})
|
||||
|
||||
it('应该返回默认标签', () => {
|
||||
expect(rangeLabel(undefined, undefined, '哈夫币')).toBe('哈夫币')
|
||||
})
|
||||
})
|
||||
|
||||
describe('isRangeSelected', () => {
|
||||
it('应该正确判断范围是否选中', () => {
|
||||
expect(isRangeSelected(100, 500, 100, 500)).toBe(true)
|
||||
expect(isRangeSelected(100, 500, 200, 500)).toBe(false)
|
||||
expect(isRangeSelected(undefined, undefined, undefined, undefined)).toBe(true)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,57 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { useHomeFilters } from '@/composables/home/useHomeFilters'
|
||||
import { ref } from 'vue'
|
||||
import { emptyListingPublishOptions } from '@/api/listingOptions'
|
||||
|
||||
describe('useHomeFilters', () => {
|
||||
it('应该初始化空的筛选器', () => {
|
||||
const publishOptions = ref(emptyListingPublishOptions)
|
||||
const listings = ref([])
|
||||
|
||||
const { filters } = useHomeFilters(publishOptions, listings)
|
||||
|
||||
expect(filters.keyword).toBe('')
|
||||
expect(filters.minCoin).toBeUndefined()
|
||||
expect(filters.maxCoin).toBeUndefined()
|
||||
})
|
||||
|
||||
it('应该正确重置筛选器', () => {
|
||||
const publishOptions = ref(emptyListingPublishOptions)
|
||||
const listings = ref([])
|
||||
|
||||
const { filters, resetFilters } = useHomeFilters(publishOptions, listings)
|
||||
|
||||
filters.keyword = '测试'
|
||||
filters.minCoin = 100
|
||||
filters.region = '北京'
|
||||
|
||||
resetFilters()
|
||||
|
||||
expect(filters.keyword).toBe('')
|
||||
expect(filters.minCoin).toBeUndefined()
|
||||
expect(filters.region).toBe('')
|
||||
})
|
||||
|
||||
it('应该正确设置字符串筛选器', () => {
|
||||
const publishOptions = ref(emptyListingPublishOptions)
|
||||
const listings = ref([])
|
||||
|
||||
const { filters, setStringFilter, closeFilterPopover } = useHomeFilters(publishOptions, listings)
|
||||
|
||||
setStringFilter('region', '上海')
|
||||
|
||||
expect(filters.region).toBe('上海')
|
||||
})
|
||||
|
||||
it('应该正确设置范围筛选器', () => {
|
||||
const publishOptions = ref(emptyListingPublishOptions)
|
||||
const listings = ref([])
|
||||
|
||||
const { filters, setCoinRange } = useHomeFilters(publishOptions, listings)
|
||||
|
||||
setCoinRange(100, 500)
|
||||
|
||||
expect(filters.minCoin).toBe(100)
|
||||
expect(filters.maxCoin).toBe(500)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,51 @@
|
||||
export const coinRangeOptions = [
|
||||
{ label: '全部区间', min: undefined, max: undefined },
|
||||
{ label: '0-100', min: 0, max: 100 },
|
||||
{ label: '100-300', min: 100, max: 300 },
|
||||
{ label: '300-500', min: 300, max: 500 },
|
||||
{ label: '500+', min: 500, max: undefined },
|
||||
]
|
||||
|
||||
export const moneyRangeOptions = [
|
||||
{ label: '全部区间', min: undefined, max: undefined },
|
||||
{ label: '0-50', min: 0, max: 50 },
|
||||
{ label: '50-100', min: 50, max: 100 },
|
||||
{ label: '100-200', min: 100, max: 200 },
|
||||
{ label: '200+', min: 200, max: undefined },
|
||||
]
|
||||
|
||||
export const totalRangeOptions = [
|
||||
{ label: '全部区间', min: undefined, max: undefined },
|
||||
{ label: '0-500', min: 0, max: 500 },
|
||||
{ label: '500-1000', min: 500, max: 1000 },
|
||||
{ label: '1000-2000', min: 1000, max: 2000 },
|
||||
{ label: '2000-5000', min: 2000, max: 5000 },
|
||||
]
|
||||
|
||||
export const fireLevelRangeOptions = [
|
||||
{ label: '全部等级', min: undefined, max: undefined },
|
||||
{ label: '38-50', min: 38, max: 50 },
|
||||
{ label: '50-60', min: 50, max: 60 },
|
||||
{ label: '60-70', min: 60, max: 70 },
|
||||
{ label: '70+', min: 70, max: undefined },
|
||||
]
|
||||
|
||||
export function rangeLabel(
|
||||
min: number | undefined,
|
||||
max: number | undefined,
|
||||
fallback: string
|
||||
) {
|
||||
if (min !== undefined && max !== undefined) return `${min}-${max}`
|
||||
if (min !== undefined) return `${min}+`
|
||||
if (max !== undefined) return `≤${max}`
|
||||
return fallback
|
||||
}
|
||||
|
||||
export function isRangeSelected(
|
||||
currentMin: number | undefined,
|
||||
currentMax: number | undefined,
|
||||
min: number | undefined,
|
||||
max: number | undefined
|
||||
) {
|
||||
return currentMin === min && currentMax === max
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import { reactive, ref, computed, type Ref } from 'vue'
|
||||
import type { ListingPublishOptions } from '../api/listingOptions'
|
||||
import type { Listing } from '../api/listings'
|
||||
import { assetRegions } from '@/shared/utils/listingDisplay'
|
||||
|
||||
export type FilterPopoverKey =
|
||||
| 'insurance'
|
||||
| 'stamina'
|
||||
| 'load'
|
||||
| 'region'
|
||||
| 'coin'
|
||||
| 'price'
|
||||
| 'deposit'
|
||||
| 'total'
|
||||
| 'skin'
|
||||
| 'rank'
|
||||
| 'fireLevel'
|
||||
| 'loginMethod'
|
||||
|
||||
export type StringFilterKey =
|
||||
| 'insurance'
|
||||
| 'stamina'
|
||||
| 'load'
|
||||
| 'region'
|
||||
| 'rank'
|
||||
| 'loginMethod'
|
||||
|
||||
export interface HomeFilters {
|
||||
keyword: string
|
||||
server: string
|
||||
region: string
|
||||
loginMethod: string
|
||||
rank: string
|
||||
insurance: string
|
||||
stamina: string
|
||||
load: string
|
||||
skinGroup: string
|
||||
skinName: string
|
||||
minCoin: number | undefined
|
||||
maxCoin: number | undefined
|
||||
minPrice: number | undefined
|
||||
maxPrice: number | undefined
|
||||
minDeposit: number | undefined
|
||||
maxDeposit: number | undefined
|
||||
minTotal: number | undefined
|
||||
maxTotal: number | undefined
|
||||
minFireLevel: number | undefined
|
||||
maxFireLevel: number | undefined
|
||||
}
|
||||
|
||||
export function useHomeFilters(
|
||||
publishOptions: Ref<ListingPublishOptions>,
|
||||
listings: Ref<Listing[]>
|
||||
) {
|
||||
const filters = reactive<HomeFilters>({
|
||||
keyword: '',
|
||||
server: '',
|
||||
region: '',
|
||||
loginMethod: '',
|
||||
rank: '',
|
||||
insurance: '',
|
||||
stamina: '',
|
||||
load: '',
|
||||
skinGroup: '',
|
||||
skinName: '',
|
||||
minCoin: undefined,
|
||||
maxCoin: undefined,
|
||||
minPrice: undefined,
|
||||
maxPrice: undefined,
|
||||
minDeposit: undefined,
|
||||
maxDeposit: undefined,
|
||||
minTotal: undefined,
|
||||
maxTotal: undefined,
|
||||
minFireLevel: undefined,
|
||||
maxFireLevel: undefined,
|
||||
})
|
||||
|
||||
const activeFilterPopover = ref<FilterPopoverKey | ''>('')
|
||||
|
||||
const regionOptions = computed(() =>
|
||||
uniqueOptions([
|
||||
...publishOptions.value.region_options,
|
||||
...listings.value.flatMap((item) => assetRegions(item)),
|
||||
])
|
||||
)
|
||||
|
||||
const loginMethodOptions = computed(() =>
|
||||
uniqueOptions(
|
||||
publishOptions.value.login_method_options
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
)
|
||||
)
|
||||
|
||||
const skinFilterGroups = computed(() => {
|
||||
const preferred = ['operatorRed', 'operatorGold']
|
||||
return preferred
|
||||
.map((key) => publishOptions.value.skin_groups.find((group) => group.key === key))
|
||||
.filter((group): group is ListingPublishOptions['skin_groups'][number] => Boolean(group))
|
||||
})
|
||||
|
||||
const skinChipLabel = computed(() => {
|
||||
if (filters.skinName) return filters.skinName
|
||||
if (filters.skinGroup) {
|
||||
return skinFilterGroups.value.find((group) => group.key === filters.skinGroup)?.title || '皮肤'
|
||||
}
|
||||
return '皮肤'
|
||||
})
|
||||
|
||||
function uniqueOptions(values: string[]) {
|
||||
return [...new Set(values.map((item) => item.trim()).filter(Boolean))]
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.server = ''
|
||||
filters.region = ''
|
||||
filters.loginMethod = ''
|
||||
filters.rank = ''
|
||||
filters.insurance = ''
|
||||
filters.stamina = ''
|
||||
filters.load = ''
|
||||
filters.skinGroup = ''
|
||||
filters.skinName = ''
|
||||
filters.minCoin = undefined
|
||||
filters.maxCoin = undefined
|
||||
filters.minPrice = undefined
|
||||
filters.maxPrice = undefined
|
||||
filters.minDeposit = undefined
|
||||
filters.maxDeposit = undefined
|
||||
filters.minTotal = undefined
|
||||
filters.maxTotal = undefined
|
||||
filters.minFireLevel = undefined
|
||||
filters.maxFireLevel = undefined
|
||||
}
|
||||
|
||||
function setStringFilter(key: StringFilterKey, value: string) {
|
||||
filters[key] = value
|
||||
closeFilterPopover()
|
||||
}
|
||||
|
||||
function setCoinRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minCoin = min
|
||||
filters.maxCoin = max
|
||||
}
|
||||
|
||||
function setPriceRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minPrice = min
|
||||
filters.maxPrice = max
|
||||
}
|
||||
|
||||
function setDepositRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minDeposit = min
|
||||
filters.maxDeposit = max
|
||||
}
|
||||
|
||||
function setTotalRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minTotal = min
|
||||
filters.maxTotal = max
|
||||
}
|
||||
|
||||
function setFireLevelRange(min: number | undefined, max: number | undefined) {
|
||||
filters.minFireLevel = min
|
||||
filters.maxFireLevel = max
|
||||
}
|
||||
|
||||
function setSkinFilter(group: string, name = '') {
|
||||
filters.skinGroup = group
|
||||
filters.skinName = name
|
||||
}
|
||||
|
||||
function resetSkinFilter() {
|
||||
filters.skinGroup = ''
|
||||
filters.skinName = ''
|
||||
}
|
||||
|
||||
function setFilterPopover(key: FilterPopoverKey, visible: boolean) {
|
||||
if (visible) {
|
||||
activeFilterPopover.value = key
|
||||
return
|
||||
}
|
||||
if (activeFilterPopover.value === key) activeFilterPopover.value = ''
|
||||
}
|
||||
|
||||
function closeFilterPopover() {
|
||||
activeFilterPopover.value = ''
|
||||
}
|
||||
|
||||
return {
|
||||
filters,
|
||||
activeFilterPopover,
|
||||
regionOptions,
|
||||
loginMethodOptions,
|
||||
skinFilterGroups,
|
||||
skinChipLabel,
|
||||
resetFilters,
|
||||
setStringFilter,
|
||||
setCoinRange,
|
||||
setPriceRange,
|
||||
setDepositRange,
|
||||
setTotalRange,
|
||||
setFireLevelRange,
|
||||
setSkinFilter,
|
||||
resetSkinFilter,
|
||||
setFilterPopover,
|
||||
closeFilterPopover,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { ref, onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
|
||||
import { fetchListingsPage, type Listing, type PublicListingQuery } from '../api/listings'
|
||||
import type { HomeFilters } from './useHomeFilters'
|
||||
|
||||
const homePageSize = 12
|
||||
|
||||
export function useListingQuery(
|
||||
filters: HomeFilters,
|
||||
sortBy: Ref<string>,
|
||||
activeZone: Ref<string>
|
||||
) {
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const listings = ref<Listing[]>([])
|
||||
const totalListings = ref(0)
|
||||
const zoneCounts = ref<Record<string, number>>({})
|
||||
const currentPage = ref(1)
|
||||
const hasMoreListings = ref(true)
|
||||
let listingRequestSeq = 0
|
||||
|
||||
function buildListingQuery(page: number): PublicListingQuery {
|
||||
return {
|
||||
page,
|
||||
page_size: homePageSize,
|
||||
keyword: filters.keyword.trim(),
|
||||
sort: sortBy.value,
|
||||
zone: activeZone.value,
|
||||
server: filters.server,
|
||||
region: filters.region,
|
||||
login_method: filters.loginMethod,
|
||||
rank: filters.rank,
|
||||
insurance: filters.insurance,
|
||||
stamina: filters.stamina,
|
||||
load: filters.load,
|
||||
skin_group: filters.skinGroup,
|
||||
skin_name: filters.skinName,
|
||||
min_coin: filters.minCoin,
|
||||
max_coin: filters.maxCoin,
|
||||
min_price: filters.minPrice,
|
||||
max_price: filters.maxPrice,
|
||||
min_deposit: filters.minDeposit,
|
||||
max_deposit: filters.maxDeposit,
|
||||
min_total: filters.minTotal,
|
||||
max_total: filters.maxTotal,
|
||||
min_fire_level: filters.minFireLevel,
|
||||
max_fire_level: filters.maxFireLevel,
|
||||
}
|
||||
}
|
||||
|
||||
function listingQuerySignature() {
|
||||
return JSON.stringify(buildListingQuery(1))
|
||||
}
|
||||
|
||||
async function loadListingsPage(reset = false) {
|
||||
if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return
|
||||
const requestSeq = ++listingRequestSeq
|
||||
if (reset) {
|
||||
currentPage.value = 1
|
||||
hasMoreListings.value = true
|
||||
}
|
||||
loadingMore.value = true
|
||||
try {
|
||||
const page = await fetchListingsPage(buildListingQuery(currentPage.value))
|
||||
if (requestSeq !== listingRequestSeq) return
|
||||
listings.value = reset ? page.items : [...listings.value, ...page.items]
|
||||
totalListings.value = page.total
|
||||
zoneCounts.value = page.zone_counts
|
||||
hasMoreListings.value = listings.value.length < page.total
|
||||
currentPage.value = page.page + 1
|
||||
requestAnimationFrame(handleWindowScroll)
|
||||
} catch {
|
||||
if (reset) {
|
||||
listings.value = []
|
||||
totalListings.value = 0
|
||||
zoneCounts.value = {}
|
||||
hasMoreListings.value = false
|
||||
}
|
||||
} finally {
|
||||
if (requestSeq === listingRequestSeq) {
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleWindowScroll() {
|
||||
if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 480) return
|
||||
loadListingsPage(false)
|
||||
}
|
||||
|
||||
function zoneCount(key: string) {
|
||||
if (key === 'all') return zoneCounts.value.all ?? totalListings.value
|
||||
return zoneCounts.value[key] ?? 0
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleWindowScroll, { passive: true })
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', handleWindowScroll)
|
||||
})
|
||||
|
||||
// 使用防抖优化搜索
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
watch(() => listingQuerySignature(), () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
loadListingsPage(true)
|
||||
}, 300)
|
||||
})
|
||||
|
||||
return {
|
||||
loading,
|
||||
loadingMore,
|
||||
listings,
|
||||
totalListings,
|
||||
zoneCounts,
|
||||
hasMoreListings,
|
||||
loadListingsPage,
|
||||
zoneCount,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// Listings 模块统一导出
|
||||
export * from './api/listings'
|
||||
export * from './api/listingOptions'
|
||||
export * from './api/homeConfig'
|
||||
export * from './composables/useHomeFilters'
|
||||
export * from './composables/useFilterOptions'
|
||||
export * from './composables/useListingQuery'
|
||||
@@ -0,0 +1,262 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { ElEmpty } from 'element-plus'
|
||||
import {
|
||||
defaultHomeAnnouncements,
|
||||
defaultHomeBanners,
|
||||
fetchMobileHomeConfig,
|
||||
type HomeBannerSlide,
|
||||
} from '@/api/homeConfig'
|
||||
import {
|
||||
emptyListingPublishOptions,
|
||||
type ListingPublishOptions,
|
||||
} from '@/api/listingOptions'
|
||||
import { useHomeFilters } from '@/composables/home/useHomeFilters'
|
||||
import { useListingQuery } from '@/composables/home/useListingQuery'
|
||||
import HomeAnnouncement from './components/HomeAnnouncement.vue'
|
||||
import HomeBanner from './components/HomeBanner.vue'
|
||||
import HomeStats from './components/HomeStats.vue'
|
||||
import HomeFilters from './components/HomeFilters.vue'
|
||||
import HomeZonesAndSort from './components/HomeZonesAndSort.vue'
|
||||
import ListingCard from './components/ListingCard.vue'
|
||||
|
||||
const announcements = ref<string[]>(defaultHomeAnnouncements)
|
||||
const banners = ref<HomeBannerSlide[]>(defaultHomeBanners)
|
||||
const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions)
|
||||
const sortBy = ref('recommended')
|
||||
const activeZone = ref('all')
|
||||
|
||||
const {
|
||||
filters,
|
||||
activeFilterPopover,
|
||||
regionOptions,
|
||||
loginMethodOptions,
|
||||
skinFilterGroups,
|
||||
skinChipLabel,
|
||||
resetFilters,
|
||||
setFilterPopover,
|
||||
closeFilterPopover,
|
||||
} = useHomeFilters(publishOptions, computed(() => listings.value))
|
||||
|
||||
const {
|
||||
loading,
|
||||
loadingMore,
|
||||
listings,
|
||||
totalListings,
|
||||
zoneCounts,
|
||||
hasMoreListings,
|
||||
loadListingsPage,
|
||||
zoneCount,
|
||||
} = useListingQuery(filters, sortBy, activeZone)
|
||||
|
||||
const statCards = computed(() => [
|
||||
{ label: '可租账号', value: `${totalListings.value}`, hint: '当前筛选结果' },
|
||||
{
|
||||
label: '高哈夫币',
|
||||
value: `${zoneCount('highCoin')}`,
|
||||
hint: '100M 以上',
|
||||
},
|
||||
{
|
||||
label: '账密登录',
|
||||
value: `${zoneCount('password')}`,
|
||||
hint: '交接更快',
|
||||
},
|
||||
])
|
||||
|
||||
const zoneOptions = computed(() => [
|
||||
{
|
||||
key: 'all',
|
||||
label: '全部专区',
|
||||
hint: '当前可租账号',
|
||||
count: zoneCount('all'),
|
||||
},
|
||||
{
|
||||
key: 'sale',
|
||||
label: '特惠专区',
|
||||
hint: '价格更划算',
|
||||
count: zoneCount('sale'),
|
||||
},
|
||||
{
|
||||
key: 'gift',
|
||||
label: '赠送专区',
|
||||
hint: '含赠送物品',
|
||||
count: zoneCount('gift'),
|
||||
},
|
||||
{
|
||||
key: 'night',
|
||||
label: '夜间专区',
|
||||
hint: '夜间也好上号',
|
||||
count: zoneCount('night'),
|
||||
},
|
||||
{
|
||||
key: 'password',
|
||||
label: '账密专区',
|
||||
hint: '交接更快',
|
||||
count: zoneCount('password'),
|
||||
},
|
||||
{
|
||||
key: 'highCoin',
|
||||
label: '高币专区',
|
||||
hint: '100M 以上',
|
||||
count: zoneCount('highCoin'),
|
||||
},
|
||||
])
|
||||
|
||||
async function loadHome() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [, config] = await Promise.all([
|
||||
loadListingsPage(true),
|
||||
fetchMobileHomeConfig(),
|
||||
])
|
||||
announcements.value = config.announcements
|
||||
banners.value = config.banners
|
||||
publishOptions.value = config.publish_options
|
||||
} catch {
|
||||
announcements.value = defaultHomeAnnouncements
|
||||
banners.value = defaultHomeBanners
|
||||
publishOptions.value = emptyListingPublishOptions
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function updateFilters(partial: Partial<typeof filters>) {
|
||||
Object.assign(filters, partial)
|
||||
}
|
||||
|
||||
function handleResetFilters() {
|
||||
resetFilters()
|
||||
activeZone.value = 'all'
|
||||
sortBy.value = 'recommended'
|
||||
}
|
||||
|
||||
loadHome()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="pc-home-redesign">
|
||||
<HomeAnnouncement :announcements="announcements" />
|
||||
|
||||
<main class="home-content">
|
||||
<div class="hero-section">
|
||||
<HomeBanner :banners="banners" />
|
||||
<HomeStats :stats="statCards" />
|
||||
</div>
|
||||
|
||||
<HomeFilters
|
||||
:filters="filters"
|
||||
:total-listings="totalListings"
|
||||
:publish-options="publishOptions"
|
||||
:region-options="regionOptions"
|
||||
:login-method-options="loginMethodOptions"
|
||||
:skin-filter-groups="skinFilterGroups"
|
||||
:skin-chip-label="skinChipLabel"
|
||||
:active-filter-popover="activeFilterPopover"
|
||||
@update:filters="updateFilters"
|
||||
@reset="handleResetFilters"
|
||||
@set-filter-popover="setFilterPopover"
|
||||
@close-filter-popover="closeFilterPopover"
|
||||
/>
|
||||
|
||||
<div class="list-head">
|
||||
<div class="zone-head">
|
||||
<p class="eyebrow">Account Zone</p>
|
||||
<h2>账号专区</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<HomeZonesAndSort
|
||||
:zones="zoneOptions"
|
||||
:active-zone="activeZone"
|
||||
:sort-by="sortBy"
|
||||
@update:active-zone="activeZone = $event"
|
||||
@update:sort-by="sortBy = $event"
|
||||
/>
|
||||
|
||||
<el-empty
|
||||
v-if="!loading && listings.length === 0"
|
||||
description="没有符合条件的账号"
|
||||
/>
|
||||
<div v-else v-loading="loading" class="enhanced-desktop-list">
|
||||
<ListingCard
|
||||
v-for="item in listings"
|
||||
:key="item.id"
|
||||
:listing="item"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && listings.length" class="infinite-load-state">
|
||||
<span v-if="loadingMore">正在加载更多账号...</span>
|
||||
<span v-else-if="!hasMoreListings">已经到底了</span>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pc-home-redesign {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.infinite-load-state {
|
||||
padding: 6px 0 18px;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.zone-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.zone-head h2 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.enhanced-desktop-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,749 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import { fetchListing, type Listing } from "@/api/listings";
|
||||
import { createOrder } from "@/api/orders";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import {
|
||||
assetRegions,
|
||||
formatEstimatedRentalDuration,
|
||||
formatHafCoinM,
|
||||
formatRatio,
|
||||
getCoinWan,
|
||||
getDailyLoss,
|
||||
getListingConsumablePrice,
|
||||
getListingChips,
|
||||
getListingDisplayPrice,
|
||||
getListingRentPrice,
|
||||
getListingResources,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getOnlineTimeText,
|
||||
getLoginMethod,
|
||||
getServerRegion,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
} from "@/utils/listingDisplay";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const ordering = ref(false);
|
||||
const listing = ref<Listing | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
listing.value = await fetchListing(String(route.params.id));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const orderTotal = computed(() => {
|
||||
if (!listing.value) return "0";
|
||||
return `${Math.round(getListingDisplayPrice(listing.value))}`;
|
||||
});
|
||||
|
||||
const orderPriceBreakdown = computed(() => {
|
||||
if (!listing.value) {
|
||||
return {
|
||||
rent: 0,
|
||||
consumable: 0,
|
||||
total: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rent: getListingRentPrice(listing.value),
|
||||
consumable: getListingConsumablePrice(listing.value),
|
||||
total: Math.round(getListingDisplayPrice(listing.value)),
|
||||
};
|
||||
});
|
||||
|
||||
const coverURL = computed(() => {
|
||||
if (!listing.value) return "";
|
||||
return listing.value.cover_url || listing.value.screenshot_urls?.[0] || "";
|
||||
});
|
||||
|
||||
const detailMetrics = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const dailyLoss = getDailyLoss(listing.value);
|
||||
return [
|
||||
{ label: "纯币", value: formatHafCoinM(getCoinWan(listing.value)), tone: "coin" },
|
||||
{
|
||||
label: "日损耗",
|
||||
value: dailyLoss ? `${dailyLoss}/天` : "--",
|
||||
tone: "coin",
|
||||
},
|
||||
{ label: "价格", value: `¥${orderTotal.value}`, tone: "price" },
|
||||
{ label: "押金", value: `¥${listing.value.deposit_amount}`, tone: "" },
|
||||
];
|
||||
});
|
||||
|
||||
const detailScreenshots = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const labels = ["纯币截图", "游戏ID截图", "总资产截图", "腾讯安全中心截图", "皮肤截图"];
|
||||
return (listing.value.screenshot_urls || []).map((url, index) => ({
|
||||
label: labels[index] || `账号截图${index + 1}`,
|
||||
url,
|
||||
}));
|
||||
});
|
||||
|
||||
const detailSkinGroups = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const groups = listing.value.asset_summary?.skin_groups;
|
||||
if (typeof groups !== "object" || groups === null) return [];
|
||||
const titles: Record<string, string> = {
|
||||
melee: "近战皮肤",
|
||||
operator: "干员皮肤",
|
||||
operatorGold: "干员金皮",
|
||||
operatorRed: "干员红皮",
|
||||
weapon: "武器皮肤",
|
||||
};
|
||||
return Object.entries(groups as Record<string, unknown>)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
title: titles[key] || key,
|
||||
options: Array.isArray(value)
|
||||
? value.filter((skin): skin is string => typeof skin === "string")
|
||||
: [],
|
||||
}))
|
||||
.filter((group) => group.options.length);
|
||||
});
|
||||
|
||||
const accountRows = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const regions = assetRegions(listing.value);
|
||||
return [
|
||||
{ label: "所属区服", value: getServerRegion(listing.value) || "--" },
|
||||
{ label: "上号方式", value: getLoginMethod(listing.value) || "--" },
|
||||
{ label: "游戏段位", value: listing.value.rank_level || "--" },
|
||||
{ label: "M单价", value: formatRatio(listing.value) },
|
||||
{ label: "方便上号", value: getOnlineTimeText(listing.value) || "--" },
|
||||
{ label: "预计可租", value: formatEstimatedRentalDuration(listing.value) },
|
||||
{ label: "常用登录地", value: regions.length ? regions.join("、") : "--" },
|
||||
{ label: "封禁记录", value: readAssetString(listing.value, "ban_record") || "无" },
|
||||
];
|
||||
});
|
||||
|
||||
async function handleCreateOrder() {
|
||||
if (!listing.value) return;
|
||||
if (!session.token) {
|
||||
await router.push({ path: "/login", query: { redirect: route.fullPath } });
|
||||
return;
|
||||
}
|
||||
|
||||
ordering.value = true;
|
||||
try {
|
||||
const order = await createOrder(listing.value.id);
|
||||
ElMessage.success("订单已创建，请完成支付");
|
||||
await router.push(`/orders/${order.id}`);
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, "下单失败"));
|
||||
} finally {
|
||||
ordering.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === "object" && error && "response" in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } })
|
||||
.response;
|
||||
return response?.data?.message || fallback;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function listingPrice(item: Listing) {
|
||||
return `${Math.round(getListingDisplayPrice(item))}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="pc-detail page" v-loading="loading">
|
||||
<div class="anti-fraud-strip compact">
|
||||
<span
|
||||
>防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-if="listing" class="pc-detail-layout">
|
||||
<section class="pc-detail-main">
|
||||
<div class="detail-hero-card">
|
||||
<img
|
||||
v-if="coverURL"
|
||||
:src="coverURL"
|
||||
:alt="getListingTitle(listing)"
|
||||
/>
|
||||
<span v-else>HFB ACCOUNT</span>
|
||||
<div class="detail-hero-overlay">
|
||||
<div class="detail-tags">
|
||||
<span>{{ getServerRegion(listing) }}</span>
|
||||
<span v-if="getLoginMethod(listing)">{{ getLoginMethod(listing) }}</span>
|
||||
<span v-if="listing.rank_level">{{ listing.rank_level }}</span>
|
||||
</div>
|
||||
<h1>{{ getListingTitle(listing) }}</h1>
|
||||
<p>{{ getListingSubtitle(listing) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-body">
|
||||
<div class="detail-summary-row">
|
||||
<div v-for="metric in detailMetrics" :key="metric.label" class="detail-metric" :class="`is-${metric.tone}`">
|
||||
<span>{{ metric.label }}</span>
|
||||
<strong>{{ metric.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>账号资料</h2>
|
||||
<span>{{ listing.game_name || "三角洲行动" }}</span>
|
||||
</div>
|
||||
<div class="detail-chip-row">
|
||||
<span v-for="chip in getListingChips(listing)" :key="chip.label">
|
||||
{{ chip.label }}：{{ chip.value }}
|
||||
</span>
|
||||
</div>
|
||||
<dl class="detail-info-grid">
|
||||
<div v-for="row in accountRows" :key="row.label">
|
||||
<dt>{{ row.label }}</dt>
|
||||
<dd>{{ row.value }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section v-if="getListingResources(listing).length" class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>额外消耗品</h2>
|
||||
<span>{{ getListingResources(listing).length }} 项</span>
|
||||
</div>
|
||||
<div class="detail-resource-grid">
|
||||
<div v-for="resource in getListingResources(listing)" :key="resource.key" class="detail-resource-card">
|
||||
<span>{{ resource.label }}</span>
|
||||
<strong>{{ resource.quantity }}</strong>
|
||||
<em>
|
||||
<b>{{ resource.mode || "--" }}</b>
|
||||
<small v-if="resource.amount > 0">¥{{ resource.amount }}</small>
|
||||
<small v-else-if="resource.mode === '收费'">{{ resource.price || "¥0" }}</small>
|
||||
<small v-else>无额外收费</small>
|
||||
</em>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="detailSkinGroups.length" class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>皮肤清单</h2>
|
||||
<span>按类型展示</span>
|
||||
</div>
|
||||
<div class="skin-groups">
|
||||
<div v-for="group in detailSkinGroups" :key="group.key" class="skin-group">
|
||||
<h3>{{ group.title }}</h3>
|
||||
<div class="detail-chip-row">
|
||||
<span v-for="skin in group.options" :key="skin">{{ skin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>号主备注</h2>
|
||||
</div>
|
||||
<p class="detail-description">{{ listing.description || "号主暂未填写详细说明。" }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="detailScreenshots.length" class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>账号截图</h2>
|
||||
<span>{{ detailScreenshots.length }} 张</span>
|
||||
</div>
|
||||
<div class="detail-screenshot-grid">
|
||||
<figure v-for="shot in detailScreenshots" :key="shot.url" class="detail-screenshot">
|
||||
<img :src="shot.url" :alt="shot.label" loading="lazy" decoding="async" />
|
||||
<figcaption>{{ shot.label }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="order-panel pc-order-card">
|
||||
<h2>立即下单</h2>
|
||||
<p class="order-safe-text">平台托管订单与押金，按平台交接流程完成账号使用。</p>
|
||||
<el-form label-position="top">
|
||||
<div class="order-total-box">
|
||||
<div class="order-total-head">
|
||||
<span>租赁价格</span>
|
||||
<strong>¥{{ listingPrice(listing) }}</strong>
|
||||
</div>
|
||||
<div class="order-price-breakdown">
|
||||
<div>
|
||||
<span>基础租金</span>
|
||||
<strong>¥{{ orderPriceBreakdown.rent }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>额外物品</span>
|
||||
<strong>¥{{ orderPriceBreakdown.consumable }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<em>押金另付 ¥{{ listing.deposit_amount }}</em>
|
||||
</div>
|
||||
<dl class="order-check-list">
|
||||
<div>
|
||||
<dt>账号区服</dt>
|
||||
<dd>{{ getServerRegion(listing) || "--" }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>上号方式</dt>
|
||||
<dd>{{ getLoginMethod(listing) || "--" }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>预计可租</dt>
|
||||
<dd>{{ formatEstimatedRentalDuration(listing) }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<el-button
|
||||
type="warning"
|
||||
size="large"
|
||||
:loading="ordering"
|
||||
:disabled="listing.in_transaction"
|
||||
class="full-control"
|
||||
@click="handleCreateOrder"
|
||||
>
|
||||
{{ listing.in_transaction ? "交易中" : "立即下单" }}
|
||||
</el-button>
|
||||
</el-form>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pc-detail-layout {
|
||||
grid-template-columns: minmax(0, 1fr) 420px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.pc-detail-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-hero-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
background: #111827;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.detail-hero-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-hero-card > span {
|
||||
display: grid;
|
||||
height: 340px;
|
||||
place-items: center;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-hero-card::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.58)),
|
||||
linear-gradient(90deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.08) 62%);
|
||||
}
|
||||
|
||||
.detail-hero-overlay {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
z-index: 1;
|
||||
max-width: 860px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.detail-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.34);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-hero-overlay h1 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: 30px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.detail-hero-overlay p {
|
||||
margin: 8px 0 0;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-summary-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-metric,
|
||||
.detail-section {
|
||||
border: 1px solid #edf0f4;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.detail-metric {
|
||||
padding: 18px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.detail-metric span {
|
||||
display: block;
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-metric strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #17233d;
|
||||
font-size: 28px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.detail-metric.is-coin strong {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.detail-metric.is-price strong {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.detail-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-section-head h2 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.detail-section-head span {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-chip-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 106, 0, 0.28);
|
||||
border-radius: 8px;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
.detail-info-grid div {
|
||||
min-width: 0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.detail-info-grid dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-info-grid dd {
|
||||
margin: 8px 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: #17233d;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-resource-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px 12px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.detail-resource-card span {
|
||||
min-width: 0;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-card strong {
|
||||
color: #17233d;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.detail-resource-card em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-card em b {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.detail-resource-card em small {
|
||||
color: #17233d;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.skin-groups {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.skin-group h3 {
|
||||
margin: 0 0 10px;
|
||||
color: #475569;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
margin: 0;
|
||||
color: #52616f;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-screenshot {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-screenshot img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #edf0f4;
|
||||
}
|
||||
|
||||
.detail-screenshot figcaption {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pc-order-card {
|
||||
max-width: none;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.order-total-box {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.order-total-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(217, 119, 6, 0.14);
|
||||
}
|
||||
|
||||
.order-total-head span {
|
||||
color: #92400e;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-total-head strong {
|
||||
margin: 0;
|
||||
color: #ef4444;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.order-price-breakdown {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.order-price-breakdown div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.order-price-breakdown span {
|
||||
color: #8a5a12;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-price-breakdown strong {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.order-total-box > em {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(217, 119, 6, 0.14);
|
||||
color: #92400e;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-check-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
.order-check-list div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.order-check-list dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-check-list dd {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.pc-detail-layout,
|
||||
.detail-screenshot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-summary-row,
|
||||
.detail-info-grid,
|
||||
.detail-resource-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-hero-card,
|
||||
.detail-hero-card img,
|
||||
.detail-hero-card > span {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.detail-hero-overlay {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-hero-overlay h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.detail-summary-row,
|
||||
.detail-info-grid,
|
||||
.detail-resource-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,541 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { RouterLink, useRouter } from "vue-router";
|
||||
import { showToast } from "vant";
|
||||
import MobileBottomNav from "@/components/MobileBottomNav.vue";
|
||||
|
||||
import { ensureSupportChat } from "@/api/chats";
|
||||
import {
|
||||
emptyListingPublishOptions,
|
||||
type ListingPublishOptions,
|
||||
} from "@/api/listingOptions";
|
||||
import { fetchListingsPage, type Listing, type PublicListingQuery } from "@/api/listings";
|
||||
import {
|
||||
defaultHomeAnnouncements,
|
||||
defaultHomeBanners,
|
||||
fetchMobileHomeConfig,
|
||||
type HomeBannerSlide,
|
||||
} from "@/api/homeConfig";
|
||||
import MobileHomeFilterSheet, {
|
||||
type FilterSection,
|
||||
} from "./MobileHomeFilterSheet.vue";
|
||||
import {
|
||||
getListingChips,
|
||||
getListingDisplayPrice,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getServerRegion,
|
||||
hasAcceleratedSaleRatio,
|
||||
hasGiftResources,
|
||||
} from "@/utils/listingDisplay";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
|
||||
const router = useRouter();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const loadingMore = ref(false);
|
||||
const loadFailed = ref(false);
|
||||
const listings = ref<Listing[]>([]);
|
||||
const totalListings = ref(0);
|
||||
const currentPage = ref(1);
|
||||
const hasMoreListings = ref(true);
|
||||
const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
|
||||
const sortOpen = ref(false);
|
||||
const activeSort = ref("comprehensive");
|
||||
const filterOpen = ref(false);
|
||||
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 supportLoading = ref(false);
|
||||
const mobilePageSize = 10;
|
||||
let listingRequestSeq = 0;
|
||||
|
||||
const sortOptions = [
|
||||
{ key: "comprehensive", label: "综合排序" },
|
||||
{ key: "published", label: "发布时间" },
|
||||
{ key: "awmDesc", label: "AWM数量" },
|
||||
{ key: "priceAsc", label: "价格最低" },
|
||||
{ key: "priceDesc", label: "价格最高" },
|
||||
];
|
||||
|
||||
const rangePresets: Record<string, Array<{ label: string; min: string; max: string }>> = {
|
||||
coin: [
|
||||
{ label: "50-100", min: "50", max: "100" },
|
||||
{ label: "100-200", min: "100", max: "200" },
|
||||
{ label: "200-300", min: "200", max: "300" },
|
||||
{ label: "300-500", min: "300", max: "500" },
|
||||
{ label: "500以上", min: "500", max: "" },
|
||||
],
|
||||
resource_awmAmmo: [
|
||||
{ label: "0-20", min: "0", max: "20" },
|
||||
{ label: "20-50", min: "20", max: "50" },
|
||||
{ label: "50-100", min: "50", max: "100" },
|
||||
{ label: "100-200", min: "100", max: "200" },
|
||||
{ label: "200以上", min: "200", max: "" },
|
||||
],
|
||||
};
|
||||
|
||||
const activeSortLabel = computed(
|
||||
() =>
|
||||
sortOptions.find((option) => option.key === activeSort.value)?.label ||
|
||||
"综合排序"
|
||||
);
|
||||
|
||||
async function handleSupportClick() {
|
||||
if (!session.isLoggedIn) {
|
||||
router.push({ path: "/m/login", query: { redirect: router.currentRoute.value.fullPath } });
|
||||
return;
|
||||
}
|
||||
if (supportLoading.value) return;
|
||||
supportLoading.value = true;
|
||||
try {
|
||||
const chat = await ensureSupportChat();
|
||||
router.push(`/m/chats/${chat.id}`);
|
||||
} catch {
|
||||
showToast({ message: "联系客服失败，请稍后重试", icon: "cross" });
|
||||
} finally {
|
||||
supportLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const serverFilterOptions = computed(() =>
|
||||
uniqueOptions(
|
||||
publishOptions.value.server_options
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
)
|
||||
);
|
||||
|
||||
const loginMethodFilterOptions = computed(() =>
|
||||
uniqueOptions(
|
||||
publishOptions.value.login_method_options
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
)
|
||||
);
|
||||
|
||||
const filterSections = computed<FilterSection[]>(() => [
|
||||
{ key: "price", title: "价格区间", type: "range", unit: "元", minPlaceholder: "最低价", maxPlaceholder: "最高价" },
|
||||
{ key: "coin", title: "哈夫币数量", type: "range", unit: "M", minPlaceholder: "最低", maxPlaceholder: "最高" },
|
||||
{ key: "server", title: "区服", type: "chips", options: serverFilterOptions.value },
|
||||
{ key: "login", title: "上号方式", type: "chips", options: loginMethodFilterOptions.value },
|
||||
{ key: "insurance", title: "保险", type: "chips", options: publishOptions.value.insurance_options },
|
||||
{ key: "stamina", title: "体力", type: "chips", options: publishOptions.value.level_options },
|
||||
{ key: "load", title: "负重", type: "chips", options: publishOptions.value.level_options },
|
||||
...publishOptions.value.quantity_items.map((item) => ({
|
||||
key: `resource_${item.key}`,
|
||||
title: item.label,
|
||||
type: "range" as const,
|
||||
unit: parseQuantityUnit(item.price),
|
||||
minPlaceholder: "最低",
|
||||
maxPlaceholder: "最高",
|
||||
})),
|
||||
...publishOptions.value.skin_groups.map((group) => ({
|
||||
key: group.key,
|
||||
title: group.title,
|
||||
type: "chips" as const,
|
||||
options: group.options,
|
||||
})),
|
||||
{ key: "secretKd", title: "绝密KD", type: "range", minPlaceholder: "最低", maxPlaceholder: "最高" },
|
||||
{ key: "rank", title: "段位", type: "chips", options: publishOptions.value.rank_options },
|
||||
{ key: "deposit", title: "押金", type: "range", unit: "元", minPlaceholder: "最低", maxPlaceholder: "最高" },
|
||||
]);
|
||||
|
||||
const activeFilterCount = computed(() => {
|
||||
const chipCount = Object.values(selectedFilters.value).reduce(
|
||||
(sum, values) => sum + values.length,
|
||||
0
|
||||
);
|
||||
const rangeCount = Object.values(rangeFilters.value).filter(
|
||||
(range) => range.min || range.max
|
||||
).length;
|
||||
return chipCount + rangeCount;
|
||||
});
|
||||
|
||||
const displayListings = computed(() => {
|
||||
return listings.value;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadListings();
|
||||
loadHomeConfig();
|
||||
window.addEventListener("scroll", handleWindowScroll, { passive: true });
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("scroll", handleWindowScroll);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => listingQuerySignature(),
|
||||
() => {
|
||||
loadListings(true);
|
||||
}
|
||||
);
|
||||
|
||||
async function loadListings(reset = true) {
|
||||
if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return;
|
||||
const requestSeq = ++listingRequestSeq;
|
||||
if (reset) {
|
||||
loading.value = true;
|
||||
currentPage.value = 1;
|
||||
hasMoreListings.value = true;
|
||||
}
|
||||
loadingMore.value = true;
|
||||
loadFailed.value = false;
|
||||
try {
|
||||
const page = await fetchListingsPage(buildListingQuery(currentPage.value));
|
||||
if (requestSeq !== listingRequestSeq) return;
|
||||
listings.value = reset ? page.items : [...listings.value, ...page.items];
|
||||
totalListings.value = page.total;
|
||||
hasMoreListings.value = listings.value.length < page.total;
|
||||
currentPage.value = page.page + 1;
|
||||
requestAnimationFrame(handleWindowScroll);
|
||||
} catch {
|
||||
if (reset) {
|
||||
listings.value = [];
|
||||
totalListings.value = 0;
|
||||
hasMoreListings.value = false;
|
||||
loadFailed.value = true;
|
||||
}
|
||||
} finally {
|
||||
if (requestSeq === listingRequestSeq) {
|
||||
loading.value = false;
|
||||
loadingMore.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadHomeConfig() {
|
||||
try {
|
||||
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 = emptyListingPublishOptions;
|
||||
}
|
||||
}
|
||||
|
||||
async function onRefresh() {
|
||||
refreshing.value = true;
|
||||
try {
|
||||
const [, nextHomeConfig] = await Promise.all([
|
||||
loadListings(true),
|
||||
fetchMobileHomeConfig(),
|
||||
]);
|
||||
announcements.value = nextHomeConfig.announcements;
|
||||
bannerSlides.value = nextHomeConfig.banners;
|
||||
publishOptions.value = nextHomeConfig.publish_options;
|
||||
showToast({ message: "刷新成功", icon: "passed" });
|
||||
} catch {
|
||||
// 静默处理
|
||||
} finally {
|
||||
refreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openFilters() {
|
||||
sortOpen.value = false;
|
||||
filterOpen.value = true;
|
||||
}
|
||||
|
||||
function toggleSortPanel() {
|
||||
sortOpen.value = !sortOpen.value;
|
||||
}
|
||||
|
||||
function selectSort(sortKey: string) {
|
||||
activeSort.value = sortKey;
|
||||
sortOpen.value = false;
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
selectedFilters.value = {};
|
||||
rangeFilters.value = {};
|
||||
searchValue.value = "";
|
||||
}
|
||||
|
||||
function buildListingQuery(page: number): PublicListingQuery {
|
||||
const query: PublicListingQuery = {
|
||||
page,
|
||||
page_size: mobilePageSize,
|
||||
keyword: searchValue.value.trim(),
|
||||
sort: activeSort.value,
|
||||
};
|
||||
const skinGroups: string[] = [];
|
||||
const skinNames: string[] = [];
|
||||
for (const [key, values] of Object.entries(selectedFilters.value)) {
|
||||
const value = values.filter(Boolean).join(",");
|
||||
if (!value) continue;
|
||||
if (key === "server") query.server = value;
|
||||
else if (key === "login") query.login_method = value;
|
||||
else if (key === "insurance") query.insurance = value;
|
||||
else if (key === "stamina") query.stamina = value;
|
||||
else if (key === "load") query.load = value;
|
||||
else if (key === "rank") query.rank = value;
|
||||
else if (isSkinGroupKey(key)) {
|
||||
skinGroups.push(key);
|
||||
skinNames.push(...values);
|
||||
}
|
||||
}
|
||||
if (skinGroups.length) query.skin_group = skinGroups.join(",");
|
||||
if (skinNames.length) query.skin_name = skinNames.join(",");
|
||||
|
||||
for (const [key, range] of Object.entries(rangeFilters.value)) {
|
||||
if (!range.min && !range.max) continue;
|
||||
const min = parseOptionalNumber(range.min);
|
||||
const max = parseOptionalNumber(range.max);
|
||||
if (key === "price") {
|
||||
query.min_price = min;
|
||||
query.max_price = max;
|
||||
} else if (key === "coin") {
|
||||
query.min_coin = min;
|
||||
query.max_coin = max;
|
||||
} else if (key === "secretKd") {
|
||||
query.min_secret_kd = min;
|
||||
query.max_secret_kd = max;
|
||||
} else if (key === "deposit") {
|
||||
query.min_deposit = min;
|
||||
query.max_deposit = max;
|
||||
} else if (key.startsWith("resource_")) {
|
||||
const resourceKey = key.replace("resource_", "");
|
||||
query[`resource_${resourceKey}_min`] = min;
|
||||
query[`resource_${resourceKey}_max`] = max;
|
||||
}
|
||||
}
|
||||
return query;
|
||||
}
|
||||
|
||||
function listingQuerySignature() {
|
||||
return JSON.stringify(buildListingQuery(1));
|
||||
}
|
||||
|
||||
function parseOptionalNumber(value: string) {
|
||||
if (value === "") return undefined;
|
||||
const number = Number(value);
|
||||
return Number.isFinite(number) ? number : undefined;
|
||||
}
|
||||
|
||||
function handleWindowScroll() {
|
||||
if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 360) return;
|
||||
loadListings(false);
|
||||
}
|
||||
|
||||
function isSkinGroupKey(key: string) {
|
||||
return publishOptions.value.skin_groups.some((group) => group.key === key);
|
||||
}
|
||||
|
||||
function parseQuantityUnit(price: string) {
|
||||
const unit = price.split("/")[1]?.trim();
|
||||
return unit || undefined;
|
||||
}
|
||||
|
||||
function uniqueOptions(values: string[]) {
|
||||
return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="mobile-shell">
|
||||
<!-- ========== Hero 区域：顶部搜索与公告 ========== -->
|
||||
<section class="mobile-hero">
|
||||
<div class="mobile-topbar">
|
||||
<div class="mobile-brand">
|
||||
<span class="mobile-logo">锤</span>
|
||||
<div>
|
||||
<strong>大锤商行</strong>
|
||||
<small>哈夫币租号</small>
|
||||
</div>
|
||||
</div>
|
||||
<van-search
|
||||
v-model="searchValue"
|
||||
shape="round"
|
||||
placeholder="搜区服 / 段位"
|
||||
class="home-search"
|
||||
/>
|
||||
<button class="mobile-service" type="button" :disabled="supportLoading" @click="handleSupportClick">
|
||||
{{ supportLoading ? "接入中" : "客服" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 防骗提示卡片（不用 van-notice-bar） -->
|
||||
<div class="fraud-tip">
|
||||
<van-icon name="warning-o" :size="16" color="#b8860b" />
|
||||
<span class="fraud-dot"></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>
|
||||
|
||||
<!-- ========== Content 区域 ========== -->
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<section class="mobile-content">
|
||||
<!-- Banner 轮播 -->
|
||||
<van-swipe class="banner-swipe" :autoplay="3600" lazy-render>
|
||||
<van-swipe-item
|
||||
v-for="slide in bannerSlides"
|
||||
:key="slide.title || slide.image_url"
|
||||
>
|
||||
<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 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 v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
<div class="list-toolbar">
|
||||
<button type="button" class="sort-entry" @click="toggleSortPanel">
|
||||
<span>{{ activeSortLabel }}</span>
|
||||
<van-icon :name="sortOpen ? 'arrow-up' : 'arrow-down'" :size="14" />
|
||||
</button>
|
||||
<button type="button" class="filter-entry" @click="openFilters">
|
||||
<van-icon name="filter-o" :size="16" />
|
||||
<span>筛选</span>
|
||||
<em v-if="activeFilterCount">{{ activeFilterCount }}</em>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="sortOpen" class="sort-panel">
|
||||
<button
|
||||
v-for="option in sortOptions"
|
||||
:key="option.key"
|
||||
type="button"
|
||||
:class="{ active: activeSort === option.key }"
|
||||
@click="selectSort(option.key)"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
<van-icon
|
||||
v-if="activeSort === option.key"
|
||||
name="success"
|
||||
:size="18"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="result-count">
|
||||
<strong>{{ totalListings }}</strong>
|
||||
<span>个可租账号</span>
|
||||
</div>
|
||||
|
||||
<!-- 加载/错误状态 -->
|
||||
<van-loading v-if="loading" class="state-loading" size="24px" vertical>
|
||||
正在加载优质账号...
|
||||
</van-loading>
|
||||
<van-notice-bar
|
||||
v-else-if="loadFailed"
|
||||
left-icon="info-o"
|
||||
color="#6b7a90"
|
||||
background="transparent"
|
||||
text="接口暂不可用，请稍后刷新。"
|
||||
/>
|
||||
<van-empty
|
||||
v-else-if="displayListings.length === 0"
|
||||
image="search"
|
||||
description="没有符合条件的账号"
|
||||
>
|
||||
<van-button size="small" type="primary" @click="clearFilters">
|
||||
重置条件
|
||||
</van-button>
|
||||
</van-empty>
|
||||
|
||||
<!-- 列表卡片：全宽上下布局 -->
|
||||
<div class="mobile-list">
|
||||
<RouterLink
|
||||
v-for="item in displayListings"
|
||||
:key="item.id"
|
||||
class="mobile-card"
|
||||
:to="`/m/listings/${item.id}`"
|
||||
>
|
||||
<div class="card-cover">
|
||||
<img
|
||||
v-if="item.cover_url"
|
||||
:src="item.cover_url"
|
||||
:alt="getListingTitle(item)"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<span v-else>图</span>
|
||||
<div
|
||||
v-if="hasGiftResources(item) || hasAcceleratedSaleRatio(item)"
|
||||
class="card-cover-labels"
|
||||
>
|
||||
<em v-if="hasGiftResources(item)">有赠送</em>
|
||||
<em v-if="hasAcceleratedSaleRatio(item)">特惠</em>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-main">
|
||||
<div class="card-title-row">
|
||||
<h2>{{ getListingTitle(item) }}</h2>
|
||||
</div>
|
||||
<p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
|
||||
<div class="card-badges-row">
|
||||
<span class="trust-badge">押金秒退</span>
|
||||
<span class="server-badge">{{ getServerRegion(item) }}</span>
|
||||
<span v-if="getLoginMethod(item)" class="server-badge">
|
||||
{{ getLoginMethod(item) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="price-col">
|
||||
<strong>¥{{ getListingDisplayPrice(item) }}</strong>
|
||||
<span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-chip-row">
|
||||
<span
|
||||
v-for="chip in getListingChips(item)"
|
||||
:key="`${item.id}-${chip.label}`"
|
||||
>
|
||||
{{ chip.label }}:{{ chip.value }}
|
||||
</span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div v-if="!loading && displayListings.length" class="mobile-load-state">
|
||||
<span v-if="loadingMore">正在加载更多账号...</span>
|
||||
<span v-else-if="!hasMoreListings">已经到底了</span>
|
||||
</div>
|
||||
</section>
|
||||
</van-pull-refresh>
|
||||
|
||||
<MobileHomeFilterSheet
|
||||
v-model:show="filterOpen"
|
||||
v-model:selected-filters="selectedFilters"
|
||||
v-model:range-filters="rangeFilters"
|
||||
:sections="filterSections"
|
||||
:range-presets="rangePresets"
|
||||
/>
|
||||
|
||||
<MobileBottomNav />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped src="./MobileHomeView.css"></style>
|
||||
@@ -0,0 +1,733 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { showToast, showDialog } from "vant";
|
||||
|
||||
import { fetchListing, type Listing } from "@/api/listings";
|
||||
import { createOrder } from "@/api/orders";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import {
|
||||
assetRegions,
|
||||
formatHafCoinM,
|
||||
formatRatio,
|
||||
getCoinWan,
|
||||
getDailyLoss,
|
||||
getListingConsumablePrice,
|
||||
getListingChips,
|
||||
getListingDisplayPrice,
|
||||
getListingRentPrice,
|
||||
getListingResources,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getServerRegion,
|
||||
readAssetString,
|
||||
} from "@/utils/listingDisplay";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const ordering = ref(false);
|
||||
const listing = ref<Listing | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
listing.value = await fetchListing(String(route.params.id));
|
||||
} catch {
|
||||
showToast({ message: "加载失败", icon: "warning-o" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const orderTotal = computed(() => {
|
||||
if (!listing.value) return "0";
|
||||
return `${Math.round(getListingDisplayPrice(listing.value))}`;
|
||||
});
|
||||
|
||||
const orderPriceBreakdown = computed(() => {
|
||||
if (!listing.value) {
|
||||
return {
|
||||
rent: 0,
|
||||
consumable: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rent: getListingRentPrice(listing.value),
|
||||
consumable: getListingConsumablePrice(listing.value),
|
||||
};
|
||||
});
|
||||
|
||||
const detailMetrics = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const dailyLoss = getDailyLoss(listing.value);
|
||||
return [
|
||||
{ label: "纯币", value: formatHafCoinM(getCoinWan(listing.value)), tone: "coin" },
|
||||
{
|
||||
label: "日损耗",
|
||||
value: dailyLoss ? `${dailyLoss}/天` : "--",
|
||||
tone: "coin",
|
||||
},
|
||||
{ label: "价格", value: `¥${getListingDisplayPrice(listing.value)}`, tone: "price" },
|
||||
{ label: "押金", value: `¥${listing.value.deposit_amount}`, tone: "" },
|
||||
];
|
||||
});
|
||||
|
||||
const detailScreenshots = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const labels = ["纯币截图", "游戏ID截图", "总资产截图", "腾讯安全中心截图", "皮肤截图"];
|
||||
return (listing.value.screenshot_urls || []).map((url, index) => ({
|
||||
label: labels[index] || `账号截图${index + 1}`,
|
||||
url,
|
||||
}));
|
||||
});
|
||||
|
||||
const detailSkinGroups = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const groups = listing.value.asset_summary?.skin_groups;
|
||||
if (typeof groups !== "object" || groups === null) return [];
|
||||
const titles: Record<string, string> = {
|
||||
melee: "近战皮肤",
|
||||
operator: "干员皮肤",
|
||||
operatorGold: "干员金皮",
|
||||
operatorRed: "干员红皮",
|
||||
weapon: "武器皮肤",
|
||||
};
|
||||
return Object.entries(groups as Record<string, unknown>)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
title: titles[key] || key,
|
||||
options: Array.isArray(value)
|
||||
? value.filter((skin): skin is string => typeof skin === "string")
|
||||
: [],
|
||||
}))
|
||||
.filter((group) => group.options.length);
|
||||
});
|
||||
|
||||
/* 下单 */
|
||||
async function handleCreateOrder() {
|
||||
if (!listing.value) return;
|
||||
|
||||
if (!session.token) {
|
||||
showDialog({
|
||||
title: "请先登录",
|
||||
message: "下单需要登录账号，是否前往登录？",
|
||||
confirmButtonText: "去登录",
|
||||
cancelButtonText: "取消",
|
||||
showCancelButton: true,
|
||||
}).then(() => {
|
||||
router.push({ path: "/m/login", query: { redirect: route.fullPath } });
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (session.realnameStatus !== "verified") {
|
||||
try {
|
||||
await session.loadMe();
|
||||
} catch {
|
||||
// 401 会由全局拦截器处理。
|
||||
}
|
||||
}
|
||||
|
||||
if (session.realnameStatus !== "verified") {
|
||||
showDialog({
|
||||
title: "请先实名认证",
|
||||
message: "租号下单前需要完成实名认证。",
|
||||
confirmButtonText: "去认证",
|
||||
cancelButtonText: "取消",
|
||||
showCancelButton: true,
|
||||
}).then(() => {
|
||||
router.push({ path: "/m/realname", query: { redirect: route.fullPath } });
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
ordering.value = true;
|
||||
try {
|
||||
await createOrder(listing.value.id);
|
||||
showToast({ message: "订单已创建，请完成支付", icon: "passed" });
|
||||
await router.push(`/m/orders`);
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, "下单失败"), icon: "cross" });
|
||||
} finally {
|
||||
ordering.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === "object" && error && "response" in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } })
|
||||
.response;
|
||||
return response?.data?.message || fallback;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
/** 判断当前底部导航是否激活 */
|
||||
function isNavActive(path: string) {
|
||||
if (path === "/m") return route.path === "/m";
|
||||
return route.path.startsWith(path);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="mobile-detail">
|
||||
<!-- 顶部导航 -->
|
||||
<header class="page-header">
|
||||
<button class="back-btn" @click="router.back()">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<h1>账号详情</h1>
|
||||
<span class="header-spacer"></span>
|
||||
</header>
|
||||
|
||||
<van-loading v-if="loading" class="center-loading" size="24px" vertical>
|
||||
加载中...
|
||||
</van-loading>
|
||||
|
||||
<template v-else-if="listing">
|
||||
<!-- 防骗提示 -->
|
||||
<div class="fraud-tip">
|
||||
<van-icon name="shield-o" :size="14" color="#ff9800" />
|
||||
<span
|
||||
>防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 封面图 -->
|
||||
<div class="cover-area">
|
||||
<img
|
||||
v-if="detailScreenshots[0]?.url"
|
||||
:src="detailScreenshots[0].url"
|
||||
:alt="getListingTitle(listing)"
|
||||
class="cover-img"
|
||||
decoding="async"
|
||||
/>
|
||||
<div v-else class="cover-placeholder">
|
||||
<van-icon name="photo-o" :size="40" color="#ccc" />
|
||||
<span>暂无截图</span>
|
||||
</div>
|
||||
<!-- 截图指示器 -->
|
||||
<div
|
||||
v-if="detailScreenshots.length > 1"
|
||||
class="cover-count"
|
||||
>
|
||||
{{ detailScreenshots.length }}张
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标题信息 -->
|
||||
<div class="info-card">
|
||||
<div class="info-tag-row">
|
||||
<van-tag plain type="primary" size="medium">{{
|
||||
getServerRegion(listing)
|
||||
}}</van-tag>
|
||||
<van-tag v-if="getLoginMethod(listing)" plain type="primary" size="medium">
|
||||
{{ getLoginMethod(listing) }}
|
||||
</van-tag>
|
||||
<van-tag v-if="listing.rank_level" plain size="medium">{{
|
||||
listing.rank_level
|
||||
}}</van-tag>
|
||||
</div>
|
||||
<h2 class="detail-title">{{ getListingTitle(listing) }}</h2>
|
||||
<p class="detail-desc">{{ getListingSubtitle(listing) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 资产指标 -->
|
||||
<div class="metric-row">
|
||||
<div v-for="metric in detailMetrics" :key="metric.label" class="metric-item">
|
||||
<span class="metric-label">{{ metric.label }}</span>
|
||||
<strong class="metric-value" :class="metric.tone">{{ metric.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息 -->
|
||||
<div class="info-card">
|
||||
<h3 class="card-subtitle">账号资料</h3>
|
||||
<div class="detail-chip-row">
|
||||
<span
|
||||
v-for="chip in getListingChips(listing)"
|
||||
:key="chip.label"
|
||||
>
|
||||
{{ chip.label }}:{{ chip.value }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="info-label">M单价</span>
|
||||
<span class="info-text">{{ formatRatio(listing) }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="info-label">常用登录地</span>
|
||||
<span class="info-text">{{ assetRegions(listing).join("、") || "--" }}</span>
|
||||
</div>
|
||||
<div v-if="readAssetString(listing, 'ban_record')" class="info-line">
|
||||
<span class="info-label">封禁记录</span>
|
||||
<span class="info-text">{{ readAssetString(listing, "ban_record") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="getListingResources(listing).length" class="info-card">
|
||||
<h3 class="card-subtitle">额外消耗品</h3>
|
||||
<div class="resource-grid">
|
||||
<div
|
||||
v-for="resource in getListingResources(listing)"
|
||||
:key="resource.key"
|
||||
class="resource-pill"
|
||||
>
|
||||
<span>{{ resource.label }}</span>
|
||||
<strong>{{ resource.quantity }}</strong>
|
||||
<em>
|
||||
<b>{{ resource.mode || "--" }}</b>
|
||||
<small v-if="resource.amount > 0">¥{{ resource.amount }}</small>
|
||||
<small v-else-if="resource.mode === '收费'">{{ resource.price || "¥0" }}</small>
|
||||
<small v-else>无额外收费</small>
|
||||
</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailSkinGroups.length" class="info-card">
|
||||
<h3 class="card-subtitle">皮肤</h3>
|
||||
<div v-for="group in detailSkinGroups" :key="group.key" class="skin-detail-group">
|
||||
<p>{{ group.title }}</p>
|
||||
<div class="detail-chip-row">
|
||||
<span v-for="skin in group.options" :key="skin">{{ skin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="listing.description" class="info-card">
|
||||
<h3 class="card-subtitle">备注</h3>
|
||||
<p class="detail-desc">{{ listing.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 截图列表 -->
|
||||
<div v-if="detailScreenshots.length" class="info-card">
|
||||
<h3 class="card-subtitle">账号截图</h3>
|
||||
<div class="screenshot-grid">
|
||||
<figure v-for="shot in detailScreenshots" :key="shot.url" class="screenshot-item">
|
||||
<img :src="shot.url" class="screenshot-thumb" loading="lazy" decoding="async" />
|
||||
<figcaption>{{ shot.label }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 留白给底部下单栏 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
<!-- 底部下单栏（固定） -->
|
||||
<div class="order-bar">
|
||||
<div class="order-bar-left">
|
||||
<div class="order-price">
|
||||
<span class="price-label">价格</span>
|
||||
<span class="price-amount">¥{{ orderTotal }}</span>
|
||||
</div>
|
||||
<div class="order-price-detail">
|
||||
<span>租金 ¥{{ orderPriceBreakdown.rent }}</span>
|
||||
<span>额外 ¥{{ orderPriceBreakdown.consumable }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-button
|
||||
type="primary"
|
||||
round
|
||||
class="order-btn"
|
||||
:loading="ordering"
|
||||
:disabled="listing.in_transaction"
|
||||
loading-text="下单中..."
|
||||
@click="handleCreateOrder"
|
||||
>
|
||||
{{ listing.in_transaction ? "交易中" : "立即下单" }}
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<van-icon name="info-o" :size="48" color="#ccc" />
|
||||
<p>未找到该账号信息</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-detail {
|
||||
min-height: 100dvh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ========== 顶部导航 ========== */
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.center-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
/* ========== 防骗提示 ========== */
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: #fff8e1;
|
||||
font-size: 11px;
|
||||
color: #e65100;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ========== 封面图 ========== */
|
||||
.cover-area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #e8e8e8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cover-count {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ========== 信息卡片 ========== */
|
||||
.info-card {
|
||||
margin: 10px 12px;
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.info-tag-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ========== 资产指标 ========== */
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px 6px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
color: #1a1a1a;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value.coin {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.metric-value.price {
|
||||
color: #ff5f00;
|
||||
}
|
||||
|
||||
/* ========== 账号资料 ========== */
|
||||
.info-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-line:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ========== 截图列表 ========== */
|
||||
.card-subtitle {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.detail-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-chip-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
border: 1px solid #ff8a1f;
|
||||
border-radius: 5px;
|
||||
color: #ff7900;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.resource-pill {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 4px 8px;
|
||||
border-radius: 8px;
|
||||
background: #f7f9fc;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.resource-pill span {
|
||||
min-width: 0;
|
||||
color: #5f6b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.resource-pill strong {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.resource-pill em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.resource-pill em b {
|
||||
color: #ff7900;
|
||||
}
|
||||
|
||||
.resource-pill em small {
|
||||
min-width: 0;
|
||||
color: #17233d;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.skin-detail-group + .skin-detail-group {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.skin-detail-group p {
|
||||
margin: 0 0 8px;
|
||||
color: #5f6b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.screenshot-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.screenshot-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.screenshot-item figcaption {
|
||||
margin-top: 4px;
|
||||
color: #6b7280;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========== 底部留白 ========== */
|
||||
.bottom-spacer {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* ========== 底部下单栏 ========== */
|
||||
.order-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.order-bar-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.order-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #ff5f00;
|
||||
}
|
||||
|
||||
.order-price-detail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
color: #8a5a12;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: #ff6a00 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 80px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user