|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="certification">
|
|
|
<div class="container">
|
|
|
- <div class="content" v-if="enterpriseRegister">
|
|
|
+ <div class="content" v-show="enterpriseRegister">
|
|
|
<div class="content-top">
|
|
|
<h3>企业认证</h3>
|
|
|
<div class="step">
|
|
|
@@ -14,34 +14,91 @@
|
|
|
<el-form-item prop="spaceName">
|
|
|
<el-input type="text"
|
|
|
v-model="enterprise.spaceName"
|
|
|
- v-bind:class="{ active: isSpaceNameExist }"
|
|
|
+ v-bind:class="{ active: isSpaceNameValid }"
|
|
|
auto-complete="off"
|
|
|
placeholder="企业名称"
|
|
|
></el-input>
|
|
|
- <span class="tip exist" v-show="isSpaceNameExist">该企业已被注册，请确认。<a href="">仍有问题？</a></span>
|
|
|
+ <span class="tip exist" v-show="isSpaceNameValid">该企业已被认证，请确认。<a href="https://www.ubtob.com/contact">仍有问题？</a></span>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="businessCode">
|
|
|
<el-input type="text"
|
|
|
v-model="enterprise.businessCode"
|
|
|
- v-bind:class="{ active: isBusinessCodeExist }"
|
|
|
+ v-bind:class="{ active: isBusinessCodeValid }"
|
|
|
auto-complete="off"
|
|
|
placeholder="营业执照号"></el-input>
|
|
|
- <span class="tip exist" v-show="isBusinessCodeExist">该企业已被注册，请确认。<a href="">仍有问题？</a></span>
|
|
|
+ <span class="tip exist" v-show="isBusinessCodeValid">该企业已被认证，请确认。<a href="https://www.ubtob.com/contact">仍有问题？</a></span>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="businessImage" class="padding55">
|
|
|
- <el-input v-model="enterprise.businessImage" placeholder="上传营业执照扫描件"></el-input>
|
|
|
- <i class="fa fa-photo"></i>
|
|
|
+ <a class="x-btn-blank" title="上传营业执照扫描件" v-bind:class="{ correct: uploadFileChecked }">
|
|
|
+ <i class="fa fa-picture-o"></i>
|
|
|
+ <span class="upload">上传营业执照扫描件</span>
|
|
|
+ <input type="file"
|
|
|
+ class="form-control file-input"
|
|
|
+ name="name"
|
|
|
+ accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf"
|
|
|
+ @change="upload"/>
|
|
|
+ </a>
|
|
|
+ <a class="thumbnail" v-if="enterprise.businessCodeImage !== ''"><img class="previewImg" alt="" :src="enterprise.businessCodeImage"></a>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="corporation">
|
|
|
<el-input v-model="enterprise.corporation" placeholder="法定代表人"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="regAddress" class="padding45">
|
|
|
- <el-input v-model="enterprise.regAddress" placeholder="注册地址"></el-input>
|
|
|
+ <input type="text" readonly aria-haspopup="true" aria-expanded="false"
|
|
|
+ @click="onShowAddress"
|
|
|
+ v-model="enterprise.regAddress"
|
|
|
+ v-bind:class="{ correct: addressCheck }"
|
|
|
+ class="form-control"
|
|
|
+ name="name"
|
|
|
+ placeholder="注册地址"/>
|
|
|
<i class="fa fa-map-marker"></i>
|
|
|
+ <div v-show="showAddressBox"
|
|
|
+ @mouseenter="isShowAddressBox = true"
|
|
|
+ @mouseleave="isShowAddressBox = false"
|
|
|
+ style="display: block;" class="dropdown-menu x-union-menu" aria-labelledby="address">
|
|
|
+ <div class="x-union-header">
|
|
|
+ <div>省份</div>
|
|
|
+ <div>城市</div>
|
|
|
+ <div>县区</div>
|
|
|
+ <div class="x-item-ext">详细地址</div>
|
|
|
+ </div>
|
|
|
+ <div class="x-union-list">
|
|
|
+ <ul class="list-unstyled">
|
|
|
+ <li v-for="province in cityData.province"
|
|
|
+ :class="province == address.regProvince ? 'active' : ''"
|
|
|
+ v-text="province"
|
|
|
+ @click="getCity(province)"></li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list-unstyled">
|
|
|
+ <li v-for="city in cityData.city"
|
|
|
+ :class="city == address.regCity ? 'active' : ''"
|
|
|
+ v-text="city"
|
|
|
+ @click="getDistrict(city)"></li>
|
|
|
+ </ul>
|
|
|
+ <ul class="list-unstyled">
|
|
|
+ <li v-for="district in cityData.district"
|
|
|
+ v-text="district"
|
|
|
+ :class="district == address.regDistrict ? 'active' : ''"
|
|
|
+ @click="chooseDistrict(district)"></li>
|
|
|
+ </ul>
|
|
|
+ <div class="x-item-ext">
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="col-sm-12">
|
|
|
+ <textarea id="street" name="street" rows="4" v-model="address.regStreet" class="form-control x-input" placeholder="xx路xx大厦xx栋xx楼xx室"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text-right">
|
|
|
+ <a class="register-btn btn-submit" @click="submitAddress">确定</a>
|
|
|
+ <a @click="showAddressBox = false" class="register-btn btn-console">取消</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<a class="btn finish"
|
|
|
- :disabled="!checked" @click="isLogin">提交</a>
|
|
|
+ :disabled="!checked || !spaceNameChecked || !businessCodeChecked || !corporationChecked || !uploadFileChecked || !addressCheck"
|
|
|
+ @click="submitForm">提交</a>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-checkbox name="type" v-model="checked" @click="checkboxIsChecked"></el-checkbox>
|
|
|
@@ -50,7 +107,7 @@
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="content" v-if="!enterpriseRegister">
|
|
|
+ <div class="content" v-show="!enterpriseRegister">
|
|
|
<div class="content-top">
|
|
|
<h3>企业认证</h3>
|
|
|
<div class="step">
|
|
|
@@ -105,24 +162,25 @@
|
|
|
if (value === '') {
|
|
|
callback(new Error('请填写正确的企业名称'))
|
|
|
this.spaceNameChecked = false
|
|
|
+ this.isSpaceNameValid = false
|
|
|
} else {
|
|
|
if (this.enterprise.spaceName !== '') {
|
|
|
if (value.length > 20) {
|
|
|
callback(new Error('输入长度过长，20个字符以内'))
|
|
|
} else {
|
|
|
- this.$http.get(`/api/userspace/checkSpaceName`, {params: {spaceName: this.enterprise.spaceName}})
|
|
|
+ this.$http.get(`/api/userspace/name/valid`, {params: {spaceName: this.enterprise.spaceName}})
|
|
|
.then(response => {
|
|
|
- if (response.data.success) {
|
|
|
+ if (!response.data.content.isValid) {
|
|
|
this.spaceNameChecked = true
|
|
|
- this.isSpaceNameExist = false
|
|
|
+ this.isSpaceNameValid = false
|
|
|
} else {
|
|
|
this.spaceNameChecked = false
|
|
|
- this.isSpaceNameExist = true
|
|
|
+ this.isSpaceNameValid = true
|
|
|
return Promise.reject(response.data)
|
|
|
}
|
|
|
}).catch(err => {
|
|
|
- console.log(err)
|
|
|
-// this.$message.error(err.errMsg)
|
|
|
+// console.log(err)
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -133,24 +191,25 @@
|
|
|
if (value === '') {
|
|
|
callback(new Error('请填写正确的营业执照号'))
|
|
|
this.businessCodeChecked = false
|
|
|
+ this.isBusinessCodeValid = false
|
|
|
} else {
|
|
|
if (this.enterprise.businessCode !== '') {
|
|
|
if (value.length > 20) {
|
|
|
callback(new Error('输入长度过长，20个字符以内'))
|
|
|
} else {
|
|
|
- this.$http.get(`/api/userspace/checkBusinessCode`, {params: {businessCode: this.enterprise.businessCode}})
|
|
|
+ this.$http.get(`/api/userspace/businessCode/valid`, {params: {businessCode: this.enterprise.businessCode}})
|
|
|
.then(response => {
|
|
|
- if (response.data.success) {
|
|
|
+ if (!response.data.content.isValid) {
|
|
|
this.businessCodeChecked = true
|
|
|
- this.isBusinessCodeExist = false
|
|
|
+ this.isBusinessCodeValid = false
|
|
|
} else {
|
|
|
this.businessCodeChecked = false
|
|
|
- this.isBusinessCodeExist = true
|
|
|
+ this.isBusinessCodeValid = true
|
|
|
return Promise.reject(response.data)
|
|
|
}
|
|
|
}).catch(err => {
|
|
|
- console.log(err)
|
|
|
-// this.$message.error(err.errMsg)
|
|
|
+// console.log(err)
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -172,15 +231,6 @@
|
|
|
callback()
|
|
|
}
|
|
|
}
|
|
|
- var validateRegAddress = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('请填写正确的注册地址'))
|
|
|
- this.corporationChecked = false
|
|
|
- } else {
|
|
|
- this.corporationChecked = true
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
return {
|
|
|
enterpriseRegister: true,
|
|
|
enterprise: {
|
|
|
@@ -188,18 +238,30 @@
|
|
|
businessCode: '',
|
|
|
corporation: '',
|
|
|
regAddress: '',
|
|
|
- province: '',
|
|
|
- city: '',
|
|
|
- district: '',
|
|
|
- street: '',
|
|
|
- businessImage: ''
|
|
|
+ businessCodeImage: ''
|
|
|
},
|
|
|
checked: true,
|
|
|
- isSpaceNameExist: false,
|
|
|
- isBusinessCodeExist: false,
|
|
|
+ showAddressBox: false,
|
|
|
+ isShowAddressBox: false,
|
|
|
+ isSpaceNameValid: false,
|
|
|
+ isBusinessCodeValid: false,
|
|
|
spaceNameChecked: false,
|
|
|
businessCodeChecked: false,
|
|
|
corporationChecked: false,
|
|
|
+ uploadFileChecked: false,
|
|
|
+ addressCheck: false,
|
|
|
+ allCityData: {},
|
|
|
+ cityData: {
|
|
|
+ province: [],
|
|
|
+ city: [],
|
|
|
+ district: []
|
|
|
+ },
|
|
|
+ address: {
|
|
|
+ regProvince: '',
|
|
|
+ regCity: '',
|
|
|
+ regDistrict: '',
|
|
|
+ regStreet: ''
|
|
|
+ },
|
|
|
// 企业认证第一步
|
|
|
rules: {
|
|
|
spaceName: [
|
|
|
@@ -210,9 +272,6 @@
|
|
|
],
|
|
|
corporation: [
|
|
|
{validator: validateCorporation, trigger: 'blur'}
|
|
|
- ],
|
|
|
- regAddress: [
|
|
|
- {validator: validateRegAddress, trigger: 'blur'}
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
@@ -223,6 +282,7 @@
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
+// 验证是否登录
|
|
|
this.$nextTick(() => {
|
|
|
this.isLogin()
|
|
|
// 刷新统计信息
|
|
|
@@ -230,6 +290,13 @@
|
|
|
this.isLogin()
|
|
|
}, 10000)
|
|
|
})
|
|
|
+// 获取城市地址
|
|
|
+ this.$http.get('/data/city.json').then(response => {
|
|
|
+ this.allCityData = response.data
|
|
|
+ for (let province in response.data) {
|
|
|
+ this.cityData.province.push(province)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
// 我同意是否被选中
|
|
|
@@ -239,17 +306,116 @@
|
|
|
// 判断用户是否登录
|
|
|
isLogin () {
|
|
|
if (!this.logged) {
|
|
|
- console.log(this.logged)
|
|
|
+// console.log(this.logged)
|
|
|
// 未登录跳到登录页面
|
|
|
// window.location.href = '/'
|
|
|
}
|
|
|
+ },
|
|
|
+// 上传营业执照扫描件
|
|
|
+ upload (e) {
|
|
|
+ let file = e.target.files[0]
|
|
|
+ if (file.size > 5 * 1024 * 1024) {
|
|
|
+ this.uploadFileChecked = false
|
|
|
+ } else {
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('image', file, file.name)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+// 图片上传接口
|
|
|
+ this.$http.post('/api/userspace/upload', param, config)
|
|
|
+ .then(response => {
|
|
|
+ this.enterprise.businessCodeImage = response.data.content
|
|
|
+ this.uploadFileChecked = true
|
|
|
+ }, err => {
|
|
|
+ console.log(err)
|
|
|
+ this.uploadFileChecked = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+// 地址选择
|
|
|
+ onHideAddress () {
|
|
|
+// if (!this.isShowAddressBox && !this.isClickInputAddress) {
|
|
|
+// this.showAddressBox = false
|
|
|
+// }
|
|
|
+// this.isClickInputAddress = false
|
|
|
+ },
|
|
|
+ onShowAddress () {
|
|
|
+ this.showAddressBox = !this.showAddressBox
|
|
|
+// if (this.showAddressBox) {
|
|
|
+// this.onHideAddress()
|
|
|
+// } else {
|
|
|
+// this.showAddressBox = true
|
|
|
+// this.isClickInputAddress = true
|
|
|
+// }
|
|
|
+ },
|
|
|
+ getCity (province) {
|
|
|
+ this.cityData.city = []
|
|
|
+ this.address.regCity = ''
|
|
|
+ this.cityData.district = []
|
|
|
+ this.address.regDistrict = ''
|
|
|
+ this.address.regProvince = province
|
|
|
+ for (let item in this.allCityData[province]) {
|
|
|
+ this.cityData.city.push(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDistrict (city) {
|
|
|
+ this.address.regCity = city
|
|
|
+ this.address.regDistrict = ''
|
|
|
+ this.cityData.district = this.allCityData[this.address.regProvince][city]
|
|
|
+ },
|
|
|
+ chooseDistrict (district) {
|
|
|
+ this.address.regDistrict = district
|
|
|
+ },
|
|
|
+ submitAddress () {
|
|
|
+ if (this.address.regDistrict !== '' && this.address.regCity !== '' && this.address.regProvince !== '') {
|
|
|
+ if (this.address.regStreet !== '') {
|
|
|
+ this.enterprise.regAddress = this.address.regProvince + this.address.regCity + this.address.regDistrict + this.address.regStreet
|
|
|
+ this.showAddressBox = false
|
|
|
+ this.addressCheck = true
|
|
|
+ } else {
|
|
|
+ this.$message.error('请输入详细地址')
|
|
|
+ this.addressCheck = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error('请输入省、市、区')
|
|
|
+ this.addressCheck = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+// 提交表单
|
|
|
+ submitForm () {
|
|
|
+ if (this.checked && this.spaceNameChecked && this.businessCodeChecked && this.corporationChecked && this.uploadFileChecked && this.addressCheck) {
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('spaceName', this.enterprise.spaceName)
|
|
|
+ param.append('businessCode', this.enterprise.businessCode)
|
|
|
+ param.append('corporation', this.enterprise.corporation)
|
|
|
+ param.append('regAddress', this.enterprise.regAddress)
|
|
|
+ param.append('regProvince', this.address.regProvince)
|
|
|
+ param.append('regCity', this.address.regCity)
|
|
|
+ param.append('regDistrict', this.address.regDistrict)
|
|
|
+ param.append('regStreet', this.address.regStreet)
|
|
|
+ param.append('businessCodeImage', this.enterprise.businessCodeImage)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post('/valid/userspace/submit', param, config)
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.enterpriseRegister = false
|
|
|
+ } else {
|
|
|
+ this.enterpriseRegister = true
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.certification {
|
|
|
- padding-bottom: 145px;
|
|
|
margin: 0 auto;
|
|
|
width: 100%;
|
|
|
background: #eee;
|
hangb