Bit_Wise_World/src/views/user/BasicVerify.vue

<template>
  <div class="page-container">
    <header class="nav-bar sticky-nav">
      <div class="left" @click="$router.back()">
        <div>
          <VanIcon size="19" name="arrow-left"/>
        </div>
      </div>
      <div class="title">基础认证</div>
      <div class="right"></div>
    </header>

    <div class="form-content">

      <div class="form-row-double">
        <div class="form-col">
          <label>法定名</label>
          <input type="text" placeholder="名" v-model="form.firstName" />
        </div>
        <div class="form-col">
          <label>法定姓</label>
          <input type="text" placeholder="姓" v-model="form.lastName" />
        </div>
      </div>

      <div class="form-item">
        <label>证件类型</label>
        <div class="input-box select-mode">
          <span>{{ form.idType || '身份证' }}</span>
          <div>
          <VanIcon size="15" name="arrow-down"/>
        </div>
<!--          <span class="arrow">▼</span>-->
        </div>
      </div>

      <div class="form-item">
        <label>证件号码</label>
        <input type="text" placeholder="请输入证件号码" v-model="form.idNumber" />
      </div>

      <div class="form-item">
        <label>所在地区</label>
        <div class="input-box select-mode">
          <span :class="{ placeholder: !form.region }">{{ form.region || '请选择' }}</span>
          <VanIcon size="15" name="arrow-down"/>
        </div>
      </div>

      <div class="form-item">
        <label>详细地址</label>
        <textarea
          placeholder="请输入"
          v-model="form.address"
          rows="3"
        ></textarea>
      </div>

      <div class="upload-section">
        <h3 class="section-title">上传证件照</h3>
        <p class="section-desc">确保件照清晰可见</p>

        <div class="upload-card">
          <div class="card-content">
            <p class="card-tip">确保件照清晰可见</p>
            <h4 class="card-title">身份证人像面</h4>
            <div class="upload-btn">
              上传 <span class="upload-icon">↑</span>
            </div>
          </div>
        </div>

        <div class="upload-card">
          <div class="card-content">
            <p class="card-tip">确保件照清晰可见</p>
            <h4 class="card-title">身份证国徽面</h4>
            <div class="upload-btn">
              上传 <span class="upload-icon">↑</span>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-note">
        <p>支持小于8M的JPG、JPEG或PNG格式的图片</p>
        <p>上传您身份证件的完整照片，</p>
        <p>请确保上传图片中的所有细节都清晰可见</p>
        <p>请确保证件为原件并在有效期内</p>
        <p>请将证件置于纯色背景下</p>
      </div>

    </div>

    <div class="bottom-action">
      <button class="btn-submit" @click="handleSubmit">提交</button>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import {Icon as VanIcon } from "vant";

const router = useRouter();

const form = reactive({
  firstName: '',
  lastName: '',
  idType: '身份证',
  idNumber: '',
  region: '',
  address: ''
});

const handleSubmit = () => {
  console.log('提交表单', form);
  // 这里写提交逻辑
  // router.push('/success');
};
</script>

<style scoped>
/* 全局容器 */
.page-container {
  width: 100%;
  max-width: 375px;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 80px; /* 给底部按钮留位置 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}
.sticky-nav { position: sticky; top: 0; z-index: 100; }
.title { font-size: 17px; font-weight: 600; color: #333; }
.icon-back { font-size: 20px; color: #333; cursor: pointer; }
.right { width: 20px; }

/* 表单内容区 */
.form-content {
  padding: 20px 16px;
}

/* 通用 Input 样式 */
input, textarea, .input-box {
  width: 100%;
  background-color: #F7F8FA; /* 极淡的灰色背景 */
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  outline: none;
}
textarea { resize: none; }
input::placeholder, textarea::placeholder { color: #C2C2C2; }

/* Label 样式 */
label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 姓名左右分栏 */
.form-row-double {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.form-col { flex: 1; }

/* 单个表单项 */
.form-item { margin-bottom: 20px; }

/* 模拟 Select 下拉框 */
.input-box.select-mode {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrow { font-size: 12px; color: #999; transform: scale(0.8); }
.placeholder { color: #C2C2C2; }

/* 上传区域 */
.upload-section { margin-top: 30px; margin-bottom: 20px; }
.section-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.section-desc { font-size: 12px; color: #999; margin-bottom: 16px; }

.upload-card {
  background-color: #F7F8FA;
  border-radius: 8px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  text-align: center;
}
.card-tip { font-size: 12px; color: #999; margin-bottom: 6px; }
.card-title { font-size: 16px; font-weight: 600; color: #333; margin: 0 0 16px 0; }

/* 上传按钮 */
.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #EA3F54;
  color: #fff;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}
.upload-icon { margin-left: 4px; font-weight: bold; }

/* 底部说明 */
.footer-note {
  font-size: 12px;
  color: #999;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 底部固定按钮 */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 16px 20px 16px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
}
.btn-submit {
  width: 100%;
  height: 44px;
  background-color: #EA3F54;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 600;
}
</style>