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

packages/park/index/index.css

@@ -3,16 +3,25 @@ page {
   padding-top: 20rpx;
 }
 
-
 /* 车辆信息容器样式 */
+.container-box{
+  height: 83vh;
+  overflow-y: auto;
+}
+
 .car-info-container {
-  width: 100%;
+  width: 92%;
   background-color: #ffffff;
   padding: 30rpx;
   border-bottom: 1rpx solid #eeeeee;
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
 
+.car-info{
+  display: flex;
+  justify-content: space-between;
+}
+
 /* 车牌样式 */
 .license-plate {
   display: flex;
@@ -27,6 +36,7 @@ page {
   border-radius: 8rpx;
 }
 
+
 .plate-type {
   background-color: #1890ff;
   color: white;
@@ -40,6 +50,62 @@ page {
   font-size: 32rpx;
   color: #333333;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding: 15rpx 30rpx;
+  border-radius: 10rpx;
+}
+
+/* 蓝色车牌样式 */
+.plate-color-blue {
+  background-color: #1890ff;
+  color: white;
+}
+
+/* 黄色车牌样式 */
+.plate-color-yellow {
+  background-color: #ffc53d;
+  color: black;
+}
+
+/* 黑色车牌样式 */
+.plate-color-black {
+  background-color: #333333;
+  color: white;
+}
+
+/* 白色车牌样式 */
+.plate-color-white {
+  background-color: white;
+  color: black;
+  border: 1rpx solid #dddddd;
+}
+
+/* 绿色车牌样式 */
+.plate-color-green {
+  background-color: #37bd75;
+  color: white;
+}
+
+/* 渐变绿底黑字车牌样式 */
+.plate-color-gradient-green {
+  background: linear-gradient(180deg, #ffffff 0%, #2fe259 100%);
+  color: black;
+}
+
+/* 黄绿双拼底黑字车牌样式 */
+.plate-color-yellow-green {
+  background: linear-gradient(90deg, #ffc53d 30%, #37bd75 0%);
+  color: black;
+}
+
+.plate-energy{
+  font-size: 24rpx;
+  padding: 7rpx 15rpx;
+  margin-left: 15rpx;
+  border-radius: 10rpx;
+  background-color: #f2f3f4;
+  color: #37bd75;
 }
 
 /* 添加车辆按钮样式 */

packages/park/index/index.vue

@@ -1,12 +1,28 @@
 <template>
   <view class="container">
     <!-- 车辆信息区域 -->
-    <view class="car-info-container" v-for="(item, index) in carList" :key="index">
+    <view class="container-box">
-      <view class="license-plate">
+      <view class="car-info-container" v-for="(item, index) in carList" :key="index">
-        <view class="plate-type-box">
+        <view class="car-info">
-          <text class="plate-type">{{ item.car_number_color }}</text>
+          <view class="license-plate">
+            <view class="plate-type-box">
+              <text class="plate-type" :class="{
+                'plate-color-blue': item.car_number_color === '蓝色',
+                'plate-color-yellow': item.car_number_color === '黄色',
+                'plate-color-black': item.car_number_color === '黑色',
+                'plate-color-white': item.car_number_color === '白色',
+                'plate-color-green': item.car_number_color === '绿色',
+                'plate-color-gradient-green': item.car_number_color === '渐变绿底黑字',
+                'plate-color-yellow-green': item.car_number_color === '黄绿双拼底黑字'
+              }">{{ item.car_number_color }}</text>
+            </view>
+            <view class="plate-number">
+              {{ item.car_number }}
+              <view class="plate-energy" v-if="getActualCarNumberLength(item.car_number) > 7">新能源</view>
+            </view>
+          </view>
+          <u-icon name="trash" size="45rpx" @click="deleteCar(item)"></u-icon>
         </view>
-        <text class="plate-number">{{ item.car_number }}</text>
       </view>
     </view>
 
@@ -40,6 +56,40 @@ export default {
         this.carList = res.car_list;
       })
     },
+    // 计算车牌号的实际长度，去除所有不可见字符
+    getActualCarNumberLength(carNumber) {
+      if (!carNumber) return 0;
+      // 去除所有空格和不可见字符
+      const actualNumber = carNumber.replace(/\s/g, '');
+      return actualNumber.length;
+    },
+
+
+
+    deleteCar(item) {
+      uni.showModal({
+        title: '提示',
+        content: '确定删除该车辆吗？',
+        success: (res) => {
+          if (res.confirm) {
+            const params = {
+              user_id: uni.getStorageSync('userId'),
+              car_id: item.car_id
+            }
+            request(apiArr.deleteCar, "POST", params).then((res) => {
+              if (res.code == 200) {
+                uni.showToast({
+                  title: '删除成功',
+                  icon: 'success',
+                  duration: 2000
+                });
+                this.getCarList();
+              }
+            })
+          }
+        }
+      })
+    },
     addCar() {
       // 跳转到添加车辆页面
       uni.navigateTo({

packages/park/parkOrderDetail/index.vue

@@ -146,9 +146,8 @@ export default {
 
                             },
                             fail: (payErr) => {
-                                console.log("支付失败", payErr)
                                 uni.showToast({
-                                    title: payErr.errMsg || '支付失败',
+                                    title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
                                     icon: 'none'
                                 })
                             },

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;
         },
 
@@ -401,13 +402,10 @@ export default {
 
                             },
                             fail: (payErr) => {
-                                console.log("支付失败", payErr)
                                 uni.showToast({
-                                    title: payErr.errMsg || '支付失败',
+                                    title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
                                     icon: 'none'
                                 })
-                            },
-                            complete: () => {
                                 // 支付完成后的回调，无论成功失败都会执行
                             }
                         })
@@ -436,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();

packages/shop/groupPurchaseSubmit/index.vue

@@ -43,7 +43,7 @@
                             <view class="group-price">
                                 <view>￥{{ item.commodity_goods_info.sales_price }}/{{
                                     item.commodity_goods_info.goods_unit
-                                    }}</view>
+                                }}</view>
                                 <!-- 运费 -->
                                 <view class="goods-desc" style="margin-top: 10rpx;">运费 ￥{{
                                     item.commodity_goods_info.freight }}</view>
