RentWeAppFront/pages/wae/wae.vue

<template>
  <view class="due-page">
    <!-- 顶部标题 -->
    <customNavbar title="水电缴费"/>

    <!-- 内容区 -->
    <scroll-view
      scroll-y
      class="scroll-content"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refresh"
    >
      <view v-if="records.length > 0" class="record-list">
        <view
          v-for="item in records"
          :key="item.id"
          class="record-card"
        >
          <!-- 左侧勾选框 -->
          <checkbox
            :value="item.id"
            :checked="selectedIds.includes(item.id)"
            @change="toggleSelect(item.id)"
            class="check"
          />

          <!-- 账单信息 -->
          <view class="record-body">
            <view class="info">
              <view class="title">{{ item.feeName }}</view>
              <view class="sub">缴费截止：{{ item.dueDate }}</view>
            </view>

            <!-- 右侧金额 + 按钮 -->
            <view class="right">
              <view class="amount">¥{{ item.amount }}</view>
              <button class="pay-btn" @click="paySingle(item)">去支付</button>
            </view>
          </view>
        </view>

        <u-loadmore :status="loadStatus" />
      </view>

      <view v-else class="empty">
        <u-empty mode="list" text="暂无待缴账单" />
      </view>
    </scroll-view>

    <!-- 批量支付底部栏 -->
    <view v-if="selectedIds.length > 0" class="bottom-bar">
      <view class="bar-content">
        <text>已选择 {{ selectedIds.length }} 项</text>
        <button class="batch-pay-btn" @click="batchPay">批量缴费</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [],
      selectedIds: [],
      isRefreshing: false,
      loadStatus: 'loadmore',
      page: 1,
      pageSize: 10,
    };
  },
  onLoad() {
    this.loadRecords();
  },
  methods: {
    // 模拟加载账单
    loadRecords() {
      this.records = [
        {
          id: 1,
          feeName: '电费（2025.10）',
          dueDate: '2025-11-20',
          amount: 120.5,
        },
        {
          id: 2,
          feeName: '水费（2025.10）',
          dueDate: '2025-11-22',
          amount: 60.2,
        },
      ];
    },
    refresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        this.loadRecords();
        this.isRefreshing = false;
      }, 1000);
    },
    loadMore() {
      this.loadStatus = 'nomore';
    },
    toggleSelect(id) {
      const idx = this.selectedIds.indexOf(id);
      if (idx > -1) {
        this.selectedIds.splice(idx, 1);
      } else {
        this.selectedIds.push(id);
      }
    },
    paySingle(item) {
      uni.showModal({
        title: '确认支付',
        content: `确认支付 ¥${item.amount} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.createOrder([item.id]);
          }
        },
      });
    },
    batchPay() {
      uni.showModal({
        title: '批量缴费',
        content: `确认支付 ${this.selectedIds.length} 项账单？`,
        success: (res) => {
          if (res.confirm) {
            this.createOrder(this.selectedIds);
          }
        },
      });
    },
    // 模拟调用后端生成支付订单
    createOrder(ids) {
      console.log('创建支付订单：', ids);
      uni.showToast({
        title: '生成支付订单中...',
        icon: 'loading',
      });

      // 模拟延迟 + 支付调用
      setTimeout(() => {
        uni.showToast({
          title: '支付成功',
          icon: 'success',
        });
        // 清空选择
        this.selectedIds = [];
      }, 1200);
    },
  },
};
</script>

<style lang="scss" scoped>
.due-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  padding-top: 175rpx;
}

.scroll-content {
  flex: 1;
  padding: 20rpx 20rpx 140rpx;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-card {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);

  .check {
    margin-right: 20rpx;
  }

  .record-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .info {
    flex: 1;
    .title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10rpx;
    }
    .sub {
      font-size: 26rpx;
      color: #999;
    }
  }

  .right {
    text-align: right;
    .amount {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff7f00;
      margin-bottom: 10rpx;
    }
  }

  .pay-btn {
    background: linear-gradient(90deg, #007aff, #00aaff);
    border: none;
    color: #fff;
    font-size: 26rpx;
    border-radius: 36rpx;
    padding: 10rpx 28rpx;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 40rpx;
  box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.08);

  .bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #333;
  }

  .batch-pay-btn {
    background: linear-gradient(90deg, #007aff, #00aaff);
    color: #fff;
    border: none;
    border-radius: 36rpx;
    font-size: 28rpx;
    padding: 12rpx 40rpx;
  }
}

.empty {
  margin-top: 100rpx;
}
</style>