HomeLease/pages/realNameAuthentication/realNameAuthentication.vue

<template>
  <view class="real-name-page">
    <!-- 头部区域 -->
    <custom-nav-bar :fill="false" :show-back="true" background-color="transparent" title="" />
    <view class="header">
      <image :src="realName" class="agent-background" mode="widthFix"></image>
      <view class="main-content">
        <!-- 表单卡片 -->
        <view class="form-card">
          <view class="form-title">请输入您的有效身份信息</view>

          <view class="form-row">
            <view class="row-label">姓名</view>
            <input
              :value="form.realName"
              class="row-input"
              confirm-type="done"
              placeholder="请填写姓名"
              placeholder-class="input-placeholder"
              type="text"
              @input="e => (form.realName = e.detail.value)"
            />
          </view>

          <view class="form-row">
            <view class="row-label">身份证号</view>
            <input
              :value="form.idCard"
              class="row-input"
              confirm-type="done"
              placeholder="请填写身份证号"
              placeholder-class="input-placeholder"
              type="idcard"
              @input="e => (form.idCard = e.detail.value)"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="footer">
      <button class="submit-btn" @click="handleSubmit">提交</button>
    </view>

    <!-- 主要内容区域 -->
  </view>
</template>

<script>
import { onShareAppMessage } from '@dcloudio/uni-app'

onShareAppMessage(e => {
  return {}
})

export default {
  name: 'AgentsPage',

  data() {
    return {
      realName: 'https://api.ccttiot.com/image-1757311888771.png',
      form: {
        realName: '',
        idCard: '',
      },
    }
  },
  computed: {},
  onLoad() {},
  methods: {
    // 校验：中文姓名（含·） 2-20 位
    validateName(value) {
      const nameReg = /^[\u4e00-\u9fa5·]{2,20}$/
      return nameReg.test((value || '').trim())
    },
    // 校验：二代身份证 18 位，最后一位可为 X/x
    validateIdCard(value) {
      const idReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/
      return idReg.test((value || '').trim())
    },

    // 提交实名信息
    handleSubmit() {
      if (!this.validateName(this.form.realName)) {
        return uni.showToast({ title: '请输入正确的姓名', icon: 'none' })
      }
      if (!this.validateIdCard(this.form.idCard)) {
        return uni.showToast({ title: '请输入正确的身份证号', icon: 'none' })
      }
      // TODO: 调用实名提交接口
      uni.showToast({ title: '提交成功', icon: 'success' })
    },
  },
}
</script>

<style lang="scss" scoped>
.real-name-page {
  position: relative;

  min-height: 100vh;
}

// 头部区域
.header {
  position: relative;

  .agent-background {
    position: relative;
    width: 750rpx;
  }

  .main-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    top: -240rpx;
    background: #ffffff;
    border-radius: 40rpx;
    margin: 0 30rpx;

    .form-card {
      background: #f7f7f7;
      border-radius: 24rpx;
      padding: 24rpx;

      .form-title {
        background: #efefef;
        border-radius: 16rpx;
        color: #333333;
        font-size: 28rpx;
        padding: 24rpx;
        margin-bottom: 20rpx;
        text-align: left;
      }

      .form-row {
        display: flex;
        align-items: center;
        background: #ffffff;
        border-radius: 50rpx;
        padding: 0 24rpx;
        height: 88rpx;
        margin: 20rpx 12rpx;

        .row-label {
          width: 150rpx;
          color: #666666;
          font-size: 26rpx;
        }

        .row-input {
          flex: 1;
          height: 100%;
          line-height: 88rpx;
          font-size: 28rpx;
          color: #333333;
        }

        .input-placeholder {
          color: #bdbdbd;
          font-size: 26rpx;
        }
      }
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40rpx;
  padding: 0 30rpx;

  .submit-btn {
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 100rpx;
    background: #3a8dff;
    color: #ffffff;
    font-size: 30rpx;
  }

  .submit-btn.disabled {
    background: #c7d7ff;
    color: #ffffff;
  }
}

// 主要内容区域
</style>