mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-17 16:35:53 +08:00
commit message
This commit is contained in:
Chopper
383
buyer/src/pages/shopEntry/first-apply.vue
Normal file
383
buyer/src/pages/shopEntry/first-apply.vue
Normal file
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<div class="company-msg">
|
||||
<Form ref="firstForm" :model="form" :rules="rules" :label-width="140">
|
||||
<h4>基础信息</h4>
|
||||
<FormItem prop="companyName" label="公司名称">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.companyName"
|
||||
placeholder="请填写公司信息"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="addressIdPath" label="公司所在地">
|
||||
<!-- <Input type="text" v-model="form.addressIdPath" placeholder="请选择公司所在地" /> -->
|
||||
<region
|
||||
style="width: 250px"
|
||||
@selected="selectedRegion"
|
||||
:addressId="address"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="companyAddress" label="公司详细地址">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.companyAddress"
|
||||
placeholder="请填写公司详细信息"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="employeeNum" label="员工总数">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.employeeNum"
|
||||
placeholder="请填写公司员工总数"
|
||||
><span slot="append">人</span>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem prop="registeredCapital" label="注册资金">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.registeredCapital"
|
||||
placeholder="请填写注册资金"
|
||||
><span slot="append">万元</span></Input>
|
||||
</FormItem>
|
||||
<FormItem prop="linkName" label="联系人姓名">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.linkName"
|
||||
placeholder="请填写联系人姓名"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="linkPhone" label="联系人电话">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.linkPhone"
|
||||
placeholder="请填写联系人电话"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="companyEmail" label="电子邮箱">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.companyEmail"
|
||||
placeholder="请填写电子邮箱"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<h4>营业执照信息</h4>
|
||||
<FormItem prop="licenseNum" label="营业执照号">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.licenseNum"
|
||||
placeholder="请填写营业执照号"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="scope" label="法定经营范围">
|
||||
<Input
|
||||
type="textarea"
|
||||
v-model="form.scope"
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
:rows="4"
|
||||
placeholder="请输入营业执照所示经营范围"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="licencePhoto" label="营业执照电子版">
|
||||
<Upload
|
||||
ref="uploadLicence"
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:format="['jpg', 'jpeg', 'png', 'gif']"
|
||||
:max-size="2048"
|
||||
:before-upload="beforeUpload"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:on-error="uploadErr"
|
||||
multiple
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
>
|
||||
<Button type="info" :loading="uploadLoading">证照上传</Button>
|
||||
</Upload>
|
||||
<div class="describe">
|
||||
请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
|
||||
</div>
|
||||
<div
|
||||
class="img-list"
|
||||
v-for="(item, index) in form.licencePhoto"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item" width="100" alt="" />
|
||||
<div class="cover">
|
||||
<Icon
|
||||
type="ios-eye-outline"
|
||||
@click.native="handleView(item)"
|
||||
></Icon>
|
||||
<Icon
|
||||
type="ios-trash-outline"
|
||||
@click.native="handleRemove(index, 'licencePhoto')"
|
||||
></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<h4>法人信息</h4>
|
||||
<FormItem prop="legalName" label="法人姓名">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.legalName"
|
||||
maxlength="20"
|
||||
placeholder="请输入法人姓名"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="legalId" label="法人证件号">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.legalId"
|
||||
placeholder="请输入法人证件号"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="legalPhoto" label="法人证件电子版">
|
||||
<Upload
|
||||
ref="uploadLegal"
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess1"
|
||||
:before-upload="beforeUpload1"
|
||||
:max-size="2048"
|
||||
:format="['jpg', 'jpeg', 'png', 'gif']"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:on-error="uploadErr"
|
||||
multiple
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
>
|
||||
<Button type="info" :loading="uploadLoading1">证照上传</Button>
|
||||
</Upload>
|
||||
<div class="describe">
|
||||
请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
|
||||
</div>
|
||||
<div
|
||||
class="img-list"
|
||||
v-for="(item, index) in form.legalPhoto"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item" width="100" alt="" />
|
||||
<div class="cover">
|
||||
<Icon
|
||||
type="ios-eye-outline"
|
||||
@click.native="handleView(item)"
|
||||
></Icon>
|
||||
<Icon
|
||||
type="ios-trash-outline"
|
||||
@click.native="handleRemove(index, 'legalPhoto')"
|
||||
></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" :loading="loading" @click="next"
|
||||
>填写财务资质信息</Button
|
||||
>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewPicture" v-if="visible" style="width: 100%" />
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { applyFirst } from '@/api/shopentry';
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import region from '@/components/map/region.vue';
|
||||
import storage from '@/plugins/storage';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
export default {
|
||||
components: { region },
|
||||
props: {
|
||||
content: {
|
||||
default () {
|
||||
return {};
|
||||
},
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
action: commonUrl + '/common/upload/file',
|
||||
accessToken: {},
|
||||
visible: false,
|
||||
loading: false,
|
||||
address: '',
|
||||
previewPicture: '',
|
||||
form: {
|
||||
legalPhoto: [],
|
||||
licencePhoto: []
|
||||
},
|
||||
rules: {
|
||||
companyName: [{ required: true, message: '请填写公司信息' }],
|
||||
addressIdPath: [{ required: true, message: '请选择公司所在地' }],
|
||||
companyAddress: [{ required: true, message: '请填写公司详细地址' }],
|
||||
employeeNum: [
|
||||
{ required: true, message: '请填写公司员工总数' },
|
||||
{ pattern: RegExp.integer, message: '只能填写正整数' }
|
||||
],
|
||||
registeredCapital: [
|
||||
{ required: true, message: '请填写公司注册资金' },
|
||||
{ pattern: RegExp.integer, message: '只能填写正整数' }
|
||||
],
|
||||
linkName: [{ required: true, message: '请填写联系人姓名' }],
|
||||
linkPhone: [
|
||||
{ required: true, message: '请填写联系人姓名' },
|
||||
{ pattern: RegExp.mobile, message: '请填写正确手机号' }
|
||||
],
|
||||
companyEmail: [
|
||||
{ required: true, message: '请填写电子邮箱' },
|
||||
{ type: 'email', message: '请输入正确的邮箱' }
|
||||
],
|
||||
licenseNum: [
|
||||
{ required: true, message: '请填写营业执照号' },
|
||||
{ pattern: RegExp.licenseNum, message: '请输入正确的营业执照号' }
|
||||
],
|
||||
scope: [{ required: true, message: '请填写营业执照所示经营范围' }],
|
||||
legalPhoto: [{ required: true, message: '请上传法人身份证照片' }],
|
||||
licencePhoto: [{ required: true, message: '请上传营业执照' }],
|
||||
legalName: [{ required: true, message: '请输入法人姓名' }],
|
||||
legalId: [
|
||||
{ required: true, message: '请输入法人证件号' },
|
||||
{ pattern: RegExp.IDCard, message: '请输入正确的证件号' }
|
||||
]
|
||||
},
|
||||
uploadLoading1: false,
|
||||
uploadLoading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
this.$refs.firstForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let params = JSON.parse(JSON.stringify(this.form));
|
||||
params.legalPhoto = this.form.legalPhoto.toString();
|
||||
params.licencePhoto = this.form.licencePhoto.toString();
|
||||
applyFirst(params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) this.$emit('change', 1);
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
});
|
||||
},
|
||||
selectedRegion (item) {
|
||||
// 地址选择回显
|
||||
this.$set(this.form, 'addressIdPath', item[0].toString());
|
||||
this.$set(
|
||||
this.form,
|
||||
'addressPath',
|
||||
item[1].toString().replace(/\s/g, '')
|
||||
);
|
||||
},
|
||||
beforeUpload () {
|
||||
this.uploadLoading = true;
|
||||
},
|
||||
beforeUpload1 () {
|
||||
this.uploadLoading1 = true;
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
this.uploadLoading = false;
|
||||
this.form.licencePhoto.push(res.result);
|
||||
},
|
||||
handleSuccess1 (res, file) {
|
||||
this.uploadLoading1 = false;
|
||||
this.form.legalPhoto.push(res.result);
|
||||
console.log(res);
|
||||
console.log(file);
|
||||
},
|
||||
handleFormatError (file) {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
this.$Notice.warning({
|
||||
title: 'The file format is incorrect',
|
||||
desc: '上传文件格式不正确'
|
||||
});
|
||||
},
|
||||
handleMaxSize (file) {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
this.$Notice.warning({
|
||||
title: 'Exceeding file size limit',
|
||||
desc: '文件大小不能超过2M'
|
||||
});
|
||||
},
|
||||
uploadErr () {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
},
|
||||
handleView (item) {
|
||||
this.previewPicture = item;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index, listName) {
|
||||
this.form[listName].splice(index, 1);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
if (this.form.licencePhoto) {
|
||||
this.form.legalPhoto = this.content.legalPhoto.split(',');
|
||||
this.form.licencePhoto = this.content.licencePhoto.split(',');
|
||||
this.address = this.form.addressIdPath;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
.ivu-input-wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
.img-list {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
.cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
i {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover .cover {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user