HNKDBOSS-WEB/hn-shop-uniapp/pages/firm/authentication/index.vue

<!-- 证件识别 -->
<template>
  <view>
    <view class="container">
      <!-- 输入统一社会信用代码/组织机构代码 -->
      <view class="cu-bar bg-white qyyyzz">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue text-shadow">统一社会信用代码/组织机构代码</text>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>
      <view class="input_box">
        <input class="input" placeholder="企业名称" v-model="formData.agentsname" />
        <input class="input" placeholder="输入统一社会信用代码/组织机构代码" v-model="formData.agentstaxnumber" />
      </view>

      <!-- 企业营业执照 -->
      <view class="cu-bar bg-white qyyyzz">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue text-shadow">请拍摄并上传企业营业执照</text>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>

      <view class="uploadBox r_flex_center">
        <view style="width: 43%">
          <view class="uploadItem qyyyzz_uploadItem">
            <view class="imgBox imgEx3">
              <view class="leftTop"></view>
              <view class="leftTop2"></view>
              <view class="leftbottom"></view>
              <view class="leftbottom2"></view>
              <view class="rightTop"></view>
              <view class="rightTop2"></view>
              <view class="rightbottom"></view>
              <view class="rightbottom2"></view>
            </view>
            <image class="imgUrl" v-if="imgUrl3" :src="imgUrl3"></image>
          </view>
          <view @click="uploadImg('imgUrl3', {attmodel: 'business-yyzz', attpath: '/certificate/business/', attother2: '营业执照'})" class="leftBtn text-white text-lg text-center"
            >上传照片</view
          >
        </view>
      </view>

      <view class="uploadText">请提供证件的原件照片或彩色扫描件，文字/盖章清晰可辨认。图片格式要求PNG、JPG、BMP、TIFF、WebP，不超过5M。</view>

      <!-- 输入您的姓名 -->
      <view class="cu-bar bg-white qyyyzz">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue text-shadow">法定代表人认证</text>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>

      <view class="input_box">
        您的身份：
        <u-radio-group v-model="formData.agentssf">
          <u-radio name="法人"> 法人 </u-radio>
          <u-radio name="经办人"> 经办人 </u-radio>
        </u-radio-group>
      </view>

      <view v-if="formData.agentssf == '法人'">
        <view class="input_box">
          <input class="input" placeholder="输入法定代表人姓名" v-model="formData.agentfddbrname" />
        </view>
        <view class="input_box">
          <input class="input" placeholder="输入法定代表人证件号" v-model="formData.agentfddbrzjcode" />
        </view>

        <view class="cu-bar bg-white">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue text-shadow">请拍摄并上传法定代表人证件</text>
            <text class="text-ABC text-blue"></text>
          </view>
        </view>
        <view class="input_box">
          证件类型：
          <u-radio-group v-model="formData.agentfddbrzjlx">
            <u-radio name="身份证"> 身份证 </u-radio>
          </u-radio-group>
        </view>
        <view class="uploadBox">
          <view style="width: 43%">
            <view class="uploadItem">
              <view class="imgBox imgEx1">
                <view class="leftTop"></view>
                <view class="leftTop2"></view>
                <view class="leftbottom"></view>
                <view class="leftbottom2"></view>
                <view class="rightTop"></view>
                <view class="rightTop2"></view>
                <view class="rightbottom"></view>
                <view class="rightbottom2"></view>
              </view>
              <image class="imgUrl" v-if="imgUrl1" :src="imgUrl1"></image>
            </view>

            <view
              @click="uploadImg('imgUrl1', {attmodel: 'sfz-zhengmian', attpath: '/certificate/dlsPersonageidc/', attother2: '法人证件正面'})"
              class="leftBtn text-white text-lg text-center"
              >上传正面</view
            >
          </view>

          <view style="width: 43%">
            <view class="uploadItem">
              <view class="imgBox imgEx2">
                <view class="leftTop"></view>
                <view class="leftTop2"></view>
                <view class="leftbottom"></view>
                <view class="leftbottom2"></view>
                <view class="rightTop"></view>
                <view class="rightTop2"></view>
                <view class="rightbottom"></view>
                <view class="rightbottom2"></view>
              </view>
              <image class="imgUrl" :src="imgUrl2"></image>
            </view>
            <view
              @click="uploadImg('imgUrl2', {attmodel: 'sfz-fanmian', attpath: '/certificate/dlsPersonageidc/', attother2: '法人证件反面'})"
              class="leftBtn text-white text-lg text-center"
              >上传反面</view
            >
          </view>
        </view>
        <view class="uploadText">图片格式要求PNG、JPG、BMP、TIFF、WebP，不超过5M</view>
      </view>

      <view v-if="formData.agentssf == '经办人'">
        <view class="input_box">
          <input class="input" placeholder="输入经办人姓名" v-model="formData.agentfddbrname" />
        </view>
        <view class="input_box">
          <input class="input" placeholder="输入经办人证件号" v-model="formData.agentfddbrzjcode" />
        </view>

        <!-- 请上传授权书 -->
        <view class="cu-bar bg-white">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue text-shadow">请上传授权书</text>
            <text class="text-ABC text-blue"></text>
          </view>
        </view>

        <view class="input_box flex">
          <input class="input" disabled style="flex-grow: 1; background: #fff" placeholder="请上传授权书" v-model="authorization" />
          <view class="inputBtn" @click="uploadImg('authorization', {attmodel: 'business-sqs', attpath: '/certificate/authorization/', attother2: '授权书'})">点击上传</view>
        </view>
        <view class="uploadText">请提供证明的电子原件（包括不限于介绍信、授权书），电子签名/电子盖章清晰可辨认。文档格式要求.docx、.dot、.wps、.pdf不超过5M。</view>

        <view class="cu-bar bg-white">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue text-shadow">请拍摄并上传经办人证件</text>
            <text class="text-ABC text-blue"></text>
          </view>
        </view>
        <view class="input_box">
          证件类型：
          <u-radio-group v-model="formData.agentfddbrzjlx">
            <u-radio name="身份证"> 身份证 </u-radio>
          </u-radio-group>
        </view>
        <view class="uploadBox">
          <view style="width: 43%">
            <view class="uploadItem">
              <view class="imgBox imgEx1">
                <view class="leftTop"></view>
                <view class="leftTop2"></view>
                <view class="leftbottom"></view>
                <view class="leftbottom2"></view>
                <view class="rightTop"></view>
                <view class="rightTop2"></view>
                <view class="rightbottom"></view>
                <view class="rightbottom2"></view>
              </view>
              <image class="imgUrl" v-if="imgjbr1" :src="imgjbr1"></image>
            </view>

            <view
              @click="uploadImg('imgjbr1', {attmodel: 'sfz-jbr-zhengmian', attpath: '/certificate/dlsPersonageidc/', attother2: '经办人证件正面'})"
              class="leftBtn text-white text-lg text-center"
              >上传正面</view
            >
          </view>

          <view style="width: 43%">
            <view class="uploadItem">
              <view class="imgBox imgEx2">
                <view class="leftTop"></view>
                <view class="leftTop2"></view>
                <view class="leftbottom"></view>
                <view class="leftbottom2"></view>
                <view class="rightTop"></view>
                <view class="rightTop2"></view>
                <view class="rightbottom"></view>
                <view class="rightbottom2"></view>
              </view>
              <image class="imgUrl" v-if="imgjbr2" :src="imgjbr2"></image>
            </view>
            <view
              @click="uploadImg('imgjbr2', {attmodel: 'sfz-jbr-fanmian', attpath: '/certificate/dlsPersonageidc/', attother2: '经办人证件反面'})"
              class="leftBtn text-white text-lg text-center"
              >上传反面</view
            >
          </view>
        </view>
        <view class="uploadText">图片格式要求PNG、JPG、BMP、TIFF、WebP，不超过5M</view>
      </view>

      <view class="cu-bar bg-white margin-top">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue text-shadow">拍摄要求须知</text>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>

      <view class="requirement">
        <view>
          <text class="text-gray">请上传大陆公民持有的本人有效身份证；</text>
        </view>
        <view>
          <text class="text-gray">拍摄时确保身份证</text>
          <text class="text-red">边框完整，</text>
          <text class="text-red">字体清晰，</text>
          <text class="text-red">亮度均匀；</text>
        </view>

        <view class="errorBox">
          <view class="item1">
            <image class="iconImg" src="/static/discern/ok.png" mode="widthFix"></image>
          </view>
          <view class="item2">
            <image class="iconImg" src="/static/discern/no.png" mode="widthFix"></image>
          </view>
          <view class="item3">
            <image class="iconImg" src="/static/discern/no.png" mode="widthFix"></image>
          </view>
          <view class="item4">
            <image class="iconImg" src="/static/discern/no.png" mode="widthFix"></image>
          </view>
        </view>
      </view>




      <view class="submitBtn" @click="upFormData">提交认证</view>
    </view>
  </view>
