qniao
/
print-package-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
【前端】印包客app
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 Commits
2 Branches
0 Tags
6.7 MiB
Tree: 91b1865c11
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '91b1865c11'
${ noResults }
print-package-app/pages/enterprise-info-edit/index.vue

532 lines
16 KiB
Raw Blame History

<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 :end="endTimeStamp" 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 {
endTimeStamp: new Date().getTime(),
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() {
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>