优化首页展示列表

frontend/src/views/mobile/MobileListingDetailView.vue

@@ -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;