Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
95ebf8bb 1 parent ee0f28db

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

添加认证费用说明弹窗组件，包含费用展示和说明信息
修改提交按钮文本为"提交申请并支付"
新增获取认证费用API接口
Inline Side-by-side
Showing 5 changed files with 269 additions and 9 deletions
......@@ -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开始
......
<!--
* @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: 文件描述
-->
......
......@@ -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;
}
......
<!--
* @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>
......
<!--
* @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>
......