优化租号的详情界面

frontend/src/views/mobile/MobileListingDetailView.vue

@@ -12,14 +12,15 @@ import {
   formatRatio,
   getCoinWan,
   getDailyLoss,
+  getListingConsumablePrice,
   getListingChips,
   getListingDisplayPrice,
+  getListingRentPrice,
   getListingResources,
   getListingSubtitle,
   getListingTitle,
   getLoginMethod,
   getServerRegion,
-  readAssetNumber,
   readAssetString,
 } from "@/utils/listingDisplay";
 
@@ -46,14 +47,27 @@ const orderTotal = computed(() => {
   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 totalAssetWan = readAssetNumber(listing.value, "total_asset_wan");
+  const dailyLoss = getDailyLoss(listing.value);
   return [
     { label: "纯币", value: formatHafCoinM(getCoinWan(listing.value)), tone: "coin" },
     {
-      label: "总资产",
-      value: totalAssetWan > 0 ? formatHafCoinM(totalAssetWan) : "--",
+      label: "日损耗",
+      value: dailyLoss ? `${dailyLoss}/天` : "--",
       tone: "coin",
     },
     { label: "价格", value: `¥${getListingDisplayPrice(listing.value)}`, tone: "price" },
@@ -215,14 +229,6 @@ function isNavActive(path: string) {
           <van-tag v-if="listing.rank_level" plain size="medium">{{
             listing.rank_level
           }}</van-tag>
-          <van-tag
-            v-if="getDailyLoss(listing)"
-            color="#fff7ed"
-            text-color="#ea580c"
-            size="medium"
-          >
-            损耗 {{ getDailyLoss(listing) }}
-          </van-tag>
         </div>
         <h2 class="detail-title">{{ getListingTitle(listing) }}</h2>
         <p class="detail-desc">{{ getListingSubtitle(listing) }}</p>
@@ -271,7 +277,12 @@ function isNavActive(path: string) {
           >
             <span>{{ resource.label }}</span>
             <strong>{{ resource.quantity }}</strong>
-            <em>{{ resource.mode }}</em>
+            <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>
@@ -312,6 +323,10 @@ function isNavActive(path: string) {
             <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"
@@ -580,13 +595,28 @@ function isNavActive(path: string) {
 }
 
 .resource-pill em {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
   grid-column: 1 / -1;
-  color: #ff7900;
   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;
 }
@@ -669,6 +699,16 @@ function isNavActive(path: string) {
   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;