bike/pages_adminSet/ParkIngList.vue

<template>
	<view class="page">
		<u-navbar title="地图绘制" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45'>
		</u-navbar>

		<!-- Tab切换 -->
		<u-tabs-swiper :list="tabList" :current="current" @change="tabChange" :is-scroll="false" active-color="#007AFF"
			bar-width="60" bar-height="6" item-width="250" :show-bar="true"></u-tabs-swiper>

		<!-- 列表内容 -->
		<view class="content">
			<!-- 新增按钮 -->
			<view class="add-btn" @tap="goAdd">
				<u-icon name="plus" color="#007AFF" size="28"></u-icon>
				<text>新增{{ currentTabName }}</text>
			</view>

			<!-- 列表 -->
			<view class="list">
				<u-swipe-action v-for="(item, index) in parkingList " :key="index" :show="item.show" :index="index"
					@click="handleSwipeClick" :options="swipeOptions">
					<view class="list-item">
						<view class="item-left">
							<view class="item-name">{{ item.parkingName }}</view>
							<view class="item-info">
								<text>创建时间: {{ item.createTime }}</text>
								<text>误差距离: {{ item.error !== null ? item.error : 0 }}米</text>
							</view>
						</view>
						<view class="item-right">
							<view class="custom-switch" @click="handleStatusChange(item)">
								<view class="switch-track" :class="{ 'switch-active': item.status == 0 }">
									<view class="switch-thumb"></view>
								</view>
							</view>
							<u-button type="primary" size="mini" @click="goEdit(item)">修改</u-button>
						</view>
					</view>
				</u-swipe-action>
			</view>

			<!-- 空状态 -->
			<u-empty v-if="parkingList.length === 0" text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#fff",
			},
			areaId: '',
			current: 0,
			tabList: [
				{ name: '停车区' },
				{ name: '禁停区' },
				{ name: '禁行区' }
			],
			parkingList: [],
			swipeOptions: [{
				text: '删除',
				style: {
					backgroundColor: '#dd524d'
				}
			}]
		}
	},
	computed: {
		currentTabName() {
			return this.tabList[this.current]?.name || ''
		},
		currentType() {
			return String(this.current + 1)
		}
	},
	onLoad(e) {
		this.areaId = uni.getStorageSync('adminAreaid')
		this.getParking()
	},
	methods: {
		// Tab切换
		tabChange(index) {
			this.current = index
			this.getParking()
		},

		// 获取类型名称
		getTypeName(type) {
			const typeMap = {
				'1': '停车区',
				'2': '禁停区',
				'3': '禁行区'
			}
			return typeMap[type] || '未知'
		},

		// 获取列表数据
		getParking() {
			let data = {
				areaId: this.areaId,
				type: this.currentType
			}
			this.$u.get('/appVerify/parking/list', data).then((res) => {
				if (res.code === 200) {
					this.parkingList = res.data || []
					console.log(this.parkingList[0])
				} else {
					uni.showToast({
						title: res.msg || '获取数据失败',
						icon: 'none'
					})
				}
			})
		},

		// 跳转新增页面
		goAdd() {
			uni.navigateTo({
				url: `/pages_adminSet/Parking_set?type=${this.currentType}`
			})
		},

		// 跳转编辑页面
		goEdit(item) {
			uni.navigateTo({
				url: `/pages_adminSet/Parking_set?type=${item.type}&parkingId=${item.parkingId}`
			})
		},

		// 状态切换处理
		handleStatusChange(item) {
			const newStatus = item.status === 1 ? 0 : 1
			let data = {
				parkingId: item.parkingId,
				status: newStatus
			}

			this.$u.put('/appVerify/parking/changeParkingStatus', data).then(res => {
				if (res.code === 200) {
					item.status = newStatus
					uni.showToast({
						title: '状态更新成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.msg || '状态更新失败',
						icon: 'none'
					})
				}
			})
		},

		// 处理滑动删除点击
		handleSwipeClick(e) {
			console.log(e,'e');
			// const { index } = e;
			const item = this.parkingList[e];
			
			console.log(item,'item');

			uni.showModal({
				title: '提示',
				content: '确定要删除该记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.deleteParking(item.parkingId);
					}
				}
			});
		},

		// 删除停车区域
		deleteParking(parkingId) {
			this.$u.delete(`/appVerify/parking/${parkingId}`).then(res => {
				if (res.code === 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.getParking(); // 重新获取列表数据
				} else {
					uni.showToast({
						title: res.msg || '删除失败',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
}

.page {
	width: 100%;
	height: 100%;
}

.content {
	padding: 20rpx;
}

.add-btn {
	position: fixed;
	bottom: 100rpx;
	left: 60rpx;
	display: flex;
	width: 650rpx;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	background-color: #fff;
	border-radius: 8rpx;
	margin-bottom: 20rpx;

	text {
		margin-left: 10rpx;
		color: #007AFF;
		font-size: 28rpx;
	}
}

.content {
	padding: 20rpx;
	background-color: #f5f5f5;
}

.list {
	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		// margin-bottom: 20rpx;
		// 添加底部边框和背景色微调
		// border-bottom: 1px solid #f0f0f0;
		background-color: #fafafa;

		.item-left {
			flex: 1;

			.item-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.item-info {
				font-size: 24rpx;
				color: #999;
				display: flex;
				flex-direction: column;

				text {
					margin-bottom: 4rpx;
				}
			}
		}

		.item-right {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
	}
}

.custom-switch {
	display: inline-block;

	.switch-track {
		position: relative;
		width: 100rpx;
		height: 60rpx;
		background-color: #e0e0e0;
		border-radius: 30rpx;
		transition: all 0.3s;
		cursor: pointer;

		.switch-thumb {
			position: absolute;
			left: 4rpx;
			top: 4rpx;
			width: 52rpx;
			height: 52rpx;
			background-color: #fff;
			border-radius: 50%;
			transition: all 0.3s;
			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}

		&.switch-active {
			background-color: #007AFF;

			.switch-thumb {
				transform: translateX(40rpx);
			}
		}
	}
}
</style>