employ-front/pages_subpack/person/index.vue

<template>
	<!-- 个人 -->
	<view>
		<view class="se-pt-20 se-pb-20 se-px-40 se-bgc-green se-c-white se-ta-c se-fs-24" v-if="status==1">
			个人认证-已通过
		</view>
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80">
			<view class="se-p-20">
				<view class="se-p-20 se-bgc-white se-br-10 se-fs-20">
					<u-form-item label="姓名" prop="name">
						<u--input v-model="form.name" class="se-bgc-f5" placeholder="请输入姓名名称"></u--input>
					</u-form-item>
					<!-- <u-form-item label="密码" prop="password">
						<u--input v-model="form.password" class="se-bgc-f5" placeholder="请输入您的密码"></u--input>
					</u-form-item> -->
					<u-form-item label="联系电话" prop="mobile">
						<u--input v-model="form.mobile" class="se-bgc-f5" placeholder="请输入联系方式"></u--input>
					</u-form-item>
					<u-form-item label="居住地址" prop="address">
						<u--input v-model="form.address" class="se-bgc-f5" placeholder="请输入详细地址"></u--input>
					</u-form-item>
					<u-form-item label="行业" prop="industryId" @click="handleIndChange()">
						<u--input readonly v-model="form.industryName" placeholder="请选择行业" border="bottom"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>
			</view>
			<view class="se-p-20">
				<view class="se-px-20 se-pb-20 se-bgc-white se-br-10 se-fs-20">
					<u-form-item prop="file" labelWidth="2">
						<view class="se-flex se-flex-v-sa">
							<view class="se-py-20 se-w-p-100 se-flex">
								<view class="line-orange"></view>
								<view class="se-ml-10">
									个人照片
								</view>
							</view>
							<view class="se-py-20 se-w-p-100">
								<u-upload :fileList="form.imageFile" @afterRead="afterImageFileRead" @delete="deleteImageFilePic" name="1"
									multiple :maxCount="10"></u-upload>
							</view>
						</view>
					</u-form-item>
				</view>
			</view>
			<view class="se-p-20">
				<view class="se-px-20 se-pb-20 se-bgc-white se-br-10 se-fs-20">
					<u-form-item prop="file" labelWidth="2">
						<view class="se-flex se-flex-v-sa">
							<view class="se-py-20 se-w-p-100 se-flex">
								<view class="line-orange"></view>
								<view class="se-ml-10">
									身份证上传(正面)
								</view>
							</view>
							<view class="se-py-20 se-w-p-100">
								<u-upload :fileList="form.cerImageBackFile" @afterRead="afterCerImageBackFileRead" @delete="deleteCerImageBackFilePic" name="1"
									multiple :maxCount="10"></u-upload>
							</view>
						</view>
					</u-form-item>
				</view>
			</view>
			<view class="se-p-20">
				<view class="se-px-20 se-pb-20 se-bgc-white se-br-10 se-fs-20">
					<u-form-item prop="file" labelWidth="2">
						<view class="se-flex se-flex-v-sa">
							<view class="se-py-20 se-w-p-100 se-flex">
								<view class="line-orange"></view>
								<view class="se-ml-10">
									身份证上传(反面)
								</view>
							</view>
							<view class="se-py-20 se-w-p-100">
								<u-upload :fileList="form.cerImageFrontFile" @afterRead="afterCerImageFrontRead" @delete="deleteCerImageFrontReadPic" name="1"
									multiple :maxCount="10"></u-upload>
							</view>
						</view>
					</u-form-item>
				</view>
			</view>
			<view class="se-px-20 se-pt-20" v-if="status!=1">
				<view class="se-px-20 se-pb-80 se-fs-20 se-flex">
					<view @click="submit"
						class="se-mx-10 se-flex-1 se-br-40 se-flex-h-c se-h-60 se-lh-60 se-ta-c se-fs-28 se-c-white se-bgc-orange">
						<text>{{form.id?'保存':'提交审核'}}</text>
					</view>
					<!-- <view class="se-mx-10 se-flex-1 se-b se-br-40 se-flex-h-c se-h-60 se-lh-60 se-ta-c se-fs-28 se-c-66 se-bgc-f5">
						<text>联系我们</text>
					</view> -->
				</view>
			</view>
		</u--form>
		<u-action-sheet :actions="indList" @select="selectIndClick" title="行业" :show="show"  @close="show=false"></u-action-sheet>
	</view>
