Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0a50f274 1 parent eb5020de

feat(认证车源): 重构认证车源页面并优化提交成功提示 

重构认证车源页面，使用API获取真实数据替代模拟数据
优化表单提交成功后的提示交互，区分编辑模式和申请模式
移除模拟数据加载逻辑，改为分页加载API数据
Inline Side-by-side
Showing 2 changed files with 100 additions and 112 deletions
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-10 21:34:57
* @LastEditTime: 2025-07-10 22:49:42
* @FilePath: /jgdl/src/pages/authCar/index.vue
* @Description: 认证车源
-->
......@@ -19,13 +19,7 @@
<!-- 我要认证按钮 -->
<view class="px-16 mt-5">
<nut-button
color="#FFA135"
size="large"
block
@click="handleAuth"
class="auth-button"
>
<nut-button color="#FFA135" size="large" block @click="handleAuth" class="auth-button">
<view class="flex items-center justify-center">
<Check class="mr-2" size="20" color="#ffffff" />
<text class="text-white font-medium">我要认证</text>
......@@ -40,23 +34,14 @@
</view>
<!-- 滚动列表 -->
<scroll-view
class="auth-car-list"
:style="scrollStyle"
:scroll-y="true"
@scrolltolower="loadMore"
@scroll="scroll"
:lower-threshold="50"
:enable-flex="false"
>
<scroll-view class="auth-car-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
@scroll="scroll" :lower-threshold="50" :enable-flex="false">
<view class="space-y-4">
<view v-for="car in authCars" :key="car.id"
class="bg-white rounded-lg shadow-sm overflow-hidden mb-3"
@tap="() => onCarClick(car)"
>
<view v-for="car in authCars" :key="car.id" class="bg-white rounded-lg shadow-sm overflow-hidden mb-3"
@tap="() => onCarClick(car)">
<view class="flex">
<view class="w-32 h-24 relative p-2">
<image :src="car.imageUrl" :alt="car.name" mode="aspectFill"
<image :src="car.front_photo" :alt="car.name" mode="aspectFill"
class="w-full h-full object-cover rounded-lg" />
</view>
<view class="flex-1 p-3 relative">
......@@ -64,17 +49,17 @@
<Heart1 v-if="!car.is_favorite" size="22" :color="'#9ca3af'" />
<HeartFill v-else size="22" :color="'#ef4444'" />
</view>
<text class="font-medium text-sm block">{{ car.name }}</text>
<text class="font-medium text-sm block">{{ car.brand }} {{ car.model }}</text>
<text class="text-xs text-gray-600 mt-1 block">
{{ car.year }} ·
<text v-if="car.batteryHealth">电池健康度{{ car.batteryHealth }}%</text>
<text v-if="car.mileage"> 行驶{{ car.mileage }}公里</text>
{{ car.manufacture_year }} ·
<text v-if="car.range_km">续航{{ car.range_km }}km</text>
<text v-if="car.max_speed_kmh"> 最高时速{{ car.max_speed_kmh }}km/h</text>
</text>
<view class="mt-2">
<text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
¥{{ car.price.toLocaleString() }}
</text>
<text class="text-xs text-gray-500 mt-1 block">{{ car.school }}</text>
<text class="text-xs text-gray-500 mt-1 block">{{ car.school_name }}</text>
</view>
<!-- 认证信息 -->
<!-- <view class="mt-1">
......@@ -98,11 +83,7 @@
</view>
<!-- 成功提示 -->
<nut-toast
v-model:visible="toastVisible"
:msg="toastMessage"
:type="toastType"
/>
<nut-toast v-model:visible="toastVisible" :msg="toastMessage" :type="toastType" />
</view>
</template>
......@@ -112,6 +93,8 @@ import { ref, computed, onMounted } from 'vue'
import { Check, Heart1, HeartFill } from '@nutui/icons-vue-taro'
import { useFavorite } from '@/composables/useFavorite'
import './index.less'
// 接口导入
import { getVehicleListAPI } from '@/api/car';
// Banner图片数据
const bannerImages = ref([
......@@ -121,52 +104,7 @@ const bannerImages = ref([
])
// 认证车源数据
const authCars = ref([
{
id: 1,
name: '小牛NGT 电动车',
year: '2023年',
batteryHealth: 95,
mileage: 1200,
price: 4500,
school: '上海理工大学',
imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
authDate: '2024-01-15'
},
{
id: 2,
name: '雅迪 DE2 电动车',
year: '2023年',
batteryHealth: 88,
mileage: 2800,
price: 3200,
school: '上海大学',
imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=400&h=300&fit=crop',
authDate: '2024-01-10'
},
{
id: 3,
name: '爱玛 A500 电动车',
year: '2022年',
batteryHealth: 92,
mileage: 1800,
price: 2800,
school: '华东理工大学',
imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
authDate: '2024-01-08'
},
{
id: 4,
name: '台铃 TDR-2023 电动车',
year: '2023年',
batteryHealth: 90,
mileage: 2200,
price: 3800,
school: '上海交通大学',
imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
authDate: '2024-01-05'
}
])
const authCars = ref([])
// 收藏状态
// 收藏功能现在使用基于对象属性的模式
......@@ -174,6 +112,8 @@ const authCars = ref([
// 加载状态
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(0)
const pageSize = ref(10)
// Toast提示
const toastVisible = ref(false)
......@@ -210,37 +150,61 @@ const onCarClick = (car) => {
const { toggleFavorite } = useFavorite()
/**
* 加载更多数据
* 加载认证车辆数据
* @param {boolean} isLoadMore - 是否为加载更多
*/
const loadMore = () => {
if (loading.value || !hasMore.value) return
const loadAuthCarData = async (isLoadMore = false) => {
if (loading.value) return
loading.value = true
// 模拟加载更多数据
setTimeout(() => {
const newCars = [
{
id: authCars.value.length + 1,
name: '新增认证车辆',
year: '2023年',
batteryHealth: 85,
mileage: 3000,
price: 2500,
school: '复旦大学',
imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=400&h=300&fit=crop',
authDate: '2024-01-01'
try {
// 构建请求参数 - 只获取认证车辆
const params = {
page: currentPage.value,
limit: pageSize.value,
verification_status: 1 // 只获取已认证的车辆
}
]
authCars.value.push(...newCars)
loading.value = false
const response = await getVehicleListAPI(params)
// 模拟没有更多数据
if (authCars.value.length >= 10) {
hasMore.value = false
if (response && response.code === 1 && response.data) {
const vehicleList = response.data.list || []
// 处理图片数据
const processedData = vehicleList.map(item => ({
...item,
}))
if (isLoadMore) {
authCars.value.push(...processedData)
} else {
authCars.value = processedData
}
// 检查是否还有更多数据 - 基于总数和当前已加载数量
const totalLoaded = (currentPage.value + 1) * pageSize.value
hasMore.value = totalLoaded < response.data.total
} else {
console.error('API返回错误:', response)
showToast(response?.msg || '获取数据失败', 'error')
}
} catch (error) {
console.error('加载认证车辆数据失败:', error)
showToast('网络错误，请稍后重试', 'error')
} finally {
loading.value = false
}
}, 1000)
}
/**
* 加载更多数据
*/
const loadMore = async () => {
if (loading.value || !hasMore.value) return
currentPage.value++
await loadAuthCarData(true)
}
/**
......@@ -253,16 +217,21 @@ const scroll = (e) => {
/**
* 显示提示信息
*/
// showToast 功能现在由 useFavorite composable 处理
const showToast = (message, type = 'success') => {
toastMessage.value = message
toastType.value = type
toastVisible.value = true
}
// 初始化
onMounted(() => {
// 可以在这里加载初始数据
onMounted(async () => {
// 加载初始认证车辆数据
await loadAuthCarData()
})
</script>
<script>
export default {
以在这里加载: 'AuthCarPage'
name: 'AuthCarPage'
}
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-10 17:24:11
* @LastEditTime: 2025-07-10 22:59:16
* @FilePath: /jgdl/src/pages/setAuthCar/index.vue
* @Description: 申请认证
-->
......@@ -424,16 +424,35 @@ const onSubmit = async () => {
}
Taro.hideLoading()
const successTitle = isEditMode.value ? '保存成功' : '申请提交成功'
// 提交成功提示
if (isEditMode.value) {
Taro.showToast({
title: successTitle,
icon: 'success'
title: '保存成功',
icon: 'success',
duration: 2000,
complete: () => {
// 保存成功后返回上一页
Taro.navigateBack()
}
})
} else {
Taro.showModal({
title: '温馨提示',
content: '认证提交成功，我们会尽快审核',
showCancel: false,
confirmText: '知道了',
success: function (res) {
if (res.confirm) {
Taro.navigateBack()
}
}
})
}
// 返回上一页
setTimeout(() => {
Taro.navigateBack()
}, 1500)
// setTimeout(() => {
// Taro.navigateBack()
// }, 1500)
} catch (error) {
console.error('提交失败:', error)
Taro.hideLoading()
......