uniapp_车辆管理项目

页面布局

首先页面布局部分，必须要有立体感，加阴影，显示卡片状。

.pager-all {
	margin: 8px;
	// solid;是边框是实体线
	border: 0px solid #a1a1a1;
	padding: 10px;
	background: white;
	width: 96%;
	// 使得方框可以变得圆滑 显得美观
	border-radius: 6px;
	// flex布局
	display: flex;
	justify-content: center;
	align-items: center;
	// 加阴影部分
	box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.2);
}

再比如

.apply {
	margin: 10px;
	margin-top: 15px;
	background-color: white;
	height: 250px;
	// flex布局
	display: flex;
	margin-bottom: 8px;
	flex-direction: column;
	// 使得卡片圆滑
	border-radius:5px;
	// 加阴影部分
	box-shadow: 0upx 0upx 8upx rgba(0, 0, 0, 0.2);
}

定位position 此时可以将按钮定在网页的最底层

.fixed_box {
	position:fixed;
	bottom:0;
	left:0;
	width: 100%;
}

可以将方框内的内容进行右对齐。

.CarCatagory {
	color: grey;
	text-align: end;
}

标签内部加样式

<u-icon v-if="iscompile && driveFileUrl" style="position:absolute;top: -8px;right: -8px; color:#007AFF;font-size: 20px;" @click="driveDelete" name="close-circle"></u-icon>

另一种

<view class="underground" v-for="(item,i) in parklist" :key="i" :style="i===0 ? 'border-right: 2px solid #efefef;':''">

注意: 写v-for一定要写index的i否则会报警告

对照片的上传，预览

首先是默认传的照片

<image style="width: 140px;height: 85px;" src="../static/img/upload.png" mode=""></image>

如果想点击上面的照片进行上传一个照片

<view class="uploading_bgi drive" v-if="driveFileUrl === ''" @click="drive"><image style="width: 140px;height: 85px;" src="../static/img/upload.png" mode=""></image></view>

drive的方法 这里是uniapp自带的一个方法

drive() {
	let that = this;
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['camera', 'album'], //从相册选择
		success: function(res) {
			let filePath = res.tempFilePaths[0];
			// 将本地的图片上传到服务器
			uploadFile(filePath, that.source)
				.then(res => {
					// 这里是所有的关于drive的信息
					that.driveFilePath = res.data;
					if (that.driveFilePath.length > 0) {
						that.driveFilePath[0].fileStoragePath = that.driveFilePath[0].fileAccessPath;
						that.driveFilePath[0].fileCategory = 'driver_license';
						// 从服务器内拿到的值作为参数传入到此方法中 从而拼接成为一个URL 此处的URL可以用来渲染页面
						that.driveFileUrl = IntegrationUtils.FILE.getFilePrefixRouter(that.driveFilePath[0].fileAccessPath);
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		});
	},

图片删除功能
删除时的html

<u-icon v-if="iscompile && travelFileUrl" style="position:absolute;top: -8px;right: -8px; color:#007AFF;font-size: 20px;" @click="travelDelete" name="close-circle"></u-icon>

删除时的方法

driveDelete() {
			let that = this;
			let param = {
				fileId: that.driveFile.fileUuid,
				vehicleId: that.vehicleId,
				userId: IntegrationUtils.ACCOUNT.getId()
			};
			uni.showModal({
				title: '提示',
				content: '确定删除该附件吗？',
				success: function(res) {
					if (res.confirm) {
						// that.$refs.pubilcItem.showLoading();
						api_carDeleteFile(param)
							.then(res => {
							if (res.code == 0) {
									// console.log('aaa')
									uni.showToast({
										title: '删除成功',
										icon: 'none',
										mask: false,
										duration: 1500
									});
									// 这里的所有的关于本drive的所有的信息(本身是数组形式)都将清空 再传入到删除接口中去 最后将在服务器内删除
									console.log('driveFilePath',that.driveFilePath)
									// driveFileUrl 这里是渲染到页面上的URL 也将清空 图片就会不显示
									console.log('driveFileUrl',that.driveFileUrl)
									that.driveFilePath = [];
									that.driveFileUrl = '';
									} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none',
										mask: false,
										duration: 1500
									});
									// that.$refs.pubilcItem.hideLoading();
									}
							})
							.catch(err => {});
					} else if (res.cancel) {
					}
				}
			});
		  },

图片预览 将图片的URL地址传参的形式传入进去

_previewImage(image) {
	var imgArr = [];
		imgArr.push(image);
		//预览图片
		uni.previewImage({
			urls: imgArr,
			current: imgArr[0]
		});
	},

navigateTo传参到去他页面，其他页面接收

在本页面中，此时可以用NavigateTo(参数)的方法，进行页面之间的传值，其他的页面是用onload()加载的方式进行获取这个值
本页面代码html

<view class="apply" v-for="(item,i) in vehicleList" :key='i'>
	<view class="demo-icon-font edit" @click="vehicleDeleteClick(item)"></view>
</view>

本页面js

vehicleDeleteClick(item) { // 车辆删除
	uni.navigateTo({
			// JSON.stringify() 此函数的作用就是将一个参数这个对象，转化成JSON形式的字符串 其实这是一个字符串 只不过字符串内部是JSON对象的形式
			url: '/pages/application/pms-vehicle-service/views/vehicle-delete?item=' + JSON.stringify(item)
		});
	},

这两个网页之间传的参数是以字符串的形式传递的
将参数传递给其他页面中，直接传给onLoad(参数)内的参数，可以直接进行加载

onLoad(item) {
	 	if (item.item !== undefined) {
			// JSON.parse() 方法是将JSON对象形式的字符串解析成为一个JSON对象 这样就可以方便从JSON的对象中拿取数据
	 		let data = JSON.parse(item.item);
		}
	}