修改停车场列表 - 从近到远排序
This commit is contained in:
赵毅
parent
ffff785c09
commit
d18b452e3e
@ -1,7 +1,6 @@
|
||||
/* 包月支付页面样式 */
|
||||
page {
|
||||
background-color: #f5f7fb;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.monthly-payment-container {
|
||||
@ -14,7 +13,7 @@ page {
|
||||
top: 90rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 94vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 98;
|
||||
}
|
||||
@ -165,7 +164,7 @@ page {
|
||||
}
|
||||
|
||||
.car-image {
|
||||
width: 400rpx;
|
||||
width: 50%;
|
||||
height: 200rpx;
|
||||
position: absolute;
|
||||
top: 193rpx;
|
||||
|
||||
@ -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>
|
||||
|
||||
<!-- 下拉停车场列表 -->
|
||||
@ -26,7 +26,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>
|
||||
@ -35,7 +35,7 @@
|
||||
</view>
|
||||
|
||||
<view class="options-list">
|
||||
<view class="overlay" v-if="isDropdownOpen"></view>
|
||||
<view class="overlay" v-if="isDropdownOpen" @tap="toggleDropdown"></view>
|
||||
<!-- 车辆信息 -->
|
||||
<view class="car-info">
|
||||
<image class="car-image" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/car.png"
|
||||
@ -140,9 +140,9 @@
|
||||
</view>
|
||||
<view class="car-plate-list">
|
||||
<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>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
@ -368,7 +368,47 @@ 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;
|
||||
});
|
||||
})
|
||||
},
|
||||
// 获取车牌列表
|
||||
@ -387,38 +427,6 @@ export default {
|
||||
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() {
|
||||
// 设置开始时间为今天的 0:00:00
|
||||
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
car_id: this.itemObj.selectedCarPlateId,
|
||||
billing_rules: this.itemObj.selectedBillingRule,
|
||||
month_count: this.itemObj.monthCount,
|
||||
total_amount: this.itemObj.paymentAmount * 100,
|
||||
total_amount: this.itemObj.paymentAmount,
|
||||
start_time: this.itemObj.startTime,
|
||||
end_time: this.itemObj.endTime,
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user