hookehuyr

fix: 添加条件渲染防止未定义属性导致的显示错误

在订单管理和商品详情页中,为可能未定义的属性添加v-if条件渲染
避免当这些属性不存在时导致页面显示异常
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-08-01 14:43:46 4 + * @LastEditTime: 2025-08-04 14:29:21
5 * @FilePath: /jgdl/src/pages/myOrders/index.vue 5 * @FilePath: /jgdl/src/pages/myOrders/index.vue
6 * @Description: 订单管理页面 6 * @Description: 订单管理页面
7 --> 7 -->
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
78 <view class="vehicle-details"> 78 <view class="vehicle-details">
79 <text class="vehicle-name">{{ order.details.vehicle.brand }} {{ order.details.vehicle.model }}</text> 79 <text class="vehicle-name">{{ order.details.vehicle.brand }} {{ order.details.vehicle.model }}</text>
80 <text class="vehicle-specs"> 80 <text class="vehicle-specs">
81 - <text>{{ order.details.vehicle.manufacture_year }}年 | </text>续航{{ order.details.vehicle.range_km }}km 81 + <text v-if="order.details.vehicle.manufacture_year">{{ order.details.vehicle.manufacture_year }}年 | </text>续航{{ order.details.vehicle.range_km }}km
82 </text> 82 </text>
83 <text class="vehicle-battery">电池容量:{{ order.details.vehicle.battery_capacity_ah }}Ah</text> 83 <text class="vehicle-battery">电池容量:{{ order.details.vehicle.battery_capacity_ah }}Ah</text>
84 <text v-if="order.details.vehicle.price" class="vehicle-price">¥{{ order.details.vehicle.price }}</text> 84 <text v-if="order.details.vehicle.price" class="vehicle-price">¥{{ order.details.vehicle.price }}</text>
......
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-08-01 14:35:15 4 + * @LastEditTime: 2025-08-04 14:32:52
5 * @FilePath: /jgdl/src/pages/productDetail/index.vue 5 * @FilePath: /jgdl/src/pages/productDetail/index.vue
6 * @Description: 商品详情页 6 * @Description: 商品详情页
7 --> 7 -->
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
54 <view class="basic-info bg-white mt-2 p-4"> 54 <view class="basic-info bg-white mt-2 p-4">
55 <text class="text-lg font-medium mb-3 block">基本信息</text> 55 <text class="text-lg font-medium mb-3 block">基本信息</text>
56 <view class="grid grid-cols-2 gap-4"> 56 <view class="grid grid-cols-2 gap-4">
57 - <view class="flex items-center"> 57 + <view v-if="product?.manufacture_year" class="flex items-center">
58 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4"> 58 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
59 <text class="text-orange-500">📅</text> 59 <text class="text-orange-500">📅</text>
60 </view> 60 </view>
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
63 <text class="text-sm block">{{ product.manufacture_year }}</text> 63 <text class="text-sm block">{{ product.manufacture_year }}</text>
64 </view> 64 </view>
65 </view> 65 </view>
66 - <view class="flex items-center"> 66 + <view v-if="product?.range_km" class="flex items-center">
67 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4"> 67 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
68 <text class="text-orange-500">🔋</text> 68 <text class="text-orange-500">🔋</text>
69 </view> 69 </view>
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
72 <text class="text-sm block">{{ product.range_km }}</text> 72 <text class="text-sm block">{{ product.range_km }}</text>
73 </view> 73 </view>
74 </view> 74 </view>
75 - <view class="flex items-center"> 75 + <view v-if="product?.total_mileage_km" class="flex items-center">
76 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4"> 76 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
77 <text class="text-orange-500" style="padding-bottom: 10rpx;">🛣️</text> 77 <text class="text-orange-500" style="padding-bottom: 10rpx;">🛣️</text>
78 </view> 78 </view>
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
81 <text class="text-sm block">{{ product.total_mileage_km }}</text> 81 <text class="text-sm block">{{ product.total_mileage_km }}</text>
82 </view> 82 </view>
83 </view> 83 </view>
84 - <view class="flex items-center"> 84 + <view v-if="product?.max_speed_kmh" class="flex items-center">
85 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4"> 85 <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
86 <text class="text-orange-500">⚡</text> 86 <text class="text-orange-500">⚡</text>
87 </view> 87 </view>
...@@ -94,22 +94,22 @@ ...@@ -94,22 +94,22 @@
94 </view> 94 </view>
95 95
96 <!-- 车辆评估 --> 96 <!-- 车辆评估 -->
97 - <view class="vehicle-condition bg-white mt-2 p-4"> 97 + <view v-if="product?.new_level || product?.brake_wear_level || product?.tire_wear_level" class="vehicle-condition bg-white mt-2 p-4">
98 <text class="text-lg font-medium mb-3 block">车辆评估</text> 98 <text class="text-lg font-medium mb-3 block">车辆评估</text>
99 <view class="space-y-3"> 99 <view class="space-y-3">
100 - <view class="flex justify-between items-center"> 100 + <view v-if="product?.new_level" class="flex justify-between items-center">
101 <text>车辆成色</text> 101 <text>车辆成色</text>
102 <view class="flex"> 102 <view class="flex">
103 <nut-rate v-model="product.new_level" active-color="orange" readonly size="14" /> 103 <nut-rate v-model="product.new_level" active-color="orange" readonly size="14" />
104 </view> 104 </view>
105 </view> 105 </view>
106 - <view class="flex justify-between items-center"> 106 + <view v-if="product?.brake_wear_level" class="flex justify-between items-center">
107 <text>刹车磨损度</text> 107 <text>刹车磨损度</text>
108 <view class="flex"> 108 <view class="flex">
109 <nut-rate v-model="product.brake_wear_level" active-color="orange" readonly size="14" /> 109 <nut-rate v-model="product.brake_wear_level" active-color="orange" readonly size="14" />
110 </view> 110 </view>
111 </view> 111 </view>
112 - <view class="flex justify-between items-center"> 112 + <view v-if="product?.tire_wear_level" class="flex justify-between items-center">
113 <text>轮胎磨损度</text> 113 <text>轮胎磨损度</text>
114 <view class="flex"> 114 <view class="flex">
115 <nut-rate v-model="product.tire_wear_level" active-color="orange" readonly size="14" /> 115 <nut-rate v-model="product.tire_wear_level" active-color="orange" readonly size="14" />
......