Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4c5f7f2c 1 parent f081bfe5

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

- 修改车辆状态标签样式为边框风格
- 添加NutEllipsis组件用于折叠长文本的审核原因
- 调整页面布局和间距
- 统一认证和卖车审核的操作类型参数
- 更新搜索框和消息图标样式
Inline Side-by-side
Showing 9 changed files with 52 additions and 23 deletions
......@@ -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']
......
......@@ -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'
......
<!--
* @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>
......
......@@ -82,6 +82,9 @@
border-radius: 8rpx;
padding: 12rpx;
margin-top: 8rpx;
color: #dc2626;
font-size: 23rpx;
margin-bottom: 8rpx;
text {
font-size: 22rpx;
......
<!--
* @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相关 ====================
// ==================== 响应式数据 ====================
......
......@@ -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 {
......
<!--
* @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">
<text class="text-xs text-red-500">审核结果：{{ car.review_reason }}</text>
<view v-if="car.review_reason" class="verification-reason mt-2">
<!-- <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: '未认证',
......
......@@ -863,8 +863,8 @@ const createCar = async (data) => {
const updateCar = async (id, data) => {
// 只编辑车辆时，op=edit，表示只编辑车辆信息
// 编辑车辆，且申请认证时，op=verification，表示申请认证
const { code } = await editVehicleAPI({ id, ...data, op: isAuthMode.value ? 'verification' : 'edit' })
// 编辑车辆，且申请卖车时，op=review，表示申请卖车审核
const { code } = await editVehicleAPI({ id, ...data, op: isAuthMode.value ? 'review' : 'edit' })
if (code) {
Taro.hideLoading()
Taro.showToast({
......
<!--
* @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，表示申请卖车审核
const { code } = await editVehicleAPI({ id: carId.value, ...formData, op: 'review' })
// 编辑车辆，且认证时，op=verification，表示申请认证
const { code } = await editVehicleAPI({ id: carId.value, ...formData, op: 'verification' })
if (!code) {
throw new Error('更新失败')
}
......