HomeLease/pages/realNameAuthentication/realNameAuthentication.vue

<template>
  <view class="page">
    <custom-nav-bar :fill="false" :show-back="true" background-color="transparent" title="" />
    <image class="bj" mode="" src="https://api.ccttiot.com/image-1757389708427.png"></image>
    <view v-if="!isReal" class="sfxx">
      <view class="tit"> 请输入您的有效身份信息</view>
      <view class="name"> 姓名 <input v-model="name" placeholder="请填写姓名" type="text" /></view>
      <view class="name">
        身份证号 <input v-model="zfzh" placeholder="请填写身份证号" type="text" />
      </view>
      <view class="" style="width: 100%; text-align: center; margin-top: 20rpx; color: #ccc">
        您当前还未完成实名认证
      </view>
    </view>
    <view v-else class="sfxx">
      <view class="tit"> 请输入您的有效身份信息</view>
      <view class="name">
        姓名 <input v-model="name" :disabled="true" placeholder="请填写姓名" type="text" />
      </view>
      <view class="name">
        身份证号 <input v-model="zfzh" :disabled="true" placeholder="请填写身份证号" type="text" />
      </view>
      <view class="" style="width: 100%; text-align: center; margin-top: 20rpx; color: #ccc">
        您当前已完成实名认证
      </view>
    </view>

    <view v-if="!isReal" class="anniu" @click="btnshiming">
      <!-- <text>进入人脸识别</text> -->
      <text>提交</text>
    </view>
    <view v-if="isRefresh" class="refresh" @click="toGetshuaxin">
      <text>刷新实名状态</text>
    </view>
    <uv-toast ref="toast"></uv-toast>
  </view>
</template>

<script>
import {
  putRealName,
  refreshRealName,
} from '../../api/realNameAuthentication/realNameAuthentication'

export default {
  data() {
    return {
      isRefresh: false,
      isReal: false,
      bgc: {
        backgroundColor: '',
      },
      name: '',
      zfzh: '',

      backData: null,
      smflag: true,
    }
  },
  onLoad(option) {
    if (option.isReal === 'true') {
      console.log('路由传入的实名', option.isReal)
      this.isReal = true
      console.log('vue挂载的实名', this.isReal)
    }
  },
  onShow() {
    // if (this.backData === true) {
    //    console.log('接收数据:', this.backData);
    //    this.getshuaxin();
    //    this.backData = null; // 重置
    //  }
    this.smflag = true
  },
  methods: {
    toGetshuaxin() {
      uni.$uv.debounce(this.getshuaxin, 500, true)
    },

    // 刷新人脸识别状态
    async getshuaxin() {
      try {
        // 显示加载Toast（30秒超时自动隐藏）
        uni.showLoading({
          title: '正在刷新实名信息',
          mask: 'true',
        })
        const res = await refreshRealName()
        uni.hideLoading()

        if (res.code === 200) {
          this.handleRefreshSuccess(res.data)
        } else {
          this.handleRefreshFail(res.msg || '人脸认证失败')
        }
      } catch (error) {
        uni.hideLoading()
        this.handleRefreshFail(error.message || '网络异常')
      }
    },

    // 处理成功响应
    handleRefreshSuccess(data) {
      if (data.pass) {
        uni.showModal({
          title: '认证成功',
          showCancel: false,
          complete: () => uni.navigateBack(),
        })
      } else {
        this.handleRefreshFail('人脸验证未通过')
      }
    },

    // 统一处理失败
    handleRefreshFail(message) {
      // uni.showModal({
      //   title: '提示',
      //   content: message,
      //   showCancel: false,
      //   // complete: () => uni.navigateBack(),
      // })
    },

    // 点击进行实名认证
    btnshiming() {
      if (this.smflag === true) {
        this.smflag = false
        let data = {
          userName: this.name,
          idCard: this.zfzh,
        }
        console.log('身份信息', data)
        putRealName(data)
          .then(res => {
            if (res.code === 200) {
              let https = encodeURIComponent(res.data.jumpUrl)
              this.backData = true
              uni.navigateTo({
                url: '/page_user/facialRecognition/facialRecognition?https=' + https,
              })
              this.isRefresh = true
            }
            // else if (res.code === 500 && res.msg === null) {
            //   uni.showToast({
            //     title: '已提交，请等待系统反馈',
            //     icon: 'none',
            //     duration: 2000,
            //   })
            //   this.smflag = true
            // } else {
            //   uni.showToast({
            //     title: res.msg,
            //     icon: 'none',
            //     duration: 2000,
            //   })
            //   this.smflag = true
            // }
          })
          .catch(error => {
            if (error.code === 500 && error === null) {
              uni.showToast({ title: '已提交，请等待系统反馈', icon: 'none' })
            } else {
              uni.showToast({ title: error || '系统错误', icon: 'none' })
              console.log('@@@@@@@@', error)
            }
            this.smflag = true
          })
      }

      // this.$u.put(`/app/realName/realName`,data).then(res =>{ //人脸
      // 	if(res.code === 200){
      // 		let https = encodeURIComponent(res.data.jumpUrl)
      // 		this.backData = true
      // 		uni.navigateTo({
      // 			url:'/page_fenbao/renlian?https=' + https
      // 		})
      // 	}else{
      // 		uni.showToast({
      // 			title: res.msg,
      // 			icon: 'none',
      // 			duration: 2000
      // 		})
      // 	}
      // })
    },
  },
}
</script>

<style lang="scss">
.anniu {
  width: 750rpx;
  height: 174rpx;
  background: #ffffff;
  box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  line-height: 174rpx;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;

  text {
    display: inline-block;
    width: 682rpx;
    height: 84rpx;
    background: #f15a04;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    text-align: center;
    line-height: 84rpx;
    font-weight: 600;
    font-size: 36rpx;
    color: #ffffff;
  }
}

.refresh {
  width: 250rpx;
  height: 174rpx;

  line-height: 174rpx;
  text-align: center;
  padding: 0 250rpx;

  text {
    display: inline-block;
    width: 250rpx;
    height: 84rpx;
    background: #f15a04;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    text-align: center;
    line-height: 84rpx;
    font-weight: 600;
    font-size: 36rpx;
    color: #ffffff;
  }
}

.sfxx {
  width: 676rpx;
  height: 480rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: auto;
  margin-top: 460rpx;
  border-radius: 30rpx;

  .name {
    width: 624rpx;
    height: 92rpx;
    margin: auto;
    background: #efefef;
    border-radius: 46rpx 46rpx 46rpx 46rpx;
    margin-top: 46rpx;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #3d3d3d;
    padding-left: 40rpx;
    box-sizing: border-box;
    justify-content: space-between;

    input {
      width: 430rpx;
      padding-right: 20rpx;
      box-sizing: border-box;
    }
  }

  .tit {
    width: 676rpx;
    height: 118rpx;
    background: #efefef;
    font-weight: 600;
    font-size: 36rpx;
    color: #3d3d3d;
    line-height: 118rpx;
    padding-left: 38rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
  }
}

.bj {
  width: 750rpx;
  height: 696rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>