Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7148eff1 1 parent ac1c9dce

feat(myAuthCar): 添加认证状态显示及样式 

添加认证状态徽章显示和失败原因提示
统一多个页面的菜单项内边距样式
更新价格显示格式和条件渲染
Inline Side-by-side
Showing 8 changed files with 103 additions and 10 deletions
......@@ -142,6 +142,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
const themeVars = {
menuItemContentMaxHeight: '650rpx',
menuItemOptionPaddingTop: '32rpx',
}
// Props
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-16 13:52:14
* @LastEditTime: 2025-07-16 14:06:59
* @FilePath: /jgdl/src/pages/goodCarList/index.vue
* @Description: 特价好车页面
-->
......@@ -147,6 +147,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
const themeVars = {
menuItemContentMaxHeight: '650rpx',
menuItemOptionPaddingTop: '32rpx',
}
// 响应式数据
......
......@@ -40,3 +40,52 @@
color: #999;
font-size: 28rpx;
}
/* 状态标识样式 - 与myCar页面保持一致 */
.status-badges {
display: flex;
gap: 16rpx;
margin-top: 16rpx;
margin-bottom: 24rpx;
}
.status-badge {
display: flex;
align-items: center;
gap: 8rpx;
padding: 8rpx 16rpx;
border-radius: 24rpx;
font-size: 22rpx;
color: white;
&.verified {
background: linear-gradient(135deg, #10b981, #059669);
}
&.unverified {
background: linear-gradient(135deg, #6b7280, #4b5563);
}
&.review {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
&.failed {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
}
/* 认证失败原因样式 */
.verification-reason {
background: #fef2f2;
border: 1rpx solid #fecaca;
border-radius: 8rpx;
padding: 12rpx;
margin-top: 8rpx;
text {
font-size: 22rpx;
color: #dc2626;
line-height: 1.4;
}
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-15 11:56:17
* @LastEditTime: 2025-07-16 14:37:07
* @FilePath: /jgdl/src/pages/myAuthCar/index.vue
* @Description: 我的认证车页面
-->
......@@ -36,14 +36,24 @@
</view>
<view class="flex-1 ml-4">
<text class="font-medium text-base block">{{ item.brand }} {{ item.model }}</text>
<!-- 认证状态 -->
<view class="status-badges">
<view class="status-badge" :class="getVerificationStatusClass(item.verification_status)">
<text>{{ getVerificationStatusText(item.verification_status) }}</text>
</view>
</view>
<text class="text-sm text-gray-500 mt-1 block">{{ item.manufacture_year }}年|续航{{ item.range_km }}km|最高时速{{ item.max_speed_kmh }}km/h</text>
<!-- 认证失败原因 -->
<view v-if="item.verification_status === 7 && item.verification_reason" class="verification-reason mt-1">
<text class="text-xs text-red-500">失败原因：{{ item.verification_reason }}</text>
</view>
<view class="mt-2 flex justify-between items-center">
<view>
<text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
¥{{ item.price?.toLocaleString() }}
¥ {{ item.price?.toLocaleString() }}
</text>
<text class="text-gray-400 text-xs line-through ml-2">
¥{{ item.market_price?.toLocaleString() }}
<text v-if="item.market_price" class="text-gray-400 text-xs line-through ml-2">
¥ {{ item.market_price?.toLocaleString() }}
</text>
</view>
<nut-button
......@@ -121,13 +131,41 @@ const scrollStyle = computed(() => {
// ==================== 数据处理方法 ====================
/**
* 获取认证状态文本
* @param {number} status - 认证状态 (1=不认证, 3=认证待审核, 5=已认证, 7=认证失败)
*/
const getVerificationStatusText = (status) => {
const statusMap = {
1: '未认证',
3: '认证待审核',
5: '已认证',
7: '认证失败'
}
return statusMap[status] || '未知状态'
}
/**
* 获取认证状态样式类
* @param {number} status - 认证状态
*/
const getVerificationStatusClass = (status) => {
const classMap = {
1: 'unverified',
3: 'review',
5: 'verified',
7: 'failed'
}
return classMap[status] || 'unverified'
}
/**
* 初始化加载数据
*/
const initData = async () => {
loading.value = true
try {
const response = await getMyListingVehicleAPI({
verification_status: 5, // 已认证状态
verification_status: [3, 5, 7],
page: 0,
limit: pageSize.value
})
......@@ -158,7 +196,7 @@ const loadMore = async () => {
try {
const nextPage = currentPage.value + 1
const response = await getMyListingVehicleAPI({
verification_status: 5, // 已认证状态
verification_status: [3, 5, 7],
page: nextPage,
limit: pageSize.value
})
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-16 13:52:32
* @LastEditTime: 2025-07-16 14:06:00
* @FilePath: /jgdl/src/pages/newCarList/index.vue
* @Description: 最新上架页面
-->
......@@ -134,6 +134,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
const themeVars = {
menuItemContentMaxHeight: '650rpx',
menuItemOptionPaddingTop: '32rpx',
}
// 响应式数据
......
......@@ -123,6 +123,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
const themeVars = {
menuItemContentMaxHeight: '650rpx',
menuItemOptionPaddingTop: '32rpx',
}
// 响应式数据
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-16 13:52:24
* @LastEditTime: 2025-07-16 14:07:14
* @FilePath: /jgdl/src/pages/recommendCarList/index.vue
* @Description: 精品推荐页面
-->
......@@ -142,6 +142,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
const themeVars = {
menuItemContentMaxHeight: '650rpx',
menuItemOptionPaddingTop: '32rpx',
}
// 响应式数据
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-10 21:38:42
* @LastEditTime: 2025-07-16 14:07:18
* @FilePath: /jgdl/src/pages/search/index.vue
* @Description: 搜索页面
-->
......@@ -130,6 +130,7 @@ import "./index.less";
const themeVars = {
menuItemContentMaxHeight: '650rpx',
menuItemOptionPaddingTop: '32rpx',
}
// 响应式数据
......