pay-video-applet-uniapp-24-8-22/pages_mine/mine/certifiedIndividual.vue

<template>
  <view class="certified-individual">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="上传身份证信息"/>


    <!--内容区域-->
    <view class="content">
      <view class="title">
        <view class="image">
          <image src="../static/auth/1.svg" style="width: 100%;height: 100%"></image>
        </view>
        请确保二代身份证有效,并且头像文字清晰，四角对齐,无反光，无遮挡。
      </view>
      <view class="center">
        <view class="avatarFace" @click="uploadImage('imageStraight')">
          <image v-if="certifiedIndividual.imageStraight" :src="certifiedIndividual.imageStraight"
                 style="width: 100%;height: 100%"></image>
          <image v-else src="../static/auth/4.png" style="width: 100%;height: 100%"></image>
        </view>
        <view class="reverseSide" @click="uploadImage('imageReverseSide')">
          <image v-if="certifiedIndividual.imageReverseSide" :src="certifiedIndividual.imageReverseSide"
                 style="width: 100%;height: 100%"></image>
          <image v-else src="../static/auth/5.png" style="width: 100%;height: 100%"></image>
        </view>
      </view>
    </view>

    <!--立即认证按钮-->
    <view @click="nowAuth" class="bottomBtn">
      下一步
    </view>

    <!--人脸识别服务协议-->
    <view class="agree">
      <uv-checkbox-group v-model="checkboxValue" placement="column" size="35" activeColor="#008000"
                         inactiveColor="#999999">
        <uv-checkbox shape='circle' :checked="true" name="apple" :label="labelValue ? labelValue : ''"
                     iconSize="35">
        </uv-checkbox>
      </uv-checkbox-group>
      我已阅读并同意签署 <span style="color:#009dff">《服务协议》</span>
      <span style="color:#009dff">《隐私政策》</span>
    </view>
  </view>
</template>

<script>
import {mapState} from 'vuex'

export default {
  onLoad: function (options) {
    this.type = options.type;
  },
  computed: {
    ...mapState(['certifiedIndividual']),
  },
  data() {
    return {
      checkboxValue: [],
      labelValue: '', // 如果labelValue为空，则不会显示任何内容
      type: '',
    };
  },
  methods: {
    uploadImage(key) {
      this.$Oss.ossUploadImage({
        success: url => {
			console.log(url,"url");
          this.certifiedIndividual[key] = url
        }
      })
    },
    nowAuth() {

      if(!this.certifiedIndividual.imageReverseSide){
      	return uni.showToast({
      		title: '请上传身份证背面',
      		icon: 'none'
      	})
      }
      if(!this.certifiedIndividual.imageStraight){
      	return uni.showToast({
      		title: '请上传身份证正面',
      		icon: 'none'
      	})
      }

      // uni.redirectTo({
      //   url: '/pages_mine/mine/authPerson'
      // })

      // 根据type跳转到不同页面(个人认证/企业认证)
      if (this.type == "person") {
      	uni.redirectTo({
      		url: '/pages_mine/mine/authPerson'
      	})
      	// this.$utils.navigateTo('/mine/authPerson')
      } else if (this.type == "firm") {
      	uni.redirectTo({
      		url: '/pages_mine/mine/authFirm'
      	})
      	// this.$utils.navigateTo('/mine/authFirm')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.certified-individual {
  .content {
    padding: 40rpx;

    .title {
      display: flex;
      font-size: 30rpx;

      .image {
        display: flex;
        align-items: flex-start;
        width: 10vw;
        height: 3vh;
      }
    }

    .center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 150rpx;
      margin-top: 15%;

      .avatarFace {
        width: 80vw;
        height: 20vh;
      }

      .reverseSide {
        width: 80vw;
        height: 20vh;
      }
    }
  }

  .bottomBtn {
    position: fixed;
    bottom: 15%;
    left: 25%;
    width: 50%;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 30rpx;
    color: #FFFFFF;
    text-align: center;

    //border: 1px solid red;
    background: $uni-linear-gradient-color;
    -webkit-background-clip: text;
    /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent;
    /*给文字设置成透明*/
  }

  .agree {
    position: fixed;
    bottom: 7%;
    left: 15%;
    display: flex;
    font-size: 26rpx;
    justify-content: center;
    //border: 1px solid red;
  }
}
</style>