zhywpt-sp/personal-center/setting/car-information/car-manage.vue

<template>
	<view class="main" :style="{height: height+'px'}">

		<view class="createbox">
			<view class="createBtn" @click="toPage">
				添加
			</view>
		</view>
		<view class="listbox">
			<view class="item-row" v-for="(item,i) in state.listArr" :key="i">
				<view class="item-left">
					<image :src="`${$imgUrl}/che.png`" mode=""></image>
					<view class="content">
						<view class="title">车牌号</view>
						<view class="desc">{{item.vehiclePlate}}</view>
					</view>
				</view>
				<view class="item-right">
					<view class="flag"><text>{{item.status}}</text> </view>
					<!-- 	<view class="title">
						车牌号：{{item.vehiclePlate}}
					</view> -->
					<view class="btns" v-if="item.status=='未使用'">
						<view class="edit" @click="edit(item)">编辑</view>
						<view class="del" @click="del(item.vehicleId)">删除</view>
					</view>
				</view>
			</view>

			<!-- 暂无数据 -->
			<view class="tips">
				~暂无数据了,请添加！~
			</view>
		</view>

		<!-- 		<view class="item-row">
			<view class="item-left">
				<view class="title">ETC卡号</view>
				<view class="desc">520111111111111111</view>
				<view class="title">OBU序列号</view>
				<view class="desc">520111111111111111</view>
			</view>
			<view class="item-right">
				<view class="flag"><text>未使用</text> </view>
				<view class="title">
					车牌号：贵Z111111
				</view>
				<view class="btns">
					<view class="edit">编辑</view>
					<view class="del">删除</view>
				</view>
			</view>
		</view> -->



		<!-- 		<view class="item-row">
			<view class="item-left">
				<view class="title">行驶证副面</view>
				<view class="desc">补传行驶证副面</view>
				<view class="flag"><text>拍摄示例</text> </view>
			</view>
			<view class="item-right">
				<view class="empty-node"></view>
				<image :src="state.installImg ?? defInstallImg"></image>
			</view>
		</view> -->
		<!-- 		<view class="btn">
			<submit-button @submit="saveHandle" title="保存"></submit-button>
		</view> -->
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive
	} from "vue";
	import {
		msg,
		navTo
	} from '@/utils/utils';
	import {
		fileURL
	} from "@/datas/fileURL.js";
	import {
		pathToBase64
	} from "@/utils/util/imageTool.js";
	import {
		getItem
	} from "@/utils/storage.ts"
	import {
		selectCarInfo,
		delCarInfo
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";


	const height = uni.getSystemInfoSync().windowHeight
	const defHeadstockImg = `${fileURL}image/applyCard/car-zhu.png`;
	const defInstallImg = `${fileURL}image/applyCard/car-fu.png`;


	const toPage = () => {
		navTo('/personal-center/setting/car-information/car-create')
	}

	const data = reactive({
		openId: getItem('openId'),
		vehicleId: ''
	})

	const state = reactive({
		listArr: []
	})


	// 获取列表数据
	const getDataList = () => {

		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(selectCarInfo, options).then((res) => {
			const data = stringToJson(res.bizContent);
			console.log(data)
			state.listArr = data.vehicleManages
		});
	}

	// 删除
	const del = (id) => {
		wx.showModal({
			title: '提示',
			content: '是否删除该条车辆信息',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					let data = {
						vehicleId: id,
						openId: getItem('openId')
					}
					const options = {
						type: 2,
						data: data,
						method: "POST",
						showLoading: true,
					};
					request(delCarInfo, options).then((res) => {
						const data = stringToJson(res.bizContent);
						console.log(data)
						state.listArr = data.vehicleManages
						if (data.info == '成功.') {
							uni.showToast({
								title: "删除成功",
								icon: "none"
							})
							getDataList()
						}
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}

	// 编辑
	const edit = (item) => {
		let data = JSON.stringify(item)
		navTo(`/personal-center/setting/car-information/car-change?data=${data}`)
	}

	onShow(() => {
		getDataList()
	})


	// //选择图片
	// const chooseImage = (type: number) => {
	// 	uni.chooseImage({
	// 		count: 1,
	// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	// 		//sourceType: ['album','camera'], 
	// 		success: function(res) {
	// 			console.log(res.tempFilePaths);
	// 			if (type === 1) {
	// 				state.headstockImg = res.tempFilePaths[0];
	// 			} else {
	// 				state.installImg = res.tempFilePaths[0];
	// 			}
	// 		}
	// 	});
	// }

	// //下一步
	// const saveHandle = () => {
	// 	if (!state.headstockImg || !state.installImg) {
	// 		msg('请按照要求上传图片！');
	// 		return;
	// 	}
	// 	msg('保存成功')
	// }
</script>

<style>
	page {
		background: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.main {
		overflow: hidden;

		.createbox {
			justify-content: flex-end;
			display: flex;
			padding: 0rpx 30rpx;
			margin-top: 20rpx;

			.createBtn {
				padding: 6rpx 27rpx;
				border: 1rpx solid #0A8F8A;
				border-radius: 10rpx;
				font-size: 30rpx;
				background: #D9F8F1;
			}
		}

		.listbox {
			overflow: auto;
			height: calc(100vh - 90rpx);

			.tips {
				text-align: center;
				font-size: 28rpx;
				margin-top: 30rpx;
			}

			.item-row {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				background: white;
				padding: 30rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
				margin: 30rpx;

				.item-left {
					display: flex;
					// flex-direction: column;
					justify-content: center;
					image{
						width: 190rpx;
						height: 110rpx;
					}
					.content {
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;
						.title {
							font-size: 34rpx;
							color: #333;
							font-weight: bold;
						}

						.desc {
							font-size: 24rpx;
							color: #999;
							margin: 10rpx 0;
						}
					}


					.flag {
						width: 110rpx;
						height: 45rpx;
						line-height: 42rpx;
						color: #0A8F8A;
						margin-top: 16rpx;
						border-radius: 6rpx;
						text-align: center;
						font-size: 20rpx;
						background: #D9F8F1;
					}
				}

				.item-right {
					width: 295rpx;
					// height: 188rpx;
					position: relative;

					image {
						position: relative;
						z-index: 10;
						width: 100%;
						height: 188rpx;
					}

					// &::before {
					// 	content: '';
					// 	position: absolute;
					// 	width: 22rpx;
					// 	height: 22rpx;
					// 	border: 4rpx solid #21BEB1;
					// 	border-bottom: none;
					// 	border-right: none;
					// 	z-index: 0;
					// 	left: -4rpx;
					// 	top: -4rpx;
					// }

					// &::after {
					// 	content: '';
					// 	position: absolute;
					// 	width: 22rpx;
					// 	height: 22rpx;
					// 	border: 4rpx solid #21BEB1;
					// 	border-top: none;
					// 	border-right: none;
					// 	z-index: 0;
					// 	left: -4rpx;
					// 	bottom: -4rpx;
					// }


					.flag {
						width: 110rpx;
						height: 45rpx;
						line-height: 42rpx;
						color: #0A8F8A;
						margin-top: 16rpx;
						border-radius: 6rpx;
						text-align: center;
						font-size: 20rpx;
						background: #D9F8F1;
						position: relative;
						right: -180rpx;
					}

					.title {
						text-align: right;
						margin: 20rpx 0;
						font-size: 28rpx;
					}

					.btns {
						display: flex;
						justify-content: space-around;
						align-items: center;
						margin-top: 20rpx;


						.edit {
							padding: 6rpx 27rpx;
							border: 1rpx solid #0A8F8A;
							border-radius: 30rpx;
							font-size: 30rpx;
							color: #0A8F8A;
						}

						.del {
							padding: 6rpx 27rpx;
							border: 1rpx solid red;
							border-radius: 30rpx;
							font-size: 30rpx;
							color: red;
						}
					}
				}

				.empty-node {
					position: absolute;
					z-index: 0;
					width: 100%;
					height: 100%;

					&::before {
						content: '';
						position: absolute;
						width: 22rpx;
						height: 22rpx;
						border: 4rpx solid #21BEB1;
						border-left: none;
						border-bottom: none;
						z-index: 0;
						right: -4rpx;
						top: -4rpx;
					}

					&::after {
						content: '';
						position: absolute;
						width: 22rpx;
						height: 22rpx;
						border: 4rpx solid #21BEB1;
						border-top: none;
						border-left: none;
						z-index: 0;
						right: -4rpx;
						bottom: -4rpx;
					}
				}
			}
		}

		.hint {
			display: flex;
			flex-direction: row;
			justify-content: center;
			font-size: 26rpx;
			color: #666666;
			padding: 0px 30rpx;
			margin-top: 60rpx;

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			view {
				width: calc(100% - 36rpx);
			}
		}

		.btn {
			margin: 470rpx 40rpx 30rpx;
		}
	}
</style>