guzijian / garbage-removal · Commits

Commit 7b6c1777a708a26f80e0d45824f111eed72e14d1

Authored by lichao
1 parent 2837c826
build: skipped

提交

Inline Side-by-side
Showing 2 changed files with 944 additions and 219 deletions
garbage-removal/src/apis/order.js
  View file @7b6c177
@@ -204,3 +204,10 @@ export async function queryByOrderNoDriver(orderNo) { @@ -204,3 +204,10 @@ export async function queryByOrderNoDriver(orderNo) {
204 export async function updateCarCount(params) { 204 export async function updateCarCount(params) {
205 return await request.post(`/order/updateCarCount`, params); 205 return await request.post(`/order/updateCarCount`, params);
206 } 206 }
  207 +export async function insertRandomCopyByTypeAndOrderId(params) {
  208 + return await request.post(`/order/insertRandomCopyByTypeAndOrderId`, params);
  209 +}
  210 +
  211 +export async function selectGarOrderCar(orderNo) {
  212 + return await request.get(`/order/selectGarOrderCar/${orderNo}`);
  213 +}
garbage-removal/src/pages/order-info/order-other/detail/index.vue
  View file @7b6c177
@@ -60,94 +60,169 @@ @@ -60,94 +60,169 @@
60 </view> 60 </view>
61 </view> 61 </view>
62 <!-- 订单信息 --> 62 <!-- 订单信息 -->
63 - <view class="order-detail-container-box-card">  
64 - <view class="order-detail-container-header-card-title">  
65 - <view class="order-detail-container-header-card-uicon"></view>  
66 - 订单信息  
67 - </view>  
68 - <view class="order-detail-container-header-item"  
69 - @click.stop="handlerJumpOtherApp(dataGram.garLatitude, dataGram.garLongitude, dataGram.garCoordinate)">  
70 - <text class="order-detail-container-header-title">清运地点：</text>  
71 - <view class="order-detail-container-header-content" style="text-decoration: underline">  
72 - <text selectable='true'>{{ dataGram.garOrderAddress + dataGram.garOrderAddressDetails }}</text>  
73 - </view>  
74 - </view>  
75 - <view class="order-detail-container-header-item">  
76 - <text class="order-detail-container-header-title">现场图片：</text>  
77 - <view class="order-detail-container-header-content">  
78 - <u-upload width="180" height="130" :fileList="currentImages" name="3" multiple :maxCount="10"  
79 - :previewFullImage="true" :isReadOnly="true"></u-upload>  
80 - </view>  
81 - </view>  
82 - <view class="order-detail-container-header-item">  
83 - <text class="order-detail-container-header-title">负责单位：</text>  
84 - <view class="order-detail-container-header-content">  
85 - {{ dataGram.garOrderCompanyName }}  
86 - </view>  
87 - </view>  
88 - <view class="order-detail-container-header-item">  
89 - <text class="order-detail-container-header-title">垃圾类型：</text>  
90 - <view class="order-detail-container-header-content">  
91 - {{ dataGram.garOrderTrashType }}  
92 - </view>  
93 - </view> 63 + <view class="order-detail-container-box-card order-info-section">
  64 + <view class="order-info-header">
  65 + <view class="order-detail-container-header-card-uicon"></view>
  66 + <u-icon name="file-text" size="22" color="#fff" style="margin-right: 8rpx;"></u-icon>
  67 + <text class="title-text">订单信息</text>
  68 + </view>
94 69
95 - <view class="order-detail-container-header-item" v-for="(disposal,index) in dataGram.disposalSites">  
96 - <view>  
97 - <text class="order-detail-container-header-title" v-if="index == 0">处置场地：</text>  
98 - <text class="order-detail-container-header-title" v-else>&emsp;&emsp;&emsp;&emsp;&emsp;</text>  
99 - </view>  
100 - <view class="order-detail-container-header-content" style="text-decoration: underline"  
101 - @click.stop="handlerJumpOtherApp(disposal.latitude, disposal.longitude, dataGram.garCoordinate)">  
102 - <text>{{ disposal.addrStr }}</text>  
103 - </view>  
104 - </view> 70 + <view class="info-item">
  71 + <view class="info-label">
  72 + <u-icon name="map" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  73 + <text>清运地点:</text>
  74 + </view>
  75 + <view class="info-content" @click.stop="handlerJumpOtherApp(dataGram.garLatitude, dataGram.garLongitude, dataGram.garCoordinate)">
  76 + <text class="content-text" selectable='true'>{{ dataGram.garOrderAddress + dataGram.garOrderAddressDetails }}</text>
  77 + </view>
  78 + </view>
105 79
106 - <view class="order-detail-container-header-item">  
107 - <text class="order-detail-container-header-title">订单号：</text>  
108 - <view class="order-detail-container-header-content">  
109 - <text selectable="true">{{ orderId }}</text>  
110 - </view>  
111 - <!-- 生成二维码 -->  
112 - <view class="order-detail-container-header-qrCode" style="display: flex; align-items: center;">  
113 - <view @click="handleQrCodeClick(orderId)" class="iconfont icon-erweima-xian"></view>  
114 - </view>  
115 - </view>  
116 - </view> 80 + <view class="info-item">
  81 + <view class="info-label">
  82 + <u-icon name="photo" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  83 + <text>现场图片:</text>
  84 + </view>
  85 + <view class="info-content">
  86 + <u-upload width="180" height="130" :fileList="currentImages" name="3" multiple :maxCount="10"
  87 + :previewFullImage="true" :isReadOnly="true"></u-upload>
  88 + </view>
  89 + </view>
  90 +
  91 + <view class="info-item">
  92 + <view class="info-label">
  93 + <u-icon name="account" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  94 + <text>负责单位:</text>
  95 + </view>
  96 + <view class="info-content">
  97 + <text class="content-text">{{ dataGram.garOrderCompanyName }}</text>
  98 + </view>
  99 + </view>
  100 +
  101 + <view class="info-item">
  102 + <view class="info-label">
  103 + <u-icon name="trash" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  104 + <text>垃圾类型:</text>
  105 + </view>
  106 + <view class="info-content">
  107 + <text class="content-text">{{ dataGram.garOrderTrashType }}</text>
  108 + </view>
  109 + </view>
  110 +
  111 + <view class="info-item" v-for="(disposal,index) in dataGram.disposalSites" :key="index">
  112 + <view class="info-label">
  113 + <u-icon name="location" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  114 + <text v-if="index == 0">处置场地:</text>
  115 + <text v-else></text>
  116 + </view>
  117 + <view class="info-content" @click.stop="handlerJumpOtherApp(disposal.latitude, disposal.longitude, dataGram.garCoordinate)">
  118 + <text class="content-text">{{ disposal.addrStr }}</text>
  119 + </view>
  120 + </view>
  121 +
  122 + <view class="info-item">
  123 + <view class="info-label">
  124 + <u-icon name="order" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  125 + <text>订单号:</text>
  126 + </view>
  127 + <view class="info-content">
  128 + <text class="content-text" selectable="true">{{ orderId }}</text>
  129 + <!-- 生成二维码 -->
  130 + <view class="qr-code-icon" @click="handleQrCodeClick(orderId)">
  131 + <view class="iconfont icon-erweima-xian" style="font-size: 20px; color: #19a97c;"></view>
  132 + </view>
  133 + </view>
  134 + </view>
  135 + </view>
117 <!-- 车辆信息 --> 136 <!-- 车辆信息 -->
118 - <view class="order-detail-container-box-card">  
119 - <view class="order-detail-container-header-card-title">  
120 - <view class="order-detail-container-header-card-uicon"></view>  
121 - 车辆信息  
122 - </view>  
123 - <view style="margin-bottom: 8px">  
124 - 当前订单总计需发车次数:{{realCarCount}} 137 +
  138 + <view class="order-detail-container-box-card vehicle-section">
  139 + <view class="section-header">
  140 + <view class="header-icon-bar"></view>
  141 + <u-icon name="car" size="22" color="#fff" style="margin-right: 10rpx;"></u-icon>
  142 + <text class="header-title">车辆信息</text>
  143 + </view>
  144 +
  145 + <view class="trip-summary-card">
  146 + <view class="summary-content">
  147 + <u-icon name="info-circle" size="18" color="#19a97c" style="margin-right: 10rpx;"></u-icon>
  148 + <text class="summary-label">当前订单总计需发车次数:</text>
  149 + <text class="summary-value">{{ realCarCount }}</text>
  150 + <text class="summary-unit">次</text>
  151 + </view>
125 </view> 152 </view>
126 - <view class="order-detail-container-box-card" v-if="driverList.length > 0">  
127 - <view class="driver-info-container">  
128 - <view class="driver-info-row" v-for="(driver, index) in driverList" :key="index">  
129 - <text class="driver-name">驾驶员: {{ driver.garOrderHandlerName }}</text>  
130 - <text class="car-code">车牌号: {{ driver.garHandlerCarCode }}</text>  
131 - <text>正在清运</text> 153 +
  154 + <view class="vehicle-info-card" v-if="dataGram.garCarInfoList && dataGram.garCarInfoList.length > 0">
  155 + <view class="card-header">
  156 + <u-icon name="file-text" size="18" color="#19a97c"></u-icon>
  157 + <text class="card-title">车辆类型详情</text>
  158 + </view>
  159 + <view class="car-type-list">
  160 + <view class="car-type-item" v-for="(car, index) in garCarTypeList" :key="index">
  161 + <view class="car-type-info">
  162 + <u-icon name="car-fill" size="16" color="#19a97c"></u-icon>
  163 + <text class="info-label">车型:</text>
  164 + <text class="info-value">{{ car.garOrderCarType }}</text>
  165 + </view>
  166 + <view class="car-count-info">
  167 + <u-icon name="order" size="16" color="#19a97c"></u-icon>
  168 + <text class="info-label">数量:</text>
  169 + <text class="info-value">{{ car.count }}辆</text>
  170 + </view>
132 </view> 171 </view>
133 </view> 172 </view>
134 </view> 173 </view>
135 - <view class="order-detail-container-header-item" style="justify-content: space-between;"  
136 - v-for="(item) in handlerList">  
137 - <text class="order-detail-container-header-title" style="color: #303133;">  
138 - {{item.garOrderHandlerName}}/{{ item.garHandlerCarCode }}/{{item.garOrderContainerVolume}}  
139 - </text>  
140 - <view class="order-detail-container-header-content">  
141 - <text class="order-detail-container-header-title">  
142 - 趟次:{{item.garCarCount}}车  
143 - </text>  
144 - </view>  
145 - </view>  
146 174
147 - <view v-if="userType == '运输企业负责人'" class="order-detail-container-header-item" style="justify-content: space-between; align-items: center;">  
148 - <text class="order-detail-container-header-title" style="color: #303133;">分配趟次:</text> 175 + <view class="driver-info-card" v-if="driverList.length > 0">
  176 + <view class="card-header">
  177 + <u-icon name="account" size="18" color="#19a97c"></u-icon>
  178 + <text class="card-title">驾驶员信息</text>
  179 + </view>
  180 + <view class="driver-list">
  181 + <view class="driver-item" v-for="(driver, index) in driverList" :key="index">
  182 + <view class="driver-basic-info">
  183 + <u-icon name="account" size="16" color="#19a97c"></u-icon>
  184 + <text class="info-label">驾驶员:</text>
  185 + <text class="info-value">{{ driver.garOrderHandlerName }}</text>
  186 + </view>
  187 + <view class="driver-car-info">
  188 + <u-icon name="car" size="16" color="#19a97c"></u-icon>
  189 + <text class="info-label">车牌号:</text>
  190 + <text class="info-value">{{ driver.garHandlerCarCode }}</text>
  191 + </view>
  192 + <view class="driver-status">
  193 + <u-tag text="正在清运" type="success" size="mini" />
  194 + </view>
  195 + </view>
  196 + </view>
  197 + </view>
149 198
150 - <select v-model="selectedHandlerTel" style="margin-left: 20rpx; width: 160rpx; height: 46rpx; border: 1px solid #DCDFE6; border-radius: 4px; padding: 0 10px; outline: none;"> 199 + <view class="handler-list-card">
  200 + <view class="card-header">
  201 + <u-icon name="list" size="18" color="#19a97c"></u-icon>
  202 + <text class="card-title">处理人员信息</text>
  203 + </view>
  204 + <view class="handler-item" v-for="(item, index) in handlerList" :key="index">
  205 + <view class="handler-basic-info">
  206 + <text class="handler-name">{{ item.garOrderHandlerName }}</text>
  207 + <text class="handler-car">{{ item.garHandlerCarCode }}</text>
  208 + <text class="handler-volume">{{ item.garOrderContainerVolume }}</text>
  209 + </view>
  210 + <view class="handler-trip-count">
  211 + <text class="count-label">趟次:</text>
  212 + <text class="count-value">{{ item.garCarCount }}车</text>
  213 + </view>
  214 + </view>
  215 + </view>
  216 +
  217 + <view class="assign-trip-card" v-if="userType == '运输企业负责人'">
  218 + <view class="card-header">
  219 + <u-icon name="edit-pen" size="18" color="#19a97c"></u-icon>
  220 + <text class="card-title">分配趟次</text>
  221 + </view>
  222 + <view class="assign-content">
  223 + <view class="selector-wrapper">
  224 + <text class="selector-label">分配人员:</text>
  225 + <select v-model="selectedHandlerTel" class="handler-selector">
151 <option value="">请选择分配人员</option> 226 <option value="">请选择分配人员</option>
152 <option value="ADD_TOTAL_TRIPS">新增总趟次</option> 227 <option value="ADD_TOTAL_TRIPS">新增总趟次</option>
153 <option 228 <option
@@ -157,104 +232,164 @@ @@ -157,104 +232,164 @@
157 {{ handler.garOrderHandlerName }} 232 {{ handler.garOrderHandlerName }}
158 </option> 233 </option>
159 </select> 234 </select>
  235 + </view>
160 236
  237 + <view class="number-box-wrapper">
  238 + <text class="number-label">趟次数量:</text>
  239 + <u-number-box
  240 + v-model="carCount"
  241 + :min="0"
  242 + :max="999"
  243 + integer
  244 + buttonSize="46"
  245 + inputWidth="70">
  246 + </u-number-box>
  247 + </view>
161 248
162 - <view class="order-detail-container-header-content" style="display: flex; align-items: center;">  
163 - <u-number-box  
164 - v-model="carCount"  
165 - :min="0"  
166 - :max="999"  
167 - integer  
168 - buttonSize="46"  
169 - inputWidth="70">  
170 - </u-number-box> 249 + <u-button
  250 + type="success"
  251 + class="confirm-button"
  252 + @click="confirmAddVehicle"
  253 + :disabled="!isDriverAssigned">
  254 + 确定
  255 + </u-button>
  256 + </view>
  257 + </view>
  258 +
  259 + <view class="assign-trip-card" v-if="dataGram.garEvaluateFlag !== 0 && userType === '用户'">
  260 + <view class="card-header">
  261 + <u-icon name="edit-pen" size="18" color="#19a97c"></u-icon>
  262 + <text class="card-title">新增车辆</text>
  263 + </view>
  264 + <view class="assign-content">
  265 + <view class="selector-wrapper">
  266 + <text class="selector-label">新增车辆:</text>
  267 + <select v-model="selectedHandlerTels" class="handler-selector">
  268 + <option value="">请选择分配人员</option>
  269 + <option
  270 + v-for="car in garCarTypeList"
  271 + :key="car.garOrderCarType"
  272 + :value="car.garOrderCarType">
  273 + {{ car.garOrderCarType }}
  274 + </option>
  275 + </select>
  276 + </view>
  277 +
  278 + <view class="number-box-wrapper">
  279 + <text class="number-label">趟次数量:</text>
  280 + <u-number-box
  281 + v-model="carCount"
  282 + :min="0"
  283 + :max="999"
  284 + integer
  285 + buttonSize="46"
  286 + inputWidth="70">
  287 + </u-number-box>
  288 + </view>
171 289
172 - <u-button type="primary" color="#19a97c" style="margin-left: 20rpx; height: 46rpx; width: 120rpx;" @click="confirmAddVehicle" :disabled="!isDriverAssigned">确定</u-button> 290 + <u-button
  291 + type="success"
  292 + class="confirm-button"
  293 + @click="confirmAddVehicles"
  294 + >
  295 + 确定
  296 + </u-button>
173 </view> 297 </view>
174 </view> 298 </view>
175 - </view>  
176 - <!-- 订单记录 -->  
177 - <view class="order-detail-container-box-card">  
178 - <view class="order-detail-container-header-card-title">  
179 - <view class="order-detail-container-header-card-uicon"></view>  
180 - 订单人员  
181 - </view>  
182 - <!-- <view class="order-detail-container-header-item">  
183 - <text class="order-detail-container-header-title">订单时间：</text>  
184 - <view class="order-detail-container-header-content">  
185 - {{ dataGram.garCreateTime }} 299 + </view>
  300 +
  301 +
  302 +
  303 + <!-- 订单人员 -->
  304 + <view class="order-detail-container-box-card order-person-section">
  305 + <view class="section-header">
  306 + <view class="header-icon-bar"></view>
  307 + <u-icon name="account" size="22" color="#fff" style="margin-right: 8rpx;"></u-icon>
  308 + <text class="header-title">订单人员</text>
  309 + </view>
  310 +
  311 + <view class="info-item">
  312 + <view class="info-label">
  313 + <u-icon name="clock" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  314 + <text>预约时间:</text>
186 </view> 315 </view>
187 - </view> -->  
188 - <view class="order-detail-container-header-item">  
189 - <text class="order-detail-container-header-title">预约时间：</text>  
190 - <view class="order-detail-container-header-content">  
191 - {{ dataGram.garOrderAgreementTime }}  
192 - </view>  
193 - </view>  
194 - <view class="order-detail-container-header-item">  
195 - <text class="order-detail-container-header-title">联系电话：</text>  
196 - <view class="order-detail-container-header-content">  
197 - <text selectable="true">{{ dataGram.garOrderContactTel }}</text>  
198 - <view class="icon-box" style="display: flex; align-items: center; justify-content: center;">  
199 - <u-icon v-if="dataGram.handleFlag" name="phone" size="28"  
200 - @click="handleContactClick(dataGram.garOrderContactTel)"></u-icon>  
201 - </view>  
202 - </view>  
203 - </view>  
204 - <view class="order-detail-container-header-item">  
205 - <text class="order-detail-container-header-title">订单人：</text>  
206 - <view class="order-detail-container-header-content">  
207 - {{ dataGram.garOrderContactName }}  
208 - </view>  
209 - </view> 316 + <view class="info-content">
  317 + <text class="content-text">{{ dataGram.garOrderAgreementTime }}</text>
  318 + </view>
  319 + </view>
210 320
211 - <view class="order-detail-container-header-item">  
212 - <text class="order-detail-container-header-title">备注：</text>  
213 - <view class="order-detail-container-header-content">  
214 - {{ dataGram.garRemark }}  
215 - </view>  
216 - </view>  
217 - </view>  
218 - <!-- 处理信息 -->  
219 - <view class="order-detail-container-box-card">  
220 - <view class="order-detail-container-header-card-title">  
221 - <view class="order-detail-container-header-card-uicon"></view>  
222 - 处理信息  
223 - </view>  
224 - <view v-if="putDownImages.length || putOnImages.length" style="width: 100%;">  
225 - <view class="order-detail-container-header-item">  
226 - <text class=" order-detail-container-header-title">装车照片：</text>  
227 -  
228 - <view class="order-detail-container-header-content" style="flex-direction: column;">  
229 - <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">  
230 - <view class="image-group-header">  
231 - <view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>  
232 - <!-- 根据group.index与真实发车数比较显示状态 -->  
233 - <view class="car-status" :class="{  
234 - 'in-transit': group.index < dataGram.garCarInfoList.length,  
235 - 'completed': group.index >= dataGram.garCarInfoList.length  
236 - }">  
237 - {{ group.index < dataGram.garCarInfoList.length ? '已运完' : '已运完' }}  
238 - </view> 321 + <view class="info-item">
  322 + <view class="info-label">
  323 + <u-icon name="phone" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  324 + <text>联系电话:</text>
  325 + </view>
  326 + <view class="info-content">
  327 + <text class="content-text" selectable="true">{{ dataGram.garOrderContactTel }}</text>
  328 + <view class="icon-box" v-if="dataGram.handleFlag" @click="handleContactClick(dataGram.garOrderContactTel)">
  329 + <u-icon name="phone-fill" size="20" color="#19a97c"></u-icon>
  330 + </view>
  331 + </view>
  332 + </view>
  333 +
  334 + <view class="info-item">
  335 + <view class="info-label">
  336 + <u-icon name="account" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  337 + <text>订单人:</text>
  338 + </view>
  339 + <view class="info-content">
  340 + <text class="content-text">{{ dataGram.garOrderContactName }}</text>
  341 + </view>
  342 + </view>
  343 +
  344 + <view class="info-item">
  345 + <view class="info-label">
  346 + <u-icon name="file-text" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  347 + <text>备注:</text>
  348 + </view>
  349 + <view class="info-content">
  350 + <text class="content-text">{{ dataGram.garRemark }}</text>
  351 + </view>
  352 + </view>
  353 + </view>
  354 +
  355 + <!-- 处理信息 -->
  356 + <view class="order-detail-container-box-card process-info-section">
  357 + <view class="section-header">
  358 + <view class="header-icon-bar"></view>
  359 + <u-icon name="setting" size="22" color="#fff" style="margin-right: 8rpx;"></u-icon>
  360 + <text class="header-title">处理信息</text>
  361 + </view>
  362 +
  363 + <view v-if="putDownImages.length || putOnImages.length" class="photo-section">
  364 + <view class="info-item">
  365 + <view class="info-label">
  366 + <u-icon name="photo" size="16" color="#19a97c" style="margin-right: 8rpx;"></u-icon>
  367 + <text>装车照片:</text>
  368 + </view>
  369 + </view>
  370 +
  371 + <view class="image-groups">
  372 + <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
  373 + <view class="image-group-header">
  374 + <view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>
  375 + <view class="car-status" :class="{
  376 + 'in-transit': group.index < dataGram.garCarInfoList.length,
  377 + 'completed': group.index >= dataGram.garCarInfoList.length
  378 + }">
  379 + {{ group.index < dataGram.garCarInfoList.length ? '已运完' : '已运完' }}
