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

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;