yl-gzh/pages/searchState/searchState.vue

<template>
  <view class="page-bg">
    <view class="container">
      <uni-forms ref="formRef" :model="form" :rules="rules" validateTrigger="blur" label-position="top" label-width="100px">
        <uni-forms-item label="身份证号码" name="lrZjhm" required>
          <uni-easyinput type="text" v-model="form.lrZjhm" placeholder="请输入身份证号码" />
        </uni-forms-item>
      </uni-forms>
      <button class="green-btn" @click="submitForm">查询</button>

      <uni-card title="查询结果" extra="" :class="{'search-result':true,'isShow':msg}">
        <text class="uni-body">{{msg}}</text>
      </uni-card>
    </view>
  </view>
</template>

<script>
  import { getState } from '@/api/kh.js'
  import { showConfirm, toast } from '@/common/common.js'

  const idNumReg = (/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)

  export default {
    data() {
      return {
        btnLoad: false,
        form: {
          lrZjhm: '', //222327196011300057
        },
        oldIdNum: '',
        msg: '',
        rules: {
          lrZjhm: {
            rules: [
              { required: true, errorMessage: '身份证号码不能为空' },
              {
                validateFunction: function(rule, value, data, callback) {
                  if (!idNumReg.test(value)) {
                    callback('身份证号格式不正确')
                  }
                }
              }
            ]
          },
        }
      }
    },
    watch: {
      'form.lrZjhm': {
        handler(newVal) {
          if (!newVal) {
            this.msg = ''
          }
        }
      }
    },
    methods: {
      submitForm() {
        this.$refs.formRef.validate().then(form => {
          uni.showLoading({
            title: '查询中...',
            mask: true,
          })
          // 重复查询不请求
          if (form.lrZjhm !== this.oldIdNum) {
            this.msg = ''
            getState(this.form).then(res => {
              if (res.code !== 200) return
              const { data } = res
              // lzzt 0 审核通过须人脸激活 8待审核，9 被拒绝
              if (!data) {
                showConfirm('您查询的身份证号码不存在，请确认证件号码是否正确！')
                return
              }
              uni.hideLoading()
              switch (data.lzzt) {
                case '0':
                  this.msg = '您查询的人员信息审核已通过，请尽快进行刷脸激活操作！'
                  break;
                case '8':
                  this.msg = '您查询的人员信息正在审核中，请再耐心等待一下~'
                  break;
                case '9':
                  this.msg = '您查询的人员信息审核被拒绝了，拒绝原因是：' + data.lrSpyj
                  break;
                default:
                  this.msg = '您查询的人员信息审核已经通过啦~'
                  break;
              }
            }).finally(() => {
              uni.hideLoading()
              this.oldIdNum = form.lrZjhm
            })
          } else {
            uni.hideLoading()
            toast('请勿重复查询!')
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page-bg {
    height: 100vh;
    overflow: hidden;
    background-image: linear-gradient(to top, #68b7e7 0%, #ffffff 100%);
    animation: fadeIn 1s linear;
  }

  .container {
    padding: 10px;
  }

  ::v-deep .uni-forms {
    width: 80%;
    margin: 20% auto 0;
  }

  .green-btn {
    width: 30%;
    line-height: 2;
    background: #28d87d;
    // background: #00c4f3;
    border-radius: 5px;
    color: white;
    margin: 20px auto 50px;
    position: relative;
  }

  ::v-deep .search-result {
    position: relative;
    top: 20vh;
    opacity: 0;
    visibility: hidden;
    transition: all .8s;

    &.isShow {
      top: 0;
      opacity: 1;
      visibility: inherit;
    }
  }
</style>