优化错误提示弹窗 修复认证错误信息不提示问题。

src/components/BaseAuthDialog/index.vue

@@ -2,17 +2,29 @@
   <view v-if="modelValue" class="base-auth-dialog">
     <view class="base-auth-dialog__mask" @touchmove.stop.prevent />
     <view class="base-auth-dialog__panel">
-      <view class="base-auth-dialog__title">
-        {{ title }}
+      <view class="base-auth-dialog__header">
+        <view class="base-auth-dialog__icon" aria-hidden="true">
+          <text class="base-auth-dialog__icon-text">!</text>
+        </view>
+
+        <view class="base-auth-dialog__title">
+          {{ title }}
+        </view>
       </view>
 
       <view class="base-auth-dialog__content">
         <slot />
       </view>
 
-      <button class="base-auth-dialog__confirm" @click="handleConfirm">
-        {{ confirmText }}
-      </button>
+      <view class="base-auth-dialog__footer">
+        <button
+          class="base-auth-dialog__confirm"
+          hover-class="base-auth-dialog__confirm--hover"
+          @click="handleConfirm"
+        >
+          {{ confirmText }}
+        </button>
+      </view>
     </view>
   </view>
 </template>
@@ -51,23 +63,55 @@ const handleConfirm = () => {
 .base-auth-dialog__mask {
   position: absolute;
   inset: 0;
-  background: rgba(15, 23, 42, 0.48);
+  background: rgba(17, 24, 39, 0.56);
+  animation: base-auth-dialog-mask-in 0.2s ease-out;
 }
 
 .base-auth-dialog__panel {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 610rpx;
+  width: 620rpx;
   overflow: hidden;
-  border-radius: 28rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.7);
+  border-radius: 32rpx;
   background: #ffffff;
   transform: translate(-50%, -50%);
-  box-shadow: 0 28rpx 80rpx rgba(15, 23, 42, 0.18);
+  box-shadow: 0 32rpx 88rpx rgba(15, 43, 79, 0.24);
+  animation: base-auth-dialog-panel-in 0.24s ease-out;
+}
+
+.base-auth-dialog__header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 36rpx 36rpx 24rpx;
+  background: linear-gradient(180deg, #eef7ff 0%, #ffffff 100%);
+}
+
+.base-auth-dialog__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72rpx;
+  height: 72rpx;
+  margin-bottom: 18rpx;
+  border: 10rpx solid #e4f1ff;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: linear-gradient(135deg, #5ca7ff 0%, #1677ff 100%);
+  box-shadow: 0 10rpx 24rpx rgba(22, 119, 255, 0.22);
+}
+
+.base-auth-dialog__icon-text {
+  color: #ffffff;
+  font-size: 34rpx;
+  font-weight: 700;
+  line-height: 1;
 }
 
 .base-auth-dialog__title {
-  padding: 32rpx 36rpx 24rpx;
   color: #111827;
   font-size: 34rpx;
   font-weight: 700;
@@ -76,30 +120,61 @@ const handleConfirm = () => {
 }
 
 .base-auth-dialog__content {
-  min-height: 300rpx;
-  padding: 20rpx 36rpx 40rpx;
+  max-height: 55vh;
+  padding: 12rpx 40rpx 36rpx;
+  overflow-y: auto;
   box-sizing: border-box;
   color: #4b5563;
   font-size: 29rpx;
   line-height: 46rpx;
 }
 
+.base-auth-dialog__footer {
+  padding: 0 32rpx 32rpx;
+}
+
 .base-auth-dialog__confirm {
-  height: 92rpx;
+  width: 100%;
+  height: 88rpx;
   margin: 0;
-  border-radius: 0;
-  background: #1677ff;
+  border-radius: 18rpx;
+  background: linear-gradient(100deg, #398eff 0%, #1668e8 100%);
   color: #ffffff;
-  font-size: 32rpx;
-  font-weight: 700;
-  line-height: 92rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  line-height: 88rpx;
+  letter-spacing: 2rpx;
+  box-shadow: 0 14rpx 28rpx rgba(22, 104, 232, 0.22);
 }
 
 .base-auth-dialog__confirm::after {
   border: none;
 }
 
-.base-auth-dialog__confirm:active {
-  opacity: 0.9;
+.base-auth-dialog__confirm--hover {
+  opacity: 0.88;
+  transform: scale(0.99);
+}
+
+@keyframes base-auth-dialog-mask-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes base-auth-dialog-panel-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -47%) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 </style>

src/pages-auth/settlement-channel-sign/index.vue

@@ -95,6 +95,10 @@
         </view>
       </view>
     </wd-popup>
+
+    <BaseAuthDialog v-model="authErrorDialogVisible" title="提示" confirm-text="我知道了">
+      <view class="auth-error-message">{{ authErrorMessage }}</view>
+    </BaseAuthDialog>
   </view>
 </template>
 
@@ -121,6 +125,8 @@ import { useUserStore } from '@/stores/modules/user'
 
 import { previewAgreementPdf } from '@/utils/agreementPdfPreview'
 
+import BaseAuthDialog from '@/components/BaseAuthDialog/index.vue'
+
 const settlementSignStore = useSettlementSignStore()
 interface RadioChangeEvent {
   detail: {
@@ -152,6 +158,8 @@ const isSubmitting = ref(false)
 const agreementList = ref<AgreementPdfItem[]>([])
 const agreementPopupVisible = ref(false)
 const agreementChecked = ref(false)
+const authErrorDialogVisible = ref(false)
+const authErrorMessage = ref('')
 
 const currentUserInfo = computed(() => userStore.currentUserInfo)
 
@@ -314,10 +322,10 @@ const afterSignCert = async (): Promise<void> => {
   const currentCert = findCertItem(selectedSubjectLocation.value)
 
   const shouldLoadAgreement =
-    (!certList.value.length ||
-      !currentCert ||
-      !currentCert.agreementUrl ||
-      currentCert.commonCertStatus === 'FAIL_SIGN')
+    !certList.value.length ||
+    !currentCert ||
+    !currentCert.agreementUrl ||
+    currentCert.commonCertStatus === 'FAIL_SIGN'
 
   if (shouldLoadAgreement) {
     const certResult = await certFn(false)
@@ -444,6 +452,13 @@ const certFn = async (completeWhenNoH5 = true): Promise<ChannelCertResult> => {
 
   const res = await batchChannelCertApi(data)
 
+  if (res.code === 0 && res.data?.errMsg) {
+    authErrorMessage.value = res.data.errMsg
+    authErrorDialogVisible.value = true
+    isSubmitting.value = false
+    return 'FAILED'
+  }
+
   if (res.data.commonCertStatus === 'FAIL_SIGN') {
     showToast(res.msg || res.data.errMsg || '签约失败')
     return 'FAILED'
@@ -685,4 +700,9 @@ onLoad(async (query) => {
   color: #3fa3f1;
   font-weight: 500;
 }
+
+.auth-error-message {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 </style>