nongxiaoyu/pages/activity/index.vue

<template>
  <view class="activity-container">
    <view class="fixed-content">
      <!-- 顶部地块信息卡片 -->
      <view class="plot-info-card">
        <view class="plot-header">
          <text class="plot-name">{{ plotData.name }}</text>
          <text class="plot-area">{{ plotData.area }}亩</text>
        </view>
        <view class="plot-details">
          <view class="plot-item">
            <text class="item-label">作物：</text>
            <text class="item-value">{{ plotData.crop }}</text>
          </view>
          <view class="plot-item">
            <text class="item-label">负责人：</text>
            <text class="item-value">{{ plotData.manager }}</text>
          </view>
        </view>
      </view>

      <!-- 任务状态筛选 -->
      <view class="tab-filter">
        <view class="tab-container">
            <view 
              class="tab-item" 
              v-for="(status, index) in taskStatus" 
              :key="index"
              :class="{ active: currentStatus === status.value }"
              @click="switchStatus(status.value)"
            >
              <text>{{ status.label }}</text>
              <view class="badge" v-if="status.value === 'pending' && pendingTaskCount > 0">
                {{ pendingTaskCount > 99 ? '99+' : pendingTaskCount }}
              </view>
              <view class="active-line" v-if="currentStatus === status.value"></view>
            </view>
          </view>
      </view>
    </view>

    <!-- 任务列表 - 可滚动区域 -->
    <scroll-view class="task-list-scroll" scroll-y 
      @scrolltolower="loadMore" 
      @refresherrefresh="refreshData" 
      refresher-enabled
      :refresher-triggered="isRefreshing">
      <view class="task-list">
        <view class="task-card" v-for="(task, index) in taskList" :key="index" @click="viewTaskDetail(task)">
          <!-- 头部区域：任务名称和状态标签 -->
          <view class="task-header">
            <view class="task-name">{{ task.name }}</view>
            <view class="task-status" :class="{ 'status-completed': task.status === 'completed' }">
              {{ task.status === 'pending' ? '待完成' : '已完成' }}
            </view>
          </view>
          
          <!-- 信息行：类型、时间、责任人统一放在一行，类型在前 -->
          <view class="task-info-row">
            <!-- 类型标签放在最左侧 -->
            <view class="info-type">
              <image src="/static/icons/task_icon.png" mode="aspectFit" class="info-icon"></image>
              <text class="info-text">{{ task.type }}</text>
            </view>
            
            <!-- 时间信息放在中间 -->
            <view class="info-time">
              <image src="/static/icons/clock_icon.png" mode="aspectFit" class="info-icon"></image>
              <text class="info-text">{{ task.executeTime }}</text>
            </view>
            
            <!-- 责任人信息放在右侧 -->
            <view class="info-person">
              <image src="/static/icons/user.png" mode="aspectFit" class="info-icon"></image>
              <text class="info-text">{{ task.assignee }}</text>
            </view>
          </view>
          
          <!-- 备注区域 -->
          <view class="task-remark" v-if="task.remark" @click.stop="toggleRemark(index)">
            <text class="remark-label">备注：</text>
            <text class="remark-content" :class="{'remark-expanded': task.remarkExpanded}">{{ task.remark }}</text>
            <text class="expand-btn" v-if="task.remark.length > 50 && !task.remarkExpanded">展开</text>
            <text class="expand-btn" v-if="task.remarkExpanded">收起</text>
          </view>
        </view>
        
        <view class="loading-more" v-if="isLoading">
          <view class="loading-icon"></view>
          <text>加载中...</text>
        </view>
        <view class="no-more-data" v-if="noMoreData && taskList.length > 0">
          <text>没有更多数据了</text>
        </view>
        <view class="empty-list" v-if="taskList.length === 0 && !isLoading">
          <image src="/static/icons/warning_icon.png" mode="aspectFit"></image>
          <text>暂无农事任务</text>
        </view>
      </view>
    </scroll-view>

    <!-- 新增任务按钮 -->
    <view class="add-task-button" @click="createNewTask">
      <image src="/static/icons/add_task.png" mode="aspectFit" class="add-icon"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 地块数据
      plotData: {
        id: 1,
        name: '东区水稻田',
        area: '128',
        crop: '水稻',
        manager: '张农夫'
      },

      // 待完成任务数
      pendingTaskCount: 5,

      // 当前筛选状态
      currentStatus: 'all',

      // 筛选相关数据
      taskStatus: [
        { label: '全部', value: 'all' },
        { label: '待完成', value: 'pending' },
        { label: '已完成', value: 'completed' }
      ],
      
      // 任务列表数据
      taskList: [],
      isLoading: false,
      isRefreshing: false,
      noMoreData: false,
      page: 1,
      pageSize: 10,

      // 模拟任务数据
      mockTasks: [
        {
          id: 1,
          name: '水稻田施肥',
          type: '施肥',
          status: 'pending',
          executeTime: '2023-06-15',
          assignee: '李明',
          remark: '使用复合肥，每亩用量20kg',
          remarkExpanded: false
        },
        {
          id: 2,
          name: '病虫害防治喷药',
          type: '喷药',
          status: 'completed',
          executeTime: '2023-06-10',
          assignee: '王强',
          remark: '使用杀虫剂，注意安全防护',
          remarkExpanded: false
        },
        {
          id: 3,
          name: '早稻收割',
          type: '采摘',
          status: 'pending',
          executeTime: '2023-06-20',
          assignee: '张农夫',
          remark: '天气晴好时进行',
          remarkExpanded: false
        },
        {
          id: 4,
          name: '水渠疏通',
          type: '灌溉',
          status: 'pending',
          executeTime: '2023-06-12',
          assignee: '周华',
          remark: '',
          remarkExpanded: false
        },
        {
          id: 5,
          name: '田间除草',
          type: '除草',
          status: 'pending',
          executeTime: '2023-06-18',
          assignee: '刘艳',
          remark: '使用除草剂，避开雨天',
          remarkExpanded: false
        }
      ]
    }
  },
  
  components: {
    // No longer needed as we're using standard image icons
  },
  
  methods: {
    // 根据任务类型返回颜色
    getTypeColor(type, mode = 'bg') {
      const colors = {
        '施肥': {
          bg: 'linear-gradient(135deg, rgba(59, 180, 74, 0.8), rgba(59, 180, 74, 0.6))',
          text: '#3BB44A'
        },
        '喷药': {
          bg: 'linear-gradient(135deg, rgba(255, 82, 82, 0.8), rgba(255, 82, 82, 0.6))',
          text: '#FF5252'
        },
        '灌溉': {
          bg: 'linear-gradient(135deg, rgba(64, 158, 255, 0.8), rgba(64, 158, 255, 0.6))',
          text: '#409EFF'
        },
        '采摘': {
          bg: 'linear-gradient(135deg, rgba(250, 173, 20, 0.8), rgba(250, 173, 20, 0.6))',
          text: '#FAAD14'
        },
        '播种': {
          bg: 'linear-gradient(135deg, rgba(121, 85, 72, 0.8), rgba(121, 85, 72, 0.6))',
          text: '#795548'
        },
        '除草': {
          bg: 'linear-gradient(135deg, rgba(156, 39, 176, 0.8), rgba(156, 39, 176, 0.6))',
          text: '#9C27B0'
        }
      };
      
      const defaultColor = {
        bg: 'linear-gradient(135deg, rgba(158, 158, 158, 0.8), rgba(158, 158, 158, 0.6))',
        text: '#909399'
      };
      
      return (colors[type] || defaultColor)[mode];
    },

    // 切换任务状态筛选
    switchStatus(status) {
      if (this.currentStatus === status) return;
      
      this.currentStatus = status;
      this.page = 1;
      this.noMoreData = false;
      this.loadTaskData();
    },
    
    // 加载任务数据
    loadTaskData() {
      this.isLoading = true;
      
      // 模拟API请求延迟
      setTimeout(() => {
        // 模拟筛选
        let filteredTasks = [...this.mockTasks];
        
        // 按状态筛选
        if (this.currentStatus !== 'all') {
          filteredTasks = filteredTasks.filter(task => task.status === this.currentStatus);
        }
        
        // 分页处理
        const start = (this.page - 1) * this.pageSize;
        const end = start + this.pageSize;
        const pageData = filteredTasks.slice(start, end);
        
        if (this.page === 1) {
          this.taskList = pageData;
        } else {
          this.taskList = [...this.taskList, ...pageData];
        }
        
        this.noMoreData = end >= filteredTasks.length;
        this.isLoading = false;
        this.isRefreshing = false;
        
        // 更新待完成任务数
        this.pendingTaskCount = this.mockTasks.filter(task => task.status === 'pending').length;
      }, 500);
    },

    // 下拉刷新
    refreshData(e) {
      this.isRefreshing = true;
      this.page = 1;
      this.noMoreData = false;
      
      // 模拟API请求延迟
      setTimeout(() => {
        this.loadTaskData();
        // 显示刷新成功的提示
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1000
        });
      }, 1000);
    },

    // 上拉加载更多
    loadMore() {
      if (!this.isLoading && !this.noMoreData) {
        this.page++;
        this.loadTaskData();
      }
    },

    // 查看任务详情
    viewTaskDetail(task) {
      // 根据任务状态决定跳转到不同模式的页面
      let mode = '';
      if (task.status === 'pending') {
        // 待完成任务跳转到编辑页面
        mode = 'edit';
      } else if (task.status === 'completed') {
        // 已完成任务跳转到查看页面
        mode = 'view';
      }
      
      console.log(`点击任务: ${task.name}, 状态: ${task.status}, 跳转模式: ${mode}`);
      console.log('地块数据:', this.plotData);
      console.log('任务数据:', task);
      
      // 使用简化的URL参数传递
      const url = `/pages/activity/activity-detail?id=${task.id}&mode=${mode}&plotName=${encodeURIComponent(this.plotData.name)}&crop=${encodeURIComponent(this.plotData.crop)}&manager=${encodeURIComponent(this.plotData.manager)}&taskName=${encodeURIComponent(task.name)}&taskType=${encodeURIComponent(task.type)}&executeTime=${encodeURIComponent(task.executeTime)}&taskRemark=${encodeURIComponent(task.remark || '')}&taskStatus=${task.status}&assignee=${encodeURIComponent(task.assignee)}`;
      
      console.log('跳转URL:', url);
      
      uni.navigateTo({
        url: url
      });
    },

    // 创建新任务
    createNewTask() {
      console.log('点击新建任务按钮，跳转到创建页面');
      console.log('地块数据:', this.plotData);
      
      // 使用简化的URL参数传递
      const url = `/pages/activity/activity-detail?id=new&mode=create&plotName=${encodeURIComponent(this.plotData.name)}&crop=${encodeURIComponent(this.plotData.crop)}&manager=${encodeURIComponent(this.plotData.manager)}`;
      
      console.log('跳转URL:', url);
      
      // 跳转到新建任务页面
      uni.navigateTo({
        url: url
      });
    },
    
    // 切换备注展开/收起状态
    toggleRemark(index) {
      if (this.taskList[index].remark && this.taskList[index].remark.length > 50) {
        this.$set(this.taskList[index], 'remarkExpanded', !this.taskList[index].remarkExpanded);
      }
    }
  },
  
  // 页面加载时获取数据
  onLoad() {
    this.loadTaskData();
  }
}
</script>

