charge_miniapp/subPackages/other/addLicensePlates/addLicensePlates.vue

<template>
	<ax-body title="车牌管理">
		<view class="body">
			<!-- 车牌列表 -->
			<view class="plate-list">
				<view class="plate-card" v-for="(item, index) in vehicleList" :key="index">
					<image class="plate-bg"
						src="https://national-motion.oss-cn-beijing.aliyuncs.com/20260318/f0babdfe99ca49c69cf26454f9084107.png"
						mode="aspectFill"></image>
					<view class="plate-content">
						<view class="plate-number">{{ item.licensePlate }}</view>
						<view class="plate-actions">
							<view class="default-tag" v-if="item.isDefault">默认</view>
							<view class="set-default" v-else @click="setDefault(item)">设为默认</view>
							<view class="delete-btn" @click="deleteVehicle(item)">
								<text class="delete-icon">🗑</text>
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="vehicleList.length === 0">
				<text>暂无绑定车辆</text>
			</view>
		</view>

		<!-- 底部添加按钮 -->
		<view class="bottom-btn-wrap">
			<view class="add-btn" @click="openAddPopup">添加车辆</view>
		</view>

		<!-- 添加车辆弹窗 -->
		<ax-popup ref="addPopup" position="bottom" maskType="black" maskClose @closed="onPopupClosed">
			<view class="popup-content">
				<view class="popup-header">
					<view class="popup-title">添加车辆</view>
					<view class="popup-close" @click="closeAddPopup">×</view>
				</view>
				<view class="popup-body">
					<view class="form-tip">请点击下方输入框输入车牌号</view>
					<best-plate-keyboard v-model="newPlateNumber" placeholder="点击输入车牌号" @complete="onPlateComplete" />
				</view>
			</view>
		</ax-popup>
	</ax-body>
</template>

<script>
	import BestPlateKeyboard from '@/components/best-plate-keyboard/index.vue'
	export default {
		components: {
			BestPlateKeyboard
		},
		data() {
			return {
				vehicleList: [],
				newPlateNumber: ''
			}
		},
		onShow() {
			this.getVehicleList();
		},
		methods: {
			// 获取车辆列表
			getVehicleList() {
				this.$api.base('get', '/applet/v1/vehicle/list', {}, {
					error: false
				}).then(res => {
					if (res && res.data) {
						this.vehicleList = Array.isArray(res.data) ? res.data : [];
					}
				}).catch(() => {
					this.vehicleList = [];
				});
			},
			// 设为默认
			setDefault(item) {
				this.$api.base('put', `/applet/v1/vehicle/default/${item.id}`, {}).then(res => {
					if (res.code === '00000') {
						uni.showToast({
							title: '设置成功',
							icon: 'success'
						});
						this.getVehicleList();
					}
				});
			},
			// 删除车辆
			deleteVehicle(item) {
				this.$app.popup.confirm('确认删除该车辆？', '提示').then(confirm => {
					if (confirm) {
						this.$api.base('delete', `/applet/v1/vehicle/${item.id}`, {}).then(res => {
							if (res.code === '00000') {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								this.getVehicleList();
							}
						});
					}
				});
			},
			// 打开添加弹窗
			openAddPopup() {
				this.newPlateNumber = ''
				this.$refs.addPopup.open()
			},
			// 关闭添加弹窗
			closeAddPopup() {
				this.$refs.addPopup.close()
			},
			// 弹窗关闭后
			onPopupClosed() {
				this.newPlateNumber = ''
			},
			// 车牌输入完成
			onPlateComplete(plateNumber) {
				if (!plateNumber) {
					return
				}
				const userInfo = this.$app.storage.get('USER_INFO') || {}
				// 如果没有车辆，新添加的默认设为默认车辆
				const isDefault = this.vehicleList.length === 0 ? 1 : 0
				this.$api.base('post', '/applet/v1/vehicle', {
					userId: userInfo.appletUserId || '',
					licensePlate: plateNumber,
					isDefault: isDefault // 是否默认车辆（0-否 1-是）
				}).then(res => {
					if (res.code === '00000') {
						uni.showToast({ title: '添加成功', icon: 'success' })
						this.closeAddPopup()
						this.getVehicleList()
					}
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background-color: #F5F7FB;
	}

	.body {
		padding: 20rpx;
		padding-bottom: 140rpx;
	}

	/* 车牌列表 */
	.plate-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.plate-card {
		position: relative;
		width: 100%;
		height: 180rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.plate-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.plate-content {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		padding: 0 30rpx;
	}

	.plate-number {
		font-size: 40rpx;
		font-weight: bold;
		color: #2b303a;
		letter-spacing: 4rpx;
	}

	.plate-actions {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 16rpx;
	}

	.default-tag {
		padding: 8rpx 24rpx;
		background: linear-gradient(135deg, #47aeff 0%, #3eb6f8 100%);
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.set-default {
		font-size: 26rpx;
		color: #666;
	}

	.delete-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 26rpx;
		color: #666;
	}

	.delete-icon {
		font-size: 28rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
		font-size: 28rpx;
		color: #999;
	}

	/* 弹窗样式 */
	.popup-content {
		width: 100vw;
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.popup-close {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #999;
	}

	.popup-body {
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}

	.form-tip {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	/* 底部按钮 */
	.bottom-btn-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 96rpx;
		background: linear-gradient(to right, #8ff8fb, #47aeff);
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #2b303a;
		font-weight: 500;
	}
</style>