diff --git a/frontend/src/features/auth/views/MobileProfileView.css b/frontend/src/features/auth/views/MobileProfileView.css
index c27a469f..281439f7 100644
--- a/frontend/src/features/auth/views/MobileProfileView.css
+++ b/frontend/src/features/auth/views/MobileProfileView.css
@@ -882,6 +882,77 @@
min-width: 72px;
}
+.quality-owner-agreement-popup {
+ overflow: hidden;
+}
+
+.quality-owner-agreement-shell {
+ display: grid;
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ height: 100%;
+ background: #fff;
+}
+
+.quality-owner-agreement-header {
+ padding: 18px 46px 12px 16px;
+ border-bottom: 1px solid #eef1f5;
+}
+
+.quality-owner-agreement-header h3 {
+ margin: 0;
+ color: #20242a;
+ font-size: 17px;
+ font-weight: 900;
+}
+
+.quality-owner-agreement-header p {
+ margin: 5px 0 0;
+ color: #858c96;
+ font-size: 11px;
+}
+
+.quality-owner-agreement-scroll {
+ overflow-y: auto;
+ padding: 12px 16px 16px;
+ overscroll-behavior: contain;
+}
+
+.quality-owner-agreement-actions {
+ display: grid;
+ gap: 10px;
+ padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
+ border-top: 1px solid #eef1f5;
+ background: #fff;
+}
+
+.quality-owner-agreement-actions :deep(.van-checkbox__label) {
+ color: #7c2d12;
+ font-size: 11px;
+ font-weight: 700;
+ line-height: 1.5;
+}
+
+.quality-owner-agreement-submit {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 12px;
+}
+
+.quality-owner-agreement-submit > span {
+ color: #c2410c;
+ font-size: 11px;
+ font-weight: 800;
+}
+
+.quality-owner-agreement-submit > span.is-ready {
+ color: #15803d;
+}
+
+.quality-owner-agreement-submit :deep(.van-button) {
+ min-width: 132px;
+}
+
/* ========== 响应式适配 ========== */
@media (min-width: 520px) {
.mobile-profile-shell {
diff --git a/frontend/src/features/auth/views/MobileProfileView.vue b/frontend/src/features/auth/views/MobileProfileView.vue
index 36feac7f..a2806913 100644
--- a/frontend/src/features/auth/views/MobileProfileView.vue
+++ b/frontend/src/features/auth/views/MobileProfileView.vue
@@ -26,6 +26,8 @@ import {
startQualityOwnerPayment,
type QualityOwnerStatus,
} from '@/features/quality-owner/api/qualityOwner'
+import QualityOwnerAgreementContent from '@/features/quality-owner/components/QualityOwnerAgreementContent.vue'
+import { useQualityOwnerAgreement } from '@/features/quality-owner/composables/useQualityOwnerAgreement'
import type { PaymentPayWay } from '@/features/orders/api/orders'
import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
@@ -50,6 +52,15 @@ const qualityOwnerStatus = ref(null)
const qualityOwnerLoading = ref(false)
const qualityOwnerOnlineLoading = ref(false)
const qualityOwnerCancelling = ref(false)
+const {
+ visible: qualityOwnerAgreementVisible,
+ accepted: qualityOwnerAgreementAccepted,
+ remainingSeconds: qualityOwnerAgreementRemainingSeconds,
+ canConfirm: qualityOwnerAgreementCanConfirm,
+ open: openQualityOwnerAgreement,
+ close: closeQualityOwnerAgreement,
+ confirm: confirmQualityOwnerAgreement,
+} = useQualityOwnerAgreement()
const qualityOwnerPayWaySelect = useMobilePayWaySelect()
const qualityOwnerCashier = useMobilePaymentCashier({
queryPayment: () => queryQualityOwnerPayment(),
@@ -164,22 +175,13 @@ async function loadQualityOwnerStatus() {
}
}
-async function handleActivateQualityOwner() {
+function handleActivateQualityOwner() {
const status = qualityOwnerStatus.value
if (!status || status.active) return
- try {
- await showDialog({
- title: '开通优质号主',
- message: `确认从可用余额中扣除 ¥${formatCent(
- status.required_deposit_cent
- )} 作为保证金？取消资格时会退回余额。`,
- showCancelButton: true,
- confirmButtonText: '确认缴纳',
- cancelButtonText: '取消',
- })
- } catch {
- return
- }
+ openQualityOwnerAgreement(status, activateQualityOwnerByBalance)
+}
+
+async function activateQualityOwnerByBalance() {
qualityOwnerLoading.value = true
try {
qualityOwnerStatus.value = await activateQualityOwner()
@@ -193,7 +195,13 @@ async function handleActivateQualityOwner() {
}
}
-async function handleOnlineQualityOwnerPayment() {
+function handleOnlineQualityOwnerPayment() {
+ const status = qualityOwnerStatus.value
+ if (!status || status.active) return
+ openQualityOwnerAgreement(status, continueOnlineQualityOwnerPayment)
+}
+
+async function continueOnlineQualityOwnerPayment() {
const payWay = await qualityOwnerPayWaySelect.select()
if (!payWay) return
qualityOwnerOnlineLoading.value = true
@@ -760,6 +768,51 @@ function resolveAvatarURL(url: string | undefined | null) {
@refresh="qualityOwnerCashier.refreshPaymentStatus(false)"
/>
+
+
(null)
+const {
+ visible: qualityOwnerAgreementVisible,
+ accepted: qualityOwnerAgreementAccepted,
+ remainingSeconds: qualityOwnerAgreementRemainingSeconds,
+ canConfirm: qualityOwnerAgreementCanConfirm,
+ open: openQualityOwnerAgreement,
+ close: closeQualityOwnerAgreement,
+ confirm: confirmQualityOwnerAgreement,
+} = useQualityOwnerAgreement()
const uploadingAvatar = ref(false)
const avatarFileInput = ref(null)
const form = reactive({
@@ -101,23 +112,13 @@ async function loadQualityOwnerStatus() {
}
}
-async function handleActivateQualityOwner() {
+function handleActivateQualityOwner() {
const status = qualityOwnerStatus.value
if (!status || status.active) return
- const deposit = formatCent(status.required_deposit_cent)
- try {
- await ElMessageBox.confirm(
- `确认从可用余额中扣除 ¥${deposit} 作为优质号主保证金？保证金会冻结，取消优质号主资格时退回。`,
- '开通优质号主',
- {
- type: 'warning',
- confirmButtonText: '确认缴纳',
- cancelButtonText: '取消',
- }
- )
- } catch {
- return
- }
+ openQualityOwnerAgreement(status, activateQualityOwnerByBalance)
+}
+
+async function activateQualityOwnerByBalance() {
qualityOwnerLoading.value = true
try {
qualityOwnerStatus.value = await activateQualityOwner()
@@ -131,6 +132,12 @@ async function handleActivateQualityOwner() {
}
function openQualityOwnerOnlinePayment() {
+ const status = qualityOwnerStatus.value
+ if (!status || status.active) return
+ openQualityOwnerAgreement(status, continueQualityOwnerOnlinePayment)
+}
+
+function continueQualityOwnerOnlinePayment() {
qualityOwnerPayWayVisible.value = true
}
@@ -507,7 +514,11 @@ async function savePassword() {
>
余额支付开通
-
+
微信 / 支付宝支付开通
@@ -527,6 +538,43 @@ async function savePassword() {
+
+
+
+
+
+ 本人已详细阅读并充分理解本协议全部内容，同意遵守上述条款
+
+
+ 还需阅读 {{ qualityOwnerAgreementRemainingSeconds }} 秒
+
+ 已完成强制阅读
+
+
+
:first-child {
+ max-height: 58vh;
+ overflow-y: auto;
+ padding: 4px 18px 16px 4px;
+}
+
+.quality-owner-agreement-consent {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ padding: 12px 14px;
+ border: 1px solid #fed7aa;
+ border-radius: 8px;
+ background: #fff7ed;
+}
+
+.quality-owner-agreement-consent :deep(.el-checkbox__label) {
+ color: #7c2d12;
+ font-size: 13px;
+ font-weight: 700;
+}
+
+.quality-owner-agreement-consent > span {
+ flex-shrink: 0;
+ color: #c2410c;
+ font-size: 12px;
+ font-weight: 800;
+}
+
+.quality-owner-agreement-consent > span.is-ready {
+ color: #15803d;
+}
+
.quality-owner-pay-dialog-body {
display: grid;
gap: 14px;
diff --git a/frontend/src/features/quality-owner/api/qualityOwner.ts b/frontend/src/features/quality-owner/api/qualityOwner.ts
index 8c7b62b5..364861c9 100644
--- a/frontend/src/features/quality-owner/api/qualityOwner.ts
+++ b/frontend/src/features/quality-owner/api/qualityOwner.ts
@@ -15,11 +15,19 @@ export interface QualityOwnerStatus {
required_deposit_cent: number
insurance_fee_bps: number
premium_insurance_fee_bps: number
+ agreement_title: string
+ agreement_content: string
+ agreement_read_seconds: number
}
export async function fetchQualityOwnerStatus() {
const { data } = await apiClient.get>('/quality-owner/status')
- return data.data
+ return {
+ ...data.data,
+ agreement_title: data.data.agreement_title || '优质号主服务协议',
+ agreement_content: data.data.agreement_content || '',
+ agreement_read_seconds: Math.max(15, Number(data.data.agreement_read_seconds || 15)),
+ }
}
export async function activateQualityOwner() {
diff --git a/frontend/src/features/quality-owner/components/QualityOwnerAgreementContent.vue b/frontend/src/features/quality-owner/components/QualityOwnerAgreementContent.vue
new file mode 100644
index 00000000..8ca5341d
--- /dev/null
+++ b/frontend/src/features/quality-owner/components/QualityOwnerAgreementContent.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/features/quality-owner/composables/__tests__/useQualityOwnerAgreement.spec.ts b/frontend/src/features/quality-owner/composables/__tests__/useQualityOwnerAgreement.spec.ts
new file mode 100644
index 00000000..15facff0
--- /dev/null
+++ b/frontend/src/features/quality-owner/composables/__tests__/useQualityOwnerAgreement.spec.ts
@@ -0,0 +1,69 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import type { QualityOwnerStatus } from '@/features/quality-owner/api/qualityOwner'
+import { useQualityOwnerAgreement } from '../useQualityOwnerAgreement'
+
+function status(readSeconds = 15): QualityOwnerStatus {
+ return {
+ user_id: 1,
+ active: false,
+ status: 'none',
+ can_cancel: false,
+ active_premium_listing_count: 0,
+ deposit_amount_cent: 0,
+ deposit_source: '',
+ available_balance_cent: 20000,
+ required_deposit_cent: 20000,
+ insurance_fee_bps: 800,
+ premium_insurance_fee_bps: 400,
+ agreement_title: '优质号主服务协议',
+ agreement_content: '协议正文',
+ agreement_read_seconds: readSeconds,
+ }
+}
+
+afterEach(() => {
+ vi.useRealTimers()
+})
+
+describe('useQualityOwnerAgreement', () => {
+ it('阅读满 15 秒且勾选后才能确认', async () => {
+ vi.useFakeTimers()
+ vi.setSystemTime(new Date('2026-11-05T00:00:00Z'))
+ const action = vi.fn()
+ const agreement = useQualityOwnerAgreement()
+
+ agreement.open(status(), action)
+ agreement.accepted.value = true
+ expect(agreement.canConfirm.value).toBe(false)
+
+ vi.advanceTimersByTime(14_999)
+ expect(agreement.remainingSeconds.value).toBe(1)
+ expect(agreement.canConfirm.value).toBe(false)
+
+ vi.advanceTimersByTime(1)
+ expect(agreement.remainingSeconds.value).toBe(0)
+ expect(agreement.canConfirm.value).toBe(true)
+
+ await agreement.confirm()
+ expect(action).toHaveBeenCalledOnce()
+ expect(agreement.visible.value).toBe(false)
+ })
+
+ it('关闭后重新打开会重新计时并清除同意状态', () => {
+ vi.useFakeTimers()
+ vi.setSystemTime(new Date('2026-11-05T00:00:00Z'))
+ const agreement = useQualityOwnerAgreement()
+
+ agreement.open(status(20), vi.fn())
+ agreement.accepted.value = true
+ vi.advanceTimersByTime(5000)
+ agreement.close()
+ agreement.open(status(), vi.fn())
+
+ expect(agreement.remainingSeconds.value).toBe(15)
+ expect(agreement.accepted.value).toBe(false)
+ expect(agreement.canConfirm.value).toBe(false)
+ agreement.close()
+ })
+})
diff --git a/frontend/src/features/quality-owner/composables/useQualityOwnerAgreement.ts b/frontend/src/features/quality-owner/composables/useQualityOwnerAgreement.ts
new file mode 100644
index 00000000..3cf4a232
--- /dev/null
+++ b/frontend/src/features/quality-owner/composables/useQualityOwnerAgreement.ts
@@ -0,0 +1,72 @@
+import { computed, getCurrentInstance, onUnmounted, ref } from 'vue'
+
+import type { QualityOwnerStatus } from '@/features/quality-owner/api/qualityOwner'
+
+type AgreementAction = () => void | Promise
+
+export function useQualityOwnerAgreement() {
+ const visible = ref(false)
+ const accepted = ref(false)
+ const remainingSeconds = ref(0)
+ const totalSeconds = ref(15)
+ let pendingAction: AgreementAction | null = null
+ let startedAt = 0
+ let timer: ReturnType | null = null
+
+ const canConfirm = computed(() => visible.value && accepted.value && remainingSeconds.value <= 0)
+
+ function stopTimer() {
+ if (timer) {
+ clearInterval(timer)
+ timer = null
+ }
+ }
+
+ function updateRemaining() {
+ const elapsed = Math.floor((Date.now() - startedAt) / 1000)
+ remainingSeconds.value = Math.max(totalSeconds.value - elapsed, 0)
+ if (remainingSeconds.value <= 0) stopTimer()
+ }
+
+ function open(status: QualityOwnerStatus, action: AgreementAction) {
+ stopTimer()
+ totalSeconds.value = Math.max(15, Math.floor(Number(status.agreement_read_seconds || 15)))
+ remainingSeconds.value = totalSeconds.value
+ startedAt = Date.now()
+ accepted.value = false
+ pendingAction = action
+ visible.value = true
+ timer = setInterval(updateRemaining, 250)
+ }
+
+ function close() {
+ stopTimer()
+ visible.value = false
+ accepted.value = false
+ remainingSeconds.value = 0
+ pendingAction = null
+ }
+
+ async function confirm() {
+ if (!canConfirm.value) return false
+ const action = pendingAction
+ close()
+ await action?.()
+ return true
+ }
+
+ if (getCurrentInstance()) {
+ onUnmounted(stopTimer)
+ }
+
+ return {
+ visible,
+ accepted,
+ remainingSeconds,
+ totalSeconds,
+ canConfirm,
+ open,
+ close,
+ confirm,
+ }
+}