</template>

<script>
import * as AppApi from '@/api/app'
import request from '@/utils/request'
import storage from '@/utils/storage'
import * as Verify from '@/utils/verify'

const apiUrl = 'https://api.hninpop.com'

export default {
  data() {
    return {
      checked: false,
      list: ['隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'],
      // ../static/me/zjx_me_bg6.jpg
      imgUrl1: '',
      imgUrl2: '',
      imgUrl3: '',
      imgjbr1: '',
      imgjbr2: '',
      formData: {
        agentstaxnumber: '',
        agentssf: '法人',
        agentfddbrname: '',
        agentfddbrzjcode: '',
        agentsname: '',
        agentfddbrzjlx: '身份证',
        agentsqurl: ''
      },
      imgList: [],
      imgss: [],
      fileList: '',
      authorizationText: '',
      authorization: ''
    }
  },
  watch: {},
  onReady() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: (res) => {
        console.log(res.windowHeight)
      }
    })
  },
  mounted() {
    let baseUrl = apiUrl + '/api/attachment/addtoPath?pagevalue=300'
    this.fileList = baseUrl
    if (storage.get('wx_dlsinfo')) {
      this.formData.agentsname = storage.get('wx_dlsinfo').agentsname
    }
  },
  methods: {
    //头像上传
    uploadImg(url, formData) {
      const app = this
      // 选择图片并上传
      uni.chooseImage({
        count: 1, // 可选择图片的数量
        extension: ['.docx', '.dot', '.wps', '.pdf'],
        success: function (chooseResult) {
          var tempFilePaths = chooseResult.tempFilePaths
          // 上传图片
          let baseUrl = apiUrl + '/api/attachment/addtoPath?pagevalue=300'
          uni.uploadFile({
            url: baseUrl, // 上传图片的服务器接口
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              ...formData,
              attother1: 'dlszhengjianhao',
              attlsh: storage.get('wx_dlsinfo').agentsid
            },
            success: function (uploadResult) {
              let res = JSON.parse(uploadResult.data)
              if (res.Status == 0) {
                app[url] = res.Data
                // if (url === 'authorization') {
                //   app.authorizationText = '授权书'
                // }
                console.log(app[url], 'imgUrl1')
                app.$toast('上传成功')
              } else {
                app.$toast('上传失败')
              }
              // 上传成功后的处理
            },
            fail: function (error) {
              console.log('上传失败', error)
              // 上传失败后的处理
            }
          })
        }
      })
    },

    async upFormData() {
      const app = this

      if (Verify.isEmpty(app.formData.agentstaxnumber)) {
        this.$toast('请填写统一社会信用代码')
        return false
      }
      if (!app.formData.agentssf) {
        this.$toast('请选择身份')
        return false
      }
      if (Verify.isEmpty(app.formData.agentfddbrname)) {
        this.$toast('请填写法定代表人姓名')
        return false
      }
      if (Verify.isEmpty(app.formData.agentfddbrzjcode)) {
        this.$toast('请输入法定人证件号')
        return false
      }
      if (Verify.isEmpty(app.formData.agentsname)) {
        this.$toast('请输入企业名称')
        return false
      }
      if (app.formData.agentssf == '经办人' && !app.authorization) {
        this.$toast('请上传授权书')
        return false
      }
      app.formData.agentsqurl = app.authorization

      const params = {
        'agentsid.value': storage.get('wx_qyid'),
        ...app.formData
      }
      const Data = await AppApi.upDlsMsg(params)
      console.log(Data, 'Data')
      if (Data.Status == 0) {
        app.$toast('认证成功')
        setTimeout(() => {
          this.$navTo('pages/firm/home/index')
        }, 1000)
      }
    }
  },
  onPullDownRefresh() {
    console.log('下拉')
    // 获取首页数据
    uni.stopPullDownRefresh()
  }
}
</script>