@@ -128,7 +128,8 @@
                                                 <text class="name">请选择自提点</text>
                                             </view>
                                         </view>
-                                        <view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
+                                        <view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon>
+                                        </view>
                                     </view>
                                 </view>
                                 <view class="address-info" v-else>
@@ -501,14 +502,14 @@ export default {
         },
         submitPayment() {
             // 检查所有供应商是否都选择了自提点
-            const supplierIds = [...new Set(this.orderList2.map(item => 
+            const supplierIds = [...new Set(this.orderList2.map(item =>
                 item.commodity_goods_info.group_buy_activity_info?.supplier_id || 'default'
             ))];
-            
+
             const allHaveZTAddress = supplierIds.every(supplierId => {
-                 const ztAddress = this.defZTAddress.find(adItem => adItem.id == supplierId);
+                const ztAddress = this.defZTAddress.find(adItem => adItem.id == supplierId);
-                 return !!ztAddress;
+                return !!ztAddress;
-             });
+            });
 
             if (!allHaveZTAddress) {
                 uni.showToast({
@@ -524,16 +525,16 @@ export default {
                 goods_list: Object.keys(this.supplierGroups).map(supplierId => {
                     const group = this.supplierGroups[supplierId];
                     const firstItem = group[0];
-                    
+
                     // 团购活动id
                     this.group_buy_activity_id = firstItem.commodity_goods_info.group_buy_activity_id;
-                    
+
                     // 根据供应商id获取自提点信息
                     const ztAddress = this.defZTAddress.find(adItem => adItem.id == supplierId) || {};
-                    
+
                     // 团购活动时间判断
                     const currentTime = new Date().getTime();
-                    
+
                     return {
                         supplier_id: firstItem.commodity_goods_info.group_buy_activity_info.supplier_id,
                         supplier_name: firstItem.supplier_name || '',
@@ -605,9 +606,8 @@ export default {
 
                             },
                             fail: (payErr) => {
-                                console.log("支付失败", payErr)
                                 uni.showToast({
-                                    title: payErr.errMsg || '支付失败',
+                                    title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
                                     icon: 'none'
                                 })
                             },