优化点击后的详情

2026-05-22 21:19:10 +08:00
parent 52d6a40fd3
commit 13bb77f89b
2 changed files with 553 additions and 1 deletions
@@ -0,0 +1,552 @@
+<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";
+
+const route = useRoute();
+const router = useRouter();
+const session = useSessionStore();
+const loading = ref(false);
+const ordering = ref(false);
+const rentHours = ref(1);
+const listing = ref<Listing | null>(null);
+
+onMounted(async () => {
+  loading.value = true;
+  try {
+    listing.value = await fetchListing(String(route.params.id));
+  } catch {
+    showToast("加载失败");
+  } finally {
+    loading.value = false;
+  }
+});
+
+/* 预计租金 */
+const totalRent = computed(() => {
+  if (!listing.value) return "0.00";
+  return (listing.value.price_hourly * rentHours.value).toFixed(2);
+});
+
+/* 下单 */
+async function handleCreateOrder() {
+  if (!listing.value) return;
+
+  if (!session.token) {
+    showDialog({
+      title: "请先登录",
+      message: "下单需要登录账号，是否前往登录？",
+      confirmButtonText: "去登录",
+      cancelButtonText: "取消",
+      showCancelButton: true,
+    }).then(() => {
+      router.push("/m/login");
+    });
+    return;
+  }
+
+  ordering.value = true;
+  try {
+    const order = await createOrder(listing.value.id, rentHours.value);
+    showToast("订单已创建，账号已锁定");
+    await router.push(`/m/orders`);
+  } catch (error) {
+    showToast(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 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="listing.screenshot_urls?.[0]"
+          :src="listing.screenshot_urls[0]"
+          :alt="listing.title"
+          class="cover-img"
+        />
+        <div v-else class="cover-placeholder">
+          <van-icon name="photo-o" :size="40" color="#ccc" />
+          <span>暂无截图</span>
+        </div>
+        <!-- 截图指示器 -->
+        <div
+          v-if="(listing.screenshot_urls?.length ?? 0) > 1"
+          class="cover-count"
+        >
+          {{ listing.screenshot_urls?.length }}张
+        </div>
+      </div>
+
+      <!-- 标题信息 -->
+      <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
+          }}</van-tag>
+          <van-tag v-if="listing.rank_level" plain size="medium">{{
+            listing.rank_level
+          }}</van-tag>
+        </div>
+        <h2 class="detail-title">{{ listing.title }}</h2>
+        <p class="detail-desc">
+          {{ listing.description || "号主暂未填写详细说明。" }}
+        </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>
+      </div>
+
+      <!-- 租期信息 -->
+      <div class="info-card">
+        <div class="info-line">
+          <span class="info-label">最短租期</span>
+          <span class="info-text">{{ listing.min_rent_hours }}小时</span>
+        </div>
+        <div class="info-line">
+          <span class="info-label">最长租期</span>
+          <span class="info-text">{{ listing.max_rent_hours }}小时</span>
+        </div>
+        <div class="info-line">
+          <span class="info-label">状态</span>
+          <span class="info-text">{{ listing.status }}</span>
+        </div>
+      </div>
+
+      <!-- 截图列表 -->
+      <div v-if="listing.screenshot_urls?.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"
+          />
+        </div>
+      </div>
+
+      <!-- 留白给底部下单栏 -->
+      <div class="bottom-spacer"></div>
+
+      <!-- 底部下单栏（固定） -->
+      <div class="order-bar">
+        <div class="order-bar-left">
+          <div class="rent-control">
+            <button
+              class="rent-btn"
+              :disabled="rentHours <= listing.min_rent_hours"
+              @click="rentHours--"
+            >
+              −
+            </button>
+            <span class="rent-value">{{ rentHours }}小时</span>
+            <button
+              class="rent-btn"
+              :disabled="rentHours >= listing.max_rent_hours"
+              @click="rentHours++"
+            >
+              +
+            </button>
+          </div>
+          <div class="order-price">
+            <span class="price-label">租金</span>
+            <span class="price-amount">¥{{ totalRent }}</span>
+          </div>
+        </div>
+        <van-button
+          type="primary"
+          round
+          class="order-btn"
+          :loading="ordering"
+          loading-text="下单中..."
+          @click="handleCreateOrder"
+        >
+          立即下单
+        </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: 80px;
+}
+
+/* ========== 顶部导航 ========== */
+.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: 17px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+
+.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;
+  font-size: 15px;
+  color: #1a1a1a;
+}
+
+.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;
+}
+
+.screenshot-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.screenshot-thumb {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+/* ========== 底部留白 ========== */
+.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;
+  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;
+}
+
+.rent-control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rent-btn {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #f5f7fa;
+  color: #333;
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.rent-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.rent-value {
+  font-size: 14px;
+  font-weight: 700;
+  min-width: 48px;
+  text-align: center;
+}
+
+.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-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>