qniao
/
paper-shopkeeper-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.
64 Commits
2 Branches
0 Tags
116 MiB
Tree: 2e38465c8b
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e38465c8b'
${ noResults }
paper-shopkeeper-app/pages/enterprise-info/index.vue

497 lines
13 KiB
Raw Blame History

<template>
<view>
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="完善信息">
<text @click="jump" v-if="operation === 'add'" style="color: #007aff" slot="right">跳过</text>
</uni-nav-bar>
<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="所在地区" required>
<qn-data-picker
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.locStreetName">
{{ `${form.locProvinceName || ''}/${form.locCityName || ''}/${form.locDistrictName || ''}/${form.locStreetName || ''}` }}
</text>
</qn-data-picker>
</qn-form-item>
<qn-form-item label="详细地址" required>
<qn-easyinput
:maxlength="20"
: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="法人/实控人" 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="身份证照片" 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>
<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; color: #007aff; margin-right: 16rpx">
重新上传
</text>
<text v-if="form.businessLicenseImg" @click="showImage" style="font-size: 28rpx; color: #007aff">预览</text>
</qn-form-item>
<qn-form-item label="结算账户(公账)" type="title"></qn-form-item>
<qn-form-item label="账户名" required>
<qn-easyinput
:maxlength="50"
:styles="{ disableColor: '#fff' }"
v-model="form.bankAccountName"
:inputBorder="false"
text="right"
placeholder="请输入账户名"
></qn-easyinput>
</qn-form-item>
<qn-form-item label="对公账户" required>
<qn-easyinput
:maxlength="50"
:styles="{ disableColor: '#fff' }"
v-model="form.bankAccount"
:inputBorder="false"
text="right"
placeholder="请输入银行账户"
></qn-easyinput>
</qn-form-item>
<qn-form-item label="开户行" required>
<qn-easyinput
:maxlength="50"
:styles="{ disableColor: '#fff' }"
v-model="form.bankName"
: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="50"
:styles="{ disableColor: '#fff' }"
v-model="form.cardholderName"
:inputBorder="false"
text="right"
placeholder="请输入账户名"
></qn-easyinput>
</qn-form-item>
<qn-form-item label="对公账户" required>
<qn-easyinput
:maxlength="50"
:styles="{ disableColor: '#fff' }"
v-model="form.bankCardNumber"
:inputBorder="false"
text="right"
placeholder="请输入银行账户"
></qn-easyinput>
</qn-form-item>
<qn-form-item label="开户行" required>
<qn-easyinput
:maxlength="50"
:styles="{ disableColor: '#fff' }"
v-model="form.openingBank"
:inputBorder="false"
text="right"
placeholder="请输入开户行"
></qn-easyinput>
</qn-form-item>
<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 qnForm from '@/components/qn-form/qn-form.vue'
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
import { back, go2, uploadImage } from '@/utils/hook.js'
import { getArea } from '@/apis/commonApi.js'
import { completeInfo } from '@/apis/enterpriseInfoApi.js'
const columns = [
{
key: 1,
type: 'title',
label: '基础信息'
},
{
key: 'name',
type: 'item',
label: '企业名称',
required: true
},
{
key: 'shortName',
type: 'item',
label: '企业简称'
},
{
key: 'locStreetName',
type: 'item',
label: '所在地区',
required: true
},
{
key: 'locDetail',
type: 'item',
label: '详细地址',
required: true
},
{
key: 2,
type: 'title',
label: '工商信息'
},
{
key: 'uniformSocialCreditCode',
type: 'item',
label: '信用代码',
required: true
},
{
key: 'legalPersonName',
type: 'item',
label: '法人/实控人',
required: true
},
{
key: 'legalPersonMobile',
type: 'item',
label: '法人/实控人手机',
required: true
},
{
key: 'legalPersonIdCardNo',
type: 'item',
label: '法人/实控人身份证号',
required: true
},
{
key: 'legalPersonIdCardFrontImg',
type: 'item',
label: '身份证照片',
required: true,
size: 'large'
},
{
key: 'businessLicenseImg',
type: 'item',
label: '营业执照',
required: true
},
{
key: 3,
type: 'title',
label: '结算账户(公账)'
},
{
key: 'bankAccountName',
type: 'item',
label: '账户名',
required: true
},
{
key: 'bankAccount',
type: 'item',
label: '对公账户',
required: true
},
{
key: 'bankName',
type: 'item',
label: '开户行',
required: true
},
{
key: 4,
type: 'title',
label: '结算账户(私账)'
},
{
key: 'cardholderName',
type: 'item',
label: '账户名',
required: true
},
{
key: 'bankCardNumber',
type: 'item',
label: '对公账户',
required: true
},
{
key: 'openingBank',
type: 'item',
label: '开户行',
required: true
}
]
export default {
components: {
qnForm,
qnDataPicker,
qnEasyinput
},
data() {
return {
operation: 'add',
columns: Object.freeze(columns),
form: {
name: '',
shortName: '',
locProvinceId: null,
locCityId: null,
locDistrictId: null,
locStreetId: null,
locProvinceName: null,
locCityName: null,
locDistrictName: null,
locStreetName: null,
locDetail: '',
uniformSocialCreditCode: '',
legalPersonName: '',
legalPersonMobile: '',
legalPersonIdCardNo: '',
legalPersonIdCardFrontImg: '',
legalPersonIdCardBackImg: '',
businessLicenseImg: '',
bankAccountName: '',
bankAccount: '',
bankName: '',
cardholderName: '',
bankCardNumber: ''
},
items: [],
canSubmit: false
}
},
methods: {
back,
jump() {
go2('client')
},
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
}
},
showImage() {
uni.previewImage({
urls: [this.form.businessLicenseImg]
})
},
selectedImage(type) {
uploadImage()
.then((urls) => {
if (urls) {
this.form[type] = urls[0]
console.log('urls', urls)
}
})
.catch((e) => {
uni.showToast({
title: '上传失败',
icon: 'fail'
})
})
},
cancel() {
// 登录时取消则回到首页
if (this.operation === 'add') {
go2('client', {}, true)
} else {
back()
}
},
saveInfo() {
// 校验
for (let i = 0; i < columns.length; i++) {
const item = columns[i]
if (item.required && !this.form[item.key]) {
uni.showToast({
title: `${item.label}不能为空`,
icon: 'none'
})
return
}
}
// 先手动判断身份证反面
if (!this.form.legalPersonIdCardBackImg) {
uni.showToast({
title: `身份证反面不能为空`,
icon: 'none'
})
}
completeInfo(this.form).then((res) => {
if (res) {
uni.showToast({
title: '保存成功',
icon: 'success'
})
go2('client', true)
}
})
}
},
onLoad(option) {
if (option) {
this.operation = option.operation
}
},
mounted() {
getArea().then((res) => {
if (res) {
this.items = res
}
})
},
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>
.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;
}
}
</style>