feat: 添加车辆已售状态样式和禁用表单交互

- 为已售车辆添加特殊样式和标签显示 - 增加表单禁用状态的样式和交互限制 - 优化订单剩余时间计算逻辑 - 更新测试环境的openid配置

feat: 添加车辆已售状态样式和禁用表单交互
- 为已售车辆添加特殊样式和标签显示 - 增加表单禁用状态的样式和交互限制 - 优化订单剩余时间计算逻辑 - 更新测试环境的openid配置
hookehuyr
Commit 8c8b3914a3b59cd35cc6b1f11e8923b535a09b19 8c8b3914 1 parent 1f7de325
Showing 6 changed files with 98 additions and 24 deletions
src/pages/auth/index.vue
src/pages/myCar/index.less
src/pages/myCar/index.vue
src/pages/myOrders/index.vue
src/pages/sell/index.less
src/pages/sell/index.vue
--- a/src/pages/auth/index.vue
View file @8c8b391
+++ b/src/pages/auth/index.vue
View file @8c8b391
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-14 16:51:45
+ * @LastEditTime: 2025-07-18 11:37:09
  * @FilePath: /jgdl/src/pages/auth/index.vue
  * @Description: 文件描述
 -->
@@ -90,7 +90,8 @@ export default {
       // 测试环境下传递openid，正式环境不传递
       if (process.env.NODE_ENV === 'development') {
-        requestData.openid = 'h-008';
+        // requestData.openid = 'h-008';
+        requestData.openid = 'oWbdFvkD5VtloC50wSNR9IWiU2q8';
       }
       request.post('/srv/?a=openid', requestData)
--- a/src/pages/myCar/index.less
View file @8c8b391
+++ b/src/pages/myCar/index.less
View file @8c8b391
@@ -176,6 +176,24 @@
   font-size: 40rpx;
   font-weight: bold;
   color: #f97316;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+
+  .sold-price {
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+
+.sold-label {
+  font-size: 28rpx;
+  color: #ef4444;
+  // background: #fef2f2;
+  // border: 1rpx solid #fecaca;
+  // border-radius: 8rpx;
+  // padding: 4rpx 12rpx;
+  font-weight: normal;
 }
 .market-price {
--- a/src/pages/myCar/index.vue
View file @8c8b391
+++ b/src/pages/myCar/index.vue
View file @8c8b391
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-17 11:00:00
+ * @LastEditTime: 2025-07-18 12:20:28
  * @FilePath: /jgdl/src/pages/myCar/index.vue
  * @Description: 文件描述
 -->
@@ -40,7 +40,7 @@
               <!-- 右侧：车辆信息 -->
               <nut-col :span="18">
                 <view class="car-info">
-                  <view class="car-title">{{ car.manufacture_year }}款 {{ car.brand }} {{ car.model }}</view>
+                  <view class="car-title" @click="goToCarDetail(car.id)">{{ car.manufacture_year }}款 {{ car.brand }} {{ car.model }}</view>
                   <!-- 状态标识 -->
                   <view class="status-badges">
                     <view v-if="car.verification_status" class="status-badge" :class="getVerificationStatusClass(car.verification_status)">
@@ -65,15 +65,18 @@
                     </nut-config-provider>
                   </view>
                   <view class="price-section">
-                    <view v-if="car.price" class="current-price">¥{{ car.price }}</view>
+                    <view v-if="car.price" class="current-price">
-                    <view v-if="car.market_price" class="market-price">市场价 ¥{{ car.market_price }}</view>
+                      <text :class="{ 'sold-price': car.is_sold }">¥{{ car.price }}</text>
+                      <text v-if="car.is_sold" class="sold-label">已售出</text>
+                    </view>
+                    <view v-if="car.market_price && !car.is_sold" class="market-price">市场价 ¥{{ car.market_price }}</view>
                   </view>
                 </view>
               </nut-col>
             </nut-row>
-            <!-- 操作按钮 -->
+            <!-- 操作按钮 只能修改未卖出的车 -->
-            <view class="action-buttons mt-2">
+            <view v-if="!car.is_sold" class="action-buttons mt-2">
               <nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button>
               <!-- 只有审核状态为3时才显示上架/下架按钮 -->
               <nut-button
@@ -82,7 +85,7 @@
                 :type="car.status === 5 ? 'success' : 'warning'"
                 @click="toggleOffline(car)"
               >
-                {{ car.status === 5 && !car.is_sold ? '上架' : '下架' }}
+                {{ car.status === 5 ? '上架' : '下架' }}
               </nut-button>
               <nut-button
                 v-if="car.review_status === 5"
@@ -345,7 +348,14 @@ const showToast = (message, type = 'success') => {
   })
 }
-
+/**
+ * 跳转到车源详情页
+ */
+const goToCarDetail = (carId) => {
+  Taro.navigateTo({
+    url: `/pages/productDetail/index?id=${carId}`
+  })
+}
 // 页面加载时获取数据
 useDidShow(() => {
--- a/src/pages/myOrders/index.vue
View file @8c8b391
+++ b/src/pages/myOrders/index.vue
View file @8c8b391
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 18:23:31
+ * @LastEditTime: 2025-07-18 12:23:09
  * @FilePath: /jgdl/src/pages/myOrders/index.vue
  * @Description: 订单管理页面
 -->
@@ -440,7 +440,11 @@ const loadOrderData = async (isLoadMore = false) => {
         // TODO: 为待支付订单添加mock的倒计时时间（1800秒用于测试）
         if (processedOrder.status === 3) {
-          processedOrder.remain_time = processedOrder.pay_time || 1800
+           // 计算剩余时间（毫秒）
+          const current_date = new Date(processedOrder.server_time);
+          const end_date = new Date(processedOrder.pay_deadline_time);
+          let time_left = end_date - current_date;
+          processedOrder.remain_time = time_left || 1800
         }
         return processedOrder
--- a/src/pages/sell/index.less
View file @8c8b391
+++ b/src/pages/sell/index.less
View file @8c8b391
@@ -149,10 +149,23 @@
     font-weight: 500;
 }
+.form-value-disabled {
+    color: #d1d5db !important; /* 禁用状态文字颜色 */
+}
+
 .arrow-icon {
     color: #9ca3af;
 }
+.arrow-icon-disabled {
+    color: #d1d5db !important; /* 禁用状态箭头颜色 */
+}
+
+.form-item-disabled {
+    opacity: 0.6; /* 禁用状态整体透明度 */
+    cursor: not-allowed;
+}
+
 .form-item-content {
     display: flex;
     justify-content: space-between;
--- a/src/pages/sell/index.vue
View file @8c8b391
+++ b/src/pages/sell/index.vue
View file @8c8b391
@@ -127,11 +127,11 @@
                     <!-- 品牌型号选择（新版） -->
                     <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel">
-                        <view class="form-item-content" @click="showBrandModelPicker">
+                        <view class="form-item-content" :class="{ 'form-item-disabled': isVerified }" @click="showBrandModelPicker">
-                            <text class="form-value" :class="{ 'form-value-selected': formData.brand && formData.model, 'form-value-placeholder': !(formData.brand && formData.model) }">
+                            <text class="form-value" :class="{ 'form-value-selected': formData.brand && formData.model, 'form-value-placeholder': !(formData.brand && formData.model), 'form-value-disabled': isVerified }">
                                 {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' }}
                             </text>
-                            <Right class="arrow-icon" />
+                            <Right class="arrow-icon" :class="{ 'arrow-icon-disabled': isVerified }" />
                         </view>
                     </nut-form-item>
@@ -163,7 +163,7 @@
                     <!-- 续航里程 -->
                     <nut-form-item label="续航里程" prop="range_km">
-                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right" @input="validateRangeInput">
+                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right" :disabled="isVerified" @click="validateRangeInput" @input="validateNumberInput($event, 'range_km', false)">
                             <template #right>
                                 <text class="unit">公里</text>
                             </template>
@@ -173,7 +173,7 @@
                     <!-- 最高时速 -->
                     <nut-form-item label="最高时速" prop="max_speed_kmh">
                         <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number"
-                            input-align="right" @input="validateMaxSpeedInput">
+                            input-align="right" :disabled="isVerified" @click="validateMaxSpeedInput" @input="validateNumberInput($event, 'max_speed_kmh', false)">
                             <template #right>
                                 <text class="unit">km/h</text>
                             </template>
@@ -320,7 +320,7 @@
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { Plus, Right, Location, Close } from '@nutui/icons-vue-taro'
 import Taro from '@tarojs/taro'
 import BASE_URL from '@/utils/config';
@@ -419,6 +419,22 @@ const tireWearValue = ref([])
 // 年份选择器最大日期限制（当前年份的12月31日）
 const maxYearDate = ref(new Date(new Date().getFullYear(), 11, 31))
+// 计算属性：判断是否为已认证状态
+const isVerified = computed(() => {
+    return isEditMode.value && formData.verification_status === 5
+})
+
+/**
+ * 显示已认证不能修改的提醒
+ */
+const showVerifiedTip = () => {
+    Taro.showToast({
+        title: '车辆已认证，该项不能修改',
+        icon: 'none',
+        duration: 2000
+    })
+}
+
 // 选择器选项数据
 const schoolOptions = ref([])
 const brandOptions = ref([])
@@ -672,19 +688,27 @@ const validateMileageInput = (event) => {
 }
 /**
- * 校验续航里程输入，只允许整数，范围0-99999
+ * 校验续航里程输入权限
- * @param {Object} event - 输入事件对象
+ * @param {Object} event - 点击事件对象
  */
+// eslint-disable-next-line no-unused-vars
 const validateRangeInput = (event) => {
-    validateNumberInput(event, 'range_km', false)
+    if (isVerified.value) {
+        showVerifiedTip()
+        return
+    }
 }
 /**
- * 校验最高时速输入，只允许整数，范围0-99999
+ * 校验最高时速输入权限
- * @param {Object} event - 输入事件对象
+ * @param {Object} event - 点击事件对象
  */
+// eslint-disable-next-line no-unused-vars
 const validateMaxSpeedInput = (event) => {
-    validateNumberInput(event, 'max_speed_kmh', false)
+    if (isVerified.value) {
+        showVerifiedTip()
+        return
+    }
 }
 /**
@@ -765,6 +789,10 @@ const onTireWearConfirm = ({ selectedValue }) => {
  * 显示品牌型号选择器
  */
 const showBrandModelPicker = () => {
+    if (isVerified.value) {
+        showVerifiedTip()
+        return
+    }
     brandModelPickerRef.value?.show()
 }