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

<!-- 证件识别 -->
<template>
  <view>
    <!-- {{ userInfoData.customersfrz }} 判断该账号是否已经完成实名认证 -->
    <view class="realname">
      <!-- 输入您的姓名 -->
      <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" 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" disabled 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 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="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 class="cu-bar bg-white">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue" @click="renlianheshi">完成人脸核实信息</text>
            <text class="text-ABC text-blue"> </text>
          </view>
        </view>

        <view class="input_box flex">
          <view class="rlhsBtn r_flex_center" @click="handelSmsCaptcha()">
            <i-face-recognition style="margin-right: 10rpx" theme="outline" size="22" fill="#eab766" :strokeWidth="2" strokeLinejoin="bevel" strokeLinecap="square" />
            <text class="activate">{{ shibieMsg }}</text>
          </view>
        </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" v-if="false">
        <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="distinguishBox" v-if="false">
        <view>
          <text class="text-bold disLabel">姓名：</text>
          <text>刘德华</text>
        </view>
        <view>
          <text class="text-bold disLabel">民族：</text>
          <text>汉</text>
        </view>
        <view>
          <text class="text-bold disLabel">居住地：</text>
          <text>陕西省西安市</text>
        </view>
        <view>
          <text class="text-bold disLabel">身份证号：</text>
          <text>610104196511090809</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>
          <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://hnapi.kdboss.cn'
// 倒计时时长(秒)
const times = 60
export default {
  data() {
    return {
      list: ['隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'],
      // ../static/me/zjx_me_bg6.jpg
      imgUrl1: '',
      imgUrl2: '',
      imgUrl3: '',
      imgHzUrl1: '',
      imgHzUrl2: '',
      // 外籍人员 人脸
      imgUrlHuman: '',
      formData: {
        customerzjlx: '',
        customername: '',
        customerzjhm: '',
        // 手机号码
        customertel: ''
      },
      imgList: [],
      imgss: [],
      fileList: '',
      // 正在加载
      isLoading: false,
      // 图形验证码信息
      captcha: {},
      // 短信验证码发送状态
      smsState: false,
      // 倒计时
      times,
      // 手机号
      mobile: '',
      // 图形验证码
      captchaCode: '',
      // 短信验证码
      smsCode: '',
      payorderid: '',
      payordercustomerid: '',
      shibieMsg: '点击进入人脸活体验证'
    }
  },
  computed: {
    userInfoData: () => storage.get('wx_userinfo')
  },
  watch: {},
  onReady() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: (res) => {
        console.log(res.windowHeight)
      }
    })
  },
  onLoad(options) {
    const app = this
    app.payorderid = options.payorderid
    app.payordercustomerid = options.payordercustomerid
  },
  mounted() {
    let baseUrl = apiUrl + '/api/attachment/addtoPath?pagevalue=300'
    this.fileList = baseUrl
  },
  methods: {
    // 点击发送短信验证码
    handelSmsCaptcha() {
      const app = this

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

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

      app.sendSmsCaptcha()
    },
    // 人脸核实
    renlianheshi() {},
    // 请求发送短信验证码接口
    sendSmsCaptcha() {
      const app = this
      app.isLoading = true
      AppApi.getPalList()
        .then((result) => {
          // 显示发送成功
          app.$toast(result.message)
          // 执行定时器
          app.timer()
        })
        .finally(() => {
          // 显示发送成功
          app.$toast('发送成功')
          // 执行定时器
          app.timer()
          app.isLoading = false
        })
    },
    // 执行定时器
    timer() {
      const app = this
      app.smsState = true
      const inter = setInterval(() => {
        app.times = app.times - 1
        if (app.times <= 0) {
          app.smsState = false
          app.times = times
          clearInterval(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 (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
      }
      app.isLoading = true
      AppApi.bindCustomer({'customerid.value': storage.get('wx_userid'), ...app.formData})
        .then((result) => {
          console.log(result, 'result')
          // 显示操作成功
          app.$toast('实名成功')
          // 跳转回原页面
          setTimeout(() => {
            // 订单开通认证
            const param = {
              orderid: app.payorderid,
              customerid: app.payordercustomerid,
              tel: app.formData.customertel,
              smscode: app.smscode,
              //鉴权后获取的token
              token: ''
            }
            this.$navTo('pages/user/index')
          }, 1000)
        })
        .finally(() => (app.isLoading = false))
    }
  },
  onPullDownRefresh() {
    console.log('下拉')
    // 获取首页数据
    uni.stopPullDownRefresh()
  }
}
</script>

<style lang="scss" scoped>
.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;
}

.inputBtn {
  width: 260rpx;
  background-color: #eab766;
  border-radius: 10rpx;
  color: #fff;
  margin: 10rpx 0rpx 26rpx 10rpx;
  text-align: center;
  padding: 20rpx 26rpx;
  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>