employ-front/pages_subpack/person/index.vue

<template>
	<!-- 个人 -->
	<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.idCardFile" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="10"></u-upload>
							</view>
						</view>
					</u-form-item>
				</view>
			</view>
			<view class="se-px-20 se-pt-20">
				<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>提交审核</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} from "@/common/api.js"
	export default{
		data(){
			return{
				show:false,
				indList: [],
				fileList: [],
				form: {
					id:'',
					role:0,
					name: '',
					password: '',
					mobile: '',
					address:'',
					industryId:'',
					industryName:'',
					idCardFile:[]
				},
				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']
					}],
					idCardFile:[
						{
							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.onIndustryList()
			this.$refs.uForm.setRules(this.rules)
		},
		
		mounted() {
			let worker = uni.getStorageSync("worker")
			if(worker){
				this.form.id = worker.id
				this.form.name = worker.userName
				this.form.mobile = worker.phone
				this.form.industryId = worker.industryId
				this.form.industryName = worker.industryName
				this.form.idCardFile = this.stringToKeyValueArray(worker.idCard)
			}
		},
		methods: {
			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
			},
			onIndustryList(){
				industryList({}).then(response=>{
					console.info(response)
					this.indList = response.result
				}).catch(error=>{
					
				})
			},
			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={
					userName:that.form.name,
					role:that.form.role,
					phone:that.form.mobile,
					industryId:that.form.industryId,
					industryName:that.form.industryName,
					idCard:that.form.idCardFile.map(item => item.url).join(','),
				}
				roleBoss(params).then(response=>{
					uni.$u.toast("提交成功，等待申请")
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/home/index"
						})
					},1500)
				}).catch(error=>{
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/home/index"
						})
					},1500)
				})
				
			},
			deletePic(event) {
				this.form.idCardFile.splice(e.index, 1)
			},
			async afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.idCardFile.push({
							url
						})
					})
				})
			}
		}
	}
</script>

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