HNKDBOSS-WEB/hn-website/pages/activationcode/index.vue

<!-- 证件识别 -->
<template>
  <view class="activationcode">
    <!-- 头部 -->
    <view class="atco_header">
      <view class="r_flex_align">
        <view class="gs-logo-box r_flex_center">
          <image class="gs-logo" src="/static/background/gs-logo.png" style="width: 100%; height: 78%; background: #fff"></image>
        </view>
        <view class="r_margin_10"> 信飞通 </view>
      </view>

      <view class="">
        <text v-if="!actTrueKey">完成以下认证即可激活本产品</text>
        <text v-if="actTrueKey">您已经完成激活认证</text>
      </view>

      <i-dolphin :strokeWidth="1" class="settingt" theme="outline" size="100" fill="#fff" strokeLinejoin="bevel" strokeLinecap="square" />
    </view>

    <!-- 表单 -->
    <view class="atco_content">
      <!-- 未激活激活逻辑 -->
      <view class="realname" v-if="!actTrueKey">
        <!-- 完成人脸核实信息 -->
        <view v-if="false" 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 v-if="false" class="input_box flex">
          <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' : '#7c68fe'"
              :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="#7c68fe" name="中国大陆人员"> 中国大陆人员 </u-radio>
            <u-radio active-color="#7c68fe" 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="输入路由器MAC码" v-model="formData.mac" />
        </view>
        <view class="input_box">
          <input class="input" placeholder="输入手机号码" v-model="formData.customertel" />
        </view>
        <!-- <view class="input_box">
          <input class="input" placeholder="输入证件姓名" v-model="formData.customername" />
        </view>
        <view class="input_box">
          <input class="input" 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="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="#7c68fe" 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 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="submitBtn" @click="upFormData">提交认证并激活</view> -->
      </view>

      <!-- 已经激活 -->
      <view class="realname actCenter" v-if="actTrueKey">
        <view style="margin-bottom: 20px"> 您已经激活了路由器，信飞通已为您开通了上网权限（如才完成激活操作，请稍等1-3分钟上网） </view>
        <u-cell-group>
          <u-cell-item title="MAC" :arrow="false">{{ hyhezInfo.routerboxmac }}</u-cell-item>
          <u-cell-item title="绑定手机号码" :arrow="false">{{ hyhezInfo.routerboxtel }}</u-cell-item>
          <!-- <u-cell-item title="激活状态" :arrow="false">{{ hyhezInfo.routerboxsfjh }}</u-cell-item> -->
          <u-cell-item title="激活时间" :arrow="false">{{ hyhezInfo.routerboxjhdate }}</u-cell-item>
          <u-cell-item title="上网套餐" :arrow="false">{{ hyhezInfo.routerboxproductname }}</u-cell-item>
          <u-cell-item title="点击续约" @click="onXuyu" :arrow="true">{{ hyhezInfo.routerboxproductname }}</u-cell-item>
        </u-cell-group>
      </view>

      <!-- 激活按钮 -->
      <div class="actView">
        <view class="actBottom" @click="onSubmitEvent" :class="[actTrueKey ? '' : 'act-true']">
          <text style="position: relative; z-index: 9">{{ actTrueKey ? '已激活' : '激活' }}</text>
        </view>
      </div>
    </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'
import StoreModel from '@/common/model/Store'

