su_nan-mobile_h5/src/pages/settleIn/index.vue

<template>
	<div class="settleIn">
		<div class="top-status">
			<div class="left">
				<span class="title">认证状态：</span>
				<span class="normal-tip z-bg">{{ rzzt }}</span>
			</div>
			<div class="right">
				<span class="title">认证结果：</span>
				<span class="normal-tip z-br" v-if="shzt">{{ !shzt ? '' : shzt }}</span>
			</div>
		</div>

		<div class="form-part">
			<van-form>
				<van-field
				 v-model="reqFrom.enterpriseName"
				 class="input-item"
				 input-align="right"
				 label="*企业名称"
				 placeholder="企业名称"
				/>

				<van-field
				 v-model="reqFrom.socialCreditCode"
				 class="input-item"
				 input-align="right"
				 label="*统一社会信用代码"
				 placeholder="请填写"
				/>
				<!-- <van-field
				class="input-item"
				label="机构代码"
				v-model="reqFrom.enterpriseCode"
				input-align="right"
				placeholder="机构代码"
				/> -->

				<van-field
				 :value="reqFrom.groupName"
				 class="input-item picker-item"
				 clickable
				 input-align="right"
				 label="所属园区"
				 readonly
				 @click="showPicker_group = true"
				>
					<template #button>
						<i class="iconfont icon-zuo"></i>
					</template>
				</van-field>
				<van-popup v-model="showPicker_group" position="bottom">
					<van-picker
					 :columns="yuanQuList"
					 show-toolbar
					 @cancel="showPicker_group = false"
					 @confirm="(value) => onConfirm(value, 'group')"
					/>
				</van-popup>

				<van-field
				 :value="reqFrom.enterpriseTypeName"
				 class="input-item picker-item"
				 clickable
				 input-align="right"
				 label="企业类型"
				 readonly
				 @click="showPicker_enterpriseType = true"
				>
					<template #button>
						<i class="iconfont icon-zuo"></i>
					</template>
				</van-field>
				<van-popup v-model="showPicker_enterpriseType" position="bottom">
					<van-picker
					 :columns="dickData.enterpriseType"
					 show-toolbar
					 @cancel="showPicker_enterpriseType = false"
					 @confirm="(value) => onConfirm(value, 'enterpriseType')"
					/>
				</van-popup>

				<van-field
				 :value="reqFrom.isHeadName"
				 class="input-item picker-item"
				 clickable
				 input-align="right"
				 label="是否总部"
				 readonly
				 @click="showPicker_isHead = true"
				>
					<template #button>
						<i class="iconfont icon-zuo"></i>
					</template>
				</van-field>
				<van-popup v-model="showPicker_isHead" position="bottom">
					<van-picker
					 :columns="dickData.yesOrNo"
					 show-toolbar
					 @cancel="showPicker_isHead = false"
					 @confirm="(value) => onConfirm(value, 'isHead')"
					/>
				</van-popup>

				<van-field
				 :value="reqFrom.isForeignName"
				 class="input-item picker-item"
				 clickable
				 input-align="right"
				 label="是否外资"
				 readonly
				 @click="showPicker_isForeign = true"
				>
					<template #button>
						<i class="iconfont icon-zuo"></i>
					</template>
				</van-field>
				<van-popup v-model="showPicker_isForeign" position="bottom">
					<van-picker
					 :columns="dickData.yesOrNo"
					 show-toolbar
					 @cancel="showPicker_isForeign = false"
					 @confirm="(value) => onConfirm(value, 'isForeign')"
					/>
				</van-popup>

				<van-field
				 :value="reqFrom.isImoutName"
				 class="input-item picker-item"
				 clickable
				 input-align="right"
				 label="是否进出口"
				 readonly
				 @click="showPicker_isImout = true"
				>
					<template #button>
						<i class="iconfont icon-zuo"></i>
					</template>
				</van-field>
				<van-popup v-model="showPicker_isImout" position="bottom">
					<van-picker
					 :columns="dickData.yesOrNo"
					 show-toolbar
					 @cancel="showPicker_isImout = false"
					 @confirm="(value) => onConfirm(value, 'isImout')"
					/>
				</van-popup>

				<van-field
				 :value="reqFrom.industryName"
				 class="input-item picker-item"
				 clickable
				 input-align="right"
				 label="所属行业"
				 readonly
				 @click="showPicker_industry = true"
				>
					<template #button>
						<i class="iconfont icon-zuo"></i>
					</template>
				</van-field>
				<van-popup v-model="showPicker_industry" position="bottom">
					<van-picker
					 :columns="dickData.COMPANY_INDUSTRY"
					 show-toolbar
					 @cancel="showPicker_industry = false"
					 @confirm="(value) => onConfirm(value, 'industry')"
					/>
				</van-popup>

				<van-field
				 :value="reqFrom.registrationCodeName"
				 class="input-item picker-item"
				 clickable
				 input-align="right"
				 label="注册标识"
				 readonly
				 @click="showPicker_registrationCode = true"
				>
					<template #button>
						<i class="iconfont icon-zuo"></i>
					</template>
				</van-field>
				<van-popup v-model="showPicker_registrationCode" position="bottom">
					<van-picker
					 :columns="dickData.yesOrNo"
					 show-toolbar
					 @cancel="showPicker_registrationCode = false"
					 @confirm="(value) => onConfirm(value, 'registrationCode')"
					/>
				</van-popup>

				<van-field
				 v-model="reqFrom.registerAmount"
				 class="input-item"
				 input-align="right"
				 label="*注册资金（万元）"
				 placeholder="请填写"
				/>

				<van-field
				 :value="reqFrom.currencyName"
				 class="input-item"
				 clickable
				 input-align="right"
				 label="币种"
				 name="datetimePicker"
				 placeholder="请选择"
				 readonly
				 @click="showPicker_currency = true"
				/>
				<van-popup v-model="showPicker_currency" position="bottom">
					<van-picker
					 :columns="dickData.CURRENCY"
					 show-toolbar
					 @cancel="showPicker_currency = false"
					 @confirm="(value) => onConfirm(value, 'currency')"
					/>
				</van-popup>
				<van-field
				 :value="reqFrom.registerTime"
				 class="input-item"
				 clickable
				 input-align="right"
				 label="*注册时间"
				 name="datetimePicker"
				 placeholder="请选择"
				 readonly
				 @click="showPicker_registerTime = true"
				/>
				<van-popup v-model="showPicker_registerTime" position="bottom">
					<van-datetime-picker
					 type="date"
					 @cancel="showPicker_registerTime = false"
					 @confirm="(value) => onDateConfirm(value, 'registerTime')"
					/>
				</van-popup>

				<van-field
				 v-model="reqFrom.legalUser"
				 class="input-item"
				 input-align="right"
				 label="*法定代表人"
				 placeholder="请填写"
				/>

				<van-field
				 v-model="reqFrom.manageRange"
				 class="input-item-warp input-item"
				 label="*经营范围"
				 placeholder="请填写"
				/>
				<van-field
				 v-model="reqFrom.zcdz"
				 class="input-item-warp input-item"
				 label="*注册地址"
				 placeholder="请填写"
				 style="margin-bottom: 1px"
				/>
				<van-field
				 v-model="reqFrom.manageAddress"
				 class="input-item-warp input-item"
				 label="*经营地址"
				 placeholder="请填写"
				 style="margin-bottom: 1px"
				/>
				<van-field
				 v-model="reqFrom.contacts"
				 class="input-item"
				 input-align="right"
				 label="*企业联系人"
				 placeholder="请填写"
				/>
				<van-field
				 v-model="reqFrom.phone"
				 class="input-item"
				 input-align="right"
				 label="*联系人手机"
				 placeholder="请填写"
				/>

				<van-field
				 class="input-item input-item-warp input-up"
				 label="*营业执照副本"
				 name="uploader"
				>
					<template #input>
						<van-uploader
						 v-model="componentsFileUrlList"
						 :after-read="afterRead"
						 :before-delete="beforeDelete"
						 :max-count="6"
						 :multiple="true"
						></van-uploader>
						<!--<van-uploader v-model="uploader" :after-read="afterRead" />-->
					</template>
				</van-field>
				<van-field
				 :value="reqFrom.settleInType"
				 class="input-item"
				 clickable
				 input-align="right"
				 label="*入驻类型"
				 name="datetimePicker"
				 placeholder="请选择"
				 readonly
				 @click="showPicker_settleInType = true"
				/>
				<van-popup v-model="showPicker_settleInType" position="bottom">
					<van-picker
					 :columns="dickData.MNP_BUILDING_TYPE"
					 show-toolbar
					 @cancel="showPicker_settleInType = false"
					 @confirm="(value) => onConfirm(value, 'settleInType')"
					/>
				</van-popup>
			</van-form>
		</div>

		<div v-if="this.reqFrom.state != 2" class="white-bottom">
			<div class="two-button">
				<!-- 1 -->
				<div v-if="this.reqFrom.state != 3" class="btn" @click="submit(1)">
					保存
				</div>
				<div v-if="this.reqFrom.state != 3" class="btn" @click="submit(2)">
					提交
				</div>

				<!-- 3 -->
				<div
				 v-if="this.reqFrom.state == 3 && this.reqFrom.isSava == 1"
				 class="btn"
				 style="margin-right: 0"
				 @click="submit(2)"
				>
					变更提交
				</div>
				<div
				 v-if="this.reqFrom.state == 3 && this.reqFrom.isSava == 2"
				 class="btn"
				 style="margin-right: 0"
				 @click="submit(2)"
				>
					重新提交
				</div>
			</div>
		</div>

		<!-- 弹框 -->
		<!-- <van-popup v-model="show1" class="tip-popup">
		<div class="popup-body">
		<div class="popup-header">
		<div class="title">消息</div>
		<div class="close" @click="show1 = false">
		<i class="iconfont icon-guanbi"></i>
		</div>
		</div>
		<div class="popup-center">
		您的申请已保存, 管理员将不会收到你的信息, 如需提交请点击提交按钮！
		</div>
		<div class="popup-foot">去查看</div>
		</div>
		</van-popup> -->
		<van-popup v-model="show2" class="tip-popup">
			<div class="popup-body">
				<div class="popup-header">
					<div class="title">消息</div>
					<div class="close" @click="show2 = false">
						<i class="iconfont icon-guanbi"></i>
					</div>
				</div>
				<div class="popup-center">
					感谢您的入驻！您的申请已提交，请等待工作人员联系。您也可以通过我的-企业认证查看认证审核情况！
				</div>
				<div class="popup-foot" @click="$router.go(-1)">返回首页</div>
			</div>
		</van-popup
		>
	</div>
