修改停车场列表 - 从近到远排序
This commit is contained in:
parent
ffff785c09
commit
d18b452e3e
@ -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;
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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,
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user