LandSurveyApplet/pages/map/collectively/add.vue

<template>
  <view class="container">
    <!-- 基本信息区域 -->
      <view class="section-title">基本信息</view>
    <view class="section">
      <!-- 变更理由（下拉选择） -->
      <view class="form-item">
        <view class="label required">变更理由</view>
        <picker class="picker" mode="selector" :range="reasonList" @change="handlePickerChange('changeReason')">
          <view class="picker-content">
            <view class="picker-text">{{ selected.changeReason || '请选择' }}</view>
            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 地块名称（输入框） -->
      <view class="form-item">
        <view class="label required">地块名称</view>
        <input class="input" type="text" v-model="form.landName" placeholder="请输入" />
      </view>

      <!-- 实测面积（输入框+单位） -->
      <view class="form-item">
        <view class="label required">实测面积</view>
        <view class="input-unit-wrap">
          <input class="input" type="number" v-model="form.area" placeholder="请输入" />
          <view class="unit">亩</view>
        </view>
      </view>

      <!-- 所有权性质（下拉选择） -->
      <view class="form-item">
        <view class="label required">所有权性质</view>
        <picker class="picker" mode="selector" :range="ownershipList" @change="handlePickerChange('ownership')">
          <view class="picker-content">
            <view class="picker-text">{{ selected.ownership || '请选择' }}</view>
            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 地块类别（下拉选择） -->
      <view class="form-item">
        <view class="label required">地块类别</view>
        <picker class="picker" mode="selector" :range="landTypeList" @change="handlePickerChange('landType')">
          <view class="picker-content">
            <view class="picker-text">{{ selected.landType || '请选择' }}</view>
            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 利用类型（下拉选择） -->
      <view class="form-item">
        <view class="label required">利用类型</view>
        <picker class="picker" mode="selector" :range="useTypeList" @change="handlePickerChange('useType')">
          <view class="picker-content">
            <view class="picker-text">{{ selected.useType || '请选择' }}</view>
            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 地力等级（下拉选择） -->
      <view class="form-item">
        <view class="label required">地力等级</view>
        <picker class="picker" mode="selector" :range="soilLevelList" @change="handlePickerChange('soilLevel')">
          <view class="picker-content">
            <view class="picker-text">{{ selected.soilLevel || '请选择' }}</view>
            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 土地用途（下拉选择） -->
      <view class="form-item">
        <view class="label required">土地用途</view>
        <picker class="picker" mode="selector" :range="landUseList" @change="handlePickerChange('landUse')">
          <view class="picker-content">
            <view class="picker-text">{{ selected.landUse || '请选择' }}</view>
            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 基本农田（下拉选择） -->
      <view class="form-item">
        <view class="label required">基本农田</view>
        <picker class="picker" mode="selector" :range="basicFarmlandList" @change="handlePickerChange('basicFarmland')">
          <view class="picker-content">
            <view class="picker-text">{{ selected.basicFarmland || '请选择' }}</view>
            <uni-icons type="arrowdown" size="24" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 地块东至（输入框） -->
      <view class="form-item">
        <view class="label required">地块东至</view>
        <input class="input" type="text" v-model="form.east" placeholder="请输入" />
      </view>

      <!-- 地块西至（输入框） -->
      <view class="form-item">
        <view class="label required">地块西至</view>
        <input class="input" type="text" v-model="form.west" placeholder="请输入" />
      </view>

      <!-- 地块南至（输入框） -->
      <view class="form-item">
        <view class="label required">地块南至</view>
        <input class="input" type="text" v-model="form.south" placeholder="请输入" />
      </view>

      <!-- 地块北至（输入框） -->
      <view class="form-item">
        <view class="label required">地块北至</view>
        <input class="input" type="text" v-model="form.north" placeholder="请输入" />
      </view>

      <!-- 范围选择 -->
      <view class="form-item" @click="handleRangeSelect">
        <view class="label">范围选择</view>
        <view class="link-text">在地图上打点框选择大致范围</view>
      </view>

      <!-- 备注信息（文本域） -->
      <view class="form-item">
        <view class="label">备注信息</view>
        <textarea class="textarea" v-model="form.remark" placeholder="请输入"></textarea>
      </view>
    </view>

    <!-- 图片信息区域 -->
    <view class="section">
      <view class="section-title">图片信息</view>
      <view class="form-item">
        <view class="label">证明材料</view>
        <view class="upload-area" @click="handleUpload">
          <view class="upload-icon">+</view>
        </view>
      </view>
    </view>

    <!-- 确定按钮 -->
    <button class="confirm-btn" @click="handleConfirm">确定</button>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'; // 引入uni-icons

