employ-front/pages_subpack/enterprise/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="company">
						<u--input v-model="form.company" class="se-bgc-f5" placeholder="请输入公司名称"></u--input>
					</u-form-item>
					<u-form-item label="公司地址" prop="address" @click="handleAreaChange()">
						<u--textarea :autoHeight="true" v-model="form.address" readonly class="se-bgc-f5" placeholder="请点击地图选择地址" ></u--textarea>
						<!-- <u--input  v-model="form.address"  class="se-bgc-f5" placeholder="请选择地址" ></u--input> -->
						<view  slot="right" @click="handleAreaChange()" class="se-ml-10 se-px-10 se-flex-1 se-br-10 se-flex-h-c se-h-40 se-lh-40 se-ta-c se-fs-22 se-c-white se-bgc-orange">
							<text>地图</text>
						</view>
					</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="headImg" 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">
									企业logo上传
								</view>
							</view>
							<view class="se-py-20 se-w-p-100">
								<u-upload :fileList="form.headImg" @afterRead="afterReadLogo" @delete="deleteLogoImg" name="2"
									:maxCount="1"></u-upload>
							</view>
						</view>
					</u-form-item>
					<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"  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 QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
	import {roleBoss,industryList,updateRoleBoss,addAuthenticationCompany,queryCategoryList,getAuthenticationCompany} from "@/common/api.js"
	export default{
		data(){
			return{
				status:-1,
				show:false,
				indList: [],
				form: {
					id:"",
					role:1,
					name: '',
					password: '',
					mobile: '',
					company:'',
					longitude:"",
					latitude:"",
					idCard:'',
					address:'',
					industryId:'',
					industryName:'',
					status:'',
					headImg:[],
					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']
					}],
					headImg:[
						{
							validator: (rule, value, callback) => {
							  if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
								callback(new Error('请上传企业logo'));
							  } else {
								callback();
							  }
							}, 
							trigger: 'blur' 
						}
					],
					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.onQueryCategoryList()
			this.onAuthenticationCompany()
			this.$refs.uForm.setRules(this.rules)
		},
		mounted() {

		},
		methods: {
			onAuthenticationCompany(){
				let params={}
				getAuthenticationCompany(params).then(response=>{
					let company = response.result
					if(response.result){
						this.status = company.status
						this.form.id = company.id
						this.form.name = company.name
						this.form.longitude = company.longitude
						this.form.latitude = company.latitude
						this.form.mobile = company.phone
						this.form.company = company.company
						this.form.address = company.address
						this.form.industryId = company.industry
						this.form.industryName = company.industryName
						this.form.status = company.status
						this.form.headImg = this.stringToKeyValueArray(company.headImg)
						this.form.businessLicenseFile = this.stringToKeyValueArray(company.license)
					}
				}).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){
				this.form.industryId = event.id
				this.form.industryName = event.name
				this.show = false
			},
			onQueryCategoryList(){
				queryCategoryList({}).then(response=>{
					console.info(response)
					this.indList = response.result
				}).catch(error=>{
					
				})
			},
			onRoleBoss(){
				let that = this
				let params={
					userId:uni.getStorageSync("userInfo").id,
					id:that.form.id,
					name:that.form.name,
					longitude:that.form.longitude,
					latitude:that.form.latitude,
					role:that.form.role,
					phone:that.form.mobile,
					company:that.form.company,
					address:that.form.address,
					industry:that.form.industryId,
					industryName:that.form.industryName,
					headImg:that.form.headImg.map(item => item.url).join(','),
					license: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{
					addAuthenticationCompany(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)
			},
			deleteLogoImg(event) {
				this.form.headImg.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
						})
					})
				})
			},
			async afterReadLogo(e) {
				let self = this
                self.$Oss.ossUpload(e.file.url).then(url => {
                    console.info(url)
                    self.form.headImg.push({
                        url
                    })
                })
			},
            handleAreaChange(){
				const that = this;
				wx.chooseLocation({
                    type: 'gcj02',
					// type: 'wgs84',
					success: function (res) {

                        that.form.latitude = res.latitude
                        that.form.longitude = res.longitude

                        if (!res.address && res.name) { //用户直接选择城市的逻辑
                            return that.form.address = res.name
                        }
                        if (res.address || res.name) {
                            return that.form.address = res.address + res.name
                        }
                        that.form.address = '' //用户啥都没选就点击勾选
					}
				})
			},
			// handleAreaChange(){
			// 	const that = this;
			// 	wx.chooseLocation({
			// 		// type: 'wgs84',
			// 		success: function (res) {
			// 			const qqmapsdk = new QQMapWX({
			// 				key: 'BJKBZ-W46K3-6S43C-OFLJB-FW6FQ-RMBYP' // 必填
			// 			});
			// 			uni.showLoading({
			// 				title:"获取中...."
			// 			})
			// 			qqmapsdk.reverseGeocoder({
			// 				location: {
			// 					latitude: res.latitude,
			// 					longitude: res.longitude
			// 				},
			// 				success: function(response) {
			// 					console.log('逆地理编码结果：', response);
			// 					uni.hideLoading()
			// 					that.form.longitude = response.result.location.lng
			// 					that.form.latitude = response.result.location.lat
			// 					that.form.address = response.result.address
			// 				},
			// 				fail: function(error) {
			// 					uni.hideLoading()
			// 					console.error('逆地理编码失败：', error);
			// 				}
			// 			});
			// 		}
			// 	})
			// 	// this.$refs.citySelectRef.open()
			// },
		}
	}
</script>

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