调整样式

pages/wae/wae.vue

@@ -1,61 +1,65 @@
 <template>
-  <view class="due-page">
-    <!-- 顶部标题 -->
-    <customNavbar title="水电缴费"/>
+  <view class="pending-bill-page">
+    <!-- 自定义导航栏 -->
+    <custom-navbar title="水电缴费" />
 
-    <!-- 内容区 -->
     <scroll-view
       scroll-y
       class="scroll-content"
-      @scrolltolower="loadMore"
       :refresher-enabled="true"
       :refresher-triggered="isRefreshing"
       @refresherrefresh="refresh"
+      @scrolltolower="loadMore"
     >
-      <view v-if="records.length > 0" class="record-list">
+      <view v-if="bills.length > 0">
         <view
-          v-for="item in records"
+          class="bill-item"
+          v-for="item in bills"
           :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 class="bill-left">
+			<u-checkbox
+                      v-model="item.checked"
+                      @change="toggleCheck(item)"
+                      size="32"
+                      active-color="#007aff"
+                    />
+            <view class="bill-info">
+              <text class="bill-name">{{ item.feeName }}</text>
+              <text class="bill-date">缴费截止：{{ item.dueDate }}</text>
             </view>
           </view>
-        </view>
 
-        <u-loadmore :status="loadStatus" />
+          <!-- 右侧金额 + 支付按钮 -->
+          <view class="bill-right">
+            <text class="amount">{{ formatMoney(item.amount) }}</text>
+            <button
+              class="pay-btn"
+              @click="goPayTest([item])"
+            >去支付
+			</button>
+          </view>
+        </view>
       </view>
 
       <view v-else class="empty">
-        <u-empty mode="list" text="暂无待缴账单" />
+        <u-empty mode="list" text="暂无水电费账单" />
       </view>
+
+      <u-loadmore :status="loadStatus" />
     </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 v-if="selectedBills.length > 0" class="batch-pay-bar">
+     <view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
+      <view class="batch-pay-bar-right">
+		  <text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
+		  <button  class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary" size="small" @click="goPayTest(selectedBills)">
+		    批量缴费
+		  </button>
+	  </view>
+   </view>
   </view>
 </template>
 