</template>
<script>
	import {roleBoss,industryList,updateRoleBoss,queryCategoryList,addAuthenticationPerson,getAuthenticationPerson} from "@/common/api.js"
	export default{
		data(){
			return{
				status:-1,
				show:false,
				indList: [],
				fileList: [],
				form: {
					id:'',
					role:0,
					name: '',
					password: '',
					mobile: '',
					address:'',
					industryId:'',
					industryName:'',
					cerImageBackFile:[],
					cerImageFrontFile:[],
					imageFile:[]
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请输入姓名名称',
						trigger: ['blur', 'change']
					}],
					password: [{
						type: 'string',
						required: true,
						message: '请输入您的密码',
						trigger: ['blur', 'change']
					}],
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						},
					],
					address: [{
						type: 'string',
						required: true,
						message: '请输入居住地址',
						trigger: ['blur', 'change']
					}],
					industryId: [{
						type: 'string',
						required: true,
						message: '请选择行业',
						trigger: ['blur', 'change']
					}],
					cerImageBackFile:[
						{
							validator: (rule, value, callback) => {
							  if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
								callback(new Error('请选择身份证'));
							  } else {
								callback();
							  }
							}, 
							trigger: 'blur' 
						}
					],
					cerImageFrontFile:[
						{
							validator: (rule, value, callback) => {
							  if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
								callback(new Error('请选择身份证'));
							  } else {
								callback();
							  }
							}, 
							trigger: 'blur' 
						}
					],
					imageFile:[
						{
							validator: (rule, value, callback) => {
							  if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
								callback(new Error('请选择个人照片'));
							  } else {
								callback();
							  }
							}, 
							trigger: 'blur' 
						}
					],
				},
			}
		},
		watch: {

		},
		onReady() {
			this.onAuthenticationPerson()
			this.onQueryCategoryList()
			this.$refs.uForm.setRules(this.rules)
		},
		
		mounted() {
			
		},
		methods: {
			
			onAuthenticationPerson(){
				let params={}
				getAuthenticationPerson(params).then(response=>{
					let person = response.result
					if(response.result){
						this.form.id = person.id
						this.status = person.status
						this.form.name = person.name
						this.form.mobile = person.phone
						this.form.address = person.address
						this.form.industryId = person.industry
						this.form.industryName = person.industryName
						this.form.cerImageBackFile = this.stringToKeyValueArray(person.cerImageBack)
						this.form.cerImageFrontFile = this.stringToKeyValueArray(person.cerImageFront)
						this.form.imageFile = this.stringToKeyValueArray(person.image)
					}
				}).catch(error=>{
					
				})
				
			},
			onQueryCategoryList(){
				queryCategoryList({}).then(response=>{
					console.info(response)
					this.indList = response.result
				}).catch(error=>{
					
				})
			},
			stringToKeyValueArray(str, delimiter1 = ',') {
				if(str){
					let arro = str.split(delimiter1);
					let arr = [];
					arro.forEach(items=>{
						let obj = {};
						obj["url"] = items
						arr.push(obj)
					})
					console.info(arr)
					return arr
				}else{
					return []
				}
			},
			handleIndChange(){
				this.show = true
			},
			selectIndClick(event){
				console.info("selectIndClick",event)
				this.form.industryId = event.id
				this.form.industryName = event.name
				this.show = false
			},
			submit() {
				let that = this
				that.$refs.uForm.validate().then(res => {
					that.onRoleBoss()
				}).catch(errors => {
					console.info(errors)
					uni.$u.toast('校验失败')
				})
			},
			onRoleBoss(){
				let that = this
				let params={
					id:that.form.id,
					name:that.form.name,
					role:that.form.role,
					phone:that.form.mobile,
					address:that.form.address,
					industry:that.form.industryId,
					// categoryTwo:that.form.industryName,
					cerImageBack:that.form.cerImageBackFile.map(item => item.url).join(','),
					cerImageFront:that.form.cerImageFrontFile.map(item => item.url).join(','),
					image:that.form.imageFile.map(item => item.url).join(','),
				}
				// if(that.form.id){
				// 	updateRoleBoss(params).then(response=>{
				// 		uni.$u.toast("保存成功！")
				// 		setTimeout(()=>{
				// 			uni.navigateBack({
				// 				delta:1
				// 			})
				// 		},1500)
				// 	}).catch(error=>{
						
				// 	})
				// }else{
					addAuthenticationPerson(params).then(response=>{
						uni.$u.toast("提交成功，等待申请")
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/home/index"
							})
						},1500)
					}).catch(error=>{
						
					})
				// }
			},
			deleteCerImageBackFilePic(event) {
				this.form.cerImageBackFile.splice(e.index, 1)
			},
			async afterCerImageBackFileRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.cerImageBackFile.push({
							url
						})
					})
				})
			},
			deleteCerImageFrontReadPic(event) {
				this.form.cerImageFrontFile.splice(e.index, 1)
			},
			async afterCerImageFrontRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.cerImageFrontFile.push({
							url
						})
					})
				})
			},
			async afterImageFileRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.imageFile.push({
							url
						})
					})
				})
			},
			deleteImageFilePic(event) {
				this.form.imageFile.splice(e.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line-orange {
		width: 8rpx;
		height: 32rpx;
		background: #ff7a31;
		border-radius: 4rpx;
	}
</style>