LandSurveyApplet/pages/map/collectively/information.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-text">{{ selected.changeReason || '请选择' }} ▽</view>
        </picker>
      </view>

      <!-- 表单项：地块编码（只读） -->
      <view class="form-item">
        <view class="label required">地块编码</view>
        <view class="read-only-text">4303810010041400004</view>
      </view>

      <!-- 表单项：地块名称（只读） -->
      <view class="form-item">
        <view class="label required">地块名称</view>
        <view class="read-only-text">桑枣村旱地</view>
      </view>

      <!-- 表单项：实测面积（只读） -->
      <view class="form-item">
        <view class="label required">实测面积</view>
        <view class="read-only-text">0.94 亩</view>
      </view>

      <!-- 表单项：所有权性质 -->
      <view class="form-item">
        <view class="label required">所有权性质</view>
        <picker class="picker" mode="selector" :range="ownershipList" @change="handlePickerChange('ownership')">
          <view class="picker-text">{{ selected.ownership || '集体土地所有权' }} ▽</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-text">{{ selected.landType || '其它集体土地' }} ▽</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-text">{{ selected.useType || '旱地' }} ▽</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-text">{{ selected.soilLevel || '一等地' }} ▽</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-text">{{ selected.landUse || '种植业' }} ▽</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-text">{{ selected.basicFarmland || '是' }} ▽</view>
        </picker>
      </view>

      <!-- 表单项：地块东至 -->
      <view class="form-item">
        <view class="label required">地块东至</view>
        <view class="read-only-text">田埂</view>
      </view>

      <!-- 表单项：地块西至 -->
      <view class="form-item">
        <view class="label required">地块西至</view>
        <view class="read-only-text">桑枣村旱地</view>
      </view>

      <!-- 表单项：地块南至 -->
      <view class="form-item">
        <view class="label required">地块南至</view>
        <view class="read-only-text">田埂</view>
      </view>

      <!-- 表单项：地块北至 -->
      <view class="form-item">
        <view class="label required">地块北至</view>
        <view class="read-only-text">桑枣村旱地</view>
      </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" placeholder="请输入" v-model="remark"></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">
          <!-- <image class="upload-icon" src="/static/upload.png" mode="widthFix"></image> -->
        </view>
      </view>
    </view>

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

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'; // 引入uni-icons组件
// 下拉选择数据源
const reasonList = ref(['变更理由1', '变更理由2', '变更理由3']);
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 remark = ref('');

// 下拉选择事件
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: (res) => {
      // 这里可处理图片上传逻辑
      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;
  border-bottom: 2rpx solid #eee;
  padding-bottom: 20rpx;
}

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

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

.picker {
  flex: 1;
  text-align: right;
}

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

.read-only-text {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #333;
}

.link-text {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #007bff;
}

.textarea {
  flex: 1;
  height: 160rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 12rpx;
  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 {
  width: 40rpx;
  height: 40rpx;
}

.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>