oil/mobile-uniapp/pages/user/realname/index.vue

<template>
  <view class="container">

    <!-- 页面头部 -->
    <view class="header">
      <view class="title">
        <text>完善实名信息</text>
      </view>
      <view class="sub-title">
        <text>油券发放为实名制，需核验姓名与身份证号；车牌号仅用于您的加油记录。</text>
      </view>
    </view>

    <!-- 表单 -->
    <view class="submit-form">
      <!-- 姓名 -->
      <view class="form-item">
        <text class="form-item--label">姓&emsp;&emsp;名</text>
        <input class="form-item--input" type="text" v-model="realName" maxlength="20" placeholder="请输入身份证上的姓名" />
      </view>
      <!-- 身份证号 -->
      <view class="form-item">
        <text class="form-item--label">身份证号</text>
        <input
          class="form-item--input"
          type="idcard"
          v-model="idCard"
          maxlength="18"
          :disabled="idCardLocked"
          :placeholder="idCardLocked ? '已核验，不可修改' : '请输入18位身份证号'"
        />
      </view>
      <!-- 车牌号 -->
      <view class="form-item">
        <text class="form-item--label">车&ensp;牌&ensp;号</text>
        <input class="form-item--input" type="text" v-model="plateNo" maxlength="8" placeholder="如 闽A12345" />
      </view>

      <view v-if="idCardLocked" class="tips">
        <text>身份证号已用于油券发放，如需变更请联系客服。</text>
      </view>

      <!-- 保存 -->
      <view class="submit-button" :class="{ disabled: isLoading }" @click="handleSubmit()">
        <text>保存</text>
      </view>
    </view>

  </view>
</template>

<script>
  import * as UserApi from '@/api/user'

  export default {

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 姓名
        realName: '',
        // 身份证号
        idCard: '',
        // 车牌号
        plateNo: '',
        // 身份证号是否已锁定（已用于分油，不允许再改）
        idCardLocked: false,
        // 保存成功后是否返回上一页（从结算台跳过来时为 1）
        back: 0
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.back = Number(options.back || 0)
      this.getDetail()
    },

    methods: {

      // 获取已保存的实名信息
      getDetail() {
        const app = this
        app.isLoading = true
        UserApi.realname()
          .then(result => {
            const { realname } = result.data
            app.realName = realname.realName
            app.idCard = realname.idCard
            app.plateNo = realname.plateNo
            app.idCardLocked = realname.idCardLocked
          })
          .finally(() => app.isLoading = false)
      },

      // 点击保存
      handleSubmit() {
        const app = this
        if (app.isLoading || !app.formValidation()) {
          return false
        }
        app.isLoading = true
        UserApi.saveRealname({
          form: {
            realName: app.realName,
            idCard: app.idCard,
            plateNo: app.plateNo
          }
        })
          .then(result => {
            app.$toast(result.message)
            // 从结算台跳过来的：保存完回到结算台继续下单
            setTimeout(() => {
              app.back ? uni.navigateBack({ delta: 1 }) : app.getDetail()
            }, 1200)
          })
          .finally(() => app.isLoading = false)
      },

      // 表单验证
      formValidation() {
        const app = this
        const realName = (app.realName || '').trim()
        const idCard = (app.idCard || '').trim().toUpperCase()
        const plateNo = (app.plateNo || '').trim().toUpperCase()
        if (!/^[一-龥][一-龥·]{1,19}$/.test(realName)) {
          app.$toast('请填写身份证上的中文姓名')
          return false
        }
        if (!/^\d{17}[\dX]$/.test(idCard)) {
          app.$toast('身份证号格式不正确（18位）')
          return false
        }
        // 省份简称 + 城市字母(不含 I/O) + 5~7 位序号（含新能源 8 位车牌）
        if (!/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,6}$/.test(plateNo)) {
          app.$toast('车牌号格式不正确')
          return false
        }
        app.realName = realName
        app.idCard = idCard
        app.plateNo = plateNo
        return true
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 80rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 50rpx;

    .title {
      color: #191919;
      font-size: 50rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 25rpx;
      line-height: 38rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    align-items: center;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 25rpx;
    height: 96rpx;

    &--label {
      width: 180rpx;
      font-size: 28rpx;
      color: #555;
    }

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }
  }

  .tips {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #f37b1d;
    line-height: 36rpx;
  }

  // 提交按钮
  .submit-button {
    margin-top: 70rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
    font-size: 30rpx;
    border-radius: 44rpx;
    background: linear-gradient(to right, #f9211c, #ff6335);

    &.disabled {
      opacity: 0.6;
    }
  }
</style>