feat(quality-owner): 增加开通协议与强制阅读

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 {

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<QualityOwnerStatus | null>(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)"
     />
 
+    <van-popup
+      v-model:show="qualityOwnerAgreementVisible"
+      position="bottom"
+      round
+      closeable
+      :close-on-click-overlay="false"
+      class="quality-owner-agreement-popup"
+      :style="{ height: '86%' }"
+      @closed="closeQualityOwnerAgreement"
+    >
+      <div class="quality-owner-agreement-shell">
+        <header class="quality-owner-agreement-header">
+          <h3>{{ qualityOwnerStatus?.agreement_title || '优质号主服务协议' }}</h3>
+          <p>请完整阅读后勾选同意并继续开通</p>
+        </header>
+        <div class="quality-owner-agreement-scroll">
+          <QualityOwnerAgreementContent :content="qualityOwnerStatus?.agreement_content || ''" />
+        </div>
+        <footer class="quality-owner-agreement-actions">
+          <van-checkbox v-model="qualityOwnerAgreementAccepted" icon-size="18px">
+            本人已详细阅读并充分理解本协议全部内容，同意遵守上述条款
+          </van-checkbox>
+          <div class="quality-owner-agreement-submit">
+            <span v-if="qualityOwnerAgreementRemainingSeconds > 0">
+              还需阅读 {{ qualityOwnerAgreementRemainingSeconds }} 秒
+            </span>
+            <span v-else class="is-ready">已完成强制阅读</span>
+            <van-button
+              round
+              type="primary"
+              color="#7c3aed"
+              :disabled="!qualityOwnerAgreementCanConfirm"
+              @click="confirmQualityOwnerAgreement"
+            >
+              {{
+                qualityOwnerAgreementRemainingSeconds > 0
+                  ? `还需阅读 ${qualityOwnerAgreementRemainingSeconds} 秒`
+                  : '同意并继续'
+              }}
+            </van-button>
+          </div>
+        </footer>
+      </div>
+    </van-popup>
+
     <!-- 账单明细 Popup -->
     <van-popup
       v-model:show="showLedgers"

frontend/src/features/auth/views/ProfileView.vue

@@ -29,6 +29,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 { formatCent } from '@/shared/utils/money'
 import type { PaymentPayWay } from '@/features/orders/api/orders'
 import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
@@ -42,6 +44,15 @@ const qualityOwnerOnlineLoading = ref(false)
 const qualityOwnerCancelling = ref(false)
 const qualityOwnerPayWayVisible = ref(false)
 const qualityOwnerStatus = ref<QualityOwnerStatus | null>(null)
+const {
+  visible: qualityOwnerAgreementVisible,
+  accepted: qualityOwnerAgreementAccepted,
+  remainingSeconds: qualityOwnerAgreementRemainingSeconds,
+  canConfirm: qualityOwnerAgreementCanConfirm,
+  open: openQualityOwnerAgreement,
+  close: closeQualityOwnerAgreement,
+  confirm: confirmQualityOwnerAgreement,
+} = useQualityOwnerAgreement()
 const uploadingAvatar = ref(false)
 const avatarFileInput = ref<HTMLInputElement | null>(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() {
           >
             余额支付开通
           </el-button>
-          <el-button :loading="qualityOwnerOnlineLoading" @click="openQualityOwnerOnlinePayment">
+          <el-button
+            :loading="qualityOwnerOnlineLoading"
+            :disabled="!qualityOwnerStatus"
+            @click="openQualityOwnerOnlinePayment"
+          >
             微信 / 支付宝支付开通
           </el-button>
         </div>
@@ -527,6 +538,43 @@ async function savePassword() {
 
     <PayWaySelectDialog v-model="qualityOwnerPayWayVisible" @choose="chooseQualityOwnerPayWay" />
 
+    <el-dialog
+      v-model="qualityOwnerAgreementVisible"
+      :title="qualityOwnerStatus?.agreement_title || '优质号主服务协议'"
+      width="760px"
+      append-to-body
+      :close-on-click-modal="false"
+      class="quality-owner-agreement-dialog"
+      @closed="closeQualityOwnerAgreement"
+    >
+      <div class="quality-owner-agreement-body">
+        <QualityOwnerAgreementContent :content="qualityOwnerStatus?.agreement_content || ''" />
+        <div class="quality-owner-agreement-consent">
+          <el-checkbox v-model="qualityOwnerAgreementAccepted">
+            本人已详细阅读并充分理解本协议全部内容，同意遵守上述条款
+          </el-checkbox>
+          <span v-if="qualityOwnerAgreementRemainingSeconds > 0">
+            还需阅读 {{ qualityOwnerAgreementRemainingSeconds }} 秒
+          </span>
+          <span v-else class="is-ready">已完成强制阅读</span>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="closeQualityOwnerAgreement">取消</el-button>
+        <el-button
+          type="primary"
+          :disabled="!qualityOwnerAgreementCanConfirm"
+          @click="confirmQualityOwnerAgreement"
+        >
+          {{
+            qualityOwnerAgreementRemainingSeconds > 0
+              ? `还需阅读 ${qualityOwnerAgreementRemainingSeconds} 秒`
+              : '同意并继续'
+          }}
+        </el-button>
+      </template>
+    </el-dialog>
+
     <el-dialog
       v-model="qualityOwnerPaymentVisible"
       title="优质号主保证金支付"
@@ -1165,6 +1213,45 @@ async function savePassword() {
   margin-left: 0;
 }
 
+.quality-owner-agreement-body {
+  display: grid;
+  gap: 16px;
+}
+
+.quality-owner-agreement-body > :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;