OpenPlatForm/pages/domain/control/registration/from.vue

<template>
  <div class="from-box">
    <div class="from-title">实名认证</div>
    <div class="head-content">
      <p class="content-p">开发者实名认证信息资料填写规范如下：</p>
      <div class="content-div">
        1. 保证所填写的全部信息真实且与实际信息对应，否则出示驳回意见。<br />
        2.与入件资质相关字段填写正确，特别的：企业名称、注册地址、统一社会信用代码、营业期限、法人代表人姓名、证件号码、证件有效期要与上传的证件照片保持一致，否则出示驳回意见。<br />
        3. 相关资质上传要求如下，如若不符，出示驳回意见。<br />
        【1】图片清晰且边框完整；<br />
        【2】提供资质附件如为复印件，须加盖公章。<br />
      </div>
      <img class="jinggao" src="@/static/icons/svg/jinggao.svg" alt="" />
    </div>

    <div style="margin-top: 28px">
      <el-form
        label-position="top"
        :model="realForm"
        :rules="rules"
        ref="realForm"
        label-width="100px"
        class="demo-ruleForm"
        inline
      >
        <el-form-item label="公司/个人标识" prop="mark">
          <el-radio-group v-model="realForm.mark">
            <el-radio label="公司"></el-radio>
            <el-radio label="个人"></el-radio>
          </el-radio-group>
          <div class="p-div">
            公司认证能够获得更多功能和权限，建议进行公司认证
          </div>
        </el-form-item>
        <el-form-item label="境内/境外标识" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="境内"></el-radio>
            <el-radio label="境外"></el-radio>
          </el-radio-group>
          <div class="p-div">暂不支持境外</div>
        </el-form-item>
        <!-- 个人资料填写 -->
        <transition name="el-fade-in">
          <div v-show="realForm.mark === '个人'" class="transition-box">
            <el-form-item label="联系地址" prop="region">
              <el-cascader :props="AddressProps" v-model="realForm.address1" placeholder="请选择您的联系地址"></el-cascader>
            </el-form-item>

            <el-form-item style="padding-top: 40px" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入您的详细地址，以便有需要时给您寄送书面文件"
              ></el-input>
            </el-form-item>

            <el-form-item label="联系人姓名" required>
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系人证件类型" prop="region">
              <el-select placeholder="请选择证件类型" v-model="ruleForm.name">
                <el-option
                  v-for="(item, index) in certificate"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="联系人证件号码" required>
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="证件有效期" required>
              <div class="picker-box">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date1"
                  ></el-date-picker>
                </el-form-item>

                <div class="line" :span="2" style="margin-right: 10px">至</div>

                <el-form-item prop="date2">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date2"
                  ></el-date-picker>
                </el-form-item>
                <div>
                  <el-checkbox v-model="checked">长期</el-checkbox>
                </div>
              </div>

              <div class="p-div1" style="float: left">
                请仔细核对，需与证件上的时间一致
              </div>
            </el-form-item>
          </div>
        </transition>
        <!-- 企业资料填写 -->

        <transition name="el-fade-in">
          <div v-show="realForm.mark === '公司'" class="transition-box">
            <el-form-item label="企业登记类型" prop="mark">
              <el-radio-group v-model="realForm.enterprise">
                <el-radio label="企业三证"></el-radio>
                <el-radio label="三证合一"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="
                realForm.enterprise === '企业三证'
                  ? '营业执照注册号'
                  : '统一社会信用代码'
              "
              required
            >
              <el-input
                v-model="ruleForm.name"
                :placeholder="
                  realForm.enterprise === '企业三证'
                    ? '请输入营业执照上的注册号'
                    : '请输入营业执照上的统一社会信用代码并逐字核对'
                "
              ></el-input>
            </el-form-item>

            <el-form-item label="企业地址" prop="region">
              <el-cascader :props="AddressProps" v-model="realForm.address2" placeholder="请选择省/市/区"></el-cascader>
            </el-form-item>

            <el-form-item style="padding-top: 40px" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入营业执照上的公司地址并逐字核对"
              ></el-input>
            </el-form-item>

            <el-form-item label="企业名称" required>
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入营业执照上的企业名称并逐字核对"
              ></el-input>
            </el-form-item>

            <el-form-item label="企业简称" required>
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入企业简称"
              ></el-input>
            </el-form-item>

            <el-form-item label="营业执照" required
              ><el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                ></i> </el-upload
            ></el-form-item>

            <el-form-item label="营业执照示例">
              <div class="avatar-uploader">
                <img src="@/static/img/zhizhao.png" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="营业期限" required>
              <div class="picker-box">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date1"
                  ></el-date-picker>
                </el-form-item>
                <div class="line" :span="2" style="margin-right: 10px">至</div>
                <el-form-item prop="date2">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="ruleForm.date2"
                  ></el-date-picker>
                </el-form-item>
                <div>
                  <el-checkbox v-model="checked">长期</el-checkbox>
                </div>
              </div>
              <div class="p-div1" style="float: left">
                请仔细核对，需与营业执照上的时间一致
              </div>
            </el-form-item>
            <transition name="el-fade-in">
              <!-- 企业三证 -->
              <el-form-item
                label="组织机构代码"
                required
                v-show="realForm.enterprise === '企业三证'"
              >
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入9位组织机构代码"
                ></el-input>
              </el-form-item>
            </transition>
            <transition name="el-fade-in">
              <div v-show="realForm.enterprise === '企业三证'">
                <el-form-item label="组织机构代码证" required
                  ><el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i
                      v-else
                      class="el-icon-plus avatar-uploader-icon"
                    ></i> </el-upload
                ></el-form-item>
                <el-form-item label="营业期限" required>
                  <div class="picker-box">
                    <el-form-item prop="date1">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date1"
                      ></el-date-picker>
                    </el-form-item>

                    <div class="line" :span="2" style="margin-right: 10px">
                      至
                    </div>

                    <el-form-item prop="date2">
                      <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="ruleForm.date2"
                      ></el-date-picker>
                    </el-form-item>
                    <div>
                      <el-checkbox v-model="checked">长期</el-checkbox>
                    </div>
                  </div>
                  <div class="p-div1" style="float: left">
                    请仔细核对，需与营业执照上的时间一致
                  </div>
                </el-form-item>
              </div>
            </transition>

            <div>
              <el-form-item label="法人/实际控制人姓名" required>
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="法人/实际控制人证件类型" prop="region">
                <el-select placeholder="请选择证件类型" v-model="ruleForm.name">
                  <el-option
                    v-for="(item, index) in certificate"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="请输入证件上的号码并确认核对" required>
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>

              <el-form-item label="证件有效期" required>
                <div class="picker-box">
                  <el-form-item prop="date1">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.date1"
                    ></el-date-picker>
                  </el-form-item>

                  <div class="line" :span="2" style="margin-right: 10px">
                    至
                  </div>

                  <el-form-item prop="date2">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.date2"
                    ></el-date-picker>
                  </el-form-item>
                  <div>
                    <el-checkbox v-model="checked">长期</el-checkbox>
                  </div>
                </div>
                <div class="p-div1" style="float: left">
                  请仔细核对，需与营业执照上的时间一致
                </div>
              </el-form-item>
            </div>
          </div>
        </transition>

        <div class="upload-box">
          <el-form-item label="证件照正面" required
            ><el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i> </el-upload
          ></el-form-item>

          <el-form-item label="证件照正面" required
            ><el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i> </el-upload
          ></el-form-item>

          <el-form-item label="证件照正面" required
            ><el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i> </el-upload
          ></el-form-item>
          <el-form-item label="证件照正面示例">
            <img src="@/static/img/zhengmian.png" alt="" />
          </el-form-item>
          <el-form-item label="证件照背面示例">
            <img src="@/static/img/fanmian.png" alt="" />
          </el-form-item>
          <el-form-item label="手持证件照示例">
            <img src="@/static/img/shouchi.png" alt="" />
          </el-form-item>
        </div>
        <div class="replenish">
          <el-form-item label="补充信息">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">上传文件</div>
              <div class="el-upload__tip" slot="tip">
                请仔细核对，需a请上传认证审核的补充文件
                必须为彩色图片（文档请截图后上传），最多5张，单张小于2M，格式为bmp、png、jpeg、jpg或gif证件上的时间一致
              </div>
            </el-upload>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="网站ICP备案号">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入网站经营许可证编号"
            ></el-input>
          </el-form-item>

          <el-form-item label="公司网站">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入公司地址。以http(s)://开头"
            ></el-input>
          </el-form-item>
          <el-form-item label="常用联系人姓名" required>
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入联系人姓名用于平台相关事宜通知"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系人手机号码" required>
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入联系人手机号码用于接受相关事宜"
            ></el-input>
          </el-form-item>
          <el-form-item label="客服电话" required>
            <el-input
              v-model="ruleForm.name"
              placeholder="接收通知，若应用上架应用市场会对外展示"
            ></el-input>
          </el-form-item>
        </div>

        <div class="agreement-bar">
          <el-checkbox v-model="checked">我已阅读</el-checkbox
          ><span>《智莺支付开户及服务协议》</span
          ><span>《智莺支付隐私政策》</span
          ><span>《智莺开放平台服务协议》</span>
        </div>

        <div class="button-box">
          <el-button>返回</el-button>

          <el-button type="primary" @click="onSubmit('realForm')"
            >提交</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { districtList } from "@/api/webServiceDistrict";

