feat: 优化车辆状态显示和审核原因展示

- 修改车辆状态标签样式为边框风格 - 添加NutEllipsis组件用于折叠长文本的审核原因 - 调整页面布局和间距 - 统一认证和卖车审核的操作类型参数 - 更新搜索框和消息图标样式

feat: 优化车辆状态显示和审核原因展示
- 修改车辆状态标签样式为边框风格 - 添加NutEllipsis组件用于折叠长文本的审核原因 - 调整页面布局和间距 - 统一认证和卖车审核的操作类型参数 - 更新搜索框和消息图标样式
hookehuyr
Commit 4c5f7f2c4f64b6515c908828d00ea68c2ce6a9b4 4c5f7f2c 1 parent f081bfe5
Showing 9 changed files with 52 additions and 23 deletions
components.d.ts
src/components/TabBar.vue
src/pages/index/index.vue
src/pages/myAuthCar/index.less
src/pages/myAuthCar/index.vue
src/pages/myCar/index.less
src/pages/myCar/index.vue
src/pages/sell/index.vue
src/pages/setAuthCar/index.vue
--- a/components.d.ts
View file @4c5f7f2
+++ b/components.d.ts
View file @4c5f7f2
@@ -17,6 +17,7 @@ declare module 'vue' {
     NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
     NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
     NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
+    NutEllipsis: typeof import('@nutui/nutui-taro')['Ellipsis']
     NutForm: typeof import('@nutui/nutui-taro')['Form']
     NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
     NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
--- a/src/components/TabBar.vue
View file @4c5f7f2
+++ b/src/components/TabBar.vue
View file @4c5f7f2
@@ -35,7 +35,7 @@
                     @click="navigateTo('/pages/messages/index')"
                     :class="getTabClass('messages')"
                 >
-                    <Comment size="20" :color="getIconColor('messages')" />
+                    <Message size="20" :color="getIconColor('messages')" />
                     <span class="text-xs mt-1">消息</span>
                 </view>
@@ -55,7 +55,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import Taro from '@tarojs/taro'
-import { Home, Category, Comment, My } from '@nutui/icons-vue-taro'
+import { Home, Category, Message, My } from '@nutui/icons-vue-taro'
 import { useUserStore } from '@/stores/user'
 import { checkPermission, PERMISSION_TYPES } from '@/utils/permission'
--- a/src/pages/index/index.vue
View file @4c5f7f2
+++ b/src/pages/index/index.vue
View file @4c5f7f2
 <!--
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 09:50:03
+ * @LastEditTime: 2025-07-17 09:58:32
  * @FilePath: /jgdl/src/pages/index/index.vue
  * @Description: 捡个电驴首页
 -->
@@ -9,7 +9,7 @@
   <view class="flex flex-col bg-orange-50 min-h-screen" style="background-color: #f6f6f6;">
     <!-- Header -->
     <nut-sticky>
-      <view class="bg-orange-400 px-4">
+      <view class="bg-orange-400 px-4" style="padding-right: 0;">
         <nut-row type="flex" justify="center" align="center">
           <nut-col span="6">
             <view class="text-xl font-bold text-white">捡个电驴</view>
@@ -17,7 +17,7 @@
           <nut-col span="18">
             <!-- Search Bar -->
             <nut-searchbar v-model="searchValue" placeholder="搜索更多商品" :disabled="true" @click-input="onSearchHandle"
-              shape="round" background="transparent" input-background="#ffffff">
+              shape="round" background="transparent" input-background="rgba(255,255,255,0.85)">
               <template #leftin>
                 <Search2 />
               </template>
--- a/src/pages/myAuthCar/index.less
View file @4c5f7f2
+++ b/src/pages/myAuthCar/index.less
View file @4c5f7f2
@@ -82,6 +82,9 @@
   border-radius: 8rpx;
   padding: 12rpx;
   margin-top: 8rpx;
+  color: #dc2626;
+  font-size: 23rpx;
+  margin-bottom: 8rpx;
   text {
     font-size: 22rpx;
--- a/src/pages/myAuthCar/index.vue
View file @4c5f7f2
+++ b/src/pages/myAuthCar/index.vue
View file @4c5f7f2
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 17:02:41
+ * @LastEditTime: 2025-07-17 10:31:45
  * @FilePath: /jgdl/src/pages/myAuthCar/index.vue
  * @Description: 我的认证车页面
 -->
@@ -46,6 +46,9 @@
                                 <!-- 认证失败原因 -->
                                 <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>
+                                    <nut-config-provider :theme-vars="themeVars">
+                                        <nut-ellipsis :content="item.verification_reason" direction="end" rows="2" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+                                    </nut-config-provider>
                                 </view>
                                 <!-- <view class="mt-2 flex justify-between items-center">
                                     <view>
@@ -113,6 +116,10 @@ import './index.less'
 import { getMyListingVehicleAPI } from '@/api/car'
 import { DEFAULT_COVER_IMG } from '@/utils/config'
+const themeVars = {
+    ellipsisExpandCollapseColor: '#f97316'
+}
+
 // ==================== API相关 ====================
 // ==================== 响应式数据 ====================
--- a/src/pages/myCar/index.less
View file @4c5f7f2
+++ b/src/pages/myCar/index.less
View file @4c5f7f2
@@ -74,26 +74,32 @@
   padding: 8rpx 16rpx;
   border-radius: 24rpx;
   font-size: 22rpx;
-  color: white;
+  background: white;
+  border: 2rpx solid;
   &.verified {
-    background: linear-gradient(135deg, #10b981, #059669);
+    color: #10b981;
+    border-color: #10b981;
   }
   &.unverified {
-    background: linear-gradient(135deg, #6b7280, #4b5563);
+    color: #6b7280;
+    border-color: #6b7280;
   }
   &.review {
-    background: linear-gradient(135deg, #f59e0b, #d97706);
+    color: #f59e0b;
+    border-color: #f59e0b;
   }
   &.failed {
-    background: linear-gradient(135deg, #ef4444, #dc2626);
+    color: #ef4444;
+    border-color: #ef4444;
   }
   &.offline {
-    background: linear-gradient(135deg, #ef4444, #dc2626);
+    color: #ef4444;
+    border-color: #ef4444;
   }
 }
@@ -105,7 +111,7 @@
 /* 车辆图片 */
 .car-image-container {
   width: 100%;
-  aspect-ratio: 1;
+  aspect-ratio: 0.8;
   border-radius: 24rpx;
   overflow: hidden;
 }
@@ -131,7 +137,7 @@
 .car-details {
   display: flex;
   gap: 32rpx;
-  margin-bottom: 24rpx;
+  margin-bottom: 10rpx;
 }
 .detail-item {
@@ -149,6 +155,9 @@
   border-radius: 8rpx;
   padding: 12rpx;
   margin-top: 8rpx;
+  color: #dc2626;
+  font-size: 23rpx;
+  margin-bottom: 8rpx;
   text {
     font-size: 22rpx;
@@ -244,6 +253,8 @@
   .status-badge {
     font-size: 20rpx;
     padding: 6rpx 12rpx;
+    background: white;
+    border: 2rpx solid;
   }
   .status-icon {
--- a/src/pages/myCar/index.vue
View file @4c5f7f2
+++ b/src/pages/myCar/index.vue
View file @4c5f7f2
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 16:51:29
+ * @LastEditTime: 2025-07-17 10:42:22
  * @FilePath: /jgdl/src/pages/myCar/index.vue
  * @Description: 文件描述
 -->
@@ -58,8 +58,11 @@
                     <text class="detail-item">续航 {{ car.range_km }}km | 最高时速 {{ car.max_speed_kmh }}km/h</text>
                   </view>
                   <!-- 审核原因 -->
-                  <view v-if="car.review_reason" class="verification-reason mt-1">
+                  <view v-if="car.review_reason" class="verification-reason mt-2">
-                    <text class="text-xs text-red-500">审核结果：{{ car.review_reason }}</text>
+                    <!-- <text class="text-xs text-red-500">审核结果：{{ car.review_reason }}</text> -->
+                    <nut-config-provider :theme-vars="themeVars">
+                      <nut-ellipsis :content="car.review_reason" direction="end" rows="2" expand-text="展开" collapse-text="收起"></nut-ellipsis>
+                    </nut-config-provider>
                   </view>
                   <view class="price-section">
                     <view v-if="car.price" class="current-price">¥{{ car.price }}</view>
@@ -70,7 +73,7 @@
             </nut-row>
             <!-- 操作按钮 -->
-            <view class="action-buttons mt-4">
+            <view class="action-buttons mt-2">
               <nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button>
               <!-- 只有审核状态为3时才显示上架/下架按钮 -->
               <nut-button
@@ -128,6 +131,10 @@ import './index.less'
 // 导入接口
 import { getMyListingVehicleAPI, changeVehicleStatusAPI } from '@/api/car';
+const themeVars = {
+  ellipsisExpandCollapseColor: '#f97316'
+}
+
 // 认证状态映射
 const verifyStatus = ref({
   1: '未认证',
--- a/src/pages/sell/index.vue
View file @4c5f7f2
+++ b/src/pages/sell/index.vue
View file @4c5f7f2
@@ -863,8 +863,8 @@ const createCar = async (data) => {
 const updateCar = async (id, data) => {
     // 只编辑车辆时，op=edit，表示只编辑车辆信息
-    // 编辑车辆，且申请认证时，op=verification，表示申请认证
+    // 编辑车辆，且申请卖车时，op=review，表示申请卖车审核
-    const { code } = await editVehicleAPI({ id, ...data, op: isAuthMode.value ? 'verification' : 'edit' })
+    const { code } = await editVehicleAPI({ id, ...data, op: isAuthMode.value ? 'review' : 'edit' })
     if (code) {
         Taro.hideLoading()
         Taro.showToast({
--- a/src/pages/setAuthCar/index.vue
View file @4c5f7f2
+++ b/src/pages/setAuthCar/index.vue
View file @4c5f7f2
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 15:57:39
+ * @LastEditTime: 2025-07-17 10:36:52
  * @FilePath: /jgdl/src/pages/setAuthCar/index.vue
  * @Description: 申请认证
 -->
@@ -468,8 +468,8 @@ const onSubmit = async () => {
     try {
         // 调用真实API
         if (isEditMode.value) {
-            // 编辑车辆，且申请卖车时，op=review，表示申请卖车审核
+            // 编辑车辆，且认证时，op=verification，表示申请认证
-            const { code } = await editVehicleAPI({ id: carId.value, ...formData, op: 'review' })
+            const { code } = await editVehicleAPI({ id: carId.value, ...formData, op: 'verification' })
             if (!code) {
                 throw new Error('更新失败')
             }