239 </view> 380 </view>
240 - <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"  
241 - :previewFullImage="true" :isReadOnly="true"></u-upload>  
242 </view> 381 </view>
  382 + <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
  383 + :previewFullImage="true" :isReadOnly="true"></u-upload>
243 </view> 384 </view>
244 </view> 385 </view>
245 - <!-- <view class="order-detail-container-header-item">  
246 - <text class=" order-detail-container-header-title">卸车照片：</text>  
247 - <view class="order-detail-container-header-content">  
248 - <u-upload width="180" height="130" :fileList="putDownImages" name="3" multiple  
249 - :maxCount="20" :previewFullImage="true" :isReadOnly="true"></u-upload>  
250 - </view>  
251 - </view> -->  
252 - </view>  
253 - <view v-else class="empty-image"  
254 - style="width: 100%; display: flex; justify-content: center; align-items: center;">  
255 - <image class="image-style" style="width: 200rpx; height: 200rpx;" :src="emptyBase64Image"></image>  
256 - </view>  
257 - </view> 386 + </view>
  387 +
  388 + <view v-else class="empty-image-section">
  389 + <image class="image-style" style="width: 200rpx; height: 200rpx;" :src="emptyBase64Image"></image>
  390 + <text class="empty-text">暂无处理照片</text>
  391 + </view>
  392 + </view>
