pay-video-applet-uniapp-24-8-22/pages/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/image/auth/1.svg" style="width: 100%;height: 100%"></image>
        </view>
        请确保二代身份证有效,并且头像文字清晰，四角对齐,无反光，无遮挡。
      </view>
      <view class="center">
        <view class="avatarFace">
          <image src="/static/image/auth/2.png" style="width: 100%;height: 100%"></image>
        </view>
        <view class="reverseSide">
          <image src="/static/image/auth/2.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>
    </view>
  </view>
</template>

<script>
export default {
  onLoad: function (options) {
    console.log(options,"options")
    // 获取传递过来的 id 参数
    this.type = options.type;
    console.log('this.type :', this.type);
    // 进行后续处理...
  },
  data() {
    return {
      checkboxValue: '香蕉',
      labelValue: '', // 如果labelValue为空，则不会显示任何内容
      type: '',
    };
  },
  methods: {
    nowAuth() {
      if (this.type=="person"){
        this.$utils.navigateTo('/mine/authPerson')
      }else if (this.type=="firm"){
        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%;
    display: flex;
    padding-left: 20rpx;
    //border: 1px solid red;
  }
}
</style>