employ-front/pages_subpack/enterprise/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="company">
						<u--input v-model="form.company" 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.businessLicenseFile" @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>{{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} from "@/common/api.js"
	export default{
		data(){
			return{
				show:false,
				indList: [],
				form: {
					id:"",
					role:1,
					name: '',
					password: '',
					mobile: '',
					company:'',
					idCard:'',
					address:'',
					industryId:'',
					industryName:'',
					businessLicenseFile:[]
				},
				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'],
						},
					],
					company: [{
						type: 'string',
						required: true,
						message: '请输入公司名称',
						trigger: ['blur', 'change']
					}],
					address: [{
						type: 'string',
						required: true,
						message: '请输入公司地址',
						trigger: ['blur', 'change']
					}],
					industryId: [{
						type: 'string',
						required: true,
						message: '请选择行业',
						trigger: ['blur', 'change']
					}],
					businessLicenseFile:[
						{
							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 company = uni.getStorageSync("company")
			if(company){
				this.form.id = company.id
				this.form.name = company.userName
				this.form.mobile = company.phone
				this.form.company = company.companyName
				this.form.address = company.companyAddress
				this.form.industryId = company.industryId
				this.form.industryName = company.industryName
				this.form.businessLicenseFile = this.stringToKeyValueArray(company.businessLicense)
			}
		},
		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){
				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=>{
					
				})
			},
			onRoleBoss(){
				let that = this
				let params={
					id:that.form.id,
					userName:that.form.name,
					role:that.form.role,
					phone:that.form.mobile,
					companyName:that.form.company,
					companyAddress:that.form.address,
					industryId:that.form.industryId,
					industryName:that.form.industryName,
					businessLicense:that.form.businessLicenseFile.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{
					roleBoss(params).then(response=>{
						uni.$u.toast("提交成功，等待申请")
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/home/index"
							})
						},1500)
					}).catch(error=>{
						
					})
				}
			},
			submit() {
				let that = this
				that.$refs.uForm.validate().then(res => {
					that.onRoleBoss()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			deletePic(event) {
				this.form.businessLicenseFile.splice(event.index, 1)
			},
			async afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						console.info(url)
						self.form.businessLicenseFile.push({
							url
						})
					})
				})
			}
		}
	}
</script>

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