129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<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>
|