管灌系统农户端微信小程序(嘉峪关应用)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<view class="irrigation-container">
  <!-- 顶部两个标签页 -->
  <view class="tabs">
    <view class="tab {{currentTab === 0 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="0">
      <text>当前灌溉计划</text>
    </view>
    <view class="tab {{currentTab === 1 ? 'active' : ''}}" hover-class="tab-hover" bindtap="switchTab" data-index="1">
      <text>历史计划</text>
    </view>
  </view>
 
  <!-- 中间列表 - 使用scroll-view实现下拉刷新 -->
  <scroll-view class="scroll-view" 
               scroll-x="false" 
               scroll-y="true" 
               refresher-enabled="{{isRefreshing==false?true:false}}" 
               refresher-threshold="50" 
               bindrefresherrefresh="onPullDownRefresh" 
               refresher-triggered="{{isWXRefreshing}}"
               lower-threshold="100"
               bindscrolltolower="{{currentTab === 1 ? 'onReachBottom' : ''}}"
               enhanced="{{true}}"
               id="scrollView">
    <view wx:if="{{isRefreshing}}" class="refresh-view">
      <view class="dot"></view>
      <view class="dot"></view>
      <view class="dot"></view>
    </view>
    <view class="scroll-bg">
      <block wx:if="{{currentList.length > 0}}">
        <view class="list-item" wx:for="{{currentList}}" wx:key="id" bindtap="onItemTap" data-id="{{item.id}}" data-status="{{item.status}}">
          <!-- 状态标签 -->
          <view class="status-tag {{item.status === '1' ? 'draft' : item.status === '2' ? 'published' : item.status === '3' ? 'executing' : item.status === '5' ? 'terminated' : 'completed'}}">
            {{item.status === '1' ? '草稿' : item.status === '2' ? '未执行' : item.status === '3' ? '执行中' : item.status === '5' ? '已终止' : '已完成'}}
          </view>
          
          <!-- 主要内容区 -->
          <view class="item-content">
            <!-- 标题区域 -->
            <view class="item-header">
              <view class="title-section">
                <view class="plan-title">{{item.title}}</view>
                <view class="project-name">{{item.projectName}}</view>
              </view>
            </view>
 
            <!-- 信息区域 -->
            <view class="info-section">
              <!-- 草稿状态(1)时横向排列,其他状态纵向排列 -->
              <view class="info-grid {{item.status === '1' ? '' : 'vertical-layout'}} {{currentTab === 1 ? 'history-grid' : ''}}">
                <view class="info-item">
                  <view class="info-icon">
                    <image src="/images/time-icon.svg" mode="aspectFit"></image>
                  </view>
                  <view class="info-content">
                    <view class="info-label">灌溉时间</view>
                    <view class="info-value">{{(item.planStartTime ? item.planStartTime : '手动发布') + (item.planStopTime ? ' - ' + item.planStopTime : '')}}</view>
                  </view>
                </view>
                <view class="info-item">
                  <view class="info-icon duration-icon">
                    <image src="/images/hourglass.svg" mode="aspectFit"></image>
                  </view>
                  <view class="info-content">
                    <view class="info-label">灌溉时长</view>
                    <view class="info-value">{{item.duration}}分钟</view>
                  </view>
                </view>
              </view>
            </view>
 
            <!-- 操作按钮区域 -->
            <view class="action-section" catchtap="stopPropagation" wx:if="{{item.status === '1'||item.status === '2'||item.status === '3'}}">
              <block wx:if="{{item.status === '1'}}">
                <view class="action-buttons">
                  <button class="action-button delete-button" hover-class="delete-button-hover" bindtap="onDelete" data-id="{{item.id}}">
                    <image src="/images/delete_bt.svg" mode="aspectFit"></image>
                    <text>删除</text>
                  </button>
                  <button class="action-button publish-button" hover-class="publish-button-hover" bindtap="onPublish" data-id="{{item.id}}">
                    <image src="/images/publish-icon.svg" mode="aspectFit"></image>
                    <text>发布</text>
                  </button>
                </view>
              </block>
              <block wx:if="{{item.status === '2'}}">
                <view class="action-buttons">
                  <button class="action-button stop-button" hover-class="stop-button-hover" bindtap="onStop" data-id="{{item.id}}">
                    <image src="/images/stop-icon.svg" mode="aspectFit"></image>
                    <text>终止</text>
                  </button>
                </view>
              </block>
              <block wx:if="{{item.status === '3'}}">
                <view class="action-buttons">
                  <button class="action-button stop-button" hover-class="stop-button-hover" bindtap="onStop" data-id="{{item.id}}">
                    <image src="/images/stop-icon.svg" mode="aspectFit"></image>
                    <text>终止</text>
                  </button>
                </view>
              </block>
            </view>
          </view>
        </view>
        
        <!-- 加载更多提示 - 仅在历史计划标签页显示 -->
        <view wx:if="{{currentTab === 1}}" class="loading-more-container">
          <view wx:if="{{loadingMore}}" class="loading-more">
            <view class="loading-dot"></view>
            <view class="loading-dot"></view>
            <view class="loading-dot"></view>
            <text>加载中...</text>
          </view>
          <view wx:elif="{{!hasMoreData && completedList.length > 0}}" class="no-more-data">
            <text>— 已加载全部数据 —</text>
          </view>
        </view>
      </block>
 
      <block wx:else>
        <view class="empty-list">
          <image class="empty-icon" src="/images/no_more.svg" mode="aspectFit"></image>
          <view class="empty-text">暂无轮灌记录</view>
        </view>
      </block>
    </view>
  </scroll-view>
 
  <!-- 底部新建按钮 -->
  <view class="bottom-button">
    <button class="add-button" hover-class="add-button-hover" bindtap="onAddIrrigation">
      <image src="/images/add-icon.svg" mode="aspectFit"></image>
      <text>创建灌溉计划</text>
    </button>
  </view>
</view>