partnerApp/pages/index/applypartner.vue

<template>
	<view>
		<public-module></public-module>

		<view class="box"
			:style="{background:`url(${indexBackgroundImage})`,backgroundSize: 'contain',backgroundRepeat: 'no-repeat'}">
			<view class="box-con">
				<uni-forms ref="personData" :rules="rules" :value="personData" label-width="100" validate-trigger="bind"
					err-show-type="toast">
					<uni-forms-item label="姓名" required name="name">
						<input class="uni-input-input textColor" placeholder="输入姓名" v-model="personData.name"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="mobile">
						<input class="uni-input-input textColor" maxlength="11" placeholder="输入手机号"
							v-model="personData.mobile" placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item label="证件号" required name="identity">
						<input class="uni-input-input textColor" placeholder="输入证件号" v-model="personData.identity"
							placeholder-style="font-·size:28upx" />
					</uni-forms-item>
					<uni-forms-item label="密码" required name="password">
						<input class="uni-input-input textColor" placeholder="输入密码" v-model="personData.password"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item label="地址" required name="liveAddress">
						<input class="uni-input-input textColor" placeholder="输入地址" v-model="personData.liveAddress"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="userBox" style="margin-top:10px">
			<text>身份证件照</text>
			<view class="dis j-s" style="margin: 10px 0;">
				<view class="imgOcr-border">
					<image :src=" userfrontImg?userfrontImg:'/static/image/my/shenfenzz.png'" mode=""
						@click="userfrontChange"></image>
					<view>人像面</view>
				</view>
				<view class="imgOcr-border">
					<image :src="userbackImg?userbackImg:'/static/image/my/shenzf.png'" mode="" @click="userbackChange">
					</image>
					<view>国徽面</view>
				</view>
			</view>
		</view>
		<view class="submit" @click="submit()">
			提交
		</view>
	</view>
</template>
<script>
	import indexBackgroundImage from "@/static/shenqing.png"
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				indexBackgroundImage: indexBackgroundImage,
				checked: false,
				userfrontImg: "",
				userbackImg: "",
				personData: {
					name: '',
					mobile: '',
					identity: '',
					password: '',
					liveAddress: '',
					sfz1: '',
					sfz2: '',
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '请输入正确的手机号',
							}
						]
					},
					identity: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号',
							},
							{
								pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
								errorMessage: '请输入正确的身份证号',
							}
						]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}]
					},
					liveAddress: {
						rules: [{
							required: true,
							errorMessage: '请输入地址',
						}]
					},
				},
				grade: '', //人员等级
				id: '',
				deptSource: null, //业务来源
			}
		},
		computed: {
			...mapState(['userInfo', "userCheckInfo"]),
		},
		async onLoad(options) {
			this.grade = options.grade ? options.grade : '';
			this.id = options.userId ? options.userId : '';
			this.deptSource = options.deptSource ? options.deptSource : '';
		},
		methods: {
			//提交注册
			submit() {
				this.$refs.personData.submit().then(res => {
					this.$http.post('/userInfo/newSaveUserInfoByPartner', {
						...this.personData,
						referrerId: this.id,
						grade: this.grade,
						...(this.deptSource != null && {
							deptSource: this.deptSource
						}),
					}).then(res => {
						if (res.code == 200) {
							let obj = JSON.stringify({
								id: res.data.id,
								mobile: res.data.mobile,
								grade: this.grade,
							});
							uni.redirectTo({
								url: "/pages/index/success?data=" + obj
							})
						} else {
							uni.showModal({
								showCancel: false,
								title: res.msg
							})
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 正面
			async userfrontChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});

				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.userfrontImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						// header: {
						// 	Authorization: store.state.token,
						// },
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								this.personData.sfz1 = data.data.id
							}
						}
					});
				}
			},
			//反面
			async userbackChange() {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
				if (!size) {
					this.$refs.uToast.show({
						title: '上传图片大小不能超过 5MB!',
						type: 'error',
					})
					return false
				}
				if (chooseImageRes) {
					this.userbackImg = chooseImageRes.tempFilePaths[0];
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						// header: {
						// 	Authorization: store.state.token,
						// },
						success: (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == '200') {
								this.personData.sfz2 = data.data.id
							}

						}
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 330px;
		width: 100%;
		background: #F9F9F9;
		background: url(/static/image/my/shenqing.png) no-repeat;
		background-size: contain;
		padding: 130px 15px 0 15px;
		// padding: 200px 16px 15px 16px;
	}

	.box-con {
		background: #FFFFFF;
		padding: 10px 15px;
		border-radius: 5px 5px 5px 5px;
	}

	.userBox {
		border-radius: 5px 5px 5px 5px;
		margin: 10px 15px;
		padding: 10px 15px;
		background: #fff;
		font-size: 15px;
		color: #666666;

		.imgOcr-border {
			// position: relative;
			width: 48%;
			text-align: center;

			image {
				display: inline-block;
				height: 95px;
				width: 100%;
			}

			// .del_btn {
			// 	position: absolute;
			// 	cursor: pointer;
			// 	position: absolute;
			// 	top: 5rpx;
			// 	right: 0;
			// 	width: 50rpx;
			// 	height: 50rpx;
			// 	border-radius: 50%;
			// 	z-index: 20;
			// }
		}
	}

	.submit {
		margin: 15px;
		text-align: center;
		color: #fff;
		height: 46px;
		line-height: 46px;
		background: linear-gradient(133deg, #2DD9FF 0%, #2D6DFF 100%);
		border-radius: 31px 31px 31px 31px;
	}
</style>