<style scoped>
.activity-container {
  position: relative;
  height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 固定内容区域 */
.fixed-content {
  flex-shrink: 0;
  width: 100%;
}

/* 地块信息卡片 */
.plot-info-card {
  margin: 20rpx 30rpx 30rpx;
  padding: 30rpx;
  background: linear-gradient(135deg, #3BB44A, #2D8C3C);
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(59, 180, 74, 0.2);
  position: relative;
  color: #fff;
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.plot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.plot-name {
  font-size: 32rpx;
  font-weight: bold;
}

.plot-area {
  font-size: 28rpx;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.plot-details {
  display: flex;
  flex-wrap: wrap;
}

.plot-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
  margin-bottom: 10rpx;
}

.item-label {
  font-size: 26rpx;
  opacity: 0.8;
}

.item-value {
  font-size: 28rpx;
  font-weight: 500;
}

/* 任务状态筛选 */
.tab-filter {
  margin: 0 30rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  z-index: 10;
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.tab-container {
  display: flex;
  width: 100%;
  height: 90rpx;
}

.tab-item {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 150rpx;
  transition: all 0.3s ease;
}

.tab-item text {
  font-size: 28rpx;
  color: #666;
  transition: color 0.3s ease;
}

.tab-item.active text {
  color: #3BB44A;
  font-weight: bold;
}

.active-line {
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: #3BB44A;
  border-radius: 4rpx;
  transition: all 0.3s ease;
}

.badge {
  position: absolute;
  top: 16rpx;
  right: 20%;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #FF5252, #FF7676);
  color: #fff;
  font-size: 20rpx;
  padding: 0 8rpx;
  text-align: center;
  box-shadow: 0 2rpx 4rpx rgba(255, 82, 82, 0.2);
  transform: scale(0.9);
}

/* 滚动区域 */
.task-list-scroll {
  flex: 1;
  height: 0; /* 关键属性：使滚动区域占据剩余高度 */
  overflow: hidden;
}

.task-list {
  padding: 0 30rpx;
  box-sizing: border-box;
  width: 100%;
}

.task-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
  transition: transform 0.3s ease;
  width: calc(100% - 0rpx);
  box-sizing: border-box;
  overflow: hidden;
}

.task-card:active {
  transform: scale(0.98);
}

/* 任务卡片头部样式优化 */
.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.task-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding-right: 80rpx; /* 为右侧状态标签留出空间 */
}

.task-status {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, rgba(255, 82, 82, 0.8), rgba(255, 82, 82, 0.6));
  color: #fff;
  z-index: 1;
  max-width: 120rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-completed {
  background: linear-gradient(135deg, rgba(59, 180, 74, 0.8), rgba(59, 180, 74, 0.6));
}

/* 信息行样式优化 */
.task-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  padding: 6rpx 0;
  width: 100%;
}

.info-type, .info-time, .info-person {
  display: flex;
  align-items: center;
}

.info-type {
  flex: 0 0 auto;
  margin-right: 30rpx;
}

.info-time {
  flex: 0 0 auto;
  margin-right: 30rpx;
}

.info-person {
  flex: 0 0 auto;
  min-width: 100rpx;
}

.info-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  opacity: 0.7;
  flex-shrink: 0;
}

