LandSurveyApplet/pages/task/index.vue

<template>
  <!-- 页面容器 -->
  <view class="container">
    <!-- 顶部标签栏 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', currentTab === index ? 'active' : '']"
        @click="currentTab = index"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-bar">
      <input 
        type="text" 
        placeholder="请输入承包方姓名"
        v-model="searchName"
        class="search-input"
      />
      <button class="search-btn" @click="handleSearch">搜索</button>
    </view>

    <!-- 无数据占位区域 -->
    <view class="empty-data" v-if="isDataEmpty">
      <text class="empty-text">暂无数据</text>
    </view>
  </view>
</template>

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

// 标签栏数据
const tabs = ref(['未调查', '已调查', '内业已处理']);
// 当前选中标签索引
const currentTab = ref(0);
// 搜索框绑定值
const searchName = ref('');
// 是否无数据（实际项目中根据接口返回值判断）
const isDataEmpty = ref(true);

// 搜索按钮点击事件
const handleSearch = () => {
  console.log('搜索关键词：', searchName.value);
  // 实际项目中调用接口查询数据
};
</script>

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

/* 标签栏样式 */
.tab-bar {
  display: flex;
  margin-bottom: 20rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  color: #333;
  border: 1px solid #e5e5e5;
  border-right: none;
}
.tab-item:last-child {
  border-right: 1px solid #e5e5e5;
}
.tab-item.active {
  background-color: #2c83ff;
  color: #fff;
  border-color: #2c83ff;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}
.search-input {
  flex: 1;
  height: 60rpx;
  border: 1px solid #e5e5e5;
  border-radius: 8rpx 0 0 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
.search-btn {
  width: 120rpx;
  height: 60rpx;
  background-color: #2c83ff;
  color: #fff;
  font-size: 28rpx;
  border-radius: 0 8rpx 8rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 无数据占位样式 */
.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
}
.empty-img {
  width: 200rpx;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>