258 <view class="space-box">{{ spaceStr }}</view> 393 <view class="space-box">{{ spaceStr }}</view>
259 </view> 394 </view>
260 395
@@ -265,22 +400,22 @@ @@ -265,22 +400,22 @@
265 <u-button 400 <u-button
266 v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.garCancelFlag === 0" 401 v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.garCancelFlag === 0"
267 @click="handleOderCancelClick()" shape="square" color="#19a97c" text="取消订单"></u-button> 402 @click="handleOderCancelClick()" shape="square" color="#19a97c" text="取消订单"></u-button>
268 - <u-button  
269 - @click="handleOrder(orderId)"  
270 - shape="square"  
271 - color="#19a97c"  
272 - text="开始运输"  
273 - :disabled="!isDriverAndDisposalAssigned()">  
274 - </u-button>  
275 - <u-button  
276 - v-if="dataGram.garOrderScanHandlerFlag === 0 && userType == '用户' && dataGram.garOrderHandlerStatus != 3 && dataGram.garAskStatus != '1'"  
277 - @click="handlerUpdateOrderClick()" shape="square" color="#19a97c" text="修改车辆数"></u-button> 403 +<!-- <u-button-->
  404 +<!-- v-if="dataGram.garOrderScanHandlerFlag === 0 && userType == '用户' && dataGram.garOrderHandlerStatus != 3 && dataGram.garAskStatus != '1'"-->
  405 +<!-- @click="handlerUpdateOrderClick()" shape="square" color="#19a97c" text="修改车辆数"></u-button>-->