.info-text {
  font-size: 26rpx;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 删除旧的类型标签样式 */
.type-tag {
  display: none;
}

.task-remark {
  background-color: rgba(0, 0, 0, 0.03);
  padding: 16rpx;
  border-radius: 10rpx;
  display: flex;
  margin-bottom: 10rpx;
  position: relative;
  flex-wrap: wrap;
}

.remark-label {
  font-size: 26rpx;
  color: #999;
  margin-right: 8rpx;
}

.remark-content {
  flex: 1;
  font-size: 26rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.remark-expanded {
  -webkit-line-clamp: unset;
}

.expand-btn {
  font-size: 24rpx;
  color: #3BB44A;
  margin-left: auto;
  padding-left: 20rpx;
}

.loading-more, .no-more-data, .empty-list {
  text-align: center;
  padding: 30rpx 0;
}

.loading-icon {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  border: 3rpx solid #f3f3f3;
  border-top: 3rpx solid #3BB44A;
  border-radius: 50%;
  vertical-align: middle;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-more text, .no-more-data text {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.empty-list {
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-list image {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.empty-list text {
  font-size: 28rpx;
  color: #999;
}

/* 新增任务按钮 */
.add-task-button {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #3BB44A, #2D8C3C);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rpx 16rpx rgba(59, 180, 74, 0.3);
  z-index: 100;
  transition: transform 0.2s ease;
}

.add-task-button:active {
  transform: scale(0.95);
}

.add-icon {
  width: 48rpx;
  height: 48rpx;
}
</style>