@@ -63,198 +67,270 @@
 export default {
   data() {
     return {
-      records: [],
-      selectedIds: [],
+      bills: [],
       isRefreshing: false,
-      loadStatus: 'loadmore',
-      page: 1,
-      pageSize: 10,
+      loadStatus: 'more',
+	  sumAmount: 0,
+      selectedBills: [], // 勾选的账单集合
     };
   },
   onLoad() {
-    this.loadRecords();
+    this.loadBills();
+  },
+  onShow(){
   },
   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,
-        },
+    loadBills() {
+      this.bills = [
+    {
+            id: 1,
+            feeName: '电费（2025.10）',
+            dueDate: '2025-11-20',
+            amount: 120.5,
+  		  checked: false
+          },
+          {
+            id: 2,
+            feeName: '水费（2025.10）',
+            dueDate: '2025-11-22',
+            amount: 60.2,
+  		  checked: false
+          }
       ];
+	  this.updateSelected();
     },
     refresh() {
       this.isRefreshing = true;
       setTimeout(() => {
-        this.loadRecords();
+        this.loadBills();
         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);
+    loadMore() {
+      this.loadStatus = 'noMore';
     },
-  },
+
+   formatMoney(val) {
+     if (val === null || val === undefined || isNaN(val)) return '—';
+   
+     val = Number(val);
+   
+     if (val >= 10000) {
+       return '¥' + (val / 10000).toFixed(2) + '万';
+     }
+   
+     return '¥' + val.toFixed(2);
+   },
+    toggleCheck(item) {
+	  item.checked = !item.checked;
+	  if(item.checked && !this.selectedBills.some(b => b.id === item.id)) {
+		  this.selectedBills.push(item);
+	  }else{
+		  // 取消勾选时从已选数组移除
+		  this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
+	  } 
+	      let sumFee = 0;
+		  this.selectedBills.forEach(b => sumFee += b.amount);
+		  this.sumAmount = sumFee;
+	},   
+	   updateSelected() {
+         if (!Array.isArray(this.bills)) return;
+         this.selectedBills = this.bills.filter(b => b.checked);
+       },
+    goPayTest(billList) {
+   if (!billList || billList.length === 0) return;
+
+  // 模拟后台生成订单返回
+  const order = {
+    timeStamp: String(Date.now()),          // 时间戳
+    nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
+    package: 'prepay_id=TEST1234567890',    // 模拟预支付ID
+    signType: 'MD5',
+    paySign: 'TEST_SIGN',                   // 模拟签名
+  };
+
+  // 调用微信支付接口（测试）
+  uni.requestPayment({
+    ...order,
+    success: () => {
+      uni.showToast({ title: '支付成功（测试）', icon: 'success' });
+      // 清空勾选状态
+      billList.forEach(b => b.checked = false);
+      this.updateSelected();
+      // 刷新列表（可选）
+      this.loadBills();
+    },
+    fail: () => {
+      uni.showToast({ title: '支付失败（测试）', icon: 'none' });
+    }
+  });
+ },
+   async goPay(billList) {
+  if (!billList || billList.length === 0) return;
+
+  try {
+    // 1. 请求后台生成订单
+    const res = await uni.request({
+      url: 'https://api.example.com/payments/create',
+      method: 'POST',
+      data: {
+        userId: this.userId,
+        bills: billList.map(b => b.id),
+      }
+    });
+
+    if (res[1].data.code !== 0) {
+      uni.showToast({ title: res[1].data.msg, icon: 'none' });
+      return;
+    }
+
+    const order = res[1].data.data; // 后台返回的支付参数
+
+    // 2. 调用微信支付
+    uni.requestPayment({
+      timeStamp: order.timeStamp,
+      nonceStr: order.nonceStr,
+      package: order.package,
+      signType: order.signType,
+      paySign: order.paySign,
+      success: () => {
+        uni.showToast({ title: '支付成功', icon: 'success' });
+        // 更新勾选状态
+        billList.forEach(b => b.checked = false);
+        this.updateSelected();
+        // 刷新列表
+        this.loadBills();
+      },
+      fail: () => {
+        uni.showToast({ title: '支付失败', icon: 'none' });
+      }
+    });
+
+  } catch (error) {
+    console.error('支付请求失败', error);
+    uni.showToast({ title: '支付请求失败', icon: 'none' });
+  }
+},
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.due-page {
+.pending-bill-page {
+  background: #f7f8fa;
   min-height: 100vh;
-  background-color: #f5f7fa;
-  display: flex;
-  flex-direction: column;
-  padding-top: 175rpx;
+  padding-top: 175rpx; /* 自定义导航栏高度 */
 }
 
 .scroll-content {
-  flex: 1;
-  padding: 20rpx 20rpx 140rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
 }
 
-.record-list {
+.bill-item {
   display: flex;
-  flex-direction: column;
-  gap: 20rpx;
+  justify-content: space-between;
+  background: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
 }
 
-.record-card {
+.bill-left {
   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);
+  align-items: center;
 
-  .check {
-    margin-right: 20rpx;
-  }
-
-  .record-body {
+  .bill-info {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
+    flex-direction: column;
 
-  .info {
-    flex: 1;
-    .title {
-      font-size: 30rpx;
-      font-weight: 600;
+    .bill-name {
+      font-size: 28rpx;
       color: #333;
-      margin-bottom: 10rpx;
+      font-weight: bold;
     }
-    .sub {
-      font-size: 26rpx;
-      color: #999;
+
+    .bill-date {
+      font-size: 24rpx;
+      color: #666;
+      margin-top: 6rpx;
     }
   }
+}
 
-  .right {
-    text-align: right;
-    .amount {
-      font-size: 32rpx;
-      font-weight: bold;
-      color: #ff7f00;
-      margin-bottom: 10rpx;
-    }
+.bill-right {
+  flex-direction: column;
+  align-items: flex-end;
+  width: 30%;
+   .amount {
+	text-align: center;
+	font-size: 28rpx;
+	height: 28rpx;
+	line-height: 28rpx;
+    font-size: 28rpx;
+    color: #ff7f00;
   }
 
   .pay-btn {
-    background: linear-gradient(90deg, #007aff, #00aaff);
-    border: none;
+    margin-top: 12rpx;
+    padding: 0 40rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+    border-radius: 30rpx; // 圆角
+    font-size: 28rpx;
     color: #fff;
-    font-size: 26rpx;
-    border-radius: 36rpx;
-    padding: 10rpx 28rpx;
+	background: linear-gradient(90deg, #007aff, #00aaff);
+    text-align: center;
+  }
+  .btn-text{
+	  padding-top: 13rpx;
   }
 }
 
-.bottom-bar {
+.batch-pay-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
+  height: 170rpx;
+  padding: 0 30rpx;
   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;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
+  z-index: 999;
+  .batch-pay-bar-left{
+	  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;
+ 
+  .batch-pay-bar-right{
+	  flex-direction: column;
+	  align-items: flex-end;
+	  .sumAmount{
+	  	  font-size: 28rpx;
+	  	  color: #ff7f00;
+	  }
+	.bottomPayBtn {
+		    margin-top: 12rpx;
+		    height: 60rpx;
+		    line-height: 60rpx;
+		    padding: 0 40rpx;
+		    border-radius: 30rpx;
+		    font-size: 28rpx;
+		    font-weight: bold;
+		    text-align: center;
+			background: linear-gradient(90deg, #007aff, #00aaff);
+	}
   }
 }
 
+
 .empty {
-  margin-top: 100rpx;
+  margin-top: 200rpx;
+  text-align: center;
 }
 </style>