first commit

pages/mine/car/add.vue

@@ -0,0 +1,100 @@
+<template>
+	<view class="container">
+		<view class="container_block">
+			<view class="vehicle-status">
+				<view class="status-item">
+					<image src="/static/icon/mine/parking.png" mode="aspectFit" />
+					<text>停车定位</text>
+				</view>
+				<view class="status-item">
+					<image src="/static/icon/mine/charging.png" mode="aspectFit" />
+					<text>充电状态</text>
+				</view>
+				<view class="status-item">
+					<image src="/static/icon/mine/location.png" mode="aspectFit" />
+					<text>精确定位</text>
+				</view>
+			</view>
+			<car-number-input @numberInputResult="numberInputResult"></car-number-input>
+			<view style="color: #6fa256; font-size: 24rpx; margin-top: 40rpx">绑定车牌后，在指定充电站可享减免停车费或免费停车</view>
+		</view>
+		<button class="confirm-button" @click="submit">确定</button>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { carAdd } from '@/api/api.js';
+
+let formData = ref({
+	licensePlate: '',
+	isDefault: 0
+});
+
+const numberInputResult = (e) => {
+	formData.value.licensePlate = e;
+};
+
+const submit = () => {
+	carAdd(formData.value).then((res) => {
+		uni.showModal({
+			title: '提示',
+			content: '添加成功',
+			showCancel: false,
+			success: (res) => {
+				if (res.confirm) {
+					uni.navigateBack();
+				} else if (res.cancel) {
+					console.log('用户点击取消');
+				}
+			}
+		});
+	});
+};
+</script>
+
+<style lang="scss">
+.container {
+	padding: 30rpx;
+
+	&_block {
+		width: 100%;
+		background: #ffffff;
+		border-radius: 8rpx 8rpx 8rpx 8rpx;
+		padding: 28rpx 8rpx;
+	}
+}
+
+.confirm-button {
+	width: 488rpx;
+	height: 86rpx;
+	background: #6fa256;
+	border-radius: 44rpx 44rpx 44rpx 44rpx;
+	font-size: 26rpx;
+	color: #ffffff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 332rpx;
+}
+
+.vehicle-status {
+	display: flex;
+	justify-content: space-around;
+	margin-bottom: 25rpx;
+	.status-item {
+		display: flex;
+		align-items: center;
+		text-align: center;
+		image {
+			width: 32rpx;
+			height: 32rpx;
+			margin-right: 12rpx;
+		}
+		text {
+			font-size: 24rpx;
+			color: #666;
+		}
+	}
+}
+</style>