<style lang="scss" scoped>

.inputBtn {
  width: 200rpx;
  background-color: #007aec;
  border-radius: 10rpx;
  color: #fff;
  margin: 10rpx 0rpx 26rpx 10rpx;
  text-align: center;
  padding: 20rpx 26rpx;
  height: auto;
}
.container {
  height: 100%;
  padding-bottom: 50rpx;
  background: #ffffff;
  font-size: 30rpx;
}
.input_box {
  padding: 0 30rpx;
  .input {
    background: #007aec0a;
    border: 1rpx solid #007aec;
    border-radius: 10rpx;
    margin: 10rpx 0rpx 26rpx;
    padding: 20rpx 26rpx;
    height: auto;
  }
}
.uploadText {
  color: #aaaaaa;
  font-size: 22rpx;
  padding: 0rpx 30rpx 26rpx;
  background: #ffffff;
}
.uploadBox {
  padding: 15rpx 80rpx 40rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;

  .leftBtn {
    width: 100%;
    height: 75rpx;
    line-height: 75rpx;
    background-color: #007aec;
    border-radius: 0 0 12rpx 12rpx;
  }

  .uploadItem {
    width: 100%;
    height: 200rpx;
    background-color: #f1f7ff;
    border-radius: 15rpx;
    padding: 30rpx;
    position: relative;

    .imgUrl {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .imgBox {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .imgEx1 {
      background: url('/static/discern/ex1.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .imgEx2 {
      background: url('/static/discern/ex2.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .imgEx3 {
      background: url('/static/background/wendang.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .leftTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      left: 0;
    }

    .leftTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      top: 0;
    }

    .leftbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .leftbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .rightTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
    }

    .rightTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      top: 0;
    }

    .rightbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .rightbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }

  .qyyyzz_uploadItem {
    height: 255rpx;
  }
}

.distinguishBox {
  padding: 5rpx 30rpx 20rpx;
  background: white;

  view {
    margin-bottom: 20rpx;
  }
}

.disLabel {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
  min-width: 142rpx;
  display: inline-block;
  margin-right: 5rpx;
}

.requirement {
  padding: 10rpx 30rpx 26rpx;
  background: white;

  view {
    margin-bottom: 10rpx;
  }

  .errorBox {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;

    view {
      width: 23%;
      height: 100rpx;
    }

    .item1 {
      background-image: url('/static/discern/yes.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .item2 {
      background-image: url('/static/discern/error1.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .item3 {
      background-image: url('/static/discern/error2.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .item4 {
      background-image: url('/static/discern/error3.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .iconImg {
      width: 60rpx;
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -30rpx;
    }
  }
}

.submitBtn {
  width: 90%;
  height: 90rpx;
  background: #007aec;
  line-height: 90rpx;
  margin: 50rpx auto;
  text-align: center;
  font-size: 34rpx;
  color: #fff;
  border-radius: 12rpx;
}
</style>