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' ...@@ -142,6 +142,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
142 142
143 const themeVars = { 143 const themeVars = {
144 menuItemContentMaxHeight: '650rpx', 144 menuItemContentMaxHeight: '650rpx',
145 + menuItemOptionPaddingTop: '32rpx',
145 } 146 }
146 147
147 // Props 148 // Props
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-16 13:52:14 4 + * @LastEditTime: 2025-07-16 14:06:59
5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue 5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue
6 * @Description: 特价好车页面 6 * @Description: 特价好车页面
7 --> 7 -->
...@@ -147,6 +147,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config' ...@@ -147,6 +147,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
147 147
148 const themeVars = { 148 const themeVars = {
149 menuItemContentMaxHeight: '650rpx', 149 menuItemContentMaxHeight: '650rpx',
150 + menuItemOptionPaddingTop: '32rpx',
150 } 151 }
151 152
152 // 响应式数据 153 // 响应式数据
......
...@@ -40,3 +40,52 @@ ...@@ -40,3 +40,52 @@
40 color: #999; 40 color: #999;
41 font-size: 28rpx; 41 font-size: 28rpx;
42 } 42 }
43 +
44 +/* 状态标识样式 - 与myCar页面保持一致 */
45 +.status-badges {
46 + display: flex;
47 + gap: 16rpx;
48 + margin-top: 16rpx;
49 + margin-bottom: 24rpx;
50 +}
51 +
52 +.status-badge {
53 + display: flex;
54 + align-items: center;
55 + gap: 8rpx;
56 + padding: 8rpx 16rpx;
57 + border-radius: 24rpx;
58 + font-size: 22rpx;
59 + color: white;
60 +
61 + &.verified {
62 + background: linear-gradient(135deg, #10b981, #059669);
63 + }
64 +
65 + &.unverified {
66 + background: linear-gradient(135deg, #6b7280, #4b5563);
67 + }
68 +
69 + &.review {
70 + background: linear-gradient(135deg, #f59e0b, #d97706);
71 + }
72 +
73 + &.failed {
74 + background: linear-gradient(135deg, #ef4444, #dc2626);
75 + }
76 +}
77 +
78 +/* 认证失败原因样式 */
79 +.verification-reason {
80 + background: #fef2f2;
81 + border: 1rpx solid #fecaca;
82 + border-radius: 8rpx;
83 + padding: 12rpx;
84 + margin-top: 8rpx;
85 +
86 + text {
87 + font-size: 22rpx;
88 + color: #dc2626;
89 + line-height: 1.4;
90 + }
91 +}
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-15 11:56:17 4 + * @LastEditTime: 2025-07-16 14:37:07
5 * @FilePath: /jgdl/src/pages/myAuthCar/index.vue 5 * @FilePath: /jgdl/src/pages/myAuthCar/index.vue
6 * @Description: 我的认证车页面 6 * @Description: 我的认证车页面
7 --> 7 -->
...@@ -36,14 +36,24 @@ ...@@ -36,14 +36,24 @@
36 </view> 36 </view>
37 <view class="flex-1 ml-4"> 37 <view class="flex-1 ml-4">
38 <text class="font-medium text-base block">{{ item.brand }} {{ item.model }}</text> 38 <text class="font-medium text-base block">{{ item.brand }} {{ item.model }}</text>
39 + <!-- 认证状态 -->
40 + <view class="status-badges">
41 + <view class="status-badge" :class="getVerificationStatusClass(item.verification_status)">
42 + <text>{{ getVerificationStatusText(item.verification_status) }}</text>
43 + </view>
44 + </view>
39 <text class="text-sm text-gray-500 mt-1 block">{{ item.manufacture_year }}年|续航{{ item.range_km }}km|最高时速{{ item.max_speed_kmh }}km/h</text> 45 <text class="text-sm text-gray-500 mt-1 block">{{ item.manufacture_year }}年|续航{{ item.range_km }}km|最高时速{{ item.max_speed_kmh }}km/h</text>
46 + <!-- 认证失败原因 -->
47 + <view v-if="item.verification_status === 7 && item.verification_reason" class="verification-reason mt-1">
48 + <text class="text-xs text-red-500">失败原因：{{ item.verification_reason }}</text>
49 + </view>
40 <view class="mt-2 flex justify-between items-center"> 50 <view class="mt-2 flex justify-between items-center">
41 <view> 51 <view>
42 <text class="text-orange-500 font-bold" style="font-size: 1.2rem;"> 52 <text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
43 - ¥{{ item.price?.toLocaleString() }} 53 + ¥ {{ item.price?.toLocaleString() }}
44 </text> 54 </text>
45 - <text class="text-gray-400 text-xs line-through ml-2"> 55 + <text v-if="item.market_price" class="text-gray-400 text-xs line-through ml-2">
46 - ¥{{ item.market_price?.toLocaleString() }} 56 + ¥ {{ item.market_price?.toLocaleString() }}
47 </text> 57 </text>
48 </view> 58 </view>
49 <nut-button 59 <nut-button
...@@ -121,13 +131,41 @@ const scrollStyle = computed(() => { ...@@ -121,13 +131,41 @@ const scrollStyle = computed(() => {
121 // ==================== 数据处理方法 ==================== 131 // ==================== 数据处理方法 ====================
122 132
123 /** 133 /**
134 + * 获取认证状态文本
135 + * @param {number} status - 认证状态 (1=不认证, 3=认证待审核, 5=已认证, 7=认证失败)
136 + */
137 +const getVerificationStatusText = (status) => {
138 + const statusMap = {
139 + 1: '未认证',
140 + 3: '认证待审核',
141 + 5: '已认证',
142 + 7: '认证失败'
143 + }
144 + return statusMap[status] || '未知状态'
145 +}
146 +
147 +/**
148 + * 获取认证状态样式类
149 + * @param {number} status - 认证状态
150 + */
151 +const getVerificationStatusClass = (status) => {
152 + const classMap = {
153 + 1: 'unverified',
154 + 3: 'review',
155 + 5: 'verified',
156 + 7: 'failed'
157 + }
158 + return classMap[status] || 'unverified'
159 +}
160 +
161 +/**
124 * 初始化加载数据 162 * 初始化加载数据
125 */ 163 */
126 const initData = async () => { 164 const initData = async () => {
127 loading.value = true 165 loading.value = true
128 try { 166 try {
129 const response = await getMyListingVehicleAPI({ 167 const response = await getMyListingVehicleAPI({
130 - verification_status: 5, // 已认证状态 168 + verification_status: [3, 5, 7],
131 page: 0, 169 page: 0,
132 limit: pageSize.value 170 limit: pageSize.value
133 }) 171 })
...@@ -158,7 +196,7 @@ const loadMore = async () => { ...@@ -158,7 +196,7 @@ const loadMore = async () => {
158 try { 196 try {
159 const nextPage = currentPage.value + 1 197 const nextPage = currentPage.value + 1
160 const response = await getMyListingVehicleAPI({ 198 const response = await getMyListingVehicleAPI({
161 - verification_status: 5, // 已认证状态 199 + verification_status: [3, 5, 7],
162 page: nextPage, 200 page: nextPage,
163 limit: pageSize.value 201 limit: pageSize.value
164 }) 202 })
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-16 13:52:32 4 + * @LastEditTime: 2025-07-16 14:06:00
5 * @FilePath: /jgdl/src/pages/newCarList/index.vue 5 * @FilePath: /jgdl/src/pages/newCarList/index.vue
6 * @Description: 最新上架页面 6 * @Description: 最新上架页面
7 --> 7 -->
...@@ -134,6 +134,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config' ...@@ -134,6 +134,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
134 134
135 const themeVars = { 135 const themeVars = {
136 menuItemContentMaxHeight: '650rpx', 136 menuItemContentMaxHeight: '650rpx',
137 + menuItemOptionPaddingTop: '32rpx',
137 } 138 }
138 139
139 // 响应式数据 140 // 响应式数据
......
...@@ -123,6 +123,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config' ...@@ -123,6 +123,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
123 123
124 const themeVars = { 124 const themeVars = {
125 menuItemContentMaxHeight: '650rpx', 125 menuItemContentMaxHeight: '650rpx',
126 + menuItemOptionPaddingTop: '32rpx',
126 } 127 }
127 128
128 // 响应式数据 129 // 响应式数据
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-16 13:52:24 4 + * @LastEditTime: 2025-07-16 14:07:14
5 * @FilePath: /jgdl/src/pages/recommendCarList/index.vue 5 * @FilePath: /jgdl/src/pages/recommendCarList/index.vue
6 * @Description: 精品推荐页面 6 * @Description: 精品推荐页面
7 --> 7 -->
...@@ -142,6 +142,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config' ...@@ -142,6 +142,7 @@ import { DEFAULT_COVER_IMG } from '@/utils/config'
142 142
143 const themeVars = { 143 const themeVars = {
144 menuItemContentMaxHeight: '650rpx', 144 menuItemContentMaxHeight: '650rpx',
145 + menuItemOptionPaddingTop: '32rpx',
145 } 146 }
146 147
147 // 响应式数据 148 // 响应式数据
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-10 21:38:42 4 + * @LastEditTime: 2025-07-16 14:07:18
5 * @FilePath: /jgdl/src/pages/search/index.vue 5 * @FilePath: /jgdl/src/pages/search/index.vue
6 * @Description: 搜索页面 6 * @Description: 搜索页面
7 --> 7 -->
...@@ -130,6 +130,7 @@ import "./index.less"; ...@@ -130,6 +130,7 @@ import "./index.less";
130 130
131 const themeVars = { 131 const themeVars = {
132 menuItemContentMaxHeight: '650rpx', 132 menuItemContentMaxHeight: '650rpx',
133 + menuItemOptionPaddingTop: '32rpx',
133 } 134 }
134 135
135 // 响应式数据 136 // 响应式数据
......