HNKDBOSS-WEB/hn-shop-uniapp/pages/user/activatorder/index.vue

<!-- 证件识别 - 订单实名 -->
<template>
  <view>
    <!-- 未实名认证 -->
    <!-- <view class="realname" v-if="userInfoData.customersfrz === 0"> -->
    <view class="realname" v-if="true">
      <!-- 完成人脸核实信息 -->
      <view v-show="false" class="cu-bar bg-white" v-if="formData.customerzjlx === '中国大陆人员'">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue">完成人脸核实信息</text>
          <text class="text-ABC text-blue"> </text>
        </view>
      </view>
      <view v-show="false"  class="input_box flex" v-if="formData.customerzjlx === '中国大陆人员'">
        <view class="rlhsBtn r_flex_center" :class="{rlhsBtnTrue: shibieMsg == '人脸核实已完成'}" @click="renlianheshi()">
          <i-face-recognition
            style="margin-right: 10rpx"
            theme="outline"
            size="22"
            :fill="shibieMsg == '人脸核实已完成' ? '#4caf50' : '#eab766'"
            :strokeWidth="2"
            strokeLinejoin="bevel"
            strokeLinecap="square"
          />
          <text class="activate">{{ shibieMsg }}</text>
        </view>
      </view>

      <!-- 输入您的姓名 -->
      <view class="cu-bar bg-white qyyyzz">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue">您的身份</text>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>

      <view class="input_box">
        <u-radio-group v-model="formData.customerzjlx">
          <u-radio active-color="#eab766" name="中国大陆人员"> 中国大陆人员 </u-radio>
          <u-radio active-color="#eab766" name="港澳台/外籍人员"> 港澳台/外籍人员 </u-radio>
        </u-radio-group>
      </view>

      <view class="cu-bar bg-white qyyyzz">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue">个人信息</text>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>

      <view class="input_box">
        <input class="input" placeholder="输入手机号码" v-model="formData.customertel" />
      </view>
      <!-- <view class="input_box">
        <input class="input" :disabled="wxsmData?.Text?.ErrCode == 0" placeholder="输入证件姓名" v-model="formData.customername" />
      </view>
      <view class="input_box">
        <input class="input" :disabled="wxsmData?.Text?.ErrCode == 0" placeholder="输入证件号" v-model="formData.customerzjhm" />
      </view> -->

      <view class="input_box flex">
        <input class="input" style="flex-grow: 1; background: #fff" placeholder="填写验证码" v-model="smsCode" />
        <view class="inputBtn" @click="handelSmsCaptcha()">
          <text v-if="!smsState" class="activate">获取验证码</text>
          <text v-else class="un-activate">重新发送({{ times }})秒</text>
        </view>
      </view>

      <view class="uploadText">个人信息会在完成实名信息后自定填入，请优先完成实名信息完成</view>
      <view v-if="false">
        <!-- 身份证 -->
        <view class="cu-bar bg-white">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue">请拍摄并上传个人证件</text>
            <text class="text-ABC text-blue"> </text>
          </view>
        </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/personageidc/', 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="imgUrl2" :src="imgUrl2"></image>
            </view>
            <view
              @click="uploadImg('imgUrl2', {attmodel: 'sfz-fanmian', attpath: '/certificate/personageidc/', 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.customerzjlx === '港澳台/外籍人员-废弃'">
        <!-- 身份证 -->
        <view class="cu-bar bg-white">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue">请拍摄并上传护照或其它有效证件</text>
            <text class="text-ABC text-blue"> </text>
          </view>
        </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="imgHzUrl1" :src="imgHzUrl1"></image>
            </view>

            <view
              @click="uploadImg('imgHzUrl1', {attmodel: 'hz-zhengmian', attpath: '/certificate/personageidc/', 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="imgHzUrl2" :src="imgHzUrl2"></image>
            </view>
            <view
              @click="uploadImg('imgHzUrl2', {attmodel: 'hz-fanmian', attpath: '/certificate/personageidc/', 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">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue">请拍摄并上传人脸正面照片</text>
            <text class="text-ABC text-blue"> </text>
          </view>
        </view>

        <view class="uploadBox">
          <view style="width: 43%">
            <view class="uploadItem">
              <view class="imgBox imgExImgUrlHuman"> </view>
              <image class="imgUrl" v-if="imgUrlHuman" :src="imgUrlHuman"></image>
            </view>

            <view
              @click="uploadImg('imgUrlHuman', {attmodel: 'ple-renlian', attpath: '/certificate/personageidc/', 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>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>
      <view class="requirement">
        <view>
          <text class="text-gray">请仔细阅读并同意以下协议内容：</text>
        </view>

        <view style="padding-left: 60rpx; position: relative;" >

          <view class="input_box tyinput" >
            <u-checkbox-group>
              <u-checkbox active-color="#eab766" v-model="checked" shape="circle" label="1"></u-checkbox>
            </u-checkbox-group>
          </view>

          <text class="text-gray">我已阅读并同意</text>
          <text class="text-blue" @click="toxueyi(1)" >《信飞通用户协议》</text>、
          <text class="text-blue" @click="toxueyi(2)" >《信飞通入网协议》</text>
        </view>
      </view>

      <view class="submitBtn" @click="upFormData">提交认证并激活</view>
    </view>

    <!-- 已实名，单独绑定手机号码 -->
    <view class="realname" v-if="false">
      <view class="cu-bar bg-white qyyyzz">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue">绑定手机号码</text>
          <text class="text-ABC text-blue"></text>
        </view>
      </view>

      <view class="input_box">
        <input class="input" placeholder="输入手机号码" v-model="formData.customertel" />
      </view>

      <view class="input_box flex">
        <input class="input" style="flex-grow: 1; background: #fff" placeholder="填写验证码" v-model="smsCode" />
        <view class="inputBtn" @click="handelSmsCaptcha()">
          <text v-if="!smsState" class="activate">获取验证码</text>
          <text v-else class="un-activate">重新发送({{ times }})秒</text>
        </view>
      </view>

      <view class="submitBtn" @click="upFormNumber">激活订单</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://hnapi.kdboss.cn'