278 </view> 406 </view>
279 <view class="order-detail-bottom-center" v-show="showCenterButtons"> 407 <view class="order-detail-bottom-center" v-show="showCenterButtons">
280 <!-- 修改按钮组容器类名和结构 --> 408 <!-- 修改按钮组容器类名和结构 -->
281 <view class="button-group-wrap" v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.handleFlag && dataGram.garCancelFlag === 0"> 409 <view class="button-group-wrap" v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.handleFlag && dataGram.garCancelFlag === 0">
282 <u-button @click="handleOrderDispatchClick(orderId)" shape="square" color="#19a97c" text="分配驾驶员"></u-button> 410 <u-button @click="handleOrderDispatchClick(orderId)" shape="square" color="#19a97c" text="分配驾驶员"></u-button>
283 <u-button @click="handleDisposalDispatchClick(orderId)" shape="square" color="#19a97c" text="分配处置场所"></u-button> 411 <u-button @click="handleDisposalDispatchClick(orderId)" shape="square" color="#19a97c" text="分配处置场所"></u-button>
  412 + <u-button
  413 + @click="handleOrder(orderId)"
  414 + shape="square"
  415 + color="#19a97c"
  416 + text="开始运输"
  417 + :disabled="!isDriverAndDisposalAssigned()">
  418 + </u-button>
284 </view> 419 </view>
285 420
286 <view class="button-group-spread" v-else-if="!isAllTripsCompleted()"> 421 <view class="button-group-spread" v-else-if="!isAllTripsCompleted()">
@@ -350,12 +485,20 @@ @@ -350,12 +485,20 @@
350 } from '@/apis/carinfo.js'; 485 } from '@/apis/carinfo.js';
351 import { 486 import {
352 dispatchDisposalOrders, 487 dispatchDisposalOrders,
353 - dispatchOrders, getGarOrderMatchHandlers, 488 + dispatchOrders,
  489 + getGarOrderMatchHandlers,
354 queryDisposalDispatch, 490 queryDisposalDispatch,
355 queryOrderDetail, 491 queryOrderDetail,
356 - queryOrderDispatch, sendToDriver, updateGarRealCarCount, 492 + queryOrderDispatch,
  493 + sendToDriver,
  494 + updateGarRealCarCount,
357 updateOrder, 495 updateOrder,
358 - queryCarCode, queryByOrderNo, updateCarCount, queryGarRealCarCountByGarOrderNo 496 + queryCarCode,
  497 + queryByOrderNo,
  498 + updateCarCount,
  499 + queryGarRealCarCountByGarOrderNo,
  500 + selectGarOrderCar,
  501 + insertRandomCopyByTypeAndOrderId
359 } from "@/apis/order.js"; 502 } from "@/apis/order.js";
360 import { 503 import {
361 createQrCode 504 createQrCode
@@ -414,6 +557,8 @@ @@ -414,6 +557,8 @@
414 const candidates = ref([]) 557 const candidates = ref([])
415 const garCarLabelInfoList = ref({}) 558 const garCarLabelInfoList = ref({})
416 const garCarLabelInfoNow = ref() 559 const garCarLabelInfoNow = ref()
  560 + const selectedHandlerTels = ref("")
  561 + const garCarTypeList = ref([])
417 const driverAssigned = ref(false); // 添加这行，跟踪驾驶员是否已分配 562 const driverAssigned = ref(false); // 添加这行，跟踪驾驶员是否已分配
418 const disposalAssigned = ref(false); // 添加这行，跟踪处置场所是否已分配 563 const disposalAssigned = ref(false); // 添加这行，跟踪处置场所是否已分配
419 564
@@ -444,7 +589,7 @@ @@ -444,7 +589,7 @@
444 589
445 const isDriverAssigned = computed(() => { 590 const isDriverAssigned = computed(() => {
446 // 检查是否有分配的驾驶员 591 // 检查是否有分配的驾驶员
447 - return driverList.value && driverList.value.length > 0; 592 + return handlerList.value && handlerList.value.length > 0;
448 }); 593 });
449 const isDriverAndDisposalAssigned = () => { 594 const isDriverAndDisposalAssigned = () => {
450 // 直接使用已有的响应式变量来判断分配状态 595 // 直接使用已有的响应式变量来判断分配状态
@@ -507,13 +652,35 @@ @@ -507,13 +652,35 @@
507 realCarCount.value = res.data.data 652 realCarCount.value = res.data.data
508 } 653 }
509 }) 654 })
  655 +
  656 + selectGarOrderCar(orderNo.value).then(res => {
  657 + if (res.data.success) {
  658 + garCarTypeList.value = res.data.data
  659 + }
  660 + })
