LandSurveyApplet/pages/investigator/Households/familyMembers.vue

<template>
  <view class="page-container">
    <!-- 页面标题 -->
    <view class="page-title">基本信息</view>

    <!-- 基本信息表单区 -->
    <view class="form-card">
      <view class="form-item">
        <text class="label">承包方姓名<text class="required">*</text></text>
        <text class="value">王战伟</text>
      </view>
      <view class="form-item">
        <text class="label">证件类型<text class="required">*</text></text>
        <text class="value">居民身份证</text>
      </view>
      <view class="form-item">
        <text class="label">证件号码<text class="required">*</text></text>
        <text class="value">430322**********1015</text>
        <text class="eye-icon">👁️</text>
      </view>
      <view class="form-item">
        <text class="label">成员性别<text class="required">*</text></text>
        <text class="value">男</text>
      </view>
      <view class="form-item">
        <text class="label">与户主关系<text class="required">*</text></text>
        <text class="value">户主</text>
      </view>
      <view class="form-item">
        <text class="label">联系电话</text>
        <text class="value">暂无</text>
      </view>
      <view class="form-item">
        <text class="label">成员备注</text>
        <text class="value">暂无</text>
      </view>
    </view>

    <!-- 图片信息区 -->
    <view class="image-card">
      <view class="image-title">
        <text>图片信息</text>
        <text class="required">*</text>
      </view>
      <view class="image-group">
		  
        <text class="image-label">证明材料</text>
        <view class="image-list">
          <!-- 身份证正面 -->
          <!-- <image 
            class="idcard-img" 
            src="/static/idcard-front.png" 
            mode="widthFix"
            @click="previewImage('/static/idcard-front.png')"
          ></image> -->
          <!-- 身份证背面 -->
          <!-- <image 
            class="idcard-img" 
            src="/static/idcard-back.png" 
            mode="widthFix"
            @click="previewImage('/static/idcard-back.png')"
          ></image> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 预览图片（uni-app原生API）
const previewImage = (url) => {
  uni.previewImage({
    current: url,
    urls: [url]
  });
};
</script>

<style scoped>
/* 页面容器 */
.page-container {
  padding: 24rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页面标题 */
.page-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 20rpx;
}

/* 表单卡片 */
.form-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

/* 表单项 */
.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.form-item:last-child {
  border-bottom: none;
}
.label {
  font-size: 28rpx;
  color: #86909c;
}
.required {
  color: #ff4d4f;
  margin-left: 4rpx;
}
.value {
  font-size: 28rpx;
  color: #1d2129;
  text-align: right;
}
.eye-icon {
  font-size: 28rpx;
  margin-left: 12rpx;
  color: #86909c;
}

/* 图片信息卡片 */
.image-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}

/* 图片标题 */
.image-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 20rpx;
}

/* 图片组 */
.image-group {
  margin-bottom: 16rpx;
}
.image-label {
  font-size: 28rpx;
  color: #86909c;
  margin-bottom: 16rpx;
  display: block;
}
.image-list {
  display: flex;
  gap: 20rpx;
}
.idcard-img {
  width: 240rpx;
  height: auto;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
}
</style>