LandSurveyApplet/pages/map/collectively/index.vue

<template>
  <view class="container">
    <!-- 统计信息 -->
    <view class="count-tip">共计 6 条</view>

    <!-- 地块列表 -->
    <view class="list-item" v-for="(item, index) in landList" :key="index">
      <!-- 地块编号+名称+面积 -->
      <view class="item-header">
        <text class="item-code">{{ item.code }}</text>
        <text class="item-name">{{ item.name }}</text>
        <text class="item-area">{{ item.area }}亩</text>
        <!-- 地块位置按钮 -->
        <text class="location-btn" @click="handleLocation(item)">地块位置</text>
      </view>

      <!-- 四至信息 -->
      <view class="boundary-row" @click="handleDetail(item)">
        <text class="boundary-label">地块东至：{{ item.east }}</text>
        <text class="boundary-label">地块西至：{{ item.west }}</text>
      </view>
      <view class="boundary-row">
        <text class="boundary-label">地块南至：{{ item.south }}</text>
        <text class="boundary-label">地块北至：{{ item.north }}</text>
      </view>

      <!-- 箭头按钮 -->
      <view class="arrow-btn">＞</view>
    </view>

    <!-- 新增按钮 -->
    <button class="add-btn" @click="handleAdd">新增</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 模拟地块数据
const landList = ref([
  {
    code: '00006',
    name: '桑枣村水田',
    area: '1.73',
    east: '田埂',
    west: '桑枣村水田',
    south: '桑枣村水田',
    north: '田埂'
  },
  {
    code: '00005',
    name: '桑枣村水田',
    area: '2.19',
    east: '桑枣村水田',
    west: '田埂',
    south: '田埂',
    north: '桑枣村水田'
  },
  {
    code: '00004',
    name: '桑枣村旱地',
    area: '0.94',
    east: '田埂',
    west: '桑枣村旱地',
    south: '田埂',
    north: '桑枣村旱地'
  },
  {
    code: '00003',
    name: '桑枣村旱地',
    area: '5.37',
    east: '桑枣村旱地',
    west: '桑枣村旱地',
    south: '桑枣村旱地',
    north: '桑枣村旱地'
  },
  {
    code: '00002',
    name: '桑枣村旱地',
    area: '1.78',
    east: '桑枣村旱地',
    west: '田埂',
    south: '桑枣村旱地',
    north: '田埂'
  },
  {
    code: '00001',
    name: '桑枣村旱地',
    area: '1.39',
    east: '田埂',
    west: '田埂',
    south: '田埂',
    north: '田埂'
  }
]);

// 地块位置点击事件
const handleLocation = (item) => {
  uni.navigateTo({
    url: `/pages/map/map`
  });
};

// 详情箭头点击事件
const handleDetail = (item) => {
	console.log(item)
  uni.navigateTo({
    url: `/pages/map/collectively/information?landInfo=${encodeURIComponent(JSON.stringify(item))}`
  });
};

// 新增按钮点击事件
const handleAdd = () => {
  uni.navigateTo({
    url: '/pages/map/collectively/add'
  });
};
</script>

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

.count-tip {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.list-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  position: relative;
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.item-code {
  color: #007bff;
  font-size: 28rpx;
  margin-right: 8rpx;
}
.item-name {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.item-area {
  font-size: 28rpx;
  color: #666;
}
.location-btn {
  color: #007bff;
  font-size: 28rpx;
  margin-left: auto;
}

.boundary-row {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.boundary-label{
	margin-right: 100rpx;
}

.arrow-btn {
  position: absolute;
  right: 20rpx;
  bottom: 40rpx;
  font-size: 32rpx;
  color: #999;
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  white-space: nowrap;
}
</style>