// 表单数据
const form = reactive({
  landName: '',
  area: '',
  east: '',
  west: '',
  south: '',
  north: '',
  remark: ''
});

// 下拉选择数据源
const reasonList = ref(['变更理由1', '变更理由2']);
const ownershipList = ref(['集体土地所有权', '国有土地所有权']);
const landTypeList = ref(['其它集体土地', '宅基地']);
const useTypeList = ref(['旱地', '水田']);
const soilLevelList = ref(['一等地', '二等地']);
const landUseList = ref(['种植业', '林业']);
const basicFarmlandList = ref(['是', '否']);

// 选中的下拉值
const selected = reactive({
  changeReason: '',
  ownership: '',
  landType: '',
  useType: '',
  soilLevel: '',
  landUse: '',
  basicFarmland: ''
});

// 下拉选择事件
const handlePickerChange = (key) => (e) => {
  const value = e.target.value;
  switch (key) {
    case 'changeReason':
      selected.changeReason = reasonList.value[value];
      break;
    case 'ownership':
      selected.ownership = ownershipList.value[value];
      break;
    case 'landType':
      selected.landType = landTypeList.value[value];
      break;
    case 'useType':
      selected.useType = useTypeList.value[value];
      break;
    case 'soilLevel':
      selected.soilLevel = soilLevelList.value[value];
      break;
    case 'landUse':
      selected.landUse = landUseList.value[value];
      break;
    case 'basicFarmland':
      selected.basicFarmland = basicFarmlandList.value[value];
      break;
  }
};

// 范围选择事件
const handleRangeSelect = () => {
  uni.showToast({ title: '跳转到地图选择页面', icon: 'none' });
};

// 上传证明材料
const handleUpload = () => {
  uni.chooseImage({
    count: 1,
    success: () => uni.showToast({ title: '选择图片成功', icon: 'success' })
  });
};

// 确定按钮事件
const handleConfirm = () => {
  // 可添加表单校验逻辑
  uni.showToast({ title: '提交成功', icon: 'success' });
};
</script>

<style scoped>
.container {
  padding: 16rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
  box-sizing: border-box;
}

.section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.label {
  width: 200rpx;
  font-size: 28rpx;
}

.required::after {
  content: '*';
  color: #ff3333;
  margin-left: 4rpx;
}

/* 输入框样式 */
.input {
  flex: 1;
  height: 60rpx;
  padding: 0 12rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 带单位的输入框容器 */
.input-unit-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}

.unit {
  margin-left: 8rpx;
  font-size: 28rpx;
  color: #666;
}

/* 下拉选择器样式 */
.picker {
  flex: 1;
  text-align: right;
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rpx;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

/* 链接文本样式 */
.link-text {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #007bff;
}

/* 文本域样式 */
.textarea {
  flex: 1;
  height: 160rpx;
  padding: 12rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 上传区域样式 */
.upload-area {
  width: 120rpx;
  height: 120rpx;
  border: 1px dashed #ccc;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  font-size: 48rpx;
  color: #999;
}

/* 确定按钮样式 */
.confirm-btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007bff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  margin: 0 auto;
  display: block;
}
</style>