maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
赵毅 2025-09-04 11:59:16 +08:00
parent 68839c2447
commit 997502ef01
2 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/park/temporaryOrder/index.css
View File

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

82
packages/park/temporaryOrder/index.vue
View File

@ -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();