feat(认证车源): 添加认证费用说明弹窗及支付流程

添加认证费用说明弹窗组件，包含费用展示和说明信息修改提交按钮文本为"提交申请并支付" 新增获取认证费用API接口

feat(认证车源): 添加认证费用说明弹窗及支付流程
添加认证费用说明弹窗组件，包含费用展示和说明信息修改提交按钮文本为"提交申请并支付" 新增获取认证费用API接口
hookehuyr
Commit 95ebf8bbf6057173e9cf8fcb1900073b9091bda8 95ebf8bb 1 parent ee0f28db
Showing 5 changed files with 269 additions and 9 deletions
src/api/other.js
src/pages/auth/index.vue
src/pages/authCar/index.less
src/pages/authCar/index.vue
src/pages/setAuthCar/index.vue
--- a/src/api/other.js
View file @95ebf8b
+++ b/src/api/other.js
View file @95ebf8b
@@ -11,6 +11,7 @@ const Api = {
   GET_SCHOOLS: '/srv/?a=common&t=get_schools',
   GET_BRANDS_MODELS: '/srv/?a=common&t=get_brands_models',
   GET_VEHICLE_BRANDS: '/srv/?a=common&t=get_vehicle_brands',
+  GET_VERIFICATION_PRICE: '/srv/?a=common&t=get_verification_price',
   SUBMIT_FEEDBACK: '/srv/?a=feedback&t=add',
   GET_FEEDBACK_LIST: '/srv/?a=feedback&t=list',
   GET_FAVORITE_LIST: '/srv/?a=favorite&t=list',
@@ -40,6 +41,13 @@ export const getBrandsModelsAPI = (params) => fn(fetch.get(Api.GET_BRANDS_MODELS
 export const getVehicleBrandsAPI = (params) => fn(fetch.get(Api.GET_VEHICLE_BRANDS, params));
 /**
+ * @description: 获取认证费用
+ * @param {*} params
+ * @returns
+ */
+export const getVerificationPriceAPI = (params) => fn(fetch.get(Api.GET_VERIFICATION_PRICE, params));
+
+/**
  * @description: 获取收藏列表
  * @param {*} params
  * @param {number} params.page - 页码，从0开始
--- a/src/pages/auth/index.vue
View file @95ebf8b
+++ b/src/pages/auth/index.vue
View file @95ebf8b
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-23 16:00:30
+ * @LastEditTime: 2025-08-01 15:04:35
  * @FilePath: /jgdl/src/pages/auth/index.vue
  * @Description: 文件描述
 -->
--- a/src/pages/authCar/index.less
View file @95ebf8b
+++ b/src/pages/authCar/index.less
View file @95ebf8b
@@ -276,19 +276,19 @@
     padding-left: 24rpx;
     padding-right: 24rpx;
   }
-  
+
   .auth-car-page .text-lg {
     font-size: 32rpx;
   }
-  
+
   .auth-car-page .text-sm {
     font-size: 26rpx;
   }
-  
+
   .auth-car-page .text-xs {
     font-size: 22rpx;
   }
-  
+
   .auth-button {
     height: 88rpx;
     font-size: 30rpx;
@@ -336,3 +336,166 @@
   border: 1rpx solid #bbf7d0;
   display: inline-block;
 }
+
+/* 认证费用说明弹窗样式 */
+.auth-info-popup {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+}
+
+.popup-header {
+  padding: 40rpx 32rpx 32rpx;
+  border-bottom: 1rpx solid #f3f4f6;
+  background-color: #ffffff;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.popup-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #1f2937;
+  text-align: center;
+}
+
+.popup-content {
+  flex: 1;
+  padding: 32rpx;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.content-section {
+  margin-bottom: 48rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 24rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 2rpx solid #fb923c;
+  display: inline-block;
+}
+
+/* 弹窗内容样式 */
+.popup-content-text {
+  padding: 32rpx;
+}
+
+.auth-fee-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid #f3f4f6;
+  margin-bottom: 24rpx;
+}
+
+.auth-fee-label {
+  font-size: 32rpx;
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.auth-fee-value {
+  font-size: 32rpx;
+  color: #fb923c;
+  font-weight: 700;
+}
+
+.auth-desc-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.auth-desc-label {
+  font-size: 32rpx;
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.auth-desc-text {
+  font-size: 28rpx;
+  color: #4b5563;
+  line-height: 1.8;
+  word-wrap: break-word;
+  word-break: break-all;
+  background-color: #f9fafb;
+  padding: 24rpx;
+  border-radius: 12rpx;
+  border-left: 4rpx solid #fb923c;
+}
+
+/* 底部按钮区域 */
+.popup-footer {
+  padding: 24rpx 32rpx;
+  border-top: 1rpx solid #f3f4f6;
+  background-color: #ffffff;
+  display: flex;
+  gap: 24rpx;
+}
+
+.footer-btn {
+  flex: 1;
+  height: 88rpx;
+  border-radius: 44rpx;
+  font-size: 30rpx;
+  font-weight: 500;
+}
+
+.cancel-btn {
+  border: 1rpx solid #d1d5db;
+  color: #6b7280;
+}
+
+.confirm-btn {
+  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
+  border: none;
+  color: #ffffff;
+}
+
+/* NutUI弹窗组件样式覆盖 */
+:deep(.nut-popup) {
+  border-radius: 0;
+}
+
+:deep(.nut-popup__close-icon) {
+  top: 32rpx;
+  right: 32rpx;
+  width: 48rpx;
+  height: 48rpx;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 滚动条样式 */
+.popup-content::-webkit-scrollbar {
+  width: 8rpx;
+}
+
+.popup-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4rpx;
+}
+
+.popup-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4rpx;
+}
+
+.popup-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
--- a/src/pages/authCar/index.vue
View file @95ebf8b
+++ b/src/pages/authCar/index.vue
View file @95ebf8b
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-17 15:51:44
+ * @LastEditTime: 2025-08-04 10:21:56
  * @FilePath: /jgdl/src/pages/authCar/index.vue
  * @Description: 认证车源
 -->
@@ -84,6 +84,56 @@
     <!-- 成功提示 -->
     <nut-toast v-model:visible="toastVisible" :msg="toastMessage" :type="toastType" />
+
+    <!-- 认证费用说明弹窗 -->
+    <nut-popup
+      v-model:visible="showAuthInfoPopup"
+      position="right"
+      :style="{ width: '100%', height: '100%' }"
+      closeable
+      close-icon-position="top-right"
+      @close="showAuthInfoPopup = false"
+    >
+      <view class="auth-info-popup">
+        <!-- 标题 -->
+        <view class="popup-header">
+          <text class="popup-title">认证费用说明</text>
+        </view>
+
+        <!-- 滚动内容区域 -->
+        <scroll-view class="popup-content" :scroll-y="true">
+          <view class="popup-content-text">
+            <view class="auth-fee-item">
+              <text class="auth-fee-label">认证费用：</text>
+              <text class="auth-fee-value">¥{{ authFee }}</text>
+            </view>
+            <view class="auth-desc-item">
+              <text class="auth-desc-label">认证说明：</text>
+              <text class="auth-desc-text">{{ authDesc }}</text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- 底部按钮 -->
+        <view class="popup-footer">
+          <nut-button
+            plain
+            class="footer-btn cancel-btn"
+            @click="showAuthInfoPopup = false"
+          >
+            关闭
+          </nut-button>
+          <nut-button
+            type="warning"
+            class="footer-btn confirm-btn"
+            color="#fb923c"
+            @click="handleConfirmAuth"
+          >
+            知道了
+          </nut-button>
+        </view>
+      </view>
+    </nut-popup>
   </view>
 </template>
@@ -95,6 +145,8 @@ import { useFavorite } from '@/composables/useFavorite'
 import './index.less'
 // 接口导入
 import { getVehicleListAPI } from '@/api/car';
+import { getVerificationPriceAPI } from '@/api/other';
+
 import { DEFAULT_COVER_IMG } from '@/utils/config'
 // Banner图片数据
 const bannerImages = ref([
@@ -106,6 +158,10 @@ const bannerImages = ref([
 // 认证车源数据
 const authCars = ref([])
+// 认证费用和说明
+const authFee = ref('180')
+const authDesc = ref('认证服务包含车辆基础信息验证、车况检测、平台担保等服务，认证通过后可获得平台认证标识，提升车辆可信度和成交率。认证费用一经支付不可退还，认证有效期为1年。')
+
 // 收藏状态
 // 收藏功能现在使用基于对象属性的模式
@@ -120,6 +176,9 @@ const toastVisible = ref(false)
 const toastMessage = ref('')
 const toastType = ref('success')
+// 认证费用说明弹窗
+const showAuthInfoPopup = ref(false)
+
 // 滚动样式
 const scrollStyle = computed(() => {
   return {
@@ -131,7 +190,17 @@ const scrollStyle = computed(() => {
  * 处理认证按钮点击
  */
 const handleAuth = () => {
-  // TODO: 跳转到认证页面
+  // 显示认证费用说明弹窗
+  showAuthInfoPopup.value = true
+}
+
+/**
+ * 确认认证，跳转到认证页面
+ */
+const handleConfirmAuth = () => {
+  // 关闭弹窗
+  showAuthInfoPopup.value = false
+  // 跳转到认证页面
   Taro.navigateTo({ url: '/pages/setAuthCar/index' })
 }
@@ -224,10 +293,30 @@ const showToast = (message, type = 'success') => {
     toastVisible.value = true
 }
+/**
+ * 获取认证费用
+ */
+
+const getVerificationPrice = async () => {
+    try {
+        const response = await getVerificationPriceAPI()
+        if (response && response.code === 1 && response.data) {
+            // 处理认证费用数据
+            authFee.value = response.data.verification_price
+            authDesc.value = response.data.verification_desc
+        }
+    } catch (error) {
+        console.error('获取认证费用失败:', error)
+        showToast('网络错误，请稍后重试', 'error')
+    }
+}
+
 // 初始化
 onMounted(async () => {
     // 加载初始认证车辆数据
     await loadAuthCarData()
+    // 获取认证费用
+    await getVerificationPrice()
 })
 </script>
--- a/src/pages/setAuthCar/index.vue
View file @95ebf8b
+++ b/src/pages/setAuthCar/index.vue
View file @95ebf8b
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-01 15:16:04
+ * @LastEditTime: 2025-08-04 09:58:48
  * @FilePath: /jgdl/src/pages/setAuthCar/index.vue
  * @Description: 申请认证
 -->
@@ -132,7 +132,7 @@
         <!-- 底部按钮 -->
         <view class="bottom-actions">
             <nut-button color="#f97316" size="large" block @click="onSubmit">
-                {{ isEditMode ? '提交申请' : '提交申请' }}
+                {{ isEditMode ? '提交申请并支付' : '提交申请并支付' }}
             </nut-button>
         </view>