447 lines
12 KiB
Vue
447 lines
12 KiB
Vue
<template>
|
||
<view style="padding: 10px">
|
||
<u-form :model="form" ref="firstForm" :rules="rules">
|
||
<h4>企业资质信息</h4>
|
||
<u-form-item prop="companyName" label="公司名称">
|
||
<u-input v-model="form.companyName" placeholder="请填写公司信息" />
|
||
</u-form-item>
|
||
<u-form-item label="公司所在地">
|
||
<u-input
|
||
v-model="path"
|
||
type="select"
|
||
@click="showPicker"
|
||
placeholder="请选择所在地区"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item prop="companyAddress" label="详细地址">
|
||
<u-input
|
||
v-model="form.companyAddress"
|
||
placeholder="请填写公司详细信息"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item prop="employeeNum" label="员工总数">
|
||
<u-input v-model="form.employeeNum" placeholder="请填写公司员工总数"
|
||
><span slot="append">人</span>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item prop="companyPhone" label="公司电话">
|
||
<u-input
|
||
v-model="form.companyPhone"
|
||
placeholder="请填写公司电话"
|
||
></u-input>
|
||
</u-form-item>
|
||
<u-form-item prop="registeredCapital" label="注册资金">
|
||
<u-input
|
||
v-model="form.registeredCapital"
|
||
placeholder="请填写注册资金(万元)"
|
||
>
|
||
<!-- <span slot="append">万元</span> -->
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item prop="linkName" label="联系人姓名">
|
||
<u-input v-model="form.linkName" placeholder="请填写联系人姓名" />
|
||
</u-form-item>
|
||
<u-form-item prop="linkPhone" label="联系人电话">
|
||
<u-input v-model="form.linkPhone" placeholder="请填写联系人电话" />
|
||
</u-form-item>
|
||
<u-form-item prop="companyEmail" label="电子邮箱">
|
||
<u-input v-model="form.companyEmail" placeholder="请填写电子邮箱" />
|
||
</u-form-item>
|
||
<h4>营业执照信息</h4>
|
||
<u-form-item prop="licenseNum" label="营业执照号">
|
||
<u-input v-model="form.licenseNum" placeholder="请填写营业执照号" />
|
||
</u-form-item>
|
||
<u-form-item prop="scope" label="经营范围">
|
||
<u-input
|
||
type="textarea"
|
||
v-model="form.scope"
|
||
maxlength="200"
|
||
show-word-limit
|
||
:rows="4"
|
||
placeholder="请输入营业执照所示经营范围"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item prop="licencePhoto" label="营业执照电子版">
|
||
<u-upload
|
||
:action="action"
|
||
:header="{ accessToken: storage.getAccessToken() }"
|
||
max-count="1"
|
||
style="margin-left: 70px"
|
||
@on-uploaded="onUploadedone"
|
||
|
||
@on-remove="onRemoveone"
|
||
></u-upload>
|
||
</u-form-item>
|
||
<h4>法人信息</h4>
|
||
<u-form-item prop="legalName" label="法人姓名">
|
||
<u-input
|
||
v-model="form.legalName"
|
||
maxlength="20"
|
||
placeholder="请输入法人姓名"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item prop="legalId" label="法人证件号">
|
||
<u-input v-model="form.legalId" placeholder="请输入法人证件号" />
|
||
</u-form-item>
|
||
<u-form-item prop="legalPhoto" label="法人证件电子版">
|
||
<u-upload
|
||
:header="{ accessToken: storage.getAccessToken() }"
|
||
max-count="2"
|
||
:action="action"
|
||
@on-uploaded="onUploadedtwo"
|
||
@on-remove="onRemove"
|
||
style="margin-left: 70px"
|
||
></u-upload>
|
||
<div class="describe">
|
||
请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
|
||
</div>
|
||
</u-form-item>
|
||
<u-form-item> </u-form-item>
|
||
</u-form>
|
||
<button
|
||
type="primary"
|
||
@click="next"
|
||
:style="{ background: '#FE3C3C' }"
|
||
class="bunem"
|
||
>
|
||
填写财务资质信息
|
||
</button>
|
||
<u-toast ref="uToast" />
|
||
<m-city
|
||
:provinceData="list"
|
||
headTitle="区域选择"
|
||
ref="cityPicker"
|
||
@funcValue="getpickerParentValue"
|
||
pickerSize="4"
|
||
>
|
||
</m-city>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import storage from "@/utils/storage.js";
|
||
import { upload } from "@/api/common.js";
|
||
import gkcity from "@/components/m-city/m-city.vue";
|
||
import { applyFirst } from "@/api/goods";
|
||
import * as RegExp from "@/plugins/Reg/RegExp.js";
|
||
export default {
|
||
components: {
|
||
"m-city": gkcity,
|
||
},
|
||
data() {
|
||
return {
|
||
list: [
|
||
{
|
||
id: "",
|
||
localName: "请选择",
|
||
children: [],
|
||
},
|
||
],
|
||
action: upload,
|
||
storage: storage,
|
||
path: "",
|
||
form: {
|
||
legalPhoto: [],
|
||
licencePhoto: [],
|
||
companyAddressIdPath: [],
|
||
legalId: "",
|
||
legalName: "",
|
||
companyName: "",
|
||
companyAddress: "",
|
||
employeeNum: "",
|
||
registeredCapital: "",
|
||
companyAddressPath: "",
|
||
linkName: "",
|
||
},
|
||
rules: {
|
||
companyName: [
|
||
{
|
||
required: true,
|
||
message: "请填写公司信息",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
companyAddress: [
|
||
{
|
||
required: true,
|
||
message: "请填写公司详细地址",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
employeeNum: [
|
||
{
|
||
required: true,
|
||
message: "请填写公司员工总数",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
pattern: RegExp.integer,
|
||
message: "只能填写正整数",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
registeredCapital: [
|
||
{
|
||
required: true,
|
||
message: "请填写公司注册资金",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
pattern: RegExp.integer,
|
||
message: "只能填写正整数",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
linkName: [
|
||
{
|
||
required: true,
|
||
message: "请填写联系人姓名",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
linkPhone: [
|
||
{
|
||
required: true,
|
||
message: "请填写联系人电话",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
pattern: RegExp.mobile,
|
||
message: "请填写正确的号码",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
companyPhone: [
|
||
{
|
||
required: true,
|
||
message: "请填写公司电话",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
pattern: RegExp.TEL,
|
||
message: "请填写正确的号码",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
companyEmail: [
|
||
{
|
||
required: true,
|
||
message: "请填写电子邮箱",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
type: "email",
|
||
message: "请输入正确的邮箱",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
licenseNum: [
|
||
{
|
||
required: true,
|
||
message: "请填写营业执照号",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
pattern: RegExp.licenseNum,
|
||
message: "请输入正确的营业执照号",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
scope: [
|
||
{
|
||
required: true,
|
||
message: "请填写营业执照所示经营范围",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
legalPhoto: [
|
||
{
|
||
required: true,
|
||
message: "请上传法人身份证照片",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
licencePhoto: [
|
||
{
|
||
required: true,
|
||
message: "请上传营业执照",
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
legalName: [
|
||
{
|
||
required: true,
|
||
message: "请输入法人姓名",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
legalId: [
|
||
{
|
||
required: true,
|
||
message: "请输入法人证件号",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
{
|
||
pattern: RegExp.IDCard,
|
||
message: "请输入正确的证件号",
|
||
trigger: ["blur", "change"],
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
|
||
onLoad() {
|
||
// 页面加载时可以初始化数据
|
||
},
|
||
onShow() {
|
||
// 页面显示时可以执行一些操作
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
// 显示三级地址联动
|
||
showPicker() {
|
||
this.$refs.cityPicker.show();
|
||
},
|
||
// 三级地址联动回调
|
||
getpickerParentValue(e) {
|
||
// 将需要绑定的地址设置为空，并赋值
|
||
this.form.consigneeAddressIdPath = [];
|
||
this.form.consigneeAddressPath = [];
|
||
this.form.companyAddressIdPath = [];
|
||
let name = "";
|
||
|
||
e.forEach((item, index) => {
|
||
if (item.id) {
|
||
// 遍历数据
|
||
this.form.consigneeAddressIdPath.push(item.id);
|
||
this.form.companyAddressIdPath.push(item.id);
|
||
console.log(item.id);
|
||
console.log(this.form.companyAddressIdPath);
|
||
|
||
this.form.consigneeAddressPath.push(item.localName);
|
||
name += item.localName;
|
||
this.form.companyAddressPath = name;
|
||
this.path = name;
|
||
}
|
||
if (index == e.length - 1) {
|
||
//如果是最后一个
|
||
let _town = item.children.filter((_child) => {
|
||
return _child.id == item.id;
|
||
});
|
||
|
||
this.form.lat = _town[0].center.split(",")[1];
|
||
this.form.lon = _town[0].center.split(",")[0];
|
||
}
|
||
});
|
||
},
|
||
|
||
consub() {},
|
||
|
||
onUploaded(lists) {
|
||
lists.forEach((item) => {
|
||
this.form.businessLicense = item.response.result;
|
||
});
|
||
},
|
||
// 法人证件电子
|
||
onUploadedone(lists) {
|
||
lists.forEach((item) => {
|
||
this.form.licencePhoto = item.response.result;
|
||
});
|
||
},
|
||
|
||
onRemoveone(index, lists) {
|
||
this.form.licencePhoto=[]
|
||
},
|
||
// 法人证件电子版
|
||
onUploadedtwo(lists) {
|
||
lists.forEach((item) => {
|
||
const fn = this.form.legalPhoto.indexOf(item.response.result);
|
||
if (fn == -1) {
|
||
this.form.legalPhoto.push(item.response.result);
|
||
}
|
||
});
|
||
},
|
||
onRemove(index, lists) {
|
||
this.form.legalPhoto.splice(index, 1);
|
||
},
|
||
|
||
// 下一步
|
||
next() {
|
||
this.$refs.firstForm.validate((valid) => {
|
||
if (valid) {
|
||
let params = JSON.parse(JSON.stringify(this.form));
|
||
params.legalPhoto = this.form.legalPhoto.toString();
|
||
params.licencePhoto = this.form.licencePhoto.toString();
|
||
params.companyAddressIdPath = this.form.companyAddressIdPath.toString();
|
||
if (
|
||
this.form.legalPhoto != "" &&
|
||
this.form.legalId != "" &&
|
||
this.form.legalName != "" &&
|
||
this.form.linkName!= "" &&
|
||
this.form.linkPhone!= ""
|
||
) {
|
||
applyFirst(params)
|
||
.then((res) => {
|
||
if (res.data.success) {
|
||
uni.navigateTo({
|
||
url: "/pages/mine/openShop/secon",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "请正确输入",
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showToast({
|
||
title: "请正确输入",
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "请正确输入",
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
}
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
title: "表单校验失败，请检查输入内容",
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep {
|
||
.u-form-item--left__content {
|
||
width: 100px;
|
||
white-space: nowrap;
|
||
}
|
||
.bunem {
|
||
width: 309px;
|
||
margin-top: 20px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: #ffffff;
|
||
margin-bottom: 35px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
.u-input {
|
||
margin-left: 30px; // 可根据实际情况调整这个值
|
||
}
|
||
}
|
||
</style>
|