优化弹窗和后台设置字体

frontend/src/features/listings/views/MobileListingDetailView.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { showToast, showDialog } from "vant";
 
 import { fetchListing, type Listing } from "@/features/listings/api/listings";
-import { createOrder } from "@/features/orders/api/orders";
+import { createOrder, fetchOrderAgreements, type OrderAgreements } from "@/features/orders/api/orders";
 import { useSessionStore } from "@/stores/session";
 import { formatMoney } from "@/shared/utils/money";
 import {
@@ -30,7 +30,24 @@ const router = useRouter();
 const session = useSessionStore();
 const loading = ref(false);
 const ordering = ref(false);
+const agreementsLoading = ref(false);
+const agreementVisible = ref(false);
 const listing = ref<Listing | null>(null);
+const agreements = ref<OrderAgreements | null>(null);
+const virtualAgreementRead = ref(false);
+const renterAgreementRead = ref(false);
+const virtualAgreementChecked = ref(false);
+const renterAgreementChecked = ref(false);
+const virtualAgreementRef = ref<HTMLElement | null>(null);
+const renterAgreementRef = ref<HTMLElement | null>(null);
+
+const canCreateOrderAfterAgreement = computed(
+  () =>
+    virtualAgreementRead.value &&
+    renterAgreementRead.value &&
+    virtualAgreementChecked.value &&
+    renterAgreementChecked.value,
+);
 
 onMounted(async () => {
   loading.value = true;
@@ -145,6 +162,39 @@ async function handleCreateOrder() {
     return;
   }
 
+  await openAgreementBeforeOrder();
+}
+
+async function openAgreementBeforeOrder() {
+  agreementsLoading.value = true;
+  try {
+    agreements.value = await fetchOrderAgreements();
+    virtualAgreementRead.value = false;
+    renterAgreementRead.value = false;
+    virtualAgreementChecked.value = false;
+    renterAgreementChecked.value = false;
+    agreementVisible.value = true;
+    await nextTick();
+    updateAgreementReadState("virtual");
+    updateAgreementReadState("renter");
+  } catch (error) {
+    showToast({ message: readError(error, "协议加载失败"), icon: "cross" });
+  } finally {
+    agreementsLoading.value = false;
+  }
+}
+
+async function handleConfirmAgreementAndCreateOrder() {
+  if (!canCreateOrderAfterAgreement.value) {
+    showToast("请先阅读并勾选两份协议");
+    return;
+  }
+  agreementVisible.value = false;
+  await submitOrder();
+}
+
+async function submitOrder() {
+  if (!listing.value) return;
   ordering.value = true;
   try {
     await createOrder(listing.value.id);
@@ -157,6 +207,21 @@ async function handleCreateOrder() {
   }
 }
 
+function handleAgreementScroll(type: "virtual" | "renter") {
+  updateAgreementReadState(type);
+}
+
+function updateAgreementReadState(type: "virtual" | "renter") {
+  const el = type === "virtual" ? virtualAgreementRef.value : renterAgreementRef.value;
+  if (!el) return;
+  const read = el.scrollTop + el.clientHeight >= el.scrollHeight - 8;
+  if (type === "virtual") {
+    virtualAgreementRead.value = read;
+  } else {
+    renterAgreementRead.value = read;
+  }
+}
+
 function readError(error: unknown, fallback: string) {
   if (typeof error === "object" && error && "response" in error) {
     const response = (error as { response?: { data?: { message?: string } } })
@@ -334,7 +399,7 @@ function isNavActive(path: string) {
           type="primary"
           round
           class="order-btn"
-          :loading="ordering"
+          :loading="ordering || agreementsLoading"
           :disabled="listing.in_transaction"
           loading-text="下单中..."
           @click="handleCreateOrder"
@@ -342,6 +407,52 @@ function isNavActive(path: string) {
           {{ listing.in_transaction ? "交易中" : "立即下单" }}
         </van-button>
       </div>
+
+      <van-popup v-model:show="agreementVisible" round closeable position="bottom" lock-scroll class="agreement-popup">
+        <div v-if="agreements" class="agreement-popup-body">
+          <h3>下单协议确认</h3>
+          <p>请完整阅读并勾选以下两份协议后继续下单。</p>
+          <section class="agreement-panel">
+            <strong>{{ agreements.virtual_asset_purchase.title }}</strong>
+            <div
+              ref="virtualAgreementRef"
+              class="agreement-content"
+              @scroll="handleAgreementScroll('virtual')"
+            >
+              {{ agreements.virtual_asset_purchase.content }}
+            </div>
+            <van-checkbox v-model="virtualAgreementChecked" :disabled="!virtualAgreementRead" icon-size="18px">
+              我已阅读并同意《{{ agreements.virtual_asset_purchase.title }}》
+            </van-checkbox>
+            <span v-if="!virtualAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
+          </section>
+          <section class="agreement-panel">
+            <strong>{{ agreements.renter_agreement.title }}</strong>
+            <div
+              ref="renterAgreementRef"
+              class="agreement-content"
+              @scroll="handleAgreementScroll('renter')"
+            >
+              {{ agreements.renter_agreement.content }}
+            </div>
+            <van-checkbox v-model="renterAgreementChecked" :disabled="!renterAgreementRead" icon-size="18px">
+              我已阅读并同意《{{ agreements.renter_agreement.title }}》
+            </van-checkbox>
+            <span v-if="!renterAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
+          </section>
+          <van-button
+            block
+            round
+            type="primary"
+            class="agreement-confirm-btn"
+            :loading="ordering"
+            :disabled="!canCreateOrderAfterAgreement"
+            @click="handleConfirmAgreementAndCreateOrder"
+          >
+            同意协议并下单
+          </van-button>
+        </div>
+      </van-popup>
     </template>
 
     <!-- 空状态 -->
@@ -721,6 +832,69 @@ function isNavActive(path: string) {
   border: none !important;
 }
 
+.agreement-popup {
+  max-height: 92vh;
+}
+
+.agreement-popup-body {
+  display: grid;
+  gap: 12px;
+  max-height: 92vh;
+  overflow: auto;
+  padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
+}
+
+.agreement-popup-body h3 {
+  margin: 0;
+  color: #17233d;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.agreement-popup-body > p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.agreement-panel {
+  display: grid;
+  gap: 8px;
+}
+
+.agreement-panel > strong {
+  color: #17233d;
+  font-size: 14px;
+}
+
+.agreement-content {
+  height: 190px;
+  overflow: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
+  padding: 12px;
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.agreement-read-hint {
+  color: #ff6a00;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.agreement-confirm-btn {
+  margin-top: 4px;
+  background: #ff6a00 !important;
+  border: none !important;
+  font-weight: 800;
+}
+
 /* ========== 空状态 ========== */
 .empty-state {
   display: flex;