1.我的车牌页面 录入车牌弹窗封装

pages/sys/user/myPayment/myCarCode.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="container">
+    <scroll-view scroll-y class="list" style="height: 80vh;">
+      <block v-for="(item, index) in carList" :key="item.plate">
+        <u-swipe-action :index="index" :options="rightOptions" @click="onDelete">
+          <view class="car-item" @click="onItemClick(item)">
+            <view class="car-num">{{ item.plate }}</view>
+            <view class="car-time">上次停放时间: {{ item.time }}</view>
+          </view>
+        </u-swipe-action>
+      </block>
+    </scroll-view>
+
+    <!-- 绑定车牌弹窗 -->
+    <CarBindDialog
+      :visible="showBindDialog"
+      :carNumber="carNumArr"
+      @save="handleSaveCar"
+      @update:visible="showBindDialog = $event"
+    />
+
+    <button class="add-btn" @click="onAddCar">新增停车</button>
+  </view>
+</template>
+
+<script>
+import CarBindDialog from '@/components/CarBindDialog.vue';
+
+export default {
+  components: {
+    CarBindDialog
+  },
+  data() {
+    return {
+      showBindDialog: false,              // 控制弹窗显示
+      carNumArr: ['渝', '', '', '', '', '', ''],  // 当前编辑的车牌号码数组
+      carList: [                         // 车牌列表数据
+        { plate: '渝A·B8889', time: '2025-07-28' },
+        { plate: '渝A·C1234', time: '2025-07-27' },
+        { plate: '渝A·D5678', time: '2025-07-26' }
+      ],
+      rightOptions: [                    // 侧滑删除按钮配置
+        {
+          text: '删除',
+          style: {
+            backgroundColor: '#FF5A1F',
+            color: '#fff',
+            width: '150rpx'
+          }
+        }
+      ]
+    };
+  },
+  methods: {
+    onAddCar() {
+      // 新增车牌时，重置车牌数组为默认
+      this.carNumArr = ['渝', '', '', '', '', '', ''];
+      this.showBindDialog = true;
+    },
+    handleSaveCar(car) {
+      // 保存车牌，格式化并加入列表
+      const plate = car.join('').replace(/^([A-Z])/, '$1·');
+      this.carList.push({
+        plate,
+        time: new Date().toISOString().slice(0, 10)
+      });
+      this.showBindDialog = false;
+    },
+    onDelete({ index, optionIndex }) {
+      // 侧滑删除操作
+      if (optionIndex === 0) {
+        this.carList.splice(index, 1);
+      }
+    },
+    onItemClick(item) {
+      // 点击车牌，发送事件并返回上一页
+      uni.$emit('selectPlate', item.plate);
+      uni.navigateBack();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  padding: 20rpx;
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+
+.list {
+  margin-bottom: 60rpx;
+}
+
+.car-item {
+  background-color: #fff;
+  padding: 30rpx;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+}
+
+.car-num {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #000;
+}
+
+.car-time {
+  font-size: 28rpx;
+  color: #999;
+  margin-top: 10rpx;
+}
+
+.add-btn {
+  width: 80%;
+  margin: 0 auto;
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 50rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: center;
+  font-size: 32rpx;
+  position: fixed;
+  bottom: 40rpx;
+  left: 10%;
+}
+</style>