修改停车场列表 - 从近到远排序

This commit is contained in:
赵毅 2025-09-03 18:05:43 +08:00
parent ffff785c09
commit d18b452e3e
3 changed files with 50 additions and 43 deletions

View File

@ -1,7 +1,6 @@
/* 包月支付页面样式 */ /* 包月支付页面样式 */
page { page {
background-color: #f5f7fb; background-color: #f5f7fb;
overflow-y: hidden;
} }
.monthly-payment-container { .monthly-payment-container {
@ -14,7 +13,7 @@ page {
top: 90rpx; top: 90rpx;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 94vh;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 98; z-index: 98;
} }
@ -165,7 +164,7 @@ page {
} }
.car-image { .car-image {
width: 400rpx; width: 50%;
height: 200rpx; height: 200rpx;
position: absolute; position: absolute;
top: 193rpx; top: 193rpx;

View File

@ -1,9 +1,9 @@
<template> <template>
<view class="monthly-payment-container"> <view class="monthly-payment-container">
<!-- 顶部标题 --> <!-- 顶部标题 -->
<view class="header"> <view class="header" @tap="toggleDropdown">
<text class="header-title">{{ headerTitle }}</text> <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>
<!-- 下拉停车场列表 --> <!-- 下拉停车场列表 -->
@ -26,7 +26,7 @@
</view> </view>
<view class="parking-item-right"> <view class="parking-item-right">
<text class="parking-name">{{ park.parking_name }}</text> <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> <text class="parking-address">{{ park.address }}</text>
</view> </view>
<view class="parking-selected" v-if="park.isSelected"></view> <view class="parking-selected" v-if="park.isSelected"></view>
@ -35,7 +35,7 @@
</view> </view>
<view class="options-list"> <view class="options-list">
<view class="overlay" v-if="isDropdownOpen"></view> <view class="overlay" v-if="isDropdownOpen" @tap="toggleDropdown"></view>
<!-- 车辆信息 --> <!-- 车辆信息 -->
<view class="car-info"> <view class="car-info">
<image class="car-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/car.png" <image class="car-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/car.png"
@ -140,9 +140,9 @@
</view> </view>
<view class="car-plate-list"> <view class="car-plate-list">
<view class="car-plate-item" v-for="(plate, index) in carPlateList" :key="index" <view class="car-plate-item" v-for="(plate, index) in carPlateList" :key="index"
@tap="onSelectCarPlate(plate)" :class="{ 'selected': selectedCarPlate === plate }"> @tap="onSelectCarPlate(plate)" :class="{ 'selected': selectedCarPlate === plate.car_number }">
<text class="plate-number">{{ plate.car_number }}</text> <text class="plate-number">{{ plate.car_number }}</text>
<u-icon v-if="selectedCarPlate === plate" name="checkmark-circle" size="28" <u-icon v-if="selectedCarPlate === plate.car_number" name="checkmark-circle" size="28"
color="#ff4219"></u-icon> color="#ff4219"></u-icon>
</view> </view>
</view> </view>
@ -368,7 +368,47 @@ export default {
// //
getParkList() { getParkList() {
request(apiArr.parkList, "POST", {}).then((res) => { 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;
});
}) })
}, },
// //
@ -387,38 +427,6 @@ export default {
this.billingRulesList = res.billing_rules_list; this.billingRulesList = res.billing_rules_list;
}) })
}, },
//
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 '未知';
}
},
}, },
onLoad() { onLoad() {
// 0:00:00 // 0:00:00

View File

@ -98,7 +98,7 @@ export default {
car_id: this.itemObj.selectedCarPlateId, car_id: this.itemObj.selectedCarPlateId,
billing_rules: this.itemObj.selectedBillingRule, billing_rules: this.itemObj.selectedBillingRule,
month_count: this.itemObj.monthCount, month_count: this.itemObj.monthCount,
total_amount: this.itemObj.paymentAmount * 100, total_amount: this.itemObj.paymentAmount,
start_time: this.itemObj.startTime, start_time: this.itemObj.startTime,
end_time: this.itemObj.endTime, end_time: this.itemObj.endTime,
} }