first commit

pages/mine/car/car.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="car-list">
+		<view class="car-item" v-for="(car, index) in cars" :key="index">
+			<view class="car-number">
+				<view>NO{{ index + 1 }}.</view>
+				<image @click="delCar(car)" src="/static/image/cardel.png" style="width: 40rpx; height: 40rpx"></image>
+			</view>
+			<view class="car-info">
+				<view>
+					<view class="car-default">
+						<view>默认车辆</view>
+					</view>
+
+					<view class="car-plate">
+						<image style="width: 198rpx; height: 56rpx; position: absolute; top: 0; left: 0" src="/static/image/carNum.png"></image>
+						<text>{{ car.licensePlate }}</text>
+					</view>
+				</view>
+				<image :src="car.image" class="car-image" mode="widthFix" />
+			</view>
+		</view>
+		<view class="add-car">
+			<view class="add-car-jia">+</view>
+			<view @click="navTo('/pages/mine/car/add')">添加我的爱车</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useNav } from '@/hooks/useNav.js';
+import { carList, carDel } from '@/api/api.js';
+import { onLoad } from '@dcloudio/uni-app';
+const { navTo } = useNav();
+const cars = ref([]);
+
+onLoad(() => {
+	getList();
+});
+
+const getList = () => {
+	carList().then((res) => {
+		cars.value = res.map((item, index) => {
+			return {
+				...item,
+				image: '/static/image/car-image.png'
+			};
+		});
+	});
+};
+
+const delCar = (item) => {
+	uni.showModal({
+		title: '提示',
+		content: '是否删除该车辆信息？',
+		success: (res) => {
+			if (res.confirm) {
+				carDel(item.id).then((res) => {
+					getList();
+				});
+			} else if (res.cancel) {
+				console.log('用户点击取消');
+			}
+		}
+	});
+};
+</script>
+
+<style lang="scss">
+.car-list {
+	padding: 30rpx;
+}
+.car-item {
+	width: 100%;
+	padding: 24rpx;
+	background: #ffffff;
+	border-radius: 8rpx 8rpx 8rpx 8rpx;
+	margin-bottom: 20rpx;
+	// display: flex;
+	// align-items: center;
+	// justify-content: space-between;
+}
+.car-number {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-weight: bold;
+}
+.car-info {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.car-default {
+	font-size: 26rpx;
+	margin-bottom: 45rpx;
+}
+
+.car-plate {
+	color: #333;
+	font-weight: bold;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 198rpx;
+	height: 56rpx;
+	text {
+		position: relative;
+		z-index: 99;
+	}
+}
+.car-image {
+	width: 336rpx;
+	margin-left: 10px;
+}
+.add-car {
+	width: 690rpx;
+	height: 176rpx;
+	background: #ffffff;
+	border-radius: 8rpx 8rpx 8rpx 8rpx;
+	margin-top: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	font-size: 36rpx;
+	color: #232323;
+}
+.add-car-jia {
+	width: 92rpx;
+	height: 92rpx;
+	background: rgba(111, 162, 86, 0.1);
+	border-radius: 50%;
+	font-weight: 500;
+	color: rgba(111, 162, 86, 1);
+	font-size: 70rpx;
+	line-height: 80rpx;
+	text-align: center;
+	margin-right: 25rpx;
+}
+</style>