510 }; 661 };
  662 + const confirmAddVehicles = () =>{
  663 + const params = {
  664 + carCount: carCount.value,
  665 + tel: tel.value,
  666 + orderNo : orderNo.value,
  667 + orderCarType :selectedHandlerTels.value
  668 + };
  669 + insertRandomCopyByTypeAndOrderId(params).then(res => {
  670 + if (res.data.success) {
  671 + uni.$u.toast(`添加成功!`);
  672 + // 刷新订单详情
  673 + handleOrderDetail(orderId.value);
  674 + refreshOrderData()
  675 + } else {
  676 + uni.$u.toast(`添加失败!`);
  677 + }
  678 + })
  679 + }
511 680
512 681
513 682
514 const confirmAddVehicle = () => { 683 const confirmAddVehicle = () => {
515 - console.log('新增车辆数量:', carCount.value);  
516 - console.log('选中处理人员电话:', tel.value);  
517 684
518 // 检查必填字段 685 // 检查必填字段
519 if (!carCount.value) { 686 if (!carCount.value) {
@@ -527,7 +694,6 @@ @@ -527,7 +694,6 @@
527 694
528 695
529 if (selectedHandlerTel.value === 'ADD_TOTAL_TRIPS') { 696 if (selectedHandlerTel.value === 'ADD_TOTAL_TRIPS') {
530 - const newTotalTrips = (realCarCount.value || 0) + carCount.value;  
531 updateGarRealCarCount(orderId.value, carCount.value) 697 updateGarRealCarCount(orderId.value, carCount.value)
532 .then(res => { 698 .then(res => {
533 if (res.data.success) { 699 if (res.data.success) {
@@ -567,7 +733,8 @@ @@ -567,7 +733,8 @@
567 // 调用API传递订单ID和新增车辆数量 733 // 调用API传递订单ID和新增车辆数量
568 const params = { 734 const params = {
569 carCount: carCount.value, 735 carCount: carCount.value,
570 - tel: tel.value 736 + tel: tel.value,
  737 + orderNo : orderNo.value
571 }; 738 };
572 739
573 updateCarCount(params) 740 updateCarCount(params)
@@ -645,11 +812,12 @@ @@ -645,11 +812,12 @@
645 if (res.data.success) { 812 if (res.data.success) {
646 // 过滤车辆 非用户选择的车辆无法选中 813 // 过滤车辆 非用户选择的车辆无法选中
647 driverPersonnelList.value = res.data.data; 814 driverPersonnelList.value = res.data.data;
648 -  
649 // 恢复原始的open调用方式，只传递dataList 815 // 恢复原始的open调用方式，只传递dataList
650 clashDriverDispatchRef.value.open(res.data.data); 816 clashDriverDispatchRef.value.open(res.data.data);
  817 + refreshOrderData()
651 } else { 818 } else {
652 uni.$u.toast("驾驶员分配成功！"); 819 uni.$u.toast("驾驶员分配成功！");
  820 + refreshOrderData()
653 } 821 }
654 }) 822 })
655 } 823 }
@@ -659,8 +827,10 @@ @@ -659,8 +827,10 @@
659 if (res.data.success) { 827 if (res.data.success) {
660 disposalPersonnelList.value = res.data.data 828 disposalPersonnelList.value = res.data.data
661 clashDisposalDispatchRef.value.open(res.data.data) 829 clashDisposalDispatchRef.value.open(res.data.data)
  830 + refreshOrderData()
662 } else { 831 } else {
663 uni.$u.toast("处理场所分配成功！") 832 uni.$u.toast("处理场所分配成功！")
  833 + refreshOrderData()
664 } 834 }
665 }) 835 })
666 } 836 }
@@ -847,6 +1017,7 @@ const handleSubmitSuccess = (orderId) =&gt; { @@ -847,6 +1017,7 @@ const handleSubmitSuccess = (orderId) =&gt; {
847 } else { 1017 } else {
848 uni.$u.toast(res.data.data) 1018 uni.$u.toast(res.data.data)
849 handleOrderDetail(orderId) 1019 handleOrderDetail(orderId)
  1020 + refreshOrderData()
850 } 1021 }
851 } 1022 }
852 }) 1023 })
@@ -971,6 +1142,7 @@ const handleDriverDispatchConfirm = (val) =&gt; { @@ -971,6 +1142,7 @@ const handleDriverDispatchConfirm = (val) =&gt; {
971 uni.$u.toast(res.data.msg); 1142 uni.$u.toast(res.data.msg);
972 // 标记驾驶员已分配 1143 // 标记驾驶员已分配
973 driverAssigned.value = true; 1144 driverAssigned.value = true;
  1145 + refreshOrderData();
974 } else { 1146 } else {
975 uni.$u.toast("指定人员失败，请重试"); 1147 uni.$u.toast("指定人员失败，请重试");
976 } 1148 }
@@ -1199,44 +1371,330 @@ const handleDriverDispatchConfirm = (val) =&gt; { @@ -1199,44 +1371,330 @@ const handleDriverDispatchConfirm = (val) =&gt; {
1199 } 1371 }
1200 } 1372 }
1201 1373
1202 - .order-detail-container-box-card {  
1203 - @include card();  
1204 1374
1205 - .order-detail-container-header-card-title {  
1206 - font-weight: bold;  
1207 - line-height: 80rpx;  
1208 - border-bottom: 3rpx solid $u-info-light;  
1209 - margin-bottom: $custom-marin-bottom;  
1210 - color: $u-primary;  
1211 - display: flex;  
1212 - align-items: center; 1375 + .order-detail-container-box-card {
  1376 + @include card();
1213 1377
1214 - .order-detail-container-header-card-uicon {  
1215 - background-color: $u-primary;  
1216 - margin-right: 10rpx;  
1217 - height: 35rpx;  
1218 - width: 15rpx;  
1219 - }  
1220 - } 1378 + .order-detail-container-header-card-title {
  1379 + font-weight: bold;
  1380 + line-height: 80rpx;
  1381 + border-bottom: 3rpx solid $u-info-light;
  1382 + margin-bottom: $custom-marin-bottom;
  1383 + color: $u-primary;
  1384 + display: flex;
  1385 + align-items: center;
  1386 +
  1387 + .order-detail-container-header-card-uicon {
  1388 + background-color: $u-primary;
  1389 + margin-right: 10rpx;
  1390 + height: 35rpx;
  1391 + width: 15rpx;
  1392 + border-radius: 4rpx;
  1393 + }
  1394 + }
1221 1395
1222 - .order-detail-container-header-item {  
1223 - display: flex;  
1224 - margin-bottom: $custom-marin-bottom;  
1225 -  
1226 - // font-size: 30rpx;  
1227 - // font-weight: bold;  
1228 - // color: $u-main-color;  
1229 - .order-detail-container-header-title {  
1230 - color: $u-main-color;  
1231 - white-space: nowrap; //溢出不换行  
1232 - color: $u-info;  
1233 - } 1396 + /* 订单信息标题特殊样式 */
  1397 + .order-info-header {
  1398 + display: flex;
  1399 + align-items: center;
  1400 + background: linear-gradient(90deg, #19a97c, #19a97c80);
  1401 + color: white;
  1402 + padding: 15rpx;
  1403 + border-radius: 10rpx;
  1404 + margin-bottom: 15rpx;
  1405 +
  1406 + .order-detail-container-header-card-uicon {
  1407 + background-color: white;
  1408 + opacity: 0.8;
  1409 + margin-right: 8rpx;
  1410 + height: 25rpx;
  1411 + width: 6rpx;
  1412 + border-radius: 3rpx;
  1413 + }
1234 1414
1235 - .order-detail-container-header-content {  
1236 - display: flex;  
1237 - }  
1238 - }  
1239 - } 1415 + .title-text {
  1416 + font-size: 28rpx;
  1417 + font-weight: bold;
  1418 + }
  1419 + }
  1420 +
  1421 + .order-detail-container-header-item {
  1422 + display: flex;
  1423 + margin-bottom: $custom-marin-bottom;
  1424 +
  1425 + .order-detail-container-header-title {
  1426 + color: $u-main-color;
  1427 + white-space: nowrap;
  1428 + color: $u-info;
  1429 + }
  1430 +
  1431 + .order-detail-container-header-content {
  1432 + display: flex;
  1433 + }
  1434 + }
  1435 + }
  1436 +
  1437 + /* 车辆信息板块美化 */
  1438 +
  1439 + /* 车辆信息板块美化 */
  1440 + .vehicle-section {
  1441 + .section-header {
  1442 + display: flex;
  1443 + align-items: center;
  1444 + background: linear-gradient(90deg, #19a97c, #19a97c80);
  1445 + color: white;
  1446 + padding: 15rpx; /* 减小内边距 */
  1447 + border-radius: 10rpx; /* 减小圆角 */
  1448 + margin-bottom: 15rpx; /* 减小外边距 */
  1449 +
  1450 + .header-icon-bar {
  1451 + background-color: white;
  1452 + opacity: 0.8;
  1453 + margin-right: 8rpx; /* 减小右边距 */
  1454 + height: 25rpx; /* 减小高度 */
  1455 + width: 6rpx; /* 减小宽度 */
  1456 + border-radius: 3rpx;
  1457 + }
  1458 +
  1459 + .header-title {
  1460 + font-size: 28rpx; /* 减小字体大小 */
  1461 + font-weight: bold;
  1462 + }
  1463 + }
  1464 +
  1465 + /* 卡片通用样式 */
  1466 + .trip-summary-card, .vehicle-info-card, .driver-info-card, .handler-list-card, .assign-trip-card {
  1467 + background-color: #fff;
  1468 + border-radius: 10rpx; /* 减小圆角 */
  1469 + box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.05); /* 减小阴影 */
  1470 + margin-bottom: 15rpx; /* 减小外边距 */
  1471 + overflow: hidden;
  1472 + }
  1473 +
  1474 + .card-header {
  1475 + display: flex;
  1476 + align-items: center;
  1477 + padding: 15rpx; /* 减小内边距 */
  1478 + background-color: #f5f5f5;
  1479 + border-bottom: 1rpx solid #eee;
  1480 +
  1481 + .card-title {
  1482 + font-weight: bold;
  1483 + color: #333;
  1484 + margin-left: 8rpx; /* 减小左边距 */
  1485 + font-size: 26rpx; /* 减小字体大小 */
  1486 + }
  1487 + }
  1488 +
  1489 + /* 发车次数摘要 */
  1490 + .trip-summary-card {
  1491 + .summary-content {
  1492 + display: flex;
  1493 + align-items: center;
  1494 + padding: 20rpx 15rpx; /* 减小内边距 */
  1495 + background: linear-gradient(90deg, #e8f4f0, #fff);
  1496 +
  1497 + .summary-label {
  1498 + color: #666;
  1499 + margin-right: 8rpx; /* 减小右边距 */
  1500 + font-size: 24rpx; /* 减小字体大小 */
  1501 + }
  1502 +
  1503 + .summary-value {
  1504 + color: #19a97c;
  1505 + font-weight: bold;
  1506 + font-size: 28rpx; /* 减小字体大小 */
  1507 + margin: 0 4rpx; /* 减小边距 */
  1508 + }
  1509 +
  1510 + .summary-unit {
  1511 + color: #666;
  1512 + font-size: 24rpx; /* 减小字体大小 */
  1513 + }
  1514 + }
  1515 + }
  1516 +
  1517 + /* 车辆类型详情 */
  1518 + .vehicle-info-card {
  1519 + .car-type-list {
  1520 + padding: 15rpx; /* 减小内边距 */
  1521 +
  1522 + .car-type-item {
  1523 + display: flex;
  1524 + flex-wrap: wrap;
  1525 + padding: 15rpx; /* 减小内边距 */
  1526 + background-color: #f8f8f8;
  1527 + border-radius: 6rpx; /* 减小圆角 */
  1528 + margin-bottom: 10rpx; /* 减小外边距 */
  1529 +
  1530 + &:last-child {
  1531 + margin-bottom: 0;
  1532 + }
  1533 +
  1534 + .car-type-info, .car-count-info {
  1535 + display: flex;
  1536 + align-items: center;
  1537 + width: 100%;
  1538 + margin-bottom: 8rpx; /* 减小外边距 */
  1539 +
  1540 + &:last-child {
  1541 + margin-bottom: 0;
  1542 + }
  1543 +
  1544 + .info-label {
  1545 + color: #666;
  1546 + margin: 0 8rpx; /* 减小边距 */
  1547 + font-size: 24rpx; /* 减小字体大小 */
  1548 + min-width: 80rpx; /* 减小最小宽度 */
  1549 + }
  1550 +
  1551 + .info-value {
  1552 + color: #333;
  1553 + font-weight: 500;
  1554 + font-size: 24rpx; /* 减小字体大小 */
  1555 + }
  1556 + }
  1557 + }
  1558 + }
  1559 + }
  1560 +
  1561 + /* 驾驶员信息 */
  1562 + .driver-info-card {
  1563 + .driver-list {
  1564 + padding: 15rpx; /* 减小内边距 */
  1565 +
  1566 + .driver-item {
  1567 + padding: 15rpx; /* 减小内边距 */
  1568 + background-color: #f8f8f8;
  1569 + border-radius: 6rpx; /* 减小圆角 */
  1570 + margin-bottom: 10rpx; /* 减小外边距 */
  1571 +
  1572 + &:last-child {
  1573 + margin-bottom: 0;
  1574 + }
  1575 +
  1576 + .driver-basic-info, .driver-car-info {
  1577 + display: flex;
  1578 + align-items: center;
  1579 + margin-bottom: 8rpx; /* 减小外边距 */
  1580 +
  1581 + &:last-child {
  1582 + margin-bottom: 0;
  1583 + }
  1584 +
  1585 + .info-label {
  1586 + color: #666;
  1587 + margin: 0 8rpx; /* 减小边距 */
  1588 + font-size: 24rpx; /* 减小字体大小 */
  1589 + min-width: 100rpx; /* 减小最小宽度 */
  1590 + }
  1591 +
  1592 + .info-value {
  1593 + color: #333;
  1594 + font-weight: 500;
  1595 + font-size: 24rpx; /* 减小字体大小 */
  1596 + }
  1597 + }
  1598 +
  1599 + .driver-status {
  1600 + text-align: right;
  1601 + margin-top: 8rpx; /* 减小外边距 */
  1602 + }
  1603 + }
  1604 + }
  1605 + }
  1606 +
  1607 + /* 处理人员信息 */
  1608 + .handler-list-card {
  1609 + .handler-item {
  1610 + display: flex;
  1611 + justify-content: space-between;
  1612 + align-items: center;
  1613 + padding: 15rpx; /* 减小内边距 */
  1614 + border-bottom: 1rpx solid #eee;
  1615 +
  1616 + &:last-child {
  1617 + border-bottom: none;
  1618 + }
  1619 +
  1620 + .handler-basic-info {
  1621 + display: flex;
  1622 + flex-direction: column;
  1623 +
  1624 + .handler-name {
  1625 + font-weight: bold;
  1626 + font-size: 26rpx; /* 减小字体大小 */
  1627 + color: #333;
  1628 + margin-bottom: 4rpx; /* 减小外边距 */
  1629 + }
  1630 +
  1631 + .handler-car, .handler-volume {
  1632 + font-size: 22rpx; /* 减小字体大小 */
  1633 + color: #666;
  1634 + margin-right: 10rpx; /* 减小右边距 */
  1635 + }
  1636 + }
  1637 +
  1638 + .handler-trip-count {
  1639 + display: flex;
  1640 + flex-direction: column;
  1641 + align-items: flex-end;
  1642 +
  1643 + .count-label {
  1644 + font-size: 22rpx; /* 减小字体大小 */
  1645 + color: #666;
  1646 + margin-bottom: 4rpx; /* 减小外边距 */
  1647 + }
  1648 +
  1649 + .count-value {
  1650 + font-weight: bold;
  1651 + color: #19a97c;
  1652 + font-size: 26rpx; /* 减小字体大小 */
  1653 + }
  1654 + }
  1655 + }
  1656 + }
  1657 +
  1658 + /* 分配趟次 */
  1659 + .assign-trip-card {
  1660 + .assign-content {
  1661 + padding: 15rpx; /* 减小内边距 */
  1662 +
  1663 + .selector-wrapper, .number-box-wrapper {
  1664 + display: flex;
  1665 + align-items: center;
  1666 + margin-bottom: 15rpx; /* 减小外边距 */
  1667 +
  1668 + &:last-child {
  1669 + margin-bottom: 0;
  1670 + }
  1671 +
  1672 + .selector-label, .number-label {
  1673 + width: 140rpx; /* 减小宽度 */
  1674 + font-size: 24rpx; /* 减小字体大小 */
  1675 + color: #333;
  1676 + }
  1677 +
  1678 + .handler-selector {
  1679 + flex: 1;
  1680 + height: 40rpx; /* 减小高度 */
  1681 + border: 1px solid #DCDFE6;
  1682 + border-radius: 4px;
  1683 + padding: 0 8rpx; /* 减小内边距 */
  1684 + outline: none;
  1685 + font-size: 24rpx; /* 减小字体大小 */
  1686 + }
  1687 + }
  1688 +
  1689 + .confirm-button {
  1690 + width: 100%;
  1691 + border-radius: 6rpx; /* 减小圆角 */
  1692 + font-size: 26rpx; /* 减小字体大小 */
  1693 + height: 40rpx; /* 减小高度 */
  1694 + }
  1695 + }
  1696 + }
  1697 + }
1240 } 1698 }
1241 1699
1242 1700
@@ -1265,6 +1723,13 @@ const handleDriverDispatchConfirm = (val) =&gt; { @@ -1265,6 +1723,13 @@ const handleDriverDispatchConfirm = (val) =&gt; {
1265 align-items: center; 1723 align-items: center;
1266 } 1724 }
1267 1725
  1726 + .button-group-vertical {
  1727 + display: flex;
  1728 + flex-direction: column;
  1729 + gap: 20rpx;
  1730 + width: 100%;
  1731 + }
  1732 +
1268 // 左中右三个区域统一处理 1733 // 左中右三个区域统一处理
1269 .order-detail-bottom-left, 1734 .order-detail-bottom-left,
1270 .order-detail-bottom-center, 1735 .order-detail-bottom-center,
@@ -1279,6 +1744,8 @@ const handleDriverDispatchConfirm = (val) =&gt; { @@ -1279,6 +1744,8 @@ const handleDriverDispatchConfirm = (val) =&gt; {
1279 // 左侧区域单独处理（取消订单按钮） 1744 // 左侧区域单独处理（取消订单按钮）
1280 .order-detail-bottom-left { 1745 .order-detail-bottom-left {
1281 justify-content: flex-start; 1746 justify-content: flex-start;
  1747 + flex-direction: column;
  1748 + align-items: flex-start;
1282 } 1749 }
1283 1750
1284 // 右侧区域单独处理（评价相关按钮） 1751 // 右侧区域单独处理（评价相关按钮）
@@ -1514,4 +1981,255 @@ const handleDriverDispatchConfirm = (val) =&gt; { @@ -1514,4 +1981,255 @@ const handleDriverDispatchConfirm = (val) =&gt; {
1514 border-bottom: none; 1981 border-bottom: none;
1515 } 1982 }
1516 } 1983 }
  1984 +
  1985 + /* 车辆类型列表样式 */
  1986 + .car-type-info-container {
  1987 + .car-type-info-header {
  1988 + font-weight: bold;
  1989 + color: $u-primary;
  1990 + margin-bottom: 20rpx;
  1991 + padding-bottom: 15rpx;
  1992 + border-bottom: 2rpx solid $u-primary;
  1993 + display: flex;
  1994 + align-items: center;
  1995 +
  1996 + .header-icon {
  1997 + display: inline-block;
  1998 + width: 6rpx;
  1999 + height: 30rpx;
  2000 + background-color: $u-primary;
  2001 + border-radius: 3rpx;
  2002 + margin-right: 15rpx;
  2003 + }
  2004 + }
  2005 +
  2006 + .car-type-info-row {
  2007 + display: flex;
  2008 + flex-direction: column;
  2009 + padding: 20rpx 15rpx;
  2010 + background-color: #f8f8f8;
  2011 + border-radius: 12rpx;
  2012 + margin-bottom: 15rpx;
  2013 + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  2014 +
  2015 + .car-info-item {
  2016 + display: flex;
  2017 + align-items: center;
  2018 + margin-bottom: 10rpx;
  2019 +
  2020 + &:last-child {
  2021 + margin-bottom: 0;
  2022 + }
  2023 +
  2024 + .car-type-label, .car-count-label {
  2025 + font-weight: 500;
  2026 + color: #666;
  2027 + margin-right: 10rpx;
  2028 + width: 100rpx;
  2029 + }
  2030 +
  2031 + .car-type-value, .car-count-value {
  2032 + color: $u-main-color;
  2033 + font-weight: bold;
  2034 + }
  2035 +
  2036 + .car-count-value {
  2037 + color: $u-primary;
  2038 + }
  2039 + }
  2040 +
  2041 + &:last-child {
  2042 + margin-bottom: 0;
  2043 + }
  2044 + }
  2045 + }
  2046 +
  2047 + /* 订单信息板块样式 */
  2048 + .order-info-section {
  2049 + .info-item {
  2050 + display: flex;
  2051 + padding: 15rpx;
  2052 + background-color: #f8f8f8;
  2053 + border-radius: 6rpx;
  2054 + margin-bottom: 10rpx;
  2055 +
  2056 + &:last-child {
  2057 + margin-bottom: 0;
  2058 + }
  2059 +
  2060 + .info-label {
  2061 + display: flex;
  2062 + align-items: center;
  2063 + min-width: 140rpx;
  2064 + color: #666;
  2065 + font-size: 24rpx;
  2066 + }
  2067 +
  2068 + .info-content {
  2069 + flex: 1;
  2070 + display: flex;
  2071 + align-items: center;
  2072 + color: #333;
  2073 + font-size: 24rpx;
  2074 +
  2075 + .content-text {
  2076 + flex: 1;
  2077 + }
  2078 +
  2079 + .qr-code-icon {
  2080 + margin-left: 10rpx;
  2081 + }
  2082 + }
  2083 + }
  2084 +
  2085 + /* 处置场地特殊处理 */
  2086 + .info-item:nth-child(n+5):nth-child(-n+7) {
  2087 + .info-label {
  2088 + min-width: 140rpx;
  2089 + }
  2090 + }
  2091 + }
  2092 +
  2093 + /* 订单人员板块样式 */
  2094 + .order-person-section {
  2095 + .section-header {
  2096 + display: flex;
  2097 + align-items: center;
  2098 + background: linear-gradient(90deg, #19a97c, #19a97c80);
  2099 + color: white;
  2100 + padding: 15rpx;
  2101 + border-radius: 10rpx;
  2102 + margin-bottom: 15rpx;
  2103 +
  2104 + .header-icon-bar {
  2105 + background-color: white;
  2106 + opacity: 0.8;
  2107 + margin-right: 8rpx;
  2108 + height: 25rpx;
  2109 + width: 6rpx;
  2110 + border-radius: 3rpx;
  2111 + }
  2112 +
  2113 + .header-title {
  2114 + font-size: 28rpx;
  2115 + font-weight: bold;
  2116 + }
  2117 + }
  2118 +
  2119 + .info-item {
  2120 + display: flex;
  2121 + padding: 15rpx;
  2122 + background-color: #f8f8f8;
  2123 + border-radius: 6rpx;
  2124 + margin-bottom: 10rpx;
  2125 +
  2126 + &:last-child {
  2127 + margin-bottom: 0;
  2128 + }
  2129 +
  2130 + .info-label {
  2131 + display: flex;
  2132 + align-items: center;
  2133 + min-width: 140rpx;
  2134 + color: #666;
  2135 + font-size: 24rpx;
  2136 + }
  2137 +
  2138 + .info-content {
  2139 + flex: 1;
  2140 + display: flex;
  2141 + align-items: center;
  2142 + color: #333;
  2143 + font-size: 24rpx;
  2144 +
  2145 + .content-text {
  2146 + flex: 1;
  2147 + }
  2148 +
  2149 + .icon-box {
  2150 + margin-left: 10rpx;
  2151 + }
  2152 + }
  2153 + }
  2154 + }
  2155 +
  2156 + /* 处理信息板块样式 */
  2157 + .process-info-section {
  2158 + .section-header {
  2159 + display: flex;
  2160 + align-items: center;
  2161 + background: linear-gradient(90deg, #19a97c, #19a97c80);
  2162 + color: white;
  2163 + padding: 15rpx;
  2164 + border-radius: 10rpx;
  2165 + margin-bottom: 15rpx;
  2166 +
  2167 + .header-icon-bar {
  2168 + background-color: white;
  2169 + opacity: 0.8;
  2170 + margin-right: 8rpx;
  2171 + height: 25rpx;
  2172 + width: 6rpx;
  2173 + border-radius: 3rpx;
  2174 + }
  2175 +
  2176 + .header-title {
  2177 + font-size: 28rpx;
  2178 + font-weight: bold;
  2179 + }
  2180 + }
  2181 +
  2182 + .photo-section {
  2183 + .info-item {
  2184 + margin-bottom: 15rpx;
  2185 +
  2186 + .info-label {
  2187 + display: flex;
  2188 + align-items: center;
  2189 + color: #666;
  2190 + font-size: 24rpx;
  2191 + }
  2192 + }
  2193 +
  2194 + .image-groups {
  2195 + .image-group {
  2196 + padding: 15rpx;
  2197 + background-color: #f8f8f8;
  2198 + border-radius: 6rpx;
  2199 + margin-bottom: 15rpx;
  2200 +
  2201 + &:last-child {
  2202 + margin-bottom: 0;
  2203 + }
  2204 +
  2205 + .image-group-header {
  2206 + display: flex;
  2207 + justify-content: space-between;
  2208 + align-items: center;
  2209 + margin-bottom: 10rpx;
  2210 +
  2211 + .image-group-title {
  2212 + font-size: 24rpx;
  2213 + font-weight: bold;
  2214 + color: #333;
  2215 + }
  2216 + }
  2217 + }
  2218 + }
  2219 + }
  2220 +
  2221 + .empty-image-section {
  2222 + display: flex;
  2223 + flex-direction: column;
  2224 + align-items: center;
  2225 + justify-content: center;
  2226 + padding: 30rpx;
  2227 +
  2228 + .empty-text {
  2229 + margin-top: 20rpx;
  2230 + color: #999;
  2231 + font-size: 24rpx;
  2232 + }
  2233 + }
  2234 + }
1517 </style> 2235 </style>
1518 \ No newline at end of file 2236 \ No newline at end of file