const apiUrl = 'https://hnapi.kdboss.cn'
// 倒计时时长(秒)
const times = 60
export default {
  data() {
    return {
      checked: false,
      list: ['隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'],
      // ../static/me/zjx_me_bg6.jpg
      imgUrl1: '',
      imgUrl2: '',
      imgUrl3: '',
      imgHzUrl1: '',
      imgHzUrl2: '',
      // 外籍人员 人脸
      imgUrlHuman: '',
      formData: {
        customerzjlx: '',
        customername: '',
        customerzjhm: '',
        // 手机号码
        customertel: '',
        mac: ''
      },
      imgList: [],
      imgss: [],
      fileList: '',
      // 正在加载
      isLoading: false,
      // 图形验证码信息
      captcha: {},
      // 短信验证码发送状态
      smsState: false,
      // 倒计时
      times,
      inter: null,
      // 手机号
      mobile: '',
      // 图形验证码
      captchaCode: '',
      // 短信验证码
      smsCode: '',
      payorderid: '',
      payordercustomerid: '',
      shibieMsg: '点击进入人脸活体验证',
      wx_userid: storage.get('wx_userid'),
      wx_openid: storage.get('wx_openid'),
      actTrueKey: false,
      hyhezInfo: {},
      wxsmtype: 0,
      wxsmData: {},
      wxsmInfo: {},
      smData: {}
    }
  },
  computed: {
    userInfoData: () => storage.get('wx_userinfo')
  },
  watch: {},
  onReady() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: (res) => {
        // console.log(res.windowHeight)
      }
    })
  },
  onLoad(options) {
    const app = this
    // StoreModel.getCustomerData()
    // app.onPullDownRefresh()
    app.wxsmtype = options.wxsmtype
    // 获取实名结果回调
    app.wxsmfun()
    app.wxsmInfo = storage.get('wxsm_lyq_info')

    // 更新user信息 更新客户信息
    app.upUserLyq()
  },
  mounted() {
    let baseUrl = apiUrl + '/api/attachment/addtoPath?pagevalue=300'
    this.fileList = baseUrl
  },
  methods: {
    // 人脸核实
    renlianheshi() {
      const app = this
      let param = {
        // 商户id
        RuleId: 1,
        RedirectUrl: `${window.location.origin}?param=pages/activationcode/index?wxsmtype=1,activation`
      }
      AppApi.wxHuman(param)
        .then((result) => {
          app.smData = JSON.parse(result.Data)
          storage.set('wxsm_lyq_info', app.smData)
          app.wxsmInfo = app.smData
          // 显示发送成功
          app.$toast('进入实名...')
          window.location.href = app.smData.Url
        })
        .finally(() => {
          // 显示发送成功
        })
    },

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

        let param = {
          // 商户id
          BizToken: storage.get('wxsm_lyq_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(() => {
            // 显示发送成功
          })
      }
    },

    // 点击发送短信验证码
    handelSmsCaptcha() {
      const app = this

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

      if (Verify.isEmpty(app.formData.mac)) {
        this.$toast('请填写设备MAC码')
        return false
      }

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

      app.sendSmsCaptcha()
    },

    // 请求发送短信验证码接口
    sendSmsCaptcha() {
      const app = this
      app.isLoading = true
      AppApi.verifycodesmsbylyq({mobile: app.formData.customertel, mac: app.formData.mac})
        .then((result) => {
          // 显示发送成功
          app.$toast(result.message)
          // 执行定时器
          app.timer()
        })
        .finally(() => {
          // 显示发送成功
          app.$toast('发送成功')
          // 执行定时器
          app.timer()
          app.isLoading = false
        })
    },
    // 执行定时器
    timer() {
      const app = this
      app.smsState = true
      app.inter = setInterval(() => {
        app.times = app.times - 1
        if (app.times <= 0) {
          app.smsState = false
          app.times = times
          clearInterval(app.inter)
        }
      }, 1000)
    },

    onXuyu() {
      this.$toast('暂未开通')
    },

    //头像上传
    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 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))
    },
    toxueyi(data) {
      this.$navTo('pages/user/userxieyi/index', { data })
    },
    // 确认提交事件
    onSubmitEvent() {
      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
      let platform = {
        tel: app.formData.customertel,
        smscode: app.smsCode,
        customerid: storage.get('wx_userid'),
        openid: storage.get('wx_openid'),
        biztoken: storage.get('wxsm_lyq_info').BizToken,
        // mac码
        routerboxmac: app.formData.mac,
        // 证件类型
        routerboxzjlx: app.formData.customerzjlx,
        // 证件号
        routerboxzjhm: app.formData.customerzjhm,
        // 激活人姓名
        routerboxxm: app.formData.customername,
        // 手机号
        routerboxtel: app.formData.customertel
      }
      AppApi.activationlyq(platform)
        .then(async (res) => {
          console.log(res, 'res')
          app.actTrueKey = true
          // 显示操作成功
          app.$toast('激活成功')
          // 更新user信息 更新客户信息
          await upUserLyq()
        })
        .finally(() => (app.isLoading = false))
    },

    // 更新用户信息
    async upUserLyq() {
      const app = this
      // console.log('更新客户信息')
      // 更新user信息 更新客户信息
      await StoreModel.getCustomerData()
      // 更新状态
      app.hyhezInfo = storage.get('wx_yhinfo')[0]
      if (storage.get('wx_yhinfo')[0]) {
        app.actTrueKey = !!app.hyhezInfo.yhinfoboxid
      }
    }
  },

  /**
   * 登录成功-跳转回原页面
   */
  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;
}

.activationcode {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  overflow: auto;
  font-size: 40rpx;
  background-image: linear-gradient(300deg, #b721ff 0%, #21d4fd 100%);
  .settingt {
    position: absolute;
    right: 0rpx;
    top: 20rpx;
    color: #007aec5e;
  }
  .actBottom {
    margin: 70rpx auto 20rpx;
    margin-bottom: 70rpx;
    font-size: 50rpx;
    color: #007aec;
    text-align: center;
    display: block;
    width: 200rpx;
    height: 200rpx;
    line-height: 200rpx;
    border-radius: 50%;
    background: linear-gradient(145deg, #c5f4ff, #a6cde6);
    box-shadow: 7px 7px 14px #007aecbd, -7px -7px 14px #a6cde686;
    border: 1px solid #fff;
  }
  .act-true {
    color: #333;
    background: linear-gradient(145deg, #dddddd, #bababa);
    box-shadow: 7px 7px 14px #7a7a7a, -7px -7px 14px #ffffff;
  }
}

.actCenter {
  padding: 40rpx;
}

.actView {
}

.atco_header {
  color: #fff;
  text-align: left;
  padding: 40rpx 80rpx;
  font-weight: 500;
  line-height: 70rpx;
}

.atco_content {
  position: relative;
  background: #fff;
  border-top-left-radius: 100rpx;
  border-top-right-radius: 100rpx;
  padding: 18rpx 10rpx;
  flex-grow: 1;
  font-size: 30rpx;
  overflow: auto;
  .atco_title {
    padding-left: 20rpx;
    color: #000;
  }
}

.rlhsBtn {
  width: 80%;
  background-color: #fff;
  border-radius: 10rpx;
  color: #7c68fe;
  margin: 10rpx 0rpx 26rpx 10rpx;
  text-align: center;
  padding: 20rpx 26rpx;
  height: auto;
  border: 1px solid #7c68fe;
}

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

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

  .uploadItem {
    width: 100%;
    height: 200rpx;
    background-color: #eee;
    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: #7c68fe;
      position: absolute;
      left: 0;
    }

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

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

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

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

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

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

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