优化首页展示列表
This commit is contained in:
yml
@@ -7,7 +7,7 @@ export type QuantityKey =
|
||||
| 'helmet6'
|
||||
| 'armor6'
|
||||
| 'kit5'
|
||||
| 'armor6Ammo'
|
||||
| 'level6Ammo'
|
||||
| 'gridCard9'
|
||||
|
||||
export type ScreenshotKey = 'coin' | 'gameId' | 'totalAsset' | 'tencentSecurity' | 'skin'
|
||||
@@ -100,7 +100,7 @@ export const defaultListingPublishOptions: ListingPublishOptions = {
|
||||
{ key: 'helmet6', label: '6头数量', price: '2元/个' },
|
||||
{ key: 'armor6', label: '6甲数量', price: '3元/个' },
|
||||
{ key: 'kit5', label: '5级全装套数量', price: '5元/个' },
|
||||
{ key: 'armor6Ammo', label: '6甲子弹', price: '0.26元/发' },
|
||||
{ key: 'level6Ammo', label: '6级子弹', price: '0.26元/发' },
|
||||
{ key: 'gridCard9', label: '9格体验卡', price: '5元/张', placeholder: '如果是赛季9格，此处填0即可' },
|
||||
],
|
||||
screenshot_slots: [
|
||||
@@ -127,7 +127,16 @@ export function mergeListingPublishOptions(options?: Partial<ListingPublishOptio
|
||||
login_method_options: options?.login_method_options?.length ? options.login_method_options : defaultListingPublishOptions.login_method_options,
|
||||
region_options: options?.region_options?.length ? options.region_options : defaultListingPublishOptions.region_options,
|
||||
skin_groups: options?.skin_groups?.length ? options.skin_groups : defaultListingPublishOptions.skin_groups,
|
||||
quantity_items: options?.quantity_items?.length ? options.quantity_items as PublishQuantityItem[] : defaultListingPublishOptions.quantity_items,
|
||||
quantity_items: options?.quantity_items?.length
|
||||
? normalizeQuantityItems(options.quantity_items as PublishQuantityItem[])
|
||||
: defaultListingPublishOptions.quantity_items,
|
||||
screenshot_slots: options?.screenshot_slots?.length ? options.screenshot_slots as PublishScreenshotSlot[] : defaultListingPublishOptions.screenshot_slots,
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeQuantityItems(items: PublishQuantityItem[]): PublishQuantityItem[] {
|
||||
return items.map((item) => ({
|
||||
...item,
|
||||
key: String(item.key) === 'armor6Ammo' ? 'level6Ammo' : item.key,
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
.mobile-shell {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
color: #17233d;
|
||||
padding-bottom: 58px;
|
||||
}
|
||||
|
||||
/* ========== Hero 区域：纯色蓝色头部 ========== */
|
||||
.mobile-hero {
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 24px 24px;
|
||||
background: #1479ff;
|
||||
padding: 14px 14px 18px;
|
||||
}
|
||||
|
||||
.mobile-topbar,
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
justify-content: space-between;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #1479ff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.mobile-brand strong,
|
||||
.mobile-brand small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-brand small {
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #ffffff;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
/* ========== van-search 覆盖样式 ========== */
|
||||
.home-search {
|
||||
margin-top: 12px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content) {
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content .van-field__control) {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ========== 防骗提示卡片 ========== */
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #5c3b00;
|
||||
}
|
||||
|
||||
.fraud-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #f0a500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ========== Content 区 ========== */
|
||||
.mobile-content {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
/* ========== Banner 轮播 ========== */
|
||||
.banner-swipe {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicators) {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(23, 35, 61, 0.24);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator--active) {
|
||||
width: 16px;
|
||||
border-radius: 999px;
|
||||
background: #1479ff;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-height: 132px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 18px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.mobile-banner.tone-green {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
||||
}
|
||||
|
||||
.mobile-banner.tone-orange {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-banner p {
|
||||
color: #1479ff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 6px;
|
||||
font-size: 22px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.mobile-banner span {
|
||||
display: inline-flex;
|
||||
margin-top: 12px;
|
||||
border-radius: 999px;
|
||||
background: #ffefb5;
|
||||
color: #7a4b00;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
align-self: flex-start;
|
||||
border-radius: 12px;
|
||||
background: #ff6a00;
|
||||
color: #ffffff;
|
||||
padding: 8px 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
.tone-green .banner-badge {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.tone-orange .banner-badge {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
/* ========== 列表工具栏 ========== */
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
padding: 14px 16px;
|
||||
color: #536173;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sort-entry,
|
||||
.filter-entry {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sort-entry {
|
||||
gap: 4px;
|
||||
color: #17233d;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.filter-entry {
|
||||
position: relative;
|
||||
border-radius: 999px;
|
||||
color: #17233d;
|
||||
padding: 0;
|
||||
gap: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.filter-entry em {
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #1477ff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sort-panel {
|
||||
margin-top: 6px;
|
||||
border-radius: 0 0 14px 14px;
|
||||
background: #fff;
|
||||
padding: 4px 16px 14px;
|
||||
}
|
||||
|
||||
.sort-panel button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #2d3748;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sort-panel button.active {
|
||||
color: #ff7a00;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
margin-top: 8px;
|
||||
color: #536173;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.result-count strong {
|
||||
margin-right: 3px;
|
||||
color: #1477ff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* ========== 加载状态 ========== */
|
||||
.state-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ========== 卡片列表 ========== */
|
||||
.mobile-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
display: grid;
|
||||
grid-template-columns: 132px minmax(0, 1fr);
|
||||
grid-template-rows: 132px 62px;
|
||||
gap: 10px 12px;
|
||||
min-height: 230px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
align-self: center;
|
||||
border-radius: 14px;
|
||||
background: #d8d8d8;
|
||||
color: #9aa4b2;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.card-cover em {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
border-radius: 999px;
|
||||
background: #ffd21e;
|
||||
color: #1f2937;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-main {
|
||||
display: flex;
|
||||
min-height: 132px;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card-title-row h2 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
color: #182238;
|
||||
display: -webkit-box;
|
||||
font-size: 15.5px;
|
||||
font-weight: 800;
|
||||
line-height: 1.42;
|
||||
min-height: 44px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin: 5px 0 0;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.card-badges-row,
|
||||
.card-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.card-badges-row {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.trust-badge,
|
||||
.server-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 25px;
|
||||
border-radius: 6px;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.trust-badge {
|
||||
background: #fff4dc;
|
||||
color: #ff7900;
|
||||
}
|
||||
|
||||
.server-badge {
|
||||
background: #eaf4ff;
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.price-col {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-footer strong {
|
||||
color: #ff1f35;
|
||||
font-size: 21px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.card-footer .rent-sub {
|
||||
color: #8a96a8;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-chip-row {
|
||||
grid-column: 1 / -1;
|
||||
align-content: flex-start;
|
||||
margin-top: 0;
|
||||
min-height: 62px;
|
||||
}
|
||||
|
||||
.card-chip-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 25px;
|
||||
border: 1px solid #ff8a1f;
|
||||
border-radius: 4px;
|
||||
color: #ff7900;
|
||||
padding: 0 5px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 374px) {
|
||||
.mobile-card {
|
||||
grid-template-columns: 112px minmax(0, 1fr);
|
||||
grid-template-rows: 112px 62px;
|
||||
min-height: 210px;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.card-main {
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
.card-title-row h2 {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
.card-footer strong {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部导航：原生App风格 ========== */
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.publish-pill {
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 13px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.nav-publish span {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
/* ========== 响应式适配 ========== */
|
||||
@media (min-width: 520px) {
|
||||
.mobile-shell {
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
left: calc((100vw - 430px) / 2);
|
||||
right: calc((100vw - 430px) / 2);
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,26 @@ import { fetchListings, type Listing } from "@/api/listings";
|
||||
import MobileHomeFilterSheet, {
|
||||
type FilterSection,
|
||||
} from "./MobileHomeFilterSheet.vue";
|
||||
import { buildFallbackListings } from "./mobileHomeFallback";
|
||||
import {
|
||||
assetRegions,
|
||||
formatHafCoinM,
|
||||
getCoinM,
|
||||
getCoinWan,
|
||||
getListingChips,
|
||||
getListingDisplayPrice,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getResourceQuantity,
|
||||
getServerRegion,
|
||||
getSkinGroup,
|
||||
hasGiftResources,
|
||||
normalizeLoginMethod,
|
||||
normalizeServerRegion,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
} from "./listingDisplay";
|
||||
|
||||
const route = useRoute();
|
||||
const loading = ref(false);
|
||||
@@ -35,12 +55,11 @@ const sortOptions = [
|
||||
|
||||
const rangePresets: Record<string, Array<{ label: string; min: string; max: string }>> = {
|
||||
coin: [
|
||||
{ label: "10-50", min: "10", max: "50" },
|
||||
{ label: "50-100", min: "50", max: "100" },
|
||||
{ label: "100-150", min: "100", max: "150" },
|
||||
{ label: "150-200", min: "150", max: "200" },
|
||||
{ label: "100-200", min: "100", max: "200" },
|
||||
{ label: "200-300", min: "200", max: "300" },
|
||||
{ label: "300以上", min: "300", max: "" },
|
||||
{ label: "300-500", min: "300", max: "500" },
|
||||
{ label: "500以上", min: "500", max: "" },
|
||||
],
|
||||
resource_awmAmmo: [
|
||||
{ label: "0-20", min: "0", max: "20" },
|
||||
@@ -75,141 +94,10 @@ const bannerSlides = [
|
||||
},
|
||||
];
|
||||
|
||||
const fallbackListings: Listing[] = [
|
||||
{
|
||||
id: 9001,
|
||||
account_id: 0,
|
||||
owner_id: 0,
|
||||
title: "QQ区 黑鹰 30000万哈夫币账号",
|
||||
description: "支持扫码上号，号主在线交接，保险 2*3，适合高强度体验。",
|
||||
game_name: "三角洲行动",
|
||||
server_region: "QQ",
|
||||
login_platform: "扫码",
|
||||
rank_level: "黑鹰",
|
||||
haf_coin_amount: 300000000,
|
||||
asset_summary: {
|
||||
haf_coin_wan: 30000,
|
||||
season_insurance: "2*3",
|
||||
stamina_level: "6级",
|
||||
load_level: "6级",
|
||||
daily_loss: "30M",
|
||||
ratio: 6,
|
||||
login_method: "扫码",
|
||||
common_regions: ["广东", "上海"],
|
||||
resources: [
|
||||
{ key: "awmAmmo", label: "AWM子弹", quantity: 80, mode: "收费" },
|
||||
{ key: "helmet6", label: "6头数量", quantity: 6, mode: "收费" },
|
||||
{ key: "armor6", label: "6甲数量", quantity: 4, mode: "收费" },
|
||||
],
|
||||
skin_groups: {
|
||||
melee: ["龙牙", "信条"],
|
||||
operator: ["威龙-凌霄戍卫"],
|
||||
weapon: ["M4A1棱镜攻势", "K416命运"],
|
||||
},
|
||||
},
|
||||
screenshot_urls: [],
|
||||
price_hourly: 8.8,
|
||||
price_daily: 88,
|
||||
price_weekly: 520,
|
||||
deposit_amount: 120,
|
||||
min_rent_hours: 24,
|
||||
max_rent_hours: 168,
|
||||
status: "published",
|
||||
review_status: "approved",
|
||||
review_reason: "",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
},
|
||||
{
|
||||
id: 9002,
|
||||
account_id: 0,
|
||||
owner_id: 0,
|
||||
title: "微信 钻石 12000万哈夫币低押号",
|
||||
description: "账密登录，低押金，皮肤截图齐全，常用登录地江苏。",
|
||||
game_name: "三角洲行动",
|
||||
server_region: "微信",
|
||||
login_platform: "账号密码",
|
||||
rank_level: "钻石",
|
||||
haf_coin_amount: 120000000,
|
||||
asset_summary: {
|
||||
haf_coin_wan: 12000,
|
||||
season_insurance: "2*2",
|
||||
stamina_level: "5级",
|
||||
load_level: "5级",
|
||||
daily_loss: "20M",
|
||||
ratio: 5,
|
||||
login_method: "账号密码",
|
||||
common_regions: ["江苏"],
|
||||
resources: [
|
||||
{ key: "awmAmmo", label: "AWM子弹", quantity: 30, mode: "收费" },
|
||||
{ key: "helmet6", label: "6头数量", quantity: 2, mode: "收费" },
|
||||
],
|
||||
skin_groups: {
|
||||
melee: ["怜悯"],
|
||||
operator: ["露娜-黑天际线"],
|
||||
weapon: ["SCAR-H电玩高手"],
|
||||
},
|
||||
},
|
||||
screenshot_urls: [],
|
||||
price_hourly: 5.5,
|
||||
price_daily: 55,
|
||||
price_weekly: 330,
|
||||
deposit_amount: 60,
|
||||
min_rent_hours: 24,
|
||||
max_rent_hours: 72,
|
||||
status: "published",
|
||||
review_status: "approved",
|
||||
review_reason: "",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
},
|
||||
{
|
||||
id: 9003,
|
||||
account_id: 0,
|
||||
owner_id: 0,
|
||||
title: "Steam 铂金 6000万哈夫币包夜号",
|
||||
description: "可包夜，保险 2*1，适合短租搬砖体验。",
|
||||
game_name: "三角洲行动",
|
||||
server_region: "Steam",
|
||||
login_platform: "扫码",
|
||||
rank_level: "铂金",
|
||||
haf_coin_amount: 60000000,
|
||||
asset_summary: {
|
||||
haf_coin_wan: 6000,
|
||||
season_insurance: "2*1",
|
||||
stamina_level: "4级",
|
||||
load_level: "4级",
|
||||
daily_loss: "10M",
|
||||
ratio: 4,
|
||||
login_method: "扫码",
|
||||
common_regions: ["四川", "重庆"],
|
||||
resources: [
|
||||
{ key: "awmAmmo", label: "AWM子弹", quantity: 12, mode: "收费" },
|
||||
{ key: "gridCard9", label: "9格体验卡", quantity: 1, mode: "收费" },
|
||||
],
|
||||
skin_groups: {
|
||||
melee: ["暗星"],
|
||||
operator: ["赛伊德"],
|
||||
weapon: ["Vector美杜莎"],
|
||||
},
|
||||
},
|
||||
screenshot_urls: [],
|
||||
price_hourly: 3.9,
|
||||
price_daily: 39,
|
||||
price_weekly: 220,
|
||||
deposit_amount: 80,
|
||||
min_rent_hours: 8,
|
||||
max_rent_hours: 24,
|
||||
status: "published",
|
||||
review_status: "approved",
|
||||
review_reason: "",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
},
|
||||
];
|
||||
const fallbackListings = computed(() => buildFallbackListings(publishOptions.value));
|
||||
|
||||
const sourceListings = computed(() =>
|
||||
loadFailed.value ? fallbackListings : listings.value
|
||||
loadFailed.value ? fallbackListings.value : listings.value
|
||||
);
|
||||
|
||||
const activeSortLabel = computed(
|
||||
@@ -235,8 +123,8 @@ const loginMethodFilterOptions = computed(() =>
|
||||
);
|
||||
|
||||
const filterSections = computed<FilterSection[]>(() => [
|
||||
{ key: "price", title: "价格区间", type: "range", unit: "元/小时", minPlaceholder: "最低价", maxPlaceholder: "最高价" },
|
||||
{ key: "coin", title: "哈夫币数量", type: "range", unit: "万", minPlaceholder: "最低", maxPlaceholder: "最高" },
|
||||
{ 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 },
|
||||
@@ -357,12 +245,12 @@ function sortListings(items: Listing[]) {
|
||||
}
|
||||
if (activeSort.value === "priceAsc") {
|
||||
return sorted.sort(
|
||||
(a, b) => Number(a.price_hourly || 0) - Number(b.price_hourly || 0)
|
||||
(a, b) => getListingDisplayPrice(a) - getListingDisplayPrice(b)
|
||||
);
|
||||
}
|
||||
if (activeSort.value === "priceDesc") {
|
||||
return sorted.sort(
|
||||
(a, b) => Number(b.price_hourly || 0) - Number(a.price_hourly || 0)
|
||||
(a, b) => getListingDisplayPrice(b) - getListingDisplayPrice(a)
|
||||
);
|
||||
}
|
||||
return sorted.sort((a, b) => {
|
||||
@@ -391,8 +279,8 @@ function matchesFilters(item: Listing) {
|
||||
return Object.entries(rangeFilters.value).every(([key, range]) => {
|
||||
if (!range.min && !range.max) return true;
|
||||
let value = 0;
|
||||
if (key === "price") value = Number(item.price_hourly || 0);
|
||||
if (key === "coin") value = getCoinWan(item);
|
||||
if (key === "price") value = getListingDisplayPrice(item);
|
||||
if (key === "coin") value = getCoinM(item);
|
||||
if (key === "secretKd") value = readAssetNumber(item, "secret_kd");
|
||||
if (key === "deposit") value = Number(item.deposit_amount || 0);
|
||||
if (key.startsWith("resource_")) {
|
||||
@@ -420,7 +308,7 @@ function searchText(item: Listing) {
|
||||
readAssetString(item, "season_insurance"),
|
||||
readAssetString(item, "stamina_level"),
|
||||
readAssetString(item, "load_level"),
|
||||
formatCoinWan(getCoinWan(item)),
|
||||
formatHafCoinM(getCoinWan(item)),
|
||||
assetRegions(item).join(" "),
|
||||
...publishOptions.value.skin_groups.map((group) =>
|
||||
getSkinGroup(item, group.key).join(" ")
|
||||
@@ -430,39 +318,6 @@ function searchText(item: Listing) {
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
function getCoinWan(item: Listing) {
|
||||
const assetCoin = readAssetNumber(item, "haf_coin_wan");
|
||||
if (assetCoin > 0) return assetCoin;
|
||||
return Math.round(Number(item.haf_coin_amount || 0) / 10000);
|
||||
}
|
||||
|
||||
function getLoginMethod(item: Listing) {
|
||||
return normalizeLoginMethod(
|
||||
readAssetString(item, "login_method") || item.login_platform
|
||||
);
|
||||
}
|
||||
|
||||
function getServerRegion(item: Listing) {
|
||||
return normalizeServerRegion(item.server_region);
|
||||
}
|
||||
|
||||
function normalizeServerRegion(value: string) {
|
||||
const text = value.trim();
|
||||
const upper = text.toUpperCase();
|
||||
if (upper.includes("STEAM")) return "Steam";
|
||||
if (upper.includes("QQ")) return "QQ";
|
||||
if (text.includes("微信")) return "微信";
|
||||
return "";
|
||||
}
|
||||
|
||||
function normalizeLoginMethod(value: string) {
|
||||
const text = value.trim();
|
||||
if (!text) return "";
|
||||
if (text.includes("扫码")) return "扫码";
|
||||
if (text.includes("账密") || text.includes("账号密码")) return "账号密码";
|
||||
return "";
|
||||
}
|
||||
|
||||
function isSkinGroupKey(key: string) {
|
||||
return publishOptions.value.skin_groups.some((group) => group.key === key);
|
||||
}
|
||||
@@ -476,80 +331,6 @@ function uniqueOptions(values: string[]) {
|
||||
return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
|
||||
}
|
||||
|
||||
function getRatio(item: Listing) {
|
||||
const ratio = readAssetNumber(item, "ratio");
|
||||
if (ratio > 0) return ratio;
|
||||
const price = Number(item.price_hourly || 0);
|
||||
if (price <= 0) return 0;
|
||||
return getCoinWan(item) / price;
|
||||
}
|
||||
|
||||
function assetRegions(item: Listing) {
|
||||
const regions = item.asset_summary?.common_regions;
|
||||
return Array.isArray(regions)
|
||||
? regions.filter((region): region is string => typeof region === "string")
|
||||
: [];
|
||||
}
|
||||
|
||||
function getResourceQuantity(item: Listing, resourceKey: string) {
|
||||
const resources = item.asset_summary?.resources;
|
||||
if (!Array.isArray(resources)) return 0;
|
||||
const found = resources.find((resource) => {
|
||||
return (
|
||||
typeof resource === "object" &&
|
||||
resource !== null &&
|
||||
"key" in resource &&
|
||||
(resource as { key?: unknown }).key === resourceKey
|
||||
);
|
||||
}) as { quantity?: unknown } | undefined;
|
||||
const quantity = found?.quantity;
|
||||
if (typeof quantity === "number") return quantity;
|
||||
if (typeof quantity === "string" && quantity.trim()) return Number(quantity) || 0;
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getSkinGroup(item: Listing, groupKey: string) {
|
||||
const skinGroups = item.asset_summary?.skin_groups;
|
||||
if (
|
||||
typeof skinGroups !== "object" ||
|
||||
skinGroups === null ||
|
||||
!Array.isArray((skinGroups as Record<string, unknown>)[groupKey])
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
return ((skinGroups as Record<string, unknown>)[groupKey] as unknown[]).filter(
|
||||
(skin): skin is string => typeof skin === "string"
|
||||
);
|
||||
}
|
||||
|
||||
function readAssetString(item: Listing, key: string) {
|
||||
const value = item.asset_summary?.[key];
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
|
||||
function readAssetNumber(item: Listing, key: string) {
|
||||
const value = item.asset_summary?.[key];
|
||||
if (typeof value === "number") return value;
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : 0;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function formatCoinWan(amountWan: number) {
|
||||
if (amountWan >= 10000) {
|
||||
const yi = amountWan / 10000;
|
||||
return `${Number.isInteger(yi) ? yi : yi.toFixed(1)}亿`;
|
||||
}
|
||||
return `${amountWan}万`;
|
||||
}
|
||||
|
||||
function formatRatio(item: Listing) {
|
||||
const ratio = getRatio(item);
|
||||
return ratio > 0 ? `1:${Math.round(ratio)}` : "--";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -663,57 +444,42 @@ function formatRatio(item: Listing) {
|
||||
class="mobile-card"
|
||||
:to="`/m/listings/${item.id}`"
|
||||
>
|
||||
<div class="card-title-row">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<em>可租</em>
|
||||
<div class="card-cover">
|
||||
<img
|
||||
v-if="item.screenshot_urls?.[0]"
|
||||
:src="item.screenshot_urls[0]"
|
||||
:alt="getListingTitle(item)"
|
||||
/>
|
||||
<span v-else>图</span>
|
||||
<em v-if="hasGiftResources(item)">有赠送</em>
|
||||
</div>
|
||||
<div class="card-tags">
|
||||
<van-tag type="primary" size="medium" plain>{{
|
||||
getServerRegion(item)
|
||||
}}</van-tag>
|
||||
<van-tag
|
||||
v-if="getLoginMethod(item)"
|
||||
type="primary"
|
||||
size="medium"
|
||||
plain
|
||||
>{{ getLoginMethod(item) }}</van-tag
|
||||
>
|
||||
<van-tag
|
||||
v-if="item.rank_level"
|
||||
type="primary"
|
||||
size="medium"
|
||||
plain
|
||||
>{{ item.rank_level }}</van-tag
|
||||
>
|
||||
<van-tag
|
||||
v-if="readAssetString(item, 'season_insurance')"
|
||||
color="#eff6ff"
|
||||
text-color="#1477ff"
|
||||
size="medium"
|
||||
>
|
||||
保险 {{ readAssetString(item, "season_insurance") }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
v-if="readAssetString(item, 'daily_loss')"
|
||||
color="#fff7ed"
|
||||
text-color="#ea580c"
|
||||
size="medium"
|
||||
>
|
||||
损耗 {{ readAssetString(item, "daily_loss") }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="price-col">
|
||||
<strong>¥{{ item.price_hourly }}<small>/小时</small></strong>
|
||||
<span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
|
||||
<div class="card-main">
|
||||
<div class="card-title-row">
|
||||
<h2>{{ getListingTitle(item) }}</h2>
|
||||
</div>
|
||||
<div class="card-badges">
|
||||
<div class="ratio-badge">{{ formatRatio(item) }}</div>
|
||||
<div class="coin-badge">
|
||||
{{ formatCoinWan(getCoinWan(item)) }}哈夫币
|
||||
<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>
|
||||
</section>
|
||||
@@ -770,468 +536,4 @@ function formatRatio(item: Listing) {
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-shell {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
color: #17233d;
|
||||
padding-bottom: 58px;
|
||||
}
|
||||
|
||||
/* ========== Hero 区域：纯色蓝色头部 ========== */
|
||||
.mobile-hero {
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 24px 24px;
|
||||
background: #1479ff;
|
||||
padding: 14px 14px 18px;
|
||||
}
|
||||
|
||||
.mobile-topbar,
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
justify-content: space-between;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #1479ff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.mobile-brand strong,
|
||||
.mobile-brand small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-brand small {
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #ffffff;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
/* ========== van-search 覆盖样式 ========== */
|
||||
.home-search {
|
||||
margin-top: 12px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content) {
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content .van-field__control) {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ========== 防骗提示卡片 ========== */
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #5c3b00;
|
||||
}
|
||||
|
||||
.fraud-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #f0a500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ========== Content 区 ========== */
|
||||
.mobile-content {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
/* ========== Banner 轮播 ========== */
|
||||
.banner-swipe {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicators) {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(23, 35, 61, 0.24);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator--active) {
|
||||
width: 16px;
|
||||
border-radius: 999px;
|
||||
background: #1479ff;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-height: 132px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 18px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.mobile-banner.tone-green {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
||||
}
|
||||
|
||||
.mobile-banner.tone-orange {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-banner p {
|
||||
color: #1479ff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 6px;
|
||||
font-size: 22px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.mobile-banner span {
|
||||
display: inline-flex;
|
||||
margin-top: 12px;
|
||||
border-radius: 999px;
|
||||
background: #ffefb5;
|
||||
color: #7a4b00;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
align-self: flex-start;
|
||||
border-radius: 12px;
|
||||
background: #ff6a00;
|
||||
color: #ffffff;
|
||||
padding: 8px 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
.tone-green .banner-badge {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.tone-orange .banner-badge {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
/* ========== 列表工具栏 ========== */
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
padding: 14px 16px;
|
||||
color: #536173;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sort-entry,
|
||||
.filter-entry {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sort-entry {
|
||||
gap: 4px;
|
||||
color: #17233d;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.filter-entry {
|
||||
position: relative;
|
||||
border-radius: 999px;
|
||||
color: #17233d;
|
||||
padding: 0;
|
||||
gap: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.filter-entry em {
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #1477ff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sort-panel {
|
||||
margin-top: 6px;
|
||||
border-radius: 0 0 14px 14px;
|
||||
background: #fff;
|
||||
padding: 4px 16px 14px;
|
||||
}
|
||||
|
||||
.sort-panel button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #2d3748;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sort-panel button.active {
|
||||
color: #ff7a00;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
margin-top: 8px;
|
||||
color: #536173;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.result-count strong {
|
||||
margin-right: 3px;
|
||||
color: #1477ff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* ========== 加载状态 ========== */
|
||||
.state-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ========== 卡片列表 ========== */
|
||||
.mobile-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
display: block;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 14px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-title-row h2 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title-row em {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
background: #e9f8ef;
|
||||
color: #0f9f57;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.price-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.card-footer strong {
|
||||
color: #ff5f00;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-footer small,
|
||||
.card-footer .rent-sub {
|
||||
color: #8a96a8;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coin-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
background: #e8f0ff;
|
||||
color: #1477ff;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-badges {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ratio-badge {
|
||||
border-radius: 999px;
|
||||
background: #eefdf3;
|
||||
color: #0f9f57;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ========== 底部导航：原生App风格 ========== */
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.publish-pill {
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 13px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.nav-publish span {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
/* ========== 响应式适配 ========== */
|
||||
@media (min-width: 520px) {
|
||||
.mobile-shell {
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
left: calc((100vw - 430px) / 2);
|
||||
right: calc((100vw - 430px) / 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./MobileHomeView.css"></style>
|
||||
|
||||
@@ -4,8 +4,27 @@ import { useRoute, useRouter } from "vue-router";
|
||||
import { showToast, showDialog } from "vant";
|
||||
|
||||
import { fetchListing, type Listing } from "@/api/listings";
|
||||
import { defaultListingPublishOptions } from "@/api/listingOptions";
|
||||
import { createOrder } from "@/api/orders";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { buildFallbackListings } from "./mobileHomeFallback";
|
||||
import {
|
||||
assetRegions,
|
||||
formatHafCoinM,
|
||||
formatRatio,
|
||||
getCoinWan,
|
||||
getListingChips,
|
||||
getListingDisplayPrice,
|
||||
getListingResources,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getRentDays,
|
||||
getScreenshotMap,
|
||||
getServerRegion,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
} from "./listingDisplay";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -19,8 +38,17 @@ onMounted(async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
listing.value = await fetchListing(String(route.params.id));
|
||||
rentHours.value = Math.max(listing.value.min_rent_hours || 1, 1);
|
||||
} catch {
|
||||
showToast({ message: "加载失败", icon: "warning-o" });
|
||||
const fallback = buildFallbackListings(defaultListingPublishOptions).find(
|
||||
(item) => String(item.id) === String(route.params.id)
|
||||
);
|
||||
if (fallback) {
|
||||
listing.value = fallback;
|
||||
rentHours.value = Math.max(fallback.min_rent_hours || 1, 1);
|
||||
} else {
|
||||
showToast({ message: "加载失败", icon: "warning-o" });
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
@@ -32,6 +60,61 @@ const totalRent = computed(() => {
|
||||
return (listing.value.price_hourly * rentHours.value).toFixed(2);
|
||||
});
|
||||
|
||||
const detailMetrics = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const totalAssetWan = readAssetNumber(listing.value, "total_asset_wan");
|
||||
return [
|
||||
{ label: "纯币", value: formatHafCoinM(getCoinWan(listing.value)), tone: "coin" },
|
||||
{
|
||||
label: "总资产",
|
||||
value: totalAssetWan > 0 ? formatHafCoinM(totalAssetWan) : "--",
|
||||
tone: "coin",
|
||||
},
|
||||
{ label: "价格", value: `¥${getListingDisplayPrice(listing.value)}`, tone: "price" },
|
||||
{ label: "押金", value: `¥${listing.value.deposit_amount}`, tone: "" },
|
||||
];
|
||||
});
|
||||
|
||||
const detailScreenshots = computed(() => {
|
||||
if (!listing.value) return [];
|
||||
const screenshotMap = getScreenshotMap(listing.value);
|
||||
const labels: Record<string, string> = {
|
||||
coin: "纯币截图",
|
||||
gameId: "游戏ID",
|
||||
totalAsset: "总资产",
|
||||
tencentSecurity: "腾讯安全中心",
|
||||
skin: "皮肤截图",
|
||||
};
|
||||
const mapped = Object.entries(screenshotMap)
|
||||
.filter(([, url]) => typeof url === "string" && url)
|
||||
.map(([key, url]) => ({ label: labels[key] || "账号截图", url: String(url) }));
|
||||
if (mapped.length) return mapped;
|
||||
return (listing.value.screenshot_urls || []).map((url, index) => ({
|
||||
label: `账号截图${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: "干员皮肤",
|
||||
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;
|
||||
@@ -125,9 +208,9 @@ function isNavActive(path: string) {
|
||||
<!-- 封面图 -->
|
||||
<div class="cover-area">
|
||||
<img
|
||||
v-if="listing.screenshot_urls?.[0]"
|
||||
:src="listing.screenshot_urls[0]"
|
||||
:alt="listing.title"
|
||||
v-if="detailScreenshots[0]?.url"
|
||||
:src="detailScreenshots[0].url"
|
||||
:alt="getListingTitle(listing)"
|
||||
class="cover-img"
|
||||
/>
|
||||
<div v-else class="cover-placeholder">
|
||||
@@ -136,10 +219,10 @@ function isNavActive(path: string) {
|
||||
</div>
|
||||
<!-- 截图指示器 -->
|
||||
<div
|
||||
v-if="(listing.screenshot_urls?.length ?? 0) > 1"
|
||||
v-if="detailScreenshots.length > 1"
|
||||
class="cover-count"
|
||||
>
|
||||
{{ listing.screenshot_urls?.length }}张
|
||||
{{ detailScreenshots.length }}张
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -147,71 +230,102 @@ function isNavActive(path: string) {
|
||||
<div class="info-card">
|
||||
<div class="info-tag-row">
|
||||
<van-tag plain type="primary" size="medium">{{
|
||||
listing.server_region
|
||||
}}</van-tag>
|
||||
<van-tag plain type="primary" size="medium">{{
|
||||
listing.login_platform
|
||||
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>
|
||||
<van-tag
|
||||
v-if="readAssetString(listing, 'daily_loss')"
|
||||
color="#fff7ed"
|
||||
text-color="#ea580c"
|
||||
size="medium"
|
||||
>
|
||||
损耗 {{ readAssetString(listing, "daily_loss") }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<h2 class="detail-title">{{ listing.title }}</h2>
|
||||
<p class="detail-desc">
|
||||
{{ listing.description || "号主暂未填写详细说明。" }}
|
||||
</p>
|
||||
<h2 class="detail-title">{{ getListingTitle(listing) }}</h2>
|
||||
<p class="detail-desc">{{ getListingSubtitle(listing) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 资产指标 -->
|
||||
<div class="metric-row">
|
||||
<div class="metric-item">
|
||||
<span class="metric-label">哈夫币</span>
|
||||
<strong class="metric-value coin">{{
|
||||
listing.haf_coin_amount
|
||||
}}</strong>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<span class="metric-label">时租</span>
|
||||
<strong class="metric-value price"
|
||||
>¥{{ listing.price_hourly }}</strong
|
||||
>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<span class="metric-label">日租</span>
|
||||
<strong class="metric-value">¥{{ listing.price_daily }}</strong>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<span class="metric-label">押金</span>
|
||||
<strong class="metric-value">¥{{ listing.deposit_amount }}</strong>
|
||||
<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">
|
||||
<div class="info-line">
|
||||
<span class="info-label">最短租期</span>
|
||||
<span class="info-text">{{ listing.min_rent_hours }}小时</span>
|
||||
<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">最长租期</span>
|
||||
<span class="info-text">{{ listing.max_rent_hours }}小时</span>
|
||||
<span class="info-label">比例</span>
|
||||
<span class="info-text">{{ formatRatio(listing) }}</span>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span class="info-label">状态</span>
|
||||
<span class="info-text">{{ listing.status }}</span>
|
||||
<span class="info-label">租期</span>
|
||||
<span class="info-text">{{ getRentDays(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>{{ resource.mode }}</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="listing.screenshot_urls?.length" class="info-card">
|
||||
<div v-if="detailScreenshots.length" class="info-card">
|
||||
<h3 class="card-subtitle">账号截图</h3>
|
||||
<div class="screenshot-grid">
|
||||
<img
|
||||
v-for="(url, idx) in listing.screenshot_urls"
|
||||
:key="idx"
|
||||
:src="url"
|
||||
class="screenshot-thumb"
|
||||
/>
|
||||
<figure v-for="shot in detailScreenshots" :key="shot.url" class="screenshot-item">
|
||||
<img :src="shot.url" class="screenshot-thumb" />
|
||||
<figcaption>{{ shot.label }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -380,10 +494,10 @@ function isNavActive(path: string) {
|
||||
|
||||
.detail-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 17px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.3;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
@@ -418,8 +532,11 @@ function isNavActive(path: string) {
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
color: #1a1a1a;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value.coin {
|
||||
@@ -459,20 +576,97 @@ function isNavActive(path: string) {
|
||||
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 {
|
||||
grid-column: 1 / -1;
|
||||
color: #ff7900;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.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(3, 1fr);
|
||||
gap: 6px;
|
||||
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: 6px;
|
||||
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;
|
||||
|
||||
@@ -54,7 +54,7 @@ const quantityValues = reactive<Record<QuantityKey, number>>({
|
||||
helmet6: 0,
|
||||
armor6: 0,
|
||||
kit5: 0,
|
||||
armor6Ammo: 0,
|
||||
level6Ammo: 0,
|
||||
gridCard9: 0,
|
||||
});
|
||||
|
||||
@@ -63,7 +63,7 @@ const quantityModes = reactive<Record<QuantityKey, ChargeMode>>({
|
||||
helmet6: "收费",
|
||||
armor6: "收费",
|
||||
kit5: "收费",
|
||||
armor6Ammo: "收费",
|
||||
level6Ammo: "收费",
|
||||
gridCard9: "收费",
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
import type { Listing } from "@/api/listings";
|
||||
|
||||
export interface ListingDisplayChip {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface ListingDisplayResource {
|
||||
key: string;
|
||||
label: string;
|
||||
quantity: number;
|
||||
mode: string;
|
||||
}
|
||||
|
||||
export function getCoinWan(item: Listing) {
|
||||
const assetCoin = readAssetNumber(item, "haf_coin_wan");
|
||||
if (assetCoin > 0) return assetCoin;
|
||||
return Math.round(Number(item.haf_coin_amount || 0) / 10000);
|
||||
}
|
||||
|
||||
export function getCoinM(item: Listing) {
|
||||
return getCoinWan(item) / 100;
|
||||
}
|
||||
|
||||
export function formatHafCoinM(amountWan: number) {
|
||||
const amountM = amountWan / 100;
|
||||
const rounded = Math.round(amountM * 10) / 10;
|
||||
return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)}M`;
|
||||
}
|
||||
|
||||
export function getListingDisplayPrice(item: Listing) {
|
||||
const assetPrice = readAssetNumber(item, "price");
|
||||
if (assetPrice > 0) return assetPrice;
|
||||
const rentDays = getRentDays(item);
|
||||
if (rentDays > 0 && item.price_daily > 0) {
|
||||
return roundMoney(item.price_daily * rentDays);
|
||||
}
|
||||
return Number(item.price_daily || item.price_hourly || 0);
|
||||
}
|
||||
|
||||
export function getRentDays(item: Listing) {
|
||||
const assetDays = readAssetNumber(item, "rent_days");
|
||||
if (assetDays > 0) return assetDays;
|
||||
if (item.max_rent_hours >= 24) return Math.max(Math.round(item.max_rent_hours / 24), 1);
|
||||
return 1;
|
||||
}
|
||||
|
||||
export function getRatioValue(item: Listing) {
|
||||
const ratio = readAssetNumber(item, "ratio");
|
||||
if (ratio > 0) return ratio;
|
||||
const price = getListingDisplayPrice(item);
|
||||
if (price <= 0) return 0;
|
||||
return getCoinWan(item) / price;
|
||||
}
|
||||
|
||||
export function formatRatio(item: Listing) {
|
||||
const ratio = getRatioValue(item);
|
||||
return ratio > 0 ? `1:${Math.round(ratio)}` : "--";
|
||||
}
|
||||
|
||||
export function getValuePerYuanText(item: Listing) {
|
||||
const price = getListingDisplayPrice(item);
|
||||
if (price <= 0) return "";
|
||||
return `1元=${Math.round(getCoinWan(item) / price)}w哈夫币`;
|
||||
}
|
||||
|
||||
export function getLoginMethod(item: Listing) {
|
||||
return normalizeLoginMethod(readAssetString(item, "login_method") || item.login_platform);
|
||||
}
|
||||
|
||||
export function getServerRegion(item: Listing) {
|
||||
return normalizeServerRegion(item.server_region);
|
||||
}
|
||||
|
||||
export function getListingTitle(item: Listing) {
|
||||
const parts = [
|
||||
`纯币${formatHafCoinM(getCoinWan(item))}`,
|
||||
formatInsuranceSlotText(readAssetString(item, "season_insurance")),
|
||||
formatLevelShort(readAssetString(item, "stamina_level"), "体"),
|
||||
formatLevelShort(readAssetString(item, "load_level"), "负"),
|
||||
formatResourceShort(item, "armor6", "六甲"),
|
||||
formatResourceShort(item, "helmet6", "六头"),
|
||||
...getSkinNames(item).slice(0, 4),
|
||||
].filter(Boolean);
|
||||
return parts.join("/");
|
||||
}
|
||||
|
||||
export function getListingSubtitle(item: Listing) {
|
||||
return [getValuePerYuanText(item), `租期${getRentDays(item)}天`]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
export function getListingChips(item: Listing): ListingDisplayChip[] {
|
||||
const totalAsset = readAssetNumber(item, "total_asset_wan");
|
||||
const chips: ListingDisplayChip[] = [
|
||||
{ label: "哈夫币", value: formatHafCoinM(getCoinWan(item)) },
|
||||
{ label: "保险格数", value: readAssetString(item, "season_insurance") },
|
||||
{ label: "体力", value: readAssetString(item, "stamina_level") },
|
||||
{ label: "负重", value: readAssetString(item, "load_level") },
|
||||
{ label: "段位", value: item.rank_level },
|
||||
];
|
||||
const awmAmmo = getResourceQuantity(item, "awmAmmo");
|
||||
if (awmAmmo > 0) {
|
||||
chips.push({ label: "AWM", value: `${awmAmmo}发` });
|
||||
}
|
||||
if (totalAsset > 0) {
|
||||
chips.push({ label: "总资产", value: formatHafCoinM(totalAsset) });
|
||||
}
|
||||
const online = getOnlineTimeText(item);
|
||||
if (online) {
|
||||
chips.push({ label: "方便上号", value: online });
|
||||
}
|
||||
return chips.filter((chip) => chip.value);
|
||||
}
|
||||
|
||||
export function getListingResources(item: Listing): ListingDisplayResource[] {
|
||||
const resources = item.asset_summary?.resources;
|
||||
if (!Array.isArray(resources)) return [];
|
||||
return resources
|
||||
.map((resource) => {
|
||||
if (typeof resource !== "object" || resource === null) return null;
|
||||
const row = resource as Record<string, unknown>;
|
||||
return {
|
||||
key: typeof row.key === "string" ? row.key : "",
|
||||
label: typeof row.label === "string" ? row.label : "",
|
||||
quantity: readUnknownNumber(row.quantity),
|
||||
mode: typeof row.mode === "string" ? row.mode : "",
|
||||
};
|
||||
})
|
||||
.filter((resource): resource is ListingDisplayResource => {
|
||||
return Boolean(resource?.key && resource.label && resource.quantity > 0);
|
||||
});
|
||||
}
|
||||
|
||||
export function getResourceQuantity(item: Listing, resourceKey: string) {
|
||||
const keys = getResourceKeyAliases(resourceKey);
|
||||
return getListingResources(item).find((resource) => keys.includes(resource.key))?.quantity || 0;
|
||||
}
|
||||
|
||||
export function hasGiftResources(item: Listing) {
|
||||
return getListingResources(item).some((resource) => resource.mode === "赠送");
|
||||
}
|
||||
|
||||
export function getSkinGroup(item: Listing, groupKey: string) {
|
||||
const skinGroups = item.asset_summary?.skin_groups;
|
||||
if (
|
||||
typeof skinGroups !== "object" ||
|
||||
skinGroups === null ||
|
||||
!Array.isArray((skinGroups as Record<string, unknown>)[groupKey])
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
return ((skinGroups as Record<string, unknown>)[groupKey] as unknown[]).filter(
|
||||
(skin): skin is string => typeof skin === "string"
|
||||
);
|
||||
}
|
||||
|
||||
export function getSkinNames(item: Listing) {
|
||||
const skinGroups = item.asset_summary?.skin_groups;
|
||||
if (typeof skinGroups === "object" && skinGroups !== null) {
|
||||
return Object.values(skinGroups as Record<string, unknown>)
|
||||
.flatMap((group) => (Array.isArray(group) ? group : []))
|
||||
.filter((skin): skin is string => typeof skin === "string");
|
||||
}
|
||||
const skins = item.asset_summary?.skins;
|
||||
return Array.isArray(skins) ? skins.filter((skin): skin is string => typeof skin === "string") : [];
|
||||
}
|
||||
|
||||
export function assetRegions(item: Listing) {
|
||||
const regions = item.asset_summary?.common_regions;
|
||||
return Array.isArray(regions)
|
||||
? regions.filter((region): region is string => typeof region === "string")
|
||||
: [];
|
||||
}
|
||||
|
||||
export function getScreenshotMap(item: Listing) {
|
||||
const screenshots = item.asset_summary?.screenshots;
|
||||
return typeof screenshots === "object" && screenshots !== null
|
||||
? (screenshots as Record<string, unknown>)
|
||||
: {};
|
||||
}
|
||||
|
||||
export function getOnlineTimeText(item: Listing) {
|
||||
const onlineTime = item.asset_summary?.online_time;
|
||||
if (typeof onlineTime !== "object" || onlineTime === null) return "";
|
||||
const start = (onlineTime as Record<string, unknown>).start;
|
||||
const end = (onlineTime as Record<string, unknown>).end;
|
||||
if (typeof start !== "string" || typeof end !== "string" || !start || !end) return "";
|
||||
return `${start.replace(":00", "")}-${end.replace(":00", "")}点`;
|
||||
}
|
||||
|
||||
export function readAssetString(item: Listing, key: string) {
|
||||
const value = item.asset_summary?.[key];
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
|
||||
export function readAssetNumber(item: Listing, key: string) {
|
||||
return readUnknownNumber(item.asset_summary?.[key]);
|
||||
}
|
||||
|
||||
function readUnknownNumber(value: unknown) {
|
||||
if (typeof value === "number") return value;
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : 0;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
export function normalizeServerRegion(value: string) {
|
||||
const text = value.trim();
|
||||
const upper = text.toUpperCase();
|
||||
if (upper.includes("STEAM")) return "Steam";
|
||||
if (upper.includes("QQ")) return "QQ";
|
||||
if (text.includes("微信")) return "微信";
|
||||
return text;
|
||||
}
|
||||
|
||||
export function normalizeLoginMethod(value: string) {
|
||||
const text = value.trim();
|
||||
if (!text) return "";
|
||||
if (text.includes("扫码")) return "扫码";
|
||||
if (text.includes("账密") || text.includes("账号密码")) return "账号密码";
|
||||
return text;
|
||||
}
|
||||
|
||||
function formatInsuranceSlotText(value: string) {
|
||||
const parts = value.split("*").map((item) => Number(item));
|
||||
const rows = parts[0] || 0;
|
||||
const cols = parts[1] || 0;
|
||||
if (!Number.isFinite(rows) || !Number.isFinite(cols) || rows <= 0 || cols <= 0) {
|
||||
return value;
|
||||
}
|
||||
return `${rows * cols}格`;
|
||||
}
|
||||
|
||||
function formatLevelShort(value: string, suffix: string) {
|
||||
const level = value.match(/\d+/)?.[0];
|
||||
return level ? `${level}${suffix}` : value;
|
||||
}
|
||||
|
||||
function formatResourceShort(item: Listing, key: string, label: string) {
|
||||
const quantity = getResourceQuantity(item, key);
|
||||
return quantity > 0 ? `${quantity}${label}` : "";
|
||||
}
|
||||
|
||||
function getResourceKeyAliases(key: string) {
|
||||
if (key === "level6Ammo") return ["level6Ammo", "armor6Ammo"];
|
||||
if (key === "armor6Ammo") return ["armor6Ammo", "level6Ammo"];
|
||||
return [key];
|
||||
}
|
||||
|
||||
function roundMoney(value: number) {
|
||||
return Math.round(value * 100) / 100;
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import {
|
||||
defaultListingPublishOptions,
|
||||
type ListingPublishOptions,
|
||||
} from "@/api/listingOptions";
|
||||
import type { Listing } from "@/api/listings";
|
||||
|
||||
const fallbackRegionOptions = ["广东", "上海", "江苏", "四川", "北京", "浙江"];
|
||||
|
||||
const coinWanOptions = [
|
||||
1800, 3200, 5800, 9600, 12000, 18000, 26000, 36000, 52000, 68000,
|
||||
];
|
||||
const depositOptions = [60, 80, 100, 120, 160, 200];
|
||||
const secretKdOptions = [1.2, 1.6, 2.1, 2.8, 3.4, 4.2];
|
||||
const onlineWindows = [
|
||||
["09:00", "23:30"],
|
||||
["10:30", "01:00"],
|
||||
["12:00", "24:00"],
|
||||
["18:00", "02:00"],
|
||||
] as const;
|
||||
const resourceQuantityPresets: Record<string, number[]> = {
|
||||
awmAmmo: [0, 20, 48, 80, 120, 180],
|
||||
helmet6: [0, 2, 4, 6, 10, 16],
|
||||
armor6: [0, 1, 3, 5, 8, 12],
|
||||
kit5: [0, 3, 6, 10, 15, 24],
|
||||
level6Ammo: [0, 120, 240, 360, 520, 800],
|
||||
gridCard9: [0, 1, 2, 4, 6, 10],
|
||||
};
|
||||
|
||||
function pick<T>(items: readonly T[], index: number, fallback: T): T {
|
||||
if (!items.length) return fallback;
|
||||
return items[index % items.length] ?? fallback;
|
||||
}
|
||||
|
||||
function pickMany(items: string[], start: number, count: number) {
|
||||
if (!items.length) return [];
|
||||
const fallback = items[0] || "";
|
||||
return Array.from({ length: Math.min(count, items.length) }, (_, idx) =>
|
||||
pick(items, start + idx, fallback)
|
||||
).filter(Boolean);
|
||||
}
|
||||
|
||||
function buildResources(options: ListingPublishOptions, seed: number) {
|
||||
return options.quantity_items.map((item, index) => ({
|
||||
key: item.key,
|
||||
label: item.label,
|
||||
quantity: pick(
|
||||
resourceQuantityPresets[item.key] || [0, 1, 3, 6],
|
||||
seed + index,
|
||||
0
|
||||
),
|
||||
mode: "收费",
|
||||
}));
|
||||
}
|
||||
|
||||
function buildSkinGroups(options: ListingPublishOptions, seed: number) {
|
||||
return options.skin_groups.reduce<Record<string, string[]>>((groups, group, index) => {
|
||||
const count = group.key === "melee" ? 2 : index % 2 === 0 ? 3 : 2;
|
||||
groups[group.key] = pickMany(group.options, seed + index * 2, count);
|
||||
return groups;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function buildScreenshotMap(options: ListingPublishOptions, seed: number) {
|
||||
return options.screenshot_slots.reduce<Record<string, string>>((screenshots, slot, index) => {
|
||||
screenshots[slot.key] = `https://picsum.photos/seed/hfb-${slot.key}-${seed + index}/960/540`;
|
||||
return screenshots;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function flattenSkinGroups(groups: Record<string, string[]>) {
|
||||
return Object.values(groups).flat();
|
||||
}
|
||||
|
||||
function calculateRentDays(coinWan: number) {
|
||||
return coinWan >= 30000 ? 7 : coinWan >= 10000 ? 3 : 1;
|
||||
}
|
||||
|
||||
function calculateDailyLoss(coinWan: number) {
|
||||
return coinWan >= 30000 ? "30M" : coinWan >= 10000 ? "20M" : "10M";
|
||||
}
|
||||
|
||||
function roundMoney(value: number) {
|
||||
return Math.round(value * 100) / 100;
|
||||
}
|
||||
|
||||
function formatHafCoinM(coinWan: number) {
|
||||
const coinM = Math.round((coinWan / 100) * 10) / 10;
|
||||
return `${Number.isInteger(coinM) ? coinM : coinM.toFixed(1)}M`;
|
||||
}
|
||||
|
||||
export function buildFallbackListings(
|
||||
options: ListingPublishOptions = defaultListingPublishOptions
|
||||
): Listing[] {
|
||||
return Array.from({ length: 10 }, (_, index) => {
|
||||
const seed = index + 1;
|
||||
const server = pick(options.server_options, index, "QQ");
|
||||
const loginMethod = pick(options.login_method_options, index + 1, "账号密码");
|
||||
const rank = pick(options.rank_options, index + 3, "钻石");
|
||||
const insurance = pick(options.insurance_options, index + 1, "2*2");
|
||||
const stamina = pick(options.level_options, index + 4, "5级");
|
||||
const load = pick(options.level_options, index + 5, "5级");
|
||||
const faceOwner = pick(options.face_options, index, "是");
|
||||
const coinWan = pick(coinWanOptions, index, 12000);
|
||||
const ratio = 5 + (index % 4);
|
||||
const rentDays = calculateRentDays(coinWan);
|
||||
const finalPrice = roundMoney(coinWan / ratio);
|
||||
const settlementAmount = finalPrice;
|
||||
const dailyPrice = roundMoney(finalPrice / rentDays);
|
||||
const hourlyPrice = Math.max(roundMoney(dailyPrice / 24), 0.01);
|
||||
const deposit = pick(depositOptions, index, 100);
|
||||
const skinGroups = buildSkinGroups(options, seed);
|
||||
const screenshots = buildScreenshotMap(options, seed);
|
||||
const commonRegions = pickMany(
|
||||
options.region_options.length ? options.region_options : fallbackRegionOptions,
|
||||
index * 2,
|
||||
2
|
||||
);
|
||||
const [onlineStart, onlineEnd] = pick(onlineWindows, index, onlineWindows[0]);
|
||||
|
||||
return {
|
||||
id: 9100 + seed,
|
||||
account_id: 0,
|
||||
owner_id: 0,
|
||||
title: `${server} ${rank} ${formatHafCoinM(coinWan)}哈夫币`,
|
||||
description: `${loginMethod}交接，${insurance}保险，体力${stamina}、负重${load}，示例数据按发布表单随机生成。`,
|
||||
game_name: "三角洲行动",
|
||||
server_region: server,
|
||||
login_platform: loginMethod,
|
||||
rank_level: rank,
|
||||
haf_coin_amount: coinWan * 10000,
|
||||
asset_summary: {
|
||||
face_owner: faceOwner,
|
||||
haf_coin_wan: coinWan,
|
||||
total_asset_wan: Math.round(coinWan * (1.08 + (index % 4) * 0.04)),
|
||||
secret_kd: pick(secretKdOptions, index, 1.6),
|
||||
fire_level: 38 + seed * 3,
|
||||
season_insurance: insurance,
|
||||
stamina_level: stamina,
|
||||
load_level: load,
|
||||
daily_loss: calculateDailyLoss(coinWan),
|
||||
ratio,
|
||||
login_method: loginMethod,
|
||||
common_regions: commonRegions,
|
||||
resources: buildResources(options, seed),
|
||||
skins: flattenSkinGroups(skinGroups),
|
||||
skin_groups: skinGroups,
|
||||
online_time: {
|
||||
start: onlineStart,
|
||||
end: onlineEnd,
|
||||
},
|
||||
ban_record: index % 4 === 0 ? "无封禁记录，近期登录稳定" : "",
|
||||
screenshots,
|
||||
deposit_amount: deposit,
|
||||
price: finalPrice,
|
||||
settlement_amount: settlementAmount,
|
||||
rent_days: rentDays,
|
||||
remark:
|
||||
index % 3 === 0
|
||||
? "部分仓库材料请勿使用，下单后会在群聊再次提醒。"
|
||||
: "",
|
||||
},
|
||||
screenshot_urls: Object.values(screenshots),
|
||||
price_hourly: hourlyPrice,
|
||||
price_daily: dailyPrice,
|
||||
price_weekly: Math.round(dailyPrice * 7 * 10) / 10,
|
||||
deposit_amount: deposit,
|
||||
min_rent_hours: coinWan >= 10000 ? 24 : 8,
|
||||
max_rent_hours: coinWan >= 30000 ? 168 : 72,
|
||||
status: "published",
|
||||
review_status: "approved",
|
||||
review_reason: "",
|
||||
published_at: new Date(Date.now() - seed * 18 * 60 * 1000).toISOString(),
|
||||
created_at: new Date(Date.now() - seed * 20 * 60 * 1000).toISOString(),
|
||||
updated_at: new Date(Date.now() - seed * 10 * 60 * 1000).toISOString(),
|
||||
};
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user