</template>

<script>
import { Toast } from 'vant'
import Base from '@/pages/base/base'
import { getProveDetial, reserve } from '@/api/parkProve'
import axios from 'axios'
import auth from '@/service/auth'
import { findYuanQuList } from '@/service/api_in-park-order'

export default {
	mixins: [Base],
	data() {
		return {
			currency_isImout: false,
			yuanQuList: [],
			myFileList: [],
			// 登陆人Id
			currUser: {},
			createdId: '5',
			proveType: '1',
			componentsFileUrlList: [],
			// groupId: '870261874875170816',
			// buttonDisabled: false,
			fileUrlList: [],
			reqFrom: {
				settleInType: '在园',
				currency: 1,
				currencyName: '人民币'
			},
			dc_key: ['yesOrNo', 'COMPANY_INDUSTRY', 'enterpriseType', 'CURRENCY', 'MNP_BUILDING_TYPE'],
			dickData: {},
			showPicker_settleInType: false,
			showPicker_group: false,
			showPicker_enterpriseType: false,
			showPicker_isHead: false,
			showPicker_isForeign: false,
			showPicker_isImout: false,
			showPicker_industry: false,
			showPicker_registrationCode: false,
			showPicker_registerTime: false,
			showPicker_currency: false,
			// show1: false,
			show2: false,
			uploader: [],
			rzzt: '',
			shzt: ''
		}
	},

	mounted() {

		this.currUser = auth.currUser()
		this.createdId = this.currUser.id

		this.initDict2(this.dc_key).then((res) => {
			this.initDickData()

			this.findYuanQuList()
		})
	},

	methods: {
		async findYuanQuList() {
			let data = await findYuanQuList()

			this.yuanQuList = data.map((e) => {
				return {
					text: e.groupName,
					value: e.groupId
				}
			})
			this.getParkProve()

		},
		beforeDelete(file, detail) {
			// this.handleImagUrlList = []
			console.log(file, detail)
			const vm = this
			// name.index代表图片的索引
			vm.myFileList.splice(detail.index, 1)
			return (file, name) => {
				const fileIndex = name.index
				vm.myFileList[detail.index].splice(fileIndex, 1)
			}
		},
		onConfirm(value, type) {
			if (type == 'settleInType') {
				this.reqFrom.settleInType = value.value
				this['showPicker_' + type] = false
			} else if (type == 'group') {
				console.log(value, type)
				this.reqFrom.groupId = value.value
				this.reqFrom.groupName = value.text
				this['showPicker_' + type] = false
			} else if (type == 'currency') {
				console.log(value, type)
				this.reqFrom.currency = value.value
				this.reqFrom.currencyName = value.text
				this['showPicker_' + type] = false
			} else {
				console.log(value, type)
				this.reqFrom[type + 'Name'] = value.text
				this.reqFrom[type] = value.value
				this['showPicker_' + type] = false
			}

		},
		onDateConfirm(value, type) {
			this.reqFrom[type] = this.dateFormat('YYYY-mm-dd', value)
			this['showPicker_' + type] = false
		},
		// 处理字典数据
		initDickData() {
			this.dc_key.forEach((element) => {
				const itemData = []
				this.dc_data[element].forEach((item) => {
					item.text = item.label
					itemData.push(item)
				})
				this.dickData[element] = itemData
			})
		},
		dateFormat(fmt, date) {
			let ret
			const opt = {
				'Y+': date.getFullYear().toString(), // 年
				'm+': (date.getMonth() + 1).toString(), // 月
				'd+': date.getDate().toString(), // 日
				'H+': date.getHours().toString(), // 时
				'M+': date.getMinutes().toString(), // 分
				'S+': date.getSeconds().toString() // 秒
			}
			for (const k in opt) {
				ret = new RegExp('(' + k + ')').exec(fmt)
				if (ret) {
					fmt = fmt.replace(
					 ret[1],
					 ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
					)
				}
			}
			return fmt
		},
		async afterRead(file) {
			const myFileList = []
			const data = await this.$common.uploadImg(file)
			for (let i = 0; i < data.length; i++) {
				myFileList.push({
					url: process.env.VUE_APP_API_URL + '/FileController/download/' + data[i],
					serverUrl: data[i],
					isImage: true
				})

			}

			console.log(myFileList)
			this.myFileList = myFileList
			this.$forceUpdate()
		},

		// 上传文件
		uploadImg(file) {
			const _this = this
			const formParam = new FormData() // 创建form对象
			formParam.append('file', file.file) // 通过append向form对象添加数据
			console.log(formParam.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
			const config = {
				headers: {
					'Content-Type': 'multipart/form-data',
					'MVVM-Key': String(new Date().getTime()),
					xx: 'anything'
				} // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
			} // 添加请求头
			return new Promise((resolve, reject) => {
				axios
				 .post(
					'/industryParkApi/wx/fileController/upload',
					formParam,
					config
				 )
				 .then((response) => {
					 console.log(response)
					 let files = response.data.data[0].substring(
						1,
						response.data.data.length
					 )
					 files = files.substring(0, files.length - 1)
					 const fileItem = _this.$common.castEval(files)
					 fileItem.isImage = true
					 // console.log("图片长度——：", _this.uploader.length)
					 _this.uploader[_this.uploader.length - 1] = fileItem
					 console.log('图片上传——：', _this.uploader)
					 // _this.uploader.push(fileItem)
					 // console.log("图片上传——：", _this.fileUrlList)
					 // console.log("图片上传2——：",JSON.stringify(_this.fileUrlList));
				 })
				 .catch((err, x) => {
					 reject(err, x)
				 })
			})
		},

		// 提交
		submit(state) {
			if (!this.reqFrom.enterpriseName || this.reqFrom.enterpriseName.length == 0) return Toast('请填写企业名称')
			if (!this.reqFrom.socialCreditCode || this.reqFrom.socialCreditCode.length == 0) return Toast('请填写统一社会信用代码')
			if (!this.reqFrom.registerAmount || this.reqFrom.registerAmount.length == 0) return Toast('请填写注册资金')
			if (!this.reqFrom.registerTime || this.reqFrom.registerTime.length == 0) return Toast('请选择注册时间')
			if (!this.reqFrom.legalUser || this.reqFrom.legalUser.length == 0) return Toast('请填写法定代表人')
			if (!this.reqFrom.manageRange || this.reqFrom.manageRange.length == 0) return Toast('请填写经营范围')
			if (!this.reqFrom.zcdz || this.reqFrom.zcdz.length == 0) return Toast('请填写注册地址')
			if (!this.reqFrom.manageAddress || this.reqFrom.manageAddress.length == 0) return Toast('请填写经营地址')
			if (!this.reqFrom.contacts || this.reqFrom.contacts.length == 0) return Toast('请填写企业联系人')
			if (!this.reqFrom.phone || this.reqFrom.phone.length == 0) return Toast('请填写联系人手机')
			if (!this.myFileList || this.myFileList.length == 0) return Toast('请上传营业执照副本')
			if (!this.reqFrom.settleInType || this.reqFrom.settleInType.length == 0) return Toast('请选择入驻类型')
			this.reqFrom.state = state
			this.reqFrom.createdId = this.createdId
			this.reqFrom.proveType = this.proveType

			let reqFrom = { ...this.reqFrom }
			// console.log(reqFrom)
			// return
			let businessLicense = this.myFileList.map((e) => {
				return e.serverUrl
			})
			reqFrom.businessLicense = businessLicense.join(',')
			reserve(reqFrom).then((res) => {
				if (res.key == 200) {

					this.getParkProve()
					if (state == 1) {
						this.getParkProve()
						// this.show1 = true;
						Toast('保存成功!')
					} else {
						this.show2 = true
					}
				}
			})
		},

		// 获取认证信息
		getParkProve() {
			const reqData = {
				userId: this.createdId
			}
			getProveDetial(reqData).then((res) => {
				if (res.data) {
					this.getItemJson(res.data)
					// if(null == this.reqFrom.state || 0 == this.reqFrom.state || undefined == this.reqFrom.state){
					//     this.buttonDisabled = true;
					// }else{
					//     this.buttonDisabled = false;
					// }
					this.rzzt = this.reqFrom.stateDesc
					this.shzt = this.reqFrom.resultDesc
					console.log(res.data)
					if (res.data.groupId) {
						let index = this.yuanQuList.findIndex((e) => e.id == res.data.value)
						this.reqFrom.groupId = this.yuanQuList[index].value
						this.reqFrom.groupName = this.yuanQuList[index].text
					}
					if (res.data.currency) {

						this.reqFrom.currency = res.data.currency
						console.log('this.dickData.currencythis.dickData.currency', this.dickData.CURRENCY)
						this.reqFrom.currencyName = this.dickData.CURRENCY[res.data.currency - 1].label
					}
					if (res.data.companyId) this.reqFrom.companyId = res.data.companyId
					if (this.reqFrom.state == '1') this.shzt = ''
					if (this.reqFrom.state == '3') {
						if (this.reqFrom.isSava == '1') this.proveType = '2'
					}
				} else {
					this.rzzt = ''
					this.shzt = ''
					// this.proveType = "1";
				}
			})
		},

		getItemJson(item) {
			item.industryName = this.dc_map.COMPANY_INDUSTRY[item.industry]
			item.enterpriseTypeName = this.dc_map.enterpriseType[item.enterpriseType]
			item.isHeadName = this.dc_map.yesOrNo[item.isHead]
			item.isImoutName = this.dc_map.yesOrNo[item.isImout]
			item.isForeignName = this.dc_map.yesOrNo[item.isForeign]
			item.registrationCodeName = this.dc_map.yesOrNo[item.registrationCode]
			this.reqFrom = item
			this.componentsFileUrlList = item.businessLicense.split(',').map((e) => {
				return {
					url: process.env.VUE_APP_API_URL + '/FileController/download/' + e,
					isImage: true
				}
			})
			this.myFileList = item.businessLicense.split(',').map((e) => {
				return {
					url: process.env.VUE_APP_API_URL + '/FileController/download/' + e,
					serverUrl: e,
					isImage: true
				}
			})
			console.log(this.componentsFileUrlListe)
		}
	}
}
</script>

<style lang="scss" scoped type="text/scss">
.settleIn {
	padding: 0 0 140px;
	overflow-y: auto;

	.form-part {
		padding: 10px 0;
	}

	.top-status {
		padding: 30px;
		background: #fff;
		@include flex;

		.left,
		.right {
			@include flex;

			.title {
				font-size: 28px;
				color: #333;
			}

			.normal-tip {
				font-size: 26px;
				line-height: 50px;
				padding: 0 20px;
			}
		}
	}
}
</style>