|
|
@@ -0,0 +1,413 @@
|
|
|
+<template>
|
|
|
+ <div class="login">
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="text1">企业认证</div>
|
|
|
+ <div class="text2">
|
|
|
+ <span>账户实名认证后不能修改，</span>
|
|
|
+ <span>请使用本人身份信息完成认证</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-form @submit="submit" @failed="failed" ref="form">
|
|
|
+ <van-field
|
|
|
+ label="法人姓名"
|
|
|
+ name="法人姓名"
|
|
|
+ placeholder="请输入您法人姓名"
|
|
|
+ v-model="form.realName"
|
|
|
+ :rules="[{ required: true, message: '请输入您法人姓名' }]"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <!--
|
|
|
+ <van-field
|
|
|
+ type="tel"
|
|
|
+ label="手机号码"
|
|
|
+ name="手机号码"
|
|
|
+ placeholder="请输入您的手机号码"
|
|
|
+ v-model="form.phone"
|
|
|
+ :maxlength="11"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入您的手机号码' },
|
|
|
+ {
|
|
|
+ pattern: phonePattern,
|
|
|
+ message: '手机号码格式错误'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ </van-field> -->
|
|
|
+
|
|
|
+ <!-- <van-field
|
|
|
+ label="电子邮箱"
|
|
|
+ name="电子邮箱"
|
|
|
+ placeholder="请输入电子邮箱"
|
|
|
+ v-model="form.email"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入电子邮箱' },
|
|
|
+ {
|
|
|
+ pattern: emailPattern,
|
|
|
+ message: '电子邮箱格式错误'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ </van-field> -->
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ label="身份证号"
|
|
|
+ name="身份证号"
|
|
|
+ placeholder="请输入身份证号"
|
|
|
+ v-model="form.idNo"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '请输入身份证号' },
|
|
|
+ {
|
|
|
+ pattern: IDPattern,
|
|
|
+ message: '身份证号格式错误'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ label="身份证照片（正面照）"
|
|
|
+ name="正面照"
|
|
|
+ v-model="form.idFront"
|
|
|
+ class="img"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ validator: val => {
|
|
|
+ return !!this.form.idFront;
|
|
|
+ },
|
|
|
+ message: '请上传身份证正面照片'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <div class="img-content">
|
|
|
+ <van-image
|
|
|
+ :src="form.idFront || require('../../assets/svgs/bg-png.svg')"
|
|
|
+ fit="cover"
|
|
|
+ radius="20"
|
|
|
+ />
|
|
|
+ <van-uploader name="idFront" result-type="file" :after-read="afterRead" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="身份证照片（反面照）"
|
|
|
+ name="反面照"
|
|
|
+ v-model="form.idBack"
|
|
|
+ class="img"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ validator: val => {
|
|
|
+ return !!this.form.idBack;
|
|
|
+ },
|
|
|
+ message: '请上传身份证反面照片'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <div class="img-content">
|
|
|
+ <van-image
|
|
|
+ :src="form.idBack || require('../../assets/svgs/bg-png.svg')"
|
|
|
+ fit="cover"
|
|
|
+ radius="20"
|
|
|
+ />
|
|
|
+ <van-uploader name="idBack" result-type="file" :after-read="afterRead" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="企业名称"
|
|
|
+ name="企业名称"
|
|
|
+ placeholder="请输入企业名称"
|
|
|
+ v-model="form.orgName"
|
|
|
+ :rules="[{ required: true, message: '请输入企业名称' }]"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <div>工商营业执照注册号/统一社会信用代码</div>
|
|
|
+ <van-field
|
|
|
+ placeholder="工商营业执照注册号/统一社会信用代码"
|
|
|
+ v-model="form.orgNo"
|
|
|
+ :rules="[{ required: true, message: '工商营业执照注册号/统一社会信用代码' }]"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="拼箱结束"
|
|
|
+ is-link
|
|
|
+ :value="form.startTime"
|
|
|
+ placeholder="请输入结束日期"
|
|
|
+ @click="pickerShow('newShow')"
|
|
|
+ readonly
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="营业执照"
|
|
|
+ v-model="form.orgLicense"
|
|
|
+ class="img"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ validator: val => {
|
|
|
+ return !!this.form.orgLicense;
|
|
|
+ },
|
|
|
+ message: '请上传营业执照'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <div class="img-content">
|
|
|
+ <van-image
|
|
|
+ :src="form.orgLicense || require('../../assets/svgs/bg-png.svg')"
|
|
|
+ fit="cover"
|
|
|
+ radius="20"
|
|
|
+ />
|
|
|
+ <van-uploader name="orgLicense" result-type="file" :after-read="afterRead" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-popup :show="newShow" position="bottom" @close="onClose">
|
|
|
+ <van-datetime-picker
|
|
|
+ type="date"
|
|
|
+ :value="currentDate"
|
|
|
+ @input="onInput"
|
|
|
+ :min-date="minDate"
|
|
|
+ :formatter="formatter"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <div class="button" ref="btn">
|
|
|
+ <van-button
|
|
|
+ round
|
|
|
+ block
|
|
|
+ @click="submit"
|
|
|
+ color="linear-gradient(to right, #FDFB60, #FF8F3E)"
|
|
|
+ class="sure"
|
|
|
+ >
|
|
|
+ 提交审核
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+import phone from '../../mixins/phone';
|
|
|
+export default {
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo'])
|
|
|
+ },
|
|
|
+
|
|
|
+ mixins: [phone],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ active: 'phone',
|
|
|
+ emailPattern: /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
|
|
|
+ IDPattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
|
|
|
+ form: {
|
|
|
+ realName: '',
|
|
|
+ orgName: '',
|
|
|
+ orgNo: '',
|
|
|
+ idNo: '',
|
|
|
+ idFront: '',
|
|
|
+ idBack: '',
|
|
|
+ status: '',
|
|
|
+ orgLicense: ''
|
|
|
+ },
|
|
|
+ btn: null,
|
|
|
+ newShow: false,
|
|
|
+ currentDate: new Date().getTime(),
|
|
|
+ minDate: new Date().getTime(),
|
|
|
+ formatter(type, value) {
|
|
|
+ if (type === 'year') {
|
|
|
+ return `${value}年`;
|
|
|
+ }
|
|
|
+ if (type === 'month') {
|
|
|
+ return `${value}月`;
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.btn = this.$refs.btn;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onInput(event) {
|
|
|
+ console.log(event);
|
|
|
+ this.setData({
|
|
|
+ currentDate: event.detail
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pickerShow(key = 'show') {
|
|
|
+ this[key] = true;
|
|
|
+ // wx.hideKeyboard();
|
|
|
+ },
|
|
|
+ // // 时间确认按钮
|
|
|
+ // onConfirm(event) {
|
|
|
+ // this.currentDate = event.detail;
|
|
|
+ // var timeValue = this.timeFormat(new Date(event.detail), 'yyyy-MM-dd hh:mm');
|
|
|
+ // this.form.startTime = timeValue;
|
|
|
+ // this.newShow = false;
|
|
|
+ // },
|
|
|
+ // // 时间取消按钮
|
|
|
+ // onCancel() {
|
|
|
+ // this.newShow = false;
|
|
|
+ // },
|
|
|
+ submit() {
|
|
|
+ this.$refs.form
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ let form = { ...this.form };
|
|
|
+ form.userId = this.userInfo.id;
|
|
|
+ form.status = 'PENDING';
|
|
|
+ form.org = false;
|
|
|
+ this.$http
|
|
|
+ .post('/identityAuth/apply', {
|
|
|
+ ...form
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$router.replace('/Waiting');
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.bs.value.refresh();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ afterRead(file, e) {
|
|
|
+ this.updateFile(file).then(img => {
|
|
|
+ this.form[e.name] = img;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ failed() {
|
|
|
+ console.log('验证失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.login {
|
|
|
+ padding: 10px 16px 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs {
|
|
|
+ padding-bottom: 12px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-top: 4px;
|
|
|
+ span {
|
|
|
+ &:last-child {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-cell::after {
|
|
|
+ border-bottom-color: #202122;
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ display: block;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+/deep/ .van-form {
|
|
|
+ // margin-top: 28px;
|
|
|
+ .van-cell {
|
|
|
+ padding: 0px 0;
|
|
|
+
|
|
|
+ .van-field__left-icon {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-field__body {
|
|
|
+ height: 70px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-field__label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.button {
|
|
|
+ margin-top: 60px;
|
|
|
+
|
|
|
+ .del {
|
|
|
+ margin-top: 20px;
|
|
|
+ border-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sure {
|
|
|
+ color: @bg !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-button {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sub-code {
|
|
|
+ padding-right: 0;
|
|
|
+ border-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.img {
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 0 10px;
|
|
|
+
|
|
|
+ .img-label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ margin: 5px 12px 5px 0;
|
|
|
+ min-width: 86px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.img-content {
|
|
|
+ position: relative;
|
|
|
+ /deep/.van-uploader {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ .van-uploader__upload {
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.button {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: @bg2;
|
|
|
+ padding: 6px 42px;
|
|
|
+ z-index: 20;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.img {
|
|
|
+ &.van-cell {
|
|
|
+ margin-top: 20px;
|
|
|
+ .van-field__body {
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+ .van-field__label {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