export default {
  meta: { title: "实名认证" },
  data() {
    return {
      options: [], // 地址
      certificate: [
        // 证件
        {
          name: "居民身份证",
          id: "1",
        },
        {
          name: "临时身份证",
          id: "2",
        },
        {
          name: "军官证",
          id: "3",
        },
        {
          name: "武警警官证",
          id: "4",
        },
        {
          name: "士兵证",
          id: "5",
        },
        {
          name: "军队学员证",
          id: "6",
        },
        {
          name: "军队文职干部证",
          id: "7",
        },
        {
          name: "军队离退休干部证",
          id: "8",
        },
        {
          name: "军队职工证",
          id: "9",
        },
        {
          name: "护照",
          id: "10",
        },
        {
          name: "港澳同胞回乡证",
          id: "11",
        },
        {
          name: "港澳居民来往内地通行证",
          id: "12",
        },
        {
          name: "中华人民共和国来往港澳通行证",
          id: "13",
        },
        {
          name: "外国人居留证",
          id: "14",
        },
        {
          name: "外国人出入境证",
          id: "15",
        },
        {
          name: "外交官证",
          id: "16",
        },
        {
          name: "领事馆证",
          id: "17",
        },
        {
          name: "海员证",
          id: "18",
        },
      ],
      AddressProps: {
        // 异步加载地区名称
        lazy: true,
        async lazyLoad(node, resolve) {
        const { level } = node;
          if (level === 0) {
            let nodes = await districtList();
            nodes.forEach((element) => {
              element.label = element.name || element.fullname;
              element.leaf = level >= 2;
              element.value = element.id;
            });
            resolve(nodes);
          } else {
            let nodes = await districtList(node.data.id);
            nodes.forEach((element) => {
              element.label = element.name || element.fullname;
              element.leaf = level >= 2;
              element.value = element.id;
            });
            resolve(nodes);
          }
        },
      },
      checked: false,
      imageUrl: "",
      realForm: {
        mark: "个人",
        enterprise: "企业三证",
        address1: null,
      },
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],

        mark: [
          {
            required: true,
            message: "请选择实名认证标识： 公司/个人标识",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    handleAvatarSuccess: function () {},
    beforeAvatarUpload: function () {},
    // 表单提交
    onSubmit: function (formName) {
      console.log(this.realForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.from-box {
  padding: 20px 20px 40px 20px;

  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 14px;
  .from-title {
    color: #333333;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    border-left: 4px solid #1890ff;
    padding-left: 10px;
  }
  .head-content {
    background: #fffcec;
    border: 1px solid #feeebb;
    padding: 12px 124px 12px 12px;
    position: relative;
    margin-top: 28px;
    box-sizing: border-box;
    .content-p {
      color: #6a3904;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      padding-bottom: 5px;
    }
    .content-div {
      color: #a07d49;
      font-size: 12px;
      line-height: 18px;
    }
    .jinggao {
      position: absolute;
      width: 115px;
      height: 115px;
      right: -1px;
      bottom: -2px;
    }
  }
}

.el-form-item {
  width: 48%;
}

.replenish {
  .el-form-item {
    width: 100%;
  }
}

.p-div {
  color: #999999;
  font-size: 12px;
  line-height: 12px;
  margin-top: 9px;
  height: 12px;
}
.p-div1 {
  color: #999999;
  font-size: 12px;
  line-height: 12px;
  height: 12px;
}

.el-cascader,
.el-select {
  width: 100%;
}

.upload-box {
  .el-form-item {
    width: 31.8%;
  }
  .el-form-item__content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 170px;
  }
}

.picker-box {
  display: flex;
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
  line-height: 40px;
  color: #999999;
  font-size: 14px;
  .el-input__inner {
    width: 92%;
  }
  .line {
    width: 30px;
    text-align: center;
  }
}
.agreement-bar {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #333333;

  span {
    color: #1890ff;
    cursor: pointer;
  }
}

.button-box {
  text-align: center;
  margin-top: 20px;
}
</style>