cbz/page_mine/pages/service/applyMaintenance.vue

<template>
	<view class="content">
		<view class="box1">
			<view class="steps hflex acenter jcenter">
				<u-steps :current="current">
					<u-steps-item title="个人信息"></u-steps-item>
					<u-steps-item title="工作信息"></u-steps-item>
					<u-steps-item title="审核"></u-steps-item>
				</u-steps>
			</view>
			<view v-if="current == 0">
				<view class="title">个人信息</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">姓名</view>
					<u-input v-model="userInfo.name" placeholder="请输入您的姓名" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">身份证号</view>
					<u-input v-model="userInfo.idNumber" placeholder="请输入您的身份证号" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">邮箱</view>
					<u-input v-model="userInfo.eamil" placeholder="请输入您的邮箱" inputAlign="right" border="none"></u-input>
				</view>
				<view class="hflex acenter jbetween cell">
					<view class="left">地址</view>
					<u-input v-model="userInfo.address" placeholder="请输入您的地址" inputAlign="right" border="none"></u-input>
				</view>
				<view class="line"></view>
				<view class="cell">
					<view class="img_title">身份证人像面照片</view>
					<view class="upload_img hflex acenter jcenter">
						<u-upload :fileList="userInfo.just_img" @afterRead="afterRead(1)" @delete="deletePic(1)" :maxCount="1" name="1" multiple :previewFullImage="true" width="110" height="110">
							<image src="/static/images/comment/upload-just.png" style="width: 550rpx;height: 324rpx;"></image>
						</u-upload>
					</view>
				</view>
				<view class="cell">
					<view class="img_title">身份证人像面照片</view>
					<view class="upload_img hflex acenter jcenter">
						<u-upload :fileList="userInfo.back_img" @afterRead="afterRead(2)" @delete="deletePic(2)" :maxCount="1" name="1" multiple :previewFullImage="true" width="110" height="110">
							<image src="/static/images/comment/upload-back.png" style="width: 550rpx;height: 324rpx;"></image>
						</u-upload>
					</view>
				</view>
				<view class="bottom">
					<view class="btn" @click="next">下一步</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				current: 0,
				userInfo: {
					name: '',
					idNumber: '',
					eamil: '',
					address: '',
					just_img: [],
					back_img: [],
				}
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 删除图片
			deletePic(event) {
				// that.userInfo.imgList.splice(event.index, 1)
				console.log(event)
				if(event == 1) {
					that.just_img = []
				} else {
					that.back_img = []
				}
			},
			// 新增图片
			async afterRead(event) {
				var imgList = []
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				if(event == 1) {
					imgList = that.just_img
				} else {
					imgList = that.back_img
				}
				let lists = [].concat(event.file)
				let imgListLen = imgList.length
				lists.map((item) => {
					imgList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = imgList[imgListLen]
					imgList.splice(imgListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					imgListLen++
				}
				if (event == 1) {
					that.just_img = imgList
				} else {
					that.back_img = imgList
				}
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			next() {
				that.current = that.current + 1
				// if ($api.formCheck(that.userInfo.name,'truename') && $api.formCheck(that.userInfo.idNumber,'identity') && $api.formCheck(that.userInfo.eamil,'email') && $api.formCheck(that.userInfo.address,'required') && $api.formCheck(that.userInfo.just_img,'required') && $api.formCheck(that.userInfo.back_img,'required')) {
				// 	that.current = that.current + 1
				// }
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		padding: 0 40rpx;
		.box1 {
			.steps {
				width: 100%;
				height: 188rpx;
			}
			.title {
				font-size: 32rpx;
				color: #444;
				margin: 8rpx 0;
				position: relative;
				z-index: 9;
			}
			.title::before {
				width: 120rpx;
				height: 16rpx;
				background: linear-gradient(270deg, #506dff 0%, #fff 100%);
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 2;
				opacity: 0.8;
			}
			.u-input {
				width: 100%;
				margin-top: 30rpx;
			}
			.cell {
				width: 100%;
				padding: 20rpx 0;
				.left {
					font-size: 28rpx;
					color: #222;
				}
				.u-input {
					font-size: 28rpx;
					color: #222;
				}
				.img_title {
					font-size: 28rpx;
					color: #444;
				}
				.upload_img {
					width: 670rpx;
					height: 404rpx;
					background-color: #f4f4f4;
					border-radius: 20rpx;
					margin: 28rpx 0 40rpx;
				}
				.u-upload__wrap {
					display: flex;
					align-items: center !important;
					justify-content: center !important;
				}
			}
			.line {
				width: 100%;
				height: 1rpx;
				background-color: #f4f4f4;
			}
			.bottom {
				width: 100%;
				margin: 40rpx 0 64rpx;
				.btn {
					width: 690rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					border-radius: 44rpx;
					background-color: #506dff;
					color: #fff;
					font-size: 36rpx;
				}
			}
		}
		
	}
</style>