mo-bai
4 years ago
9 changed files with 617 additions and 37 deletions
Split View
Diff Options
-
11apis/commonApi.js
-
8pages.json
-
2pages/complete-info/EnterpriseForm.vue
-
533pages/enterprise-info-edit/index.vue
-
2pages/for-comparison/index.vue
-
7pages/mall/index.vue
-
28pages/mine/index.vue
-
63pages/paper-details/index.vue
-
BINstatic/imgs/enterpriseInfo/location-icon.png
@ -0,0 +1,533 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="修改企业信息"></uni-nav-bar> |
|||
<view> |
|||
<qn-form-item label="基础信息" type="title"></qn-form-item> |
|||
<qn-form-item label="企业名称" required> |
|||
<qn-easyinput :maxlength="20" v-model="form.name" :inputBorder="false" text="right" placeholder="请输入企业名称"></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="企业简称"> |
|||
<qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入企业简称"></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="联系人"> |
|||
<qn-easyinput :maxlength="20" v-model="form.contactName" :inputBorder="false" text="right" placeholder="请输入用户名称"></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="联系手机"> |
|||
<qn-easyinput |
|||
:maxlength="11" |
|||
type="number" |
|||
v-model="form.contactMobile" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholder="请输入用户手机号" |
|||
></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="担任职务"> |
|||
<qn-easyinput :maxlength="20" v-model="form.contactTitle" :inputBorder="false" text="right" placeholder="请输入用户职务"></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="点击定位"> |
|||
<image @click="showLocationList" style="width: 32rpx; height: 32rpx" src="/static/imgs/enterpriseInfo/location-icon.png"></image> |
|||
</qn-form-item> |
|||
<qn-form-item label="所在区域" required> |
|||
<qn-data-picker |
|||
:readonly="true" |
|||
text="right" |
|||
:border="false" |
|||
class="qn-picker" |
|||
placeholder="区域" |
|||
popup-title="请选择城市" |
|||
:map="{ text: 'name', value: 'id' }" |
|||
@change="onAreaChange" |
|||
:clear-icon="true" |
|||
:localdata="items" |
|||
> |
|||
<text v-if="form.locDistrictId"> |
|||
{{ `${form.locProvinceName || ''}/${form.locCityName || ''}/${form.locDistrictName || ''}/${form.locStreetName || ''}` }} |
|||
</text> |
|||
</qn-data-picker> |
|||
</qn-form-item> |
|||
<qn-form-item label="详细地址" required> |
|||
<qn-easyinput |
|||
:maxlength="20" |
|||
:disabled="true" |
|||
:styles="{ disableColor: '#fff' }" |
|||
v-model="form.locDetail" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholder="请定位详细地址" |
|||
></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="工商信息" type="title"></qn-form-item> |
|||
<qn-form-item label="信用代码" required> |
|||
<qn-easyinput |
|||
:maxlength="18" |
|||
:styles="{ disableColor: '#fff' }" |
|||
v-model="form.uniformSocialCreditCode" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholder="请输入信用代码" |
|||
></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="法人身份证照片" size="large" required> |
|||
<view class="upload-area"> |
|||
<image class="idCard" @click="selectedImage('legalPersonIdCardFrontImg')" :src="frontIDCard" /> |
|||
<image class="idCard" @click="selectedImage('legalPersonIdCardBackImg')" :src="backIDCard" /> |
|||
</view> |
|||
</qn-form-item> |
|||
<qn-form-item label="法人/实控人" required> |
|||
<qn-easyinput |
|||
:maxlength="20" |
|||
:styles="{ disableColor: '#fff' }" |
|||
v-model="form.legalPersonName" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholder="请输入法人/实控人" |
|||
></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="法人/实控人手机" required> |
|||
<qn-easyinput |
|||
:maxlength="11" |
|||
type="number" |
|||
:styles="{ disableColor: '#fff' }" |
|||
v-model="form.legalPersonMobile" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholder="请输入法人/实控人手机" |
|||
></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="法人/实控人身份证号" required> |
|||
<qn-easyinput |
|||
:maxlength="18" |
|||
:styles="{ disableColor: '#fff' }" |
|||
v-model="form.legalPersonIdCardNo" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholder="请输入身份证号" |
|||
></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="营业执照" required> |
|||
<text v-if="!form.businessLicenseImg" @click="selectedImage('businessLicenseImg')" :style="`font-size: 28rpx; color: #007aff`">点击上传</text> |
|||
<text v-if="form.businessLicenseImg" @click="selectedImage('businessLicenseImg')" :style="`font-size: 28rpx;margin-right: 16rpx; color: #F5222D`"> |
|||
重新上传 |
|||
</text> |
|||
<text v-if="form.businessLicenseImg" @click="showImage()" style="font-size: 28rpx; color: #007aff">预览</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="注册资本(万)" required> |
|||
<qn-easyinput |
|||
type="digit" |
|||
maxlength="10" |
|||
:styles="{ disableColor: '#fff' }" |
|||
v-model="form.registeredCapital" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholder="请输入注册资本" |
|||
></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="成立日期" required> |
|||
<qn-datetime-picker v-model="form.foundDate" type="date" :border="false"></qn-datetime-picker> |
|||
</qn-form-item> |
|||
</view> |
|||
<uni-popup ref="locationPopup" type="bottom"> |
|||
<view class="popup_modal"> |
|||
<slot name="title"> |
|||
<view class="popup_modal-title">可选择以下定位公司</view> |
|||
</slot> |
|||
<scroll-view scroll-y="true" class="popup_modal-scroll"> |
|||
<view @click="selectLocation(item)" style="height: 100rpx" class="popup_modal-scroll-item" v-for="(item, index) in locationList" :key="index"> |
|||
<view class="location-item"> |
|||
<text class="title">{{ item.enterpriseName }}</text> |
|||
<text class="address">{{ `${item.provinceName}/${item.cityName}/${item.districtName}/${item.address}` }}</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</uni-popup> |
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="button-area"> |
|||
<view class="button button__cancel" @click="cancel"> |
|||
<text class="text">取消</text> |
|||
</view> |
|||
<view class="button button__submit" @click="saveInfo"> |
|||
<text class="text" style="color: white">保存信息</text> |
|||
</view> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { back, uploadImage } from '@/utils/hook.js' |
|||
import { getArea, getLicenseOcr, getFrontIdCardOcr } from '@/apis/commonApi.js' |
|||
import { completeInfo, getCompanyInfoById, getCompanyLocationList } from '@/apis/enterpriseInfoApi.js' |
|||
const validateFields = [ |
|||
{ field: 'name', label: '企业名称' }, |
|||
{ field: 'uniformSocialCreditCode', label: '信用代码' }, |
|||
{ field: 'legalPersonName', label: '法人姓名' }, |
|||
{ field: 'locProvinceId', label: '所在省' }, |
|||
{ field: 'locCityId', label: '所在市' }, |
|||
{ field: 'locDistrictId', label: '所在区' }, |
|||
{ field: 'locDetail', label: '企业详细地址' }, |
|||
{ field: 'legalPersonIdCardNo', label: '法人身份证号' }, |
|||
{ field: 'legalPersonMobile', label: '法人手机号' }, |
|||
{ field: 'legalPersonIdCardFrontImg', label: '法人正面照片' }, |
|||
{ field: 'legalPersonIdCardBackImg', label: '法人反面照片' }, |
|||
{ field: 'businessLicenseImg', label: '营业执照' }, |
|||
{ field: 'registeredCapital', label: '注册资本' }, |
|||
{ field: 'foundDate', label: '成立日期' } |
|||
] |
|||
export default { |
|||
data() { |
|||
return { |
|||
operation: 'add', |
|||
form: { |
|||
id: null, |
|||
name: null, |
|||
shortName: null, |
|||
contactName: null, |
|||
contactMobile: null, |
|||
contactTitle: null, |
|||
uniformSocialCreditCode: null, |
|||
locProvinceId: null, |
|||
locCityId: null, |
|||
locDistrictId: null, |
|||
locStreetId: null, |
|||
locProvinceName: null, |
|||
locCityName: null, |
|||
locDistrictName: null, |
|||
locStreetName: null, |
|||
locDetail: null, |
|||
regAddrLongitude: null, |
|||
regAddrLatitude: null, |
|||
legalPersonName: null, |
|||
legalPersonMobile: null, |
|||
legalPersonIdCardNo: null, |
|||
legalPersonIdCardFrontImg: null, |
|||
legalPersonIdCardBackImg: null, |
|||
businessLicenseImg: null, |
|||
registeredCapital: null, |
|||
foundDate: null |
|||
}, |
|||
searchList: [], |
|||
locationList: [], |
|||
items: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
getArea().then((res) => { |
|||
if (res) { |
|||
this.items = res |
|||
} |
|||
}) |
|||
}, |
|||
created() { |
|||
const enterpriseId = this.$store.state.companyInfo.id |
|||
if (enterpriseId) { |
|||
getCompanyInfoById(enterpriseId).then((res) => { |
|||
if (res) { |
|||
this.form = res |
|||
this.form.id = enterpriseId |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
back, |
|||
cancel() { |
|||
back() |
|||
}, |
|||
showLocationList() { |
|||
if (!this.form.name || !this.form.name.trim()) { |
|||
uni.showToast({ |
|||
title: '请先填写公司名称', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
getCompanyLocationList({ enterpriseName: this.form.name }).then((res) => { |
|||
if (res && res.length > 0) { |
|||
this.locationList = res |
|||
this.$refs.locationPopup.open('bottom') |
|||
} else { |
|||
uni.showToast({ |
|||
title: '暂无定位公司', |
|||
icon: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
selectLocation(location) { |
|||
this.form.locProvinceId = location.provinceCode |
|||
this.form.locCityId = location.cityCode |
|||
this.form.locDistrictId = location.districtCode |
|||
this.form.locProvinceName = location.provinceName |
|||
this.form.locCityName = location.cityName |
|||
this.form.locDistrictName = location.districtName |
|||
this.form.locDetail = location.address |
|||
this.form.regAddrLongitude = location.longitude |
|||
this.form.regAddrLatitude = location.latitude |
|||
this.$refs.locationPopup.close() |
|||
}, |
|||
onAreaChange(e) { |
|||
if (e.detail.value && e.detail.value.length > 0) { |
|||
const [province, city, district, street] = e.detail.value |
|||
this.form.locProvinceId = province.value |
|||
this.form.locProvinceName = province.text |
|||
this.form.locCityId = city.value |
|||
this.form.locCityName = city.text |
|||
this.form.locDistrictId = district.value |
|||
this.form.locDistrictName = district.text |
|||
this.form.locStreetId = street.value |
|||
this.form.locStreetName = street.text |
|||
} else { |
|||
this.form.locProvinceId = null |
|||
this.form.locProvinceName = null |
|||
this.form.locCityId = null |
|||
this.form.locCityName = null |
|||
this.form.locDistrictId = null |
|||
this.form.locDistrictName = null |
|||
this.form.locStreetId = null |
|||
this.form.locStreetName = null |
|||
} |
|||
}, |
|||
selectedImage(type) { |
|||
uploadImage() |
|||
.then((urls) => { |
|||
if (urls) { |
|||
this.form[type] = urls[0] |
|||
// 营业执照OCR |
|||
if (type == 'businessLicenseImg') { |
|||
this.licenseOcr(urls[0]) |
|||
} |
|||
if (type == 'legalPersonIdCardFrontImg') { |
|||
this.idCardFrontOcr(urls[0]) |
|||
} |
|||
} |
|||
}) |
|||
.catch((e) => { |
|||
uni.showToast({ |
|||
title: '上传失败', |
|||
icon: 'fail' |
|||
}) |
|||
}) |
|||
}, |
|||
// 营业执照OCR |
|||
licenseOcr(url) { |
|||
getLicenseOcr({ photoUrl: url }).then((res) => { |
|||
if (res) { |
|||
this.form.uniformSocialCreditCode = res.regNum |
|||
this.form.name = res.company |
|||
this.form.legalPersonName = res.legalPerson |
|||
const foundDateArr = res.establishDate.split(/[年月日]/) |
|||
this.form.foundDate = foundDateArr[0] + '-' + foundDateArr[1] + '-' + foundDateArr[2] |
|||
this.form.registeredCapital = /\d+/.exec(res.capital)[0] |
|||
} |
|||
}) |
|||
}, |
|||
idCardFrontOcr(url) { |
|||
getFrontIdCardOcr({ image: url }).then((res) => { |
|||
if (res && res.success) { |
|||
this.form.legalPersonIdCardNo = res.num |
|||
this.form.legalPersonName = res.name |
|||
} |
|||
}) |
|||
}, |
|||
showImage() { |
|||
uni.previewImage({ |
|||
urls: [this.form.businessLicenseImg] |
|||
}) |
|||
}, |
|||
saveInfo() { |
|||
if (!this.form.id) { |
|||
for (let validateField of validateFields) { |
|||
if (this.form[validateField.field] === null || this.form[validateField.field] === '') { |
|||
uni.showToast({ |
|||
title: `${validateField.label}不能为空`, |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
if (!/^1[3456789]\d{9}$/.test(this.form['legalPersonMobile'])) { |
|||
uni.showToast({ |
|||
title: '请输入正确法人手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
if (this.form.contactMobile && !/^1[3456789]\d{9}$/.test(this.form['contactMobile'])) { |
|||
uni.showToast({ |
|||
title: '请输入正确联系人手机号', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
completeInfo(this.form).then((res) => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '添加成功', |
|||
icon: 'success' |
|||
}) |
|||
setTimeout(() => { |
|||
back() |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
computed: { |
|||
frontIDCard() { |
|||
let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/frontIDCard.png' |
|||
if (!this.form.legalPersonIdCardFrontImg) { |
|||
return url |
|||
} |
|||
return this.form.legalPersonIdCardFrontImg |
|||
}, |
|||
backIDCard() { |
|||
let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/backDCard.png' |
|||
if (!this.form.legalPersonIdCardBackImg) { |
|||
return url |
|||
} |
|||
return this.form.legalPersonIdCardBackImg |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 750rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: #f7f8fa; |
|||
} |
|||
.qn-form-item { |
|||
width: 750rpx; |
|||
padding: 0rpx 32rpx; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5); |
|||
min-height: 80rpx; |
|||
.label { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
margin-right: 20rpx; |
|||
.label__text { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
} |
|||
.value { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.qn-form-item__title { |
|||
background-color: #f7f8fa; |
|||
padding: 20rpx 32rpx; |
|||
border: none; |
|||
.title { |
|||
font-size: 30rpx; |
|||
color: #888888; |
|||
} |
|||
} |
|||
.popup_modal { |
|||
width: 750rpx; |
|||
height: 600rpx; |
|||
background-color: #fff; |
|||
border-radius: 10px 10px 0 0; |
|||
.popup_modal-title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
font-weight: 600; |
|||
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5); |
|||
} |
|||
.popup_modal-scroll { |
|||
width: 750rpx; |
|||
height: 600rpx; |
|||
.popup_modal-scroll-item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 750rpx; |
|||
height: 88rpx; |
|||
padding: 0rpx 32rpx; |
|||
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5); |
|||
} |
|||
} |
|||
} |
|||
.upload-area { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 10rpx; |
|||
margin-bottom: 24rpx; |
|||
.idCard { |
|||
width: 324rpx; |
|||
height: 280rpx; |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
} |
|||
.button-area { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.button { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
.text { |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.button__cancel { |
|||
width: 270rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #979797; |
|||
} |
|||
.button__submit { |
|||
width: 400rpx; |
|||
height: 88rpx; |
|||
background: #007aff; |
|||
} |
|||
} |
|||
.location-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
justify-content: flex-start; |
|||
.title { |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.address { |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 1.5 KiB |
Write
Preview
Loading…
Cancel
Save