xdd-uniapp-new/pkg-video/views/county-realname.vue

<template>
  <view class="realname-page">
    <view class="custom-header" :style="{ paddingTop: `${statusBarHeight}px` }">
      <view class="header-inner">
        <view class="header-back" @click="goBack">
          <text class="header-back-icon">‹</text>
        </view>
        <view class="header-title">实名认证</view>
        <view class="header-right">
          <view class="dot"></view>
          <view class="ring"></view>
        </view>
      </view>
    </view>

    <view class="page-body" :style="{ paddingTop: `calc(${statusBarHeight}px + 88rpx)` }">
      <view class="body-title">请完善以下信息</view>
      <view class="body-desc">根据平台活动规则，领取电子数码产品需要进行实名认证</view>

      <view class="form-wrap">
        <view class="form-row">
          <text class="required">*</text>
          <text class="label">真实姓名</text>
          <input v-model="form.realName" class="input" placeholder="请输入真实姓名" placeholder-style="color:#999;" />
        </view>
        <view class="form-row">
          <text class="required">*</text>
          <text class="label">身份证号</text>
          <input v-model="form.idCard" class="input" placeholder="请输入身份证号码" placeholder-style="color:#999;" />
        </view>
        <view class="form-row">
          <text class="required">*</text>
          <text class="label">手机号</text>
          <input
            v-model="form.phone"
            class="input"
            type="number"
            maxlength="11"
            placeholder="请输入手机号"
            placeholder-style="color:#999;"
          />
        </view>
      </view>
    </view>

    <view class="submit-wrap">
      <view class="submit-btn" @click="submitAuth">提交认证</view>
    </view>
  </view>
</template>

<script>
import { getDrawRealname, submitDrawRealname } from '@/api/lottery'

export default {
  name: 'CountyRealnamePage',
  data() {
    return {
      statusBarHeight: 20,
      form: {
        realName: '',
        idCard: '',
        phone: ''
      }
    }
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20
    this.fetchRealnameStatus()
  },
  methods: {
    fetchRealnameStatus() {
      getDrawRealname().then((res) => {
        const data = (res && res.data) || {}
        if (Number(data.status) === 1) {
          uni.setStorageSync('countyClaimAuthDone', 1)
          uni.showToast({
            title: data.result || '已完成实名认证',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 300)
        }
      })
    },
    goBack() {
      uni.navigateBack()
    },
    async submitAuth() {
      if (!this.form.realName) {
        uni.showToast({ title: '请输入真实姓名', icon: 'none' })
        return
      }
      if (!/^\d{15}$|^\d{17}[\dXx]$/.test(this.form.idCard)) {
        uni.showToast({ title: '请输入正确身份证号', icon: 'none' })
        return
      }
      if (!/^1\d{10}$/.test(this.form.phone)) {
        uni.showToast({ title: '请输入正确手机号', icon: 'none' })
        return
      }
      uni.showLoading({ title: '认证中...' })
      try {
        const res = await submitDrawRealname({
          realName: this.form.realName,
          idCard: this.form.idCard,
          phone: this.form.phone
        })
        const data = (res && res.data) || {}
        if (Number(data.status) !== 1) {
          uni.showToast({
            title: data.result || '认证失败，请重试',
            icon: 'none'
          })
          return
        }
        uni.setStorageSync('countyClaimAuthDone', 1)
        uni.showToast({
          title: data.result || '认证成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 350)
      } catch (e) {
        uni.showToast({
          title: (e && e.msg) || (e && e.message) || '认证失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style scoped lang="less">
.realname-page {
  min-height: 100vh;
  background: #fff;
}

.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background: #fff;
}

.header-inner {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.header-back {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-back-icon {
  font-size: 60rpx;
  color: #111;
  line-height: 1;
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: 700;
  color: #222;
}

.header-right {
  width: 88rpx;
  height: 44rpx;
  border-radius: 24rpx;
  border: 2rpx solid #d8d8d8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #111;
  margin-right: 14rpx;
}

.ring {
  width: 18rpx;
  height: 18rpx;
  border: 2rpx solid #111;
  border-radius: 50%;
}

.page-body {
  padding: 28rpx 24rpx 180rpx;
}

.body-title {
  font-size: 44rpx;
  color: #111;
  font-weight: 700;
}

.body-desc {
  margin-top: 12rpx;
  color: #666;
  font-size: 30rpx;
  line-height: 1.45;
}

.form-wrap {
  margin-top: 24rpx;
}

.form-row {
  height: 94rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #efefef;
}

.required {
  color: #c23225;
  font-size: 28rpx;
  margin-right: 4rpx;
}

.label {
  width: 150rpx;
  color: #333;
  font-size: 30rpx;
}

.input {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.submit-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
  background: #fff;
}

.submit-btn {
  height: 88rpx;
  border-radius: 44rpx;
  background: #bd3124;
  color: #fff;
  line-height: 88rpx;
  text-align: center;
  font-size: 38rpx;
  font-weight: 600;
  letter-spacing: 4rpx;
}
</style>