<script setup>
  import { reactive } from 'vue'
  import CardInput from '../components/card-input.vue'

  const formData = reactive({
    // 正面
    front: '',
    // 背面
    back: '',
    // 手机号
    phone: '',
    // 身份证号码
    idCard: ''
  })
</script>

<template>
  <view class="real-id">
    <!-- 说明 -->
    <text class="top-text">*为保证您的账户安全,请先完成实名认证</text>

    <CardInput :is-input="false" title="收款码">
      <view class="qrcode-box">
        <cb-file-picker v-model="formData.front" isFront></cb-file-picker>
        <cb-file-picker v-model="formData.back" isBack></cb-file-picker>
      </view>
    </CardInput>

    <CardInput
      v-model="formData.phone"
      title="手机号"
      type="tel"
      placeholder="请输入手机号"
    ></CardInput>

    <CardInput
      v-model="formData.idCard"
      type="text"
      title="身份证号"
      placeholder="请输入身份证号"
    ></CardInput>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';

  .real-id {
    padding: 32rpx 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-style: normal;
    text-transform: none;
    .top-text {
      display: block;
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
      text-align: left;
      margin-bottom: 32rpx;
    }

    .qrcode-box {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