// 倒计时时长(秒)
const times = 60
export default {
  data() {
    return {
      list: ['隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'],
      // ../static/me/zjx_me_bg6.jpg
      checked: false,
      imgUrl1: '',
      imgUrl2: '',
      imgUrl3: '',
      imgHzUrl1: '',
      imgHzUrl2: '',
      // 外籍人员 人脸
      imgUrlHuman: '',
      formData: {
        customerzjlx: '中国大陆人员',
        customername: '',
        customerzjhm: '',
        // 手机号码
        customertel: ''
      },
      imgList: [],
      imgss: [],
      fileList: '',
      // 正在加载
      isLoading: false,
      // 图形验证码信息
      captcha: {},
      // 短信验证码发送状态
      smsState: false,
      // 倒计时
      times,
      inter: null,
      // 手机号
      mobile: '',
      // 图形验证码
      captchaCode: '',
      // 短信验证码
      smsCode: '',
      payorderid: '',
      payordercustomerid: '',
      wxsmtype: 0,
      wxsmData: {},
      wxsmInfo: {},
      smData: {},
      shibieMsg: '点击进入人脸活体验证'
    }
  },
  computed: {
    userInfoData: () => storage.get('wx_userinfo')
  },
  watch: {},
  onReady() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: (res) => {
        console.log(res.windowHeight)
      }
    })
  },
  onLoad(options) {
    const app = this
    // 储存订单get参数
    let querData = {
      payorderid: options.payorderid || storage.get('wxsm_query').payorderid,
      payordercustomerid: options.payordercustomerid || storage.get('wxsm_query').payordercustomerid,
      wxsmtype: options.wxsmtype || storage.get('wxsm_query').wxsmtype
    }
    storage.set('wxsm_query', querData)
    app.payorderid = querData.payorderid
    app.payordercustomerid = querData.payordercustomerid
    app.wxsmtype = querData.wxsmtype
    // 获取实名结果回调
    app.wxsmfun()
    app.wxsmInfo = storage.get('wxsm_info')
  },
  mounted() {
    let baseUrl = apiUrl + '/api/attachment/addtoPath?pagevalue=300'
    this.fileList = baseUrl
  },
  methods: {
    toxueyi(data) {
      this.$navTo('pages/user/userxieyi/index', { data })
    },
    // 点击发送短信验证码
    handelSmsCaptcha() {
      const app = this

      if (Verify.isEmpty(app.formData.customertel)) {
        this.$toast('请填写手机号码')
        return false
      }

      if (app.smsState) {
        this.$toast('请稍后再发送')
        return false
      }

      app.sendSmsCaptcha()
    },

    // 人脸核实
    renlianheshi() {
      const app = this
      let param = {
        // 商户id
        RuleId: 1,
        RedirectUrl: `${window.location.origin}?param=pages/user/activatorder/index?wxsmtype=1,shopping`
      }
      AppApi.wxHuman(param)
        .then((result) => {
          app.smData = JSON.parse(result.Data)
          storage.set('wxsm_info', app.smData)
          app.wxsmInfo = app.smData
          console.log(app.smData, result, 'result')
          // 显示发送成功
          app.$toast('进入实名...')
          window.location.href = app.smData.Url
        })
        .finally(() => {
          // 显示发送成功
        })
    },

    // 人脸核实信息
    wxsmfun() {
      const app = this
      // console.log(`${window.location.origin}?param=pages/user/activatorder/index?wxsmtype=1,shopping`)
      if (app.wxsmtype == 1) {
        app.$toast('获取实名信息中...')

        let param = {
          // 商户id
          BizToken: storage.get('wxsm_info').BizToken,
          // 指定拉取的结果信息，取值（0：全部；1：文本类；2：身份证正反面；3：视频最佳截图照片；4：视频）。 如 134表示拉取文本类、视频最佳截图照片、视频。 默认值：0
          InfoType: 0,
          RuleId: 1
        }
        AppApi.wxGetDetectInfo(param)
          .then((result) => {
            app.wxsmData = JSON.parse(JSON.parse(result.Data).DetectInfo)
            // 字段注释
            if (app.wxsmData.Text.ErrCode === 0) {
              app.$toast(app.wxsmData.Text.ErrMsg)

              app.formData.customername = app.wxsmData.Text.Name
              app.formData.customerzjhm = app.wxsmData.Text.IdCard

              app.shibieMsg = '人脸核实已完成'
            } else {
              app.$toast('人脸核身失败')
            }
            let wxApi = {
              // 文本类信息
              Text: {
                ErrCode: null, // 本次核身最终结果。0为成功
                ErrMsg: null, // 本次核身最终结果信息描述。
                IdCard: '', // 本次核身最终获得的身份证号。
                Name: '', // 本次核身最终获得的姓名。
                OcrNation: null, // ocr阶段获取的民族
                OcrAddress: null, // ocr阶段获取的地址
                OcrBirth: null, // ocr阶段获取的出生信息
                OcrAuthority: null, // ocr阶段获取的证件签发机关
                OcrValidDate: null, // ocr阶段获取的证件有效期
                OcrName: null, // ocr阶段获取的姓名
                OcrIdCard: null, // ocr阶段获取的身份证号
                OcrGender: null, // ocr阶段获取的性别
                LiveStatus: null, // 活体检测阶段的错误码。0为成功
                LiveMsg: null, // 活体检测阶段的错误信息
                Comparestatus: null, // 一比一阶段的错误码。0为成功
                Comparemsg: null, // 一比一阶段的错误信息
                Sim: null, // 比对相似度
                Location: null, // 地理位置信息
                Extra: '', // DetectAuth结果传进来的Extra信息
                Detail: {
                  // 活体一比一信息详情
                  LivenessData: [
                    {
                      ErrCode: null, // 活体比对验证错误码
                      ErrMsg: null, // 活体比对验证错误描述
                      ReqTime: null, // 活体验证时间戳
                      IdCard: null, // 验证身份证号
                      Name: null // 验证姓名
                    }
                  ]
                }
              },
              // 身份证正反面照片Base64
              IdCardData: {
                OcrFront: null,
                OcrBack: null
              },
              // 视频最佳帧截图Base64
              BestFrame: {
                BestFrame: null
              },
              // 活体视频Base64
              VideoData: {
                LivenessVideo: null
              }
            }

            console.log(app.wxsmData, 'wxsmData')
          })
          .finally(() => {
            // 显示发送成功
          })
      }
    },

    // 请求发送短信验证码接口
    sendSmsCaptcha() {
      const app = this
      app.isLoading = true
      AppApi.verifycodesmsbykt({mobile: app.formData.customertel})
        .then((result) => {
          // 显示发送成功
          app.$toast(result.message)
          // 执行定时器
          app.timer()
        })
        .finally(() => {
          // 显示发送成功
          app.$toast('发送成功')
          // 执行定时器
          app.timer()
          app.isLoading = false
        })
    },
    // 执行定时器
    timer() {
      const app = this
      app.smsState = true
      clearInterval(app.inter)
      app.inter = setInterval(() => {
        app.times = app.times - 1
        if (app.times <= 0) {
          app.smsState = false
          app.times = times
          clearInterval(app.inter)
        }
      }, 1000)
    },
    //头像上传
    uploadImg(url, formData) {
      const app = this
      // 选择图片并上传
      uni.chooseImage({
        count: 1, // 可选择图片的数量
        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: 'zhengjianhao',
              attlsh: storage.get('wx_userid')
            }, // 证件 身份证 正面
            success: function (uploadResult) {
              let res = JSON.parse(uploadResult.data)
              if (res.Status == 0) {
                app[url] = res.Data
                console.log(app[url], 'imgUrl1')
                app.$toast('上传成功')
              } else {
                app.$toast('上传失败')
              }
              // 上传成功后的处理
            },
            fail: function (error) {
              console.log('上传失败', error)
              // 上传失败后的处理
            }
          })
        }
      })
    },

    async upFormData() {
      const app = this

      if (app.checked != '1') {
        this.$toast('请阅读并同意上面的用户协议')
        return false
      }

      if (Verify.isEmpty(app.smsCode)) {
        this.$toast('验证码')
        return false
      }
      // if (Verify.isEmpty(app.imgUrl1)) {
      //   this.$toast('请上传身份证正面')
      //   return false
      // }
      // if (Verify.isEmpty(app.imgUrl2)) {
      //   this.$toast('请上传身份证反面')
      //   return false
      // }
      // if (Verify.isEmpty(app.formData.customername)) {
      //   this.$toast('请填写证件姓名')
      //   return false
      // }
      // if (Verify.isEmpty(app.formData.customerzjhm)) {
      //   this.$toast('请填写证件号')
      //   return false
      // }
      if (Verify.isEmpty(app.formData.customertel)) {
        this.$toast('请填写手机号码')
        return false
      }
      // if (app.formData.customerzjlx === '中国大陆人员' && app.shibieMsg != '人脸核实已完成') {
      //   this.$toast('请完成实名认证')
      //   return false
      // }

      app.isLoading = true
      // 订单开通认证
      const param = {
        // 基础信息
        orderid: app.payorderid,
        tel: app.formData.customertel,
        customerid: storage.get('wx_userid'),
        openid: storage.get('wx_openid'),
        biztoken: storage.get('wxsm_info').BizToken,
        smscode: app.smsCode,
        // 实名信息
        customerqym: storage.get('wx_qym') || '',
        customerzjlx: app.formData.customerzjlx || '',
        customername: app.formData.customername || '',
        customerzjhm: app.formData.customerzjhm || ''
      }

      // 激活订单
      AppApi.personrz(param)
        .then((result) => {
          console.log(result, 'result')
          // 显示操作成功
          app.$toast('订单已经激活')
          // 跳转到订单页
          setTimeout(() => {
            uni.navigateBack({
              delta: Number(1)
            })
          }, 1000)
        })
        .finally(() => (app.isLoading = false))

        // AppApi.bindCustomer({'customerid.value': storage.get('wx_userid'), ...app.formData})
        //   .then((result) => {
        //     console.log(result, 'result')
        //     // 显示操作成功
        //     app.$toast('实名成功')
        //     setTimeout(() => {
        //       // 订单开通认证
        //       const param = {
        //         orderid: app.payorderid,
        //         tel: app.formData.customertel,
        //         customerid: storage.get('wx_userid'),
        //         openid: storage.get('wx_openid'),
        //         smscode: app.smsCode
        //       }
        //       AppApi.personrz(param)

        //       this.$navTo('pages/user/index')
        //     }, 1000)
        //   })
        .finally(() => (app.isLoading = false))
    },

    async upFormNumber() {
      const app = this
      if (Verify.isEmpty(app.smsCode)) {
        this.$toast('验证码')
        return false
      }
      if (Verify.isEmpty(app.formData.customertel)) {
        this.$toast('请填写手机号码')
        return false
      }
      app.isLoading = true
      // 订单开通认证
      // 订单号 手机号 客户id
      const param = {
        orderid: app.payorderid,
        tel: app.formData.customertel,
        customerid: storage.get('wx_userid'),
        openid: storage.get('wx_openid'),
        smscode: app.smsCode
      }
      // 激活订单
      AppApi.personrz(param)
        .then((result) => {
          console.log(result, 'result')
          // 显示操作成功
          app.$toast('订单已经激活')
          // 跳转到订单页
          setTimeout(() => {
            uni.navigateBack({
              delta: Number(1)
            })
          }, 1000)
        })
        .finally(() => (app.isLoading = false))
    }
  },

  /**
   * 登录成功-跳转回原页面
   */
  onNavigateBack(delta = 1) {
    const pages = getCurrentPages()
    if (pages.length > 1) {
      uni.navigateBack({
        delta: Number(delta || 1)
      })
    } else {
      this.$navTo('pages/order/index', {
        dataType: 'comment'
      })
    }
  },

  onPullDownRefresh() {
    console.log('下拉')
    // 获取首页数据
    uni.stopPullDownRefresh()
  }
}
</script>

<style lang="scss" scoped>
.tyinput{
  position: absolute;
  left: -10px;
  top: 0px;
}
.rlhsBtn {
  width: 80%;
  background-color: #fff;
  border-radius: 10rpx;
  color: #eab766;
  margin: 10rpx 0rpx 26rpx 10rpx;
  text-align: center;
  padding: 20rpx 26rpx;
  height: auto;
  border: 1px solid #eab766;
}

.rlhsBtnTrue {
  color: #4caf50;
  background-color: #e8ffe9;
  border: 1px solid #4caf50;
}

.inputBtn {
  width: 260rpx;
  background-color: #eab766;
  border-radius: 10rpx;
  color: #fff;
  margin: 10rpx 0rpx 26rpx 10rpx;
  text-align: center;
  padding: 20rpx 6rpx;
  height: auto;
}
.realname {
  height: 100%;
  padding-bottom: 50rpx;
  font-size: 30rpx;
  background: #ffffff;
  .text-blue,
  .line-blue,
  .lines-blue {
    color: #eab766;
  }
}
.input_box {
  padding: 0 30rpx;
  .input {
    background: #eab7660a;
    border: 1rpx solid #eab766;
    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: #eab766;
    border-radius: 0 0 12rpx 12rpx;
  }

  .uploadItem {
    width: 100%;
    height: 200rpx;
    background-color: #eab7662d;
    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;
    }

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

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

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

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

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

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

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

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

    .rightbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #eab766;
      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: #eab766;
  line-height: 90rpx;
  margin: 50rpx auto;
  text-align: center;
  font-size: 34rpx;
  color: #fff;
  border-radius: 12rpx;
}
</style>