修改临停缴费页面的选择车辆的布局

packages/park/temporaryOrder/index.css

@@ -179,6 +179,8 @@ page {
 /* 车辆下拉列表样式 */
 .car-dropdown {
     width: 33%;
+    height: 600rpx;
+    overflow-y: auto;
     background-color: #ffffff;
     border-top: 1rpx solid #f0f0f0;
     position: absolute;

packages/park/temporaryOrder/index.vue

@@ -1,9 +1,9 @@
 <template>
     <view class="monthly-payment-container">
         <!-- 顶部标题 -->
-        <view class="header">
+        <view class="header" @tap="toggleDropdown">
             <text class="header-title">{{ headerTitle }}</text>
-            <u-icon :name="isDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28" @tap="toggleDropdown"></u-icon>
+            <u-icon :name="isDropdownOpen ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>
         </view>
         <!-- 下拉停车场列表 -->
         <view v-if="isDropdownOpen" class="parking-list">
@@ -25,7 +25,7 @@
                     </view>
                     <view class="parking-item-right">
                         <text class="parking-name">{{ park.parking_name }}</text>
-                        <text class="parking-distance">{{ getParkDistance(park.lng, park.lat) }}km</text>
+                        <text class="parking-distance">{{ park.distance }}km</text>
                         <text class="parking-address">{{ park.address }}</text>
                     </view>
                     <view class="parking-selected" v-if="park.isSelected">✔</view>
@@ -194,6 +194,7 @@ export default {
     methods: {
         // 切换下拉列表显示状态
         toggleDropdown() {
+            this.isCarDropdownOpen = false
             this.isDropdownOpen = !this.isDropdownOpen;
         },
 
@@ -405,7 +406,7 @@ export default {
                                     title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
                                     icon: 'none'
                                 })
-                             // 支付完成后的回调，无论成功失败都会执行
+                                // 支付完成后的回调，无论成功失败都会执行
                             }
                         })
                     } else {
@@ -433,40 +434,49 @@ export default {
         // 获取停车场列表
         getParkList() {
             request(apiArr.parkList, "POST", {}).then((res) => {
-                this.parkingLots = res.parking_list;
+                // 计算每个停车场的距离并添加到对象中
+                this.parkingLots = res.parking_list.map(park => {
+                    try {
+                        let locationData = uni.getStorageSync('location');
+                        if (locationData) {
+                            let location = locationData;
+                            const userLat = location.lat;
+                            const userLng = location.lng;
+                            const parkLat = park.lat;
+                            const parkLng = park.lng;
+
+                            // 使用Haversine公式计算距离（单位：千米）
+                            const R = 6371; // 地球半径（千米）
+                            const dLat = (parkLat - userLat) * Math.PI / 180;
+                            const dLng = (parkLng - userLng) * Math.PI / 180;
+                            const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+                                Math.cos(userLat * Math.PI / 180) * Math.cos(parkLat * Math.PI / 180) *
+                                Math.sin(dLng / 2) * Math.sin(dLng / 2);
+                            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+                            const distance = (R * c).toFixed(1);
+
+                            // 将距离添加到停车场对象中
+                            return { ...park, distance };
+                        }
+                        return park;
+                    } catch (error) {
+                        console.error('计算停车场距离时出错:', error);
+                        return park;
+                    }
+                });
+
+                // 按照距离从近到远排序
+                this.parkingLots.sort((a, b) => {
+                    // 有距离数据的排在前面，无距离数据的排在后面
+                    if (a.distance !== undefined && b.distance !== undefined) {
+                        return a.distance - b.distance;
+                    }
+                    if (a.distance !== undefined) return -1;
+                    if (b.distance !== undefined) return 1;
+                    return 0;
+                });
             })
         },
-        // 根据经纬度计算距离
-        getParkDistance(parkLng, parkLat) {
-            try {
-                let locationData = uni.getStorageSync('location');
-                if (!locationData) {
-                    return '未知';
-                }
-
-                let location = locationData;
-
-                const userLat = location.lat;
-                const userLng = location.lng;
-
-                // 使用Haversine公式计算距离（单位：千米）
-                const R = 6371; // 地球半径（千米）
-                const dLat = (parkLat - userLat) * Math.PI / 180;
-                const dLng = (parkLng - userLng) * Math.PI / 180;
-                const a =
-                    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-                    Math.cos(userLat * Math.PI / 180) * Math.cos(parkLat * Math.PI / 180) *
-                    Math.sin(dLng / 2) * Math.sin(dLng / 2);
-                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-                const distance = R * c;
-
-                // 保留一位小数
-                return distance.toFixed(1);
-            } catch (error) {
-                console.error('计算距离时出错:', error);
-                return '未知';
-            }
-        },
     },
     onShow() {
         this.getCarList();