优化弹窗和后台设置字体
This commit is contained in:
yml2213
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { computed, nextTick, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
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 { roundMoney, formatMoney } from "@/shared/utils/money";
|
||||
import {
|
||||
@@ -33,6 +33,23 @@ const router = useRouter();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const ordering = ref(false);
|
||||
const agreementsLoading = ref(false);
|
||||
const agreementVisible = ref(false);
|
||||
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,
|
||||
);
|
||||
const listing = ref<Listing | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -137,6 +154,61 @@ async function handleCreateOrder() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (session.realnameStatus !== "verified") {
|
||||
try {
|
||||
await session.loadMe();
|
||||
} catch {
|
||||
// 登录态失效时由全局请求拦截处理。
|
||||
}
|
||||
}
|
||||
|
||||
if (session.realnameStatus !== "verified") {
|
||||
try {
|
||||
await ElMessageBox.confirm("租号下单前需要完成实名认证。", "请先实名认证", {
|
||||
confirmButtonText: "去认证",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
});
|
||||
await router.push({ path: "/realname", query: { redirect: route.fullPath } });
|
||||
} catch {
|
||||
// 用户取消认证时停留在当前页面。
|
||||
}
|
||||
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) {
|
||||
ElMessage.error(readError(error, "协议加载失败"));
|
||||
} finally {
|
||||
agreementsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleConfirmAgreementAndCreateOrder() {
|
||||
if (!canCreateOrderAfterAgreement.value) {
|
||||
ElMessage.warning("请先阅读并勾选两份协议");
|
||||
return;
|
||||
}
|
||||
agreementVisible.value = false;
|
||||
await submitOrder();
|
||||
}
|
||||
|
||||
async function submitOrder() {
|
||||
if (!listing.value) return;
|
||||
ordering.value = true;
|
||||
try {
|
||||
const order = await createOrder(listing.value.id);
|
||||
@@ -149,6 +221,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 } } })
|
||||
@@ -158,6 +245,43 @@ function readError(error: unknown, fallback: string) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
// 手动锁定/解锁背景滚动
|
||||
watch(agreementVisible, (visible) => {
|
||||
// 只锁定 .pc-main 容器，不影响 body 和 sticky 导航栏
|
||||
const pcMain = document.querySelector('.pc-main') as HTMLElement;
|
||||
if (!pcMain) return;
|
||||
|
||||
if (visible) {
|
||||
// 保存当前滚动位置
|
||||
const scrollTop = pcMain.scrollTop || 0;
|
||||
|
||||
// 锁定主容器滚动
|
||||
pcMain.style.overflow = 'hidden';
|
||||
pcMain.style.position = 'fixed';
|
||||
pcMain.style.top = `-${scrollTop}px`;
|
||||
pcMain.style.left = '0';
|
||||
pcMain.style.right = '0';
|
||||
pcMain.style.width = '100%';
|
||||
|
||||
// 保存滚动位置供恢复使用
|
||||
pcMain.dataset.scrollTop = String(scrollTop);
|
||||
} else {
|
||||
// 恢复主容器滚动
|
||||
const scrollTop = parseInt(pcMain.dataset.scrollTop || '0', 10);
|
||||
|
||||
pcMain.style.overflow = '';
|
||||
pcMain.style.position = '';
|
||||
pcMain.style.top = '';
|
||||
pcMain.style.left = '';
|
||||
pcMain.style.right = '';
|
||||
pcMain.style.width = '';
|
||||
|
||||
// 恢复滚动位置
|
||||
pcMain.scrollTop = scrollTop;
|
||||
delete pcMain.dataset.scrollTop;
|
||||
}
|
||||
});
|
||||
|
||||
function listingPrice(item: Listing) {
|
||||
return formatMoney(getListingDisplayPrice(item));
|
||||
}
|
||||
@@ -311,7 +435,7 @@ function listingPrice(item: Listing) {
|
||||
<el-button
|
||||
type="warning"
|
||||
size="large"
|
||||
:loading="ordering"
|
||||
:loading="ordering || agreementsLoading"
|
||||
:disabled="listing.in_transaction"
|
||||
class="full-control"
|
||||
@click="handleCreateOrder"
|
||||
@@ -321,6 +445,59 @@ function listingPrice(item: Listing) {
|
||||
</el-form>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="agreementVisible"
|
||||
title="下单协议确认"
|
||||
width="860px"
|
||||
class="order-agreement-dialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div v-if="agreements" class="agreement-dialog-body">
|
||||
<p class="agreement-tip">请完整阅读并勾选以下两份协议后继续下单。</p>
|
||||
<div class="agreement-grid">
|
||||
<section class="agreement-panel">
|
||||
<h3>{{ agreements.virtual_asset_purchase.title }}</h3>
|
||||
<div
|
||||
ref="virtualAgreementRef"
|
||||
class="agreement-content"
|
||||
@scroll="handleAgreementScroll('virtual')"
|
||||
>
|
||||
{{ agreements.virtual_asset_purchase.content }}
|
||||
</div>
|
||||
<el-checkbox v-model="virtualAgreementChecked" :disabled="!virtualAgreementRead">
|
||||
我已阅读并同意《{{ agreements.virtual_asset_purchase.title }}》
|
||||
</el-checkbox>
|
||||
<span v-if="!virtualAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
|
||||
</section>
|
||||
<section class="agreement-panel">
|
||||
<h3>{{ agreements.renter_agreement.title }}</h3>
|
||||
<div
|
||||
ref="renterAgreementRef"
|
||||
class="agreement-content"
|
||||
@scroll="handleAgreementScroll('renter')"
|
||||
>
|
||||
{{ agreements.renter_agreement.content }}
|
||||
</div>
|
||||
<el-checkbox v-model="renterAgreementChecked" :disabled="!renterAgreementRead">
|
||||
我已阅读并同意《{{ agreements.renter_agreement.title }}》
|
||||
</el-checkbox>
|
||||
<span v-if="!renterAgreementRead" class="agreement-read-hint">请下拉阅读至底部</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="agreementVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="ordering"
|
||||
:disabled="!canCreateOrderAfterAgreement"
|
||||
@click="handleConfirmAgreementAndCreateOrder"
|
||||
>
|
||||
同意协议并下单
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -713,6 +890,57 @@ function listingPrice(item: Listing) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.agreement-dialog-body {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agreement-tip {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.agreement-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agreement-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agreement-panel h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.agreement-content {
|
||||
height: 260px;
|
||||
overflow: auto;
|
||||
border: 1px solid #d8dee9;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
color: #1f2937;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.75;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.agreement-read-hint {
|
||||
color: #f97316;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.pc-detail-layout,
|
||||
.detail-screenshot-grid {
|
||||
@@ -746,5 +974,9 @@ function listingPrice(item: Listing) {
|
||||
.detail-resource-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.agreement-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user