缴费页面

app.json

@@ -2,10 +2,10 @@
   "pages": [
     "pages/homepage/homepage",
     "pages/FirstBangDing/FirstBangDing",
-
     "pages/profile/profile",
     "pages/huhaobangding/huhaobangding",
-    "pages/lijijiaofei/lijijiaofei"
+    "pages/lijijiaofei/lijijiaofei",
+    "pages/zhangdanlist/zhangdanlist"
   ],
   "tabBar": {
     "color": "rgba(182, 189, 205, 1)",

pages/homepage/homepage.js

@@ -102,8 +102,27 @@ Page({
   // 功能按钮点击事件
   handleFunctionClick(e) {
     const index = e.currentTarget.dataset.index
-    const url = this.data.functionList[index].url
-    wx.navigateTo({ url })
+    const item = this.data.functionList[index]
+  
+    if (item && item.url) {
+      wx.navigateTo({ 
+        url: item.url,
+        fail: function(err) {
+          console.error('页面跳转失败:', err)
+          wx.showToast({
+            title: '功能开发中',
+            icon: 'none',
+            duration: 2000
+          })
+        }
+      })
+    } else {
+      wx.showToast({
+        title: '功能开发中',
+        icon: 'none',
+        duration: 2000
+      })
+    }
   },
 
   // 查看账单列表

pages/lijijiaofei/lijijiaofei.js

@@ -0,0 +1,262 @@
+Page({
+  data: {
+    images: {
+      logo: '',
+      background: '',
+      card: '',
+      tzd: "",
+      phone: "",
+      yl: "",
+      jcsfcjtzd: ""
+    },
+    userInfo: {
+      name: '王源',
+      phone: '32018545245104',
+      address: '徐州市丰县***楼102室'
+    },
+    amount: 73.28, //应缴金额
+    actualAmount: 73.28,
+    balance: 0,   // 余额
+    quickAmounts: [10, 30, 50, 100, 200, 500],
+    waterUsage: {
+      lastReading: 2000,
+      currentReading: 2050,
+      nextReading: 3020,
+      usage: 87
+    },
+    showKeyboard: false,
+    selectedAmount: null,
+    customAmount: '',
+    inputFocus: false,
+  },
+  onLoad() {
+    this.setData({
+      images: {
+        logo:'/static_file/logo.png',
+        background:'/static_file/background.png',
+        card:'/static_file/card.png',
+        tzd:'/static_file/backgrountzdd.png',
+        phone:'/static_file/phone.png',
+        yl:'/static_file/background.yl',
+        jcsfcjtzd:'/static_file/jcsfcjtzd.png',
+        kapiantubiao:'/static_file/kapiantubiao.png'
+        
+      }
+    })
+    // 获取状态栏高度
+    const systemInfo = wx.getSystemInfoSync();
+    this.setData({
+      statusBarHeight: systemInfo.statusBarHeight
+    });
+    this.fetchPaymentData();
+  },
+
+  // 选择快捷金额
+  selectAmount: function(e) {
+    const amount = e.currentTarget.dataset.amount;
+    this.setData({
+      amount: parseFloat(amount),
+      selectedAmount: parseFloat(amount),
+      customAmount: '' // 清空自定义金额
+    });
+  },
+
+  // 立即缴费
+  payNow: function() {
+    wx.showLoading({
+      title: '处理中',
+    });
+    
+    // 模拟支付
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.showToast({
+        title: '缴费成功',
+        icon: 'success',
+        duration: 2000,
+        success: () => {
+          // 支付成功后返回首页
+          setTimeout(() => {
+            wx.navigateBack();
+          }, 2000);
+        }
+      });
+    }, 1500);
+  },
+
+  // 返回上一页
+  goBack: function() {
+    wx.navigateBack();
+  },
+
+  // 切换到首页
+  goToHome: function() {
+    wx.switchTab({
+      url: '/pages/homepage/homepage',
+    });
+  },
+
+  // 切换到我的页面
+  goToMine: function() {
+    wx.switchTab({
+      url: '/pages/mine/mine',
+    });
+  },
+
+  // 添加切换水表的方法
+  switchMeter: function() {
+    wx.navigateTo({
+      url: '/pages/switchMeter/switchMeter', 
+    })
+  },
+
+  navigateToHome() {
+    wx.switchTab({
+      url: '/pages/index/index'
+    })
+  },
+
+  navigateToMine() {
+    wx.switchTab({
+      url: '/pages/mine/mine'
+    })
+  },
+
+  // 显示键盘 - 使用微信内置键盘
+  showCustomAmountInput: function() {
+    // 使用微信内置的输入框
+    wx.showModal({
+      title: '请输入金额',
+      placeholderText: '请输入缴费金额',
+      editable: true,
+      success: (res) => {
+        if (res.confirm && res.content) {
+          // 验证输入是否为有效数字
+          const inputAmount = parseFloat(res.content);
+          if (!isNaN(inputAmount) && inputAmount > 0) {
+            this.setData({
+              amount: inputAmount
+            });
+          } else {
+            wx.showToast({
+              title: '请输入有效金额',
+              icon: 'none'
+            });
+          }
+        }
+      }
+    });
+  },
+  
+  // 输入数字
+  inputNumber: function(e) {
+    const number = e.currentTarget.dataset.number;
+    let amount = this.data.amount;
+    
+    // 处理小数点
+    if (number === '.' && amount.includes('.')) {
+      return;
+    }
+    
+    // 限制小数点后两位
+    if (amount.includes('.') && amount.split('.')[1].length >= 2 && number !== '.') {
+      return;
+    }
+    
+    // 更新金额
+    this.setData({
+      amount: amount === '0' ? number : amount + number
+    });
+  },
+  
+  // 删除数字
+  deleteNumber: function() {
+    let amount = this.data.amount;
+    if (amount.length <= 1) {
+      this.setData({
+        amount: '0'
+      });
+    } else {
+      this.setData({
+        amount: amount.substring(0, amount.length - 1)
+      });
+    }
+  },
+  
+  // 确认输入
+  confirmInput: function() {
+    this.setData({
+      showKeyboard: false
+    });
+  },
+
+  // 添加自定义金额输入处理函数
+  onCustomAmountInput: function(e) {
+    let value = e.detail.value;
+    
+    // 限制只能输入小数点后两位
+    if (value.indexOf('.') !== -1) {
+      const parts = value.split('.');
+      if (parts[1].length > 2) {
+        value = parts[0] + '.' + parts[1].substring(0, 2);
+      }
+    }
+    
+    // 验证输入是否为有效数字
+    if (value) {
+      const inputAmount = parseFloat(value);
+      if (!isNaN(inputAmount) && inputAmount >= 0) {
+        // 更新实缴金额和自定义金额
+        this.setData({
+          amount: inputAmount,
+          customAmount: value,
+          selectedAmount: null // 取消快捷金额的选中状态
+        });
+      } else {
+        this.setData({
+          customAmount: value
+        });
+      }
+    } else {
+      // 输入框为空时
+      this.setData({
+        customAmount: '',
+        amount: 0
+      });
+    }
+  },
+
+  // 输入框获得焦点
+  onInputFocus: function() {
+    this.setData({
+      inputFocus: true,
+      selectedAmount: null // 取消快捷金额的选中状态
+    });
+  },
+  
+  // 输入框失去焦点
+  onInputBlur: function() {
+    this.setData({
+      inputFocus: false
+    });
+  },
+
+  // 从接口获取支付数据
+  fetchPaymentData: function() {
+    // 这里是模拟数据，实际应用中应该调用真实接口
+    // wx.request({
+    //   url: 'your-api-endpoint',
+    //   success: (res) => {
+    //     this.setData({
+    //       amountDue: res.data.amountDue,
+    //       balance: res.data.balance
+    //     });
+    //   }
+    // });
+    
+    // this.setData({
+    //   amountDue: 150.00,
+    //   balance: 200.50
+    // });
+  },
+}) 

pages/lijijiaofei/lijijiaofei.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/lijijiaofei/lijijiaofei.wxml

@@ -0,0 +1,94 @@
+<view class="container">
+  <!-- 顶部导航以及背景 -->
+  <view class="header">
+    <image class="background" src="{{images.background}}" mode="widthFix" />
+    <view class="back-icon" bindtap="goBack">←</view>
+  </view>
+
+ <view class="custom-nav" style="height: 200rpx; background-color: #4285f4;"></view>
+
+  <!-- 用户信息 -->
+  <view class="user-info-container">
+    <view class="user-info">
+      <view class="user-name">王源</view>
+      <view class="user-id">
+        <image src="/static_file/hh.png" class="id-icon"></image>
+        <text>320185452454104</text>
+      </view>
+      <view class="user-address">
+        <image src="/static_file/location.png" class="address-icon"></image>
+        <text>徐州市丰县****楼102室</text>
+      </view>
+      <!-- <view class="change-btn" bindtap="switchMeter">切换水表</view> -->
+    </view>
+  </view>
+
+  <!-- 缴费金额 -->
+  <view class="payment-section">
+    <view class="amount-container">
+      <view class="amount-title">实缴金额</view>
+      <view class="amount-display">
+        <text class="amount-value">{{amount}}</text>
+        <text class="amount-unit">元</text>
+      </view>
+      
+      <!-- 余额显示 -->
+      <view class="balance-info">
+        <text class="balance-label">应缴金额：</text>
+        <text class="balance-value">{{actualAmount}} </text><text class="balance-unit">元</text>
+        <text class="balance-label margin-left">余额：</text>
+        <text class="balance-value">{{balance}} </text><text class="balance-unit">元</text>
+      </view>
+      
+      <view class="quick-amount">
+        <view class="amount-btn {{selectedAmount == 10 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="10">10元</view>
+        <view class="amount-btn {{selectedAmount == 30 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="30">30元</view>
+        <view class="amount-btn {{selectedAmount == 50 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="50">50元</view>
+        <view class="amount-btn {{selectedAmount == 100 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="100">100元</view>
+        <view class="amount-btn {{selectedAmount == 200 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="200">200元</view>
+        <view class="amount-btn {{selectedAmount == 500 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="500">500元</view>
+        <view class="custom-input-container {{customAmount || inputFocus ? 'selected' : ''}}">
+          <text class="yuan-symbol">¥</text>
+          <input class="custom-amount-input" type="digit" bindinput="onCustomAmountInput" 
+                 value="{{customAmount}}" placeholder="自定义金额"
+                 bindfocus="onInputFocus" bindblur="onInputBlur"/>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 温馨提示 - 调整位置 -->
+  <view class="tips">
+    <text class="tips-title">温馨提示：</text>
+    <text class="tips-content">若无应缴金额，系统将充值到余额。</text>
+  </view>
+
+  <!-- 缴费按钮 - 调整样式 -->
+  <view class="pay-btn" bindtap="payNow">立即缴费</view>
+
+  <!-- 数字键盘部分 -->
+  <view class="keyboard" wx:if="{{showKeyboard}}">
+    <view class="keyboard-row">
+      <view class="key" bindtap="inputNumber" data-number="1">1</view>
+      <view class="key" bindtap="inputNumber" data-number="2">2</view>
+      <view class="key" bindtap="inputNumber" data-number="3">3</view>
+      <view class="key delete" bindtap="deleteNumber"><image src="/images/delete-icon.png" mode="aspectFit"></image></view>
+    </view>
+    <view class="keyboard-row">
+      <view class="key" bindtap="inputNumber" data-number="4">4</view>
+      <view class="key" bindtap="inputNumber" data-number="5">5</view>
+      <view class="key" bindtap="inputNumber" data-number="6">6</view>
+      <view class="key confirm" bindtap="confirmInput">确定</view>
+    </view>
+    <view class="keyboard-row">
+      <view class="key" bindtap="inputNumber" data-number="7">7</view>
+      <view class="key" bindtap="inputNumber" data-number="8">8</view>
+      <view class="key" bindtap="inputNumber" data-number="9">9</view>
+    </view>
+    <view class="keyboard-row">
+      <view class="key zero" bindtap="inputNumber" data-number="0">0</view>
+      <view class="key" bindtap="inputNumber" data-number=".">.</view>
+    </view>
+  </view>
+
+</view> 

pages/lijijiaofei/lijijiaofei.wxss

@@ -0,0 +1,383 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 30rpx;
+}
+
+.header {
+  position: relative;
+  width: 100%;
+  height: 180rpx;
+}
+
+.header .background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(46, 130, 255, 1) 0%, rgba(46, 130, 255, 1) 84.9%, rgba(46, 130, 255, 0) 100%);
+}
+
+.back-icon {
+  position: absolute;
+  left: 30rpx;
+  top: 120rpx;
+  font-size: 40rpx;
+  color: white;
+  z-index: 10;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-title {
+  text-align: center;
+  font-size: 36rpx;
+  margin-bottom: 20rpx;
+}
+.user-info-container {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0rpx 30rpx;
+  top: -200rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.user-info {
+  background-color: transparent;
+  color: white;
+  padding: 30rpx;
+  border-radius: 20rpx;
+  position: relative;
+  width: 100%;
+}
+
+.user-name {
+  font-size: 40rpx;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+}
+
+.user-id, .user-address {
+  display: flex;
+  align-items: center;
+  font-size: 30rpx;
+  margin-bottom: 20rpx;
+  color: rgba(255, 255, 255, 1);
+}
+
+.id-icon, .address-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+
+
+.user-phone, .user-address {
+  display: flex;
+  font-size: 15px;
+  margin-bottom: 3px;
+  color: rgba(255, 255, 255, 1);
+}
+
+.user-phone image, .user-address image {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}
+
+.edit-btn {
+  position: absolute;
+  right: 30rpx;
+  top: 30rpx;
+  font-size: 28rpx;
+  color: #1989fa;
+  padding: 10rpx 20rpx;
+  border: 1px solid #1989fa;
+  border-radius: 30rpx;
+}
+
+.payment-section {
+  position: relative;
+  background-color: transparent;
+  margin: -10rpx 30rpx;
+  border-radius: 120rpx;
+  padding: 0;
+  top: -200rpx;
+  box-shadow: none;
+  width: calc(100% - 70rpx);
+  box-sizing: border-box;
+}
+
+.payment-title {
+  font-size: 32rpx;
+  color: rgba(46, 48, 56, 1);
+  margin-bottom: 20rpx;
+}
+
+.payment-amount {
+  font-size: 60rpx;
+  color: rgba(239, 93, 93, 1);
+  font-weight: bold;
+  margin: 30rpx 0;
+}
+
+.quick-amounts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.amount-item {
+  width: 30%;
+  text-align: center;
+  background-color: #f5f5f5;
+  padding: 20rpx 0;
+  margin-bottom: 20rpx;
+  border-radius: 8rpx;
+  font-size: 32rpx;
+}
+
+.usage-info {
+  margin-top: 30rpx;
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.pay-btn {
+  background-color: #1989fa;
+  color: white;
+  font-size: 36rpx;
+  text-align: center;
+  padding: 24rpx 0;
+  border-radius: 60rpx;
+  margin: 40rpx auto;
+  margin-bottom: 160rpx;
+  width: 85%;
+  max-width: 800rpx;
+}
+
+.switch-meter {
+  padding: 5px 10px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #333;
+}
+
+/* 金额显示样式 */
+.amount-container {
+  background-color: white;
+  border-radius: 20rpx;
+  padding: 40rpx 30rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+}
+
+.amount-title {
+  font-size: 34rpx;
+  color: rgba(46, 48, 56, 1);
+  margin-bottom: 10rpx;
+}
+
+.amount-display {
+  position: relative;
+  margin-bottom: 30rpx;
+  display: flex;
+  align-items: flex-end;
+}
+
+.amount-value {
+  font-size: 72rpx;
+  color: rgba(239, 93, 93, 1);
+  font-weight: bold;
+  line-height: 1;
+}
+
+.amount-unit {
+  font-size: 28rpx;
+  color: #333;
+  margin-left: 4rpx;
+  margin-bottom: 10rpx;
+}
+
+/* 余额信息样式调整 */
+.balance-info {
+  display: flex;
+  font-size: 34rpx;
+  margin-bottom: 30rpx;
+  align-items: center;
+}
+
+.balance-label {
+  color: #666;
+}
+
+.balance-value {
+  color: rgba(239, 93, 93, 1);
+  font-weight: bold;
+}
+
+.balance-unit {
+  color: #333;
+  margin-right: 10rpx;
+}
+
+.margin-left {
+  margin-left: 20rpx;
+}
+
+/* 快捷金额选择 */
+.quick-amount {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.amount-btn {
+  width: 30%;
+  text-align: center;
+  padding: 24rpx 0;
+  border: 2rpx solid #ddd;
+  border-radius: 10rpx;
+  margin-bottom: 24rpx;
+  font-size: 34rpx;
+  color: #333;
+  background-color: rgba(242, 245, 250, 1);
+}
+
+.amount-btn:active {
+  background-color: #f5f5f5;
+}
+
+.custom-amount {
+  color: #1e90ff;
+  border-color: #1e90ff;
+}
+
+.custom-amount:active {
+  background-color: rgba(30, 144, 255, 0.05);
+}
+
+/* 温馨提示位置调整 */
+.tips {
+  font-size: 24rpx;
+  color: #999;
+  padding: 20rpx 30rpx;
+  top: -200rpx;
+  text-align: left;
+  border-top: none;
+  position: relative;
+  left: -100rpx;
+}
+
+.tips-title {
+  color:  rgba(239, 93, 93, 1);
+}
+tips-content {
+  color:  rgba(104, 108, 128, 1);
+}
+/* 数字键盘样式优化 */
+.keyboard {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #f0f0f0;
+  padding: 20rpx;
+  z-index: 1000;
+  border-top: 2rpx solid #ddd;
+}
+
+.keyboard-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+
+.key {
+  width: 23%;
+  height: 100rpx;
+  background-color: white;
+  border-radius: 10rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40rpx;
+  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+  margin: 0 10rpx;
+}
+
+.key.zero {
+  width: 48%;
+}
+
+.delete {
+  background-color: #f5f5f5;
+}
+
+.delete image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.confirm {
+  background-color: #1e90ff;
+  color: white;
+}
+
+/* 自定义金额输入框样式 - 修改为与快捷金额按钮一致 */
+.custom-input-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 2rpx solid #ddd; /* 默认边框颜色与快捷金额按钮一致 */
+  border-radius: 10rpx;
+  margin-bottom: 24rpx;
+  padding: 0 10rpx;
+  background-color: rgba(242, 245, 250, 1);
+}
+
+/* 自定义金额输入框选中状态 */
+.custom-input-container.selected {
+  border: 2rpx solid rgba(46, 125, 253, 1);
+}
+
+.yuan-symbol {
+  color: rgba(63, 65, 76, 1); /* 默认颜色 */
+  font-size: 34rpx;
+  margin-right: 4rpx;
+}
+
+/* 选中状态下的¥符号颜色 */
+.custom-input-container.selected .yuan-symbol {
+  color: rgba(46, 125, 253, 1);
+}
+
+.custom-amount-input {
+  flex: 1;
+  height: 80rpx;
+  font-size: 34rpx;
+  color: #333; 
+}
+
+/* 选中状态下的输入框文字颜色 */
+.custom-input-container.selected .custom-amount-input {
+  color: rgba(46, 125, 253, 1);
+}
+
+/* 添加选中状态的样式 */
+.amount-btn.selected {
+  border: 2rpx solid rgba(46, 125, 253, 1);
+  color: rgba(46, 125, 253, 1);
+}

pages/zhangdanlist/zhangdanlist.js

@@ -1,18 +1,13 @@
 Page({
   data: {
     images: {
-      logo: '',
-      background: '',
-      card: '',
-      tzd: "",
-      phone: "",
-      yl: "",
-      jcsfcjtzd: ""
+      background: '/static_file/background.png',
+      water: '/static_file/water.png'
     },
     userInfo: {
       name: '王源',
-      phone: '32018545245104',
-      address: '徐州市丰县***楼102室'
+      id: '320185452454104',
+      address: '徐州市丰县****楼102室'
     },
     amount: 73.28, //应缴金额
     actualAmount: 73.28,
@@ -28,65 +23,92 @@ Page({
     selectedAmount: null,
     customAmount: '',
     inputFocus: false,
+    billList: [
+      {
+        date: '2025/01/30',
+        billNumber: '250201100235',
+        usage: '87m³',
+        startReading: '2000',
+        endReading: '2025',
+        paymentTime: '2025/01/31 14:39',
+        amount: '73.28',
+        status: '未缴费'
+      },
+      {
+        date: '2024/12/30',
+        billNumber: '2502011035211',
+        usage: '121m³',
+        startReading: '2000',
+        endReading: '2025',
+        paymentTime: '2025/01/03 09:51',
+        amount: '127.28',
+        status: '已缴费'
+      },
+      {
+        date: '2024/11/30',
+        billNumber: '2502011035211',
+        usage: '121m³',
+        startReading: '2000',
+        endReading: '2025',
+        paymentTime: '2024/12/03 09:51',
+        amount: '127.28',
+        status: '已缴费'
+      }
+    ]
   },
+  
   onLoad() {
+    // 确保图片资源正确加载
     this.setData({
       images: {
-        logo:'/static_file/logo.png',
-        background:'/static_file/background.png',
-        card:'/static_file/card.png',
-        tzd:'/static_file/backgrountzdd.png',
-        phone:'/static_file/phone.png',
-        yl:'/static_file/background.yl',
-        jcsfcjtzd:'/static_file/jcsfcjtzd.png',
-        kapiantubiao:'/static_file/kapiantubiao.png'
-        
+        background: '/static_file/background.png',
+        water: '/static_file/water.png'
       }
-    })
-    // 获取状态栏高度
-    const systemInfo = wx.getSystemInfoSync();
-    this.setData({
-      statusBarHeight: systemInfo.statusBarHeight
     });
-    this.fetchPaymentData();
+    
+    // 获取账单列表数据
+    this.getBillList();
   },
 
-  // 选择快捷金额
-  selectAmount: function(e) {
-    const amount = e.currentTarget.dataset.amount;
-    this.setData({
-      amount: parseFloat(amount),
-      selectedAmount: parseFloat(amount),
-      customAmount: '' // 清空自定义金额
+  // 返回上一页
+  goBack: function() {
+    wx.navigateBack({
+      delta: 1
     });
   },
-
-  // 立即缴费
-  payNow: function() {
+  
+  // 从接口获取账单列表数据
+  getBillList: function() {
+    // 实际项目中，这里应该调用API获取数据
     wx.showLoading({
-      title: '处理中',
+      title: '加载中',
     });
     
-    // 模拟支付
+    // 模拟API请求完成后隐藏加载提示
     setTimeout(() => {
       wx.hideLoading();
-      wx.showToast({
-        title: '缴费成功',
-        icon: 'success',
-        duration: 2000,
-        success: () => {
-          // 支付成功后返回首页
-          setTimeout(() => {
-            wx.navigateBack();
-          }, 2000);
-        }
-      });
-    }, 1500);
+    }, 500);
   },
-
-  // 返回上一页
-  goBack: function() {
-    wx.navigateBack();
+  
+  // 点击立即缴费按钮
+  payNow: function(e) {
+    const index = e.currentTarget.dataset.index;
+    const bill = this.data.billList[index];
+    
+    wx.navigateTo({
+      url: '/pages/lijijiaofei/lijijiaofei?billNumber=' + bill.billNumber + '&amount=' + bill.amount
+    });
+  },
+  
+  // 点击开发票按钮
+  openInvoice: function(e) {
+    const index = e.currentTarget.dataset.index;
+    const bill = this.data.billList[index];
+    
+    wx.showToast({
+      title: '开发票功能开发中',
+      icon: 'none'
+    });
   },
 
   // 切换到首页
@@ -103,13 +125,6 @@ Page({
     });
   },
 
-  // 添加切换水表的方法
-  switchMeter: function() {
-    wx.navigateTo({
-      url: '/pages/switchMeter/switchMeter', 
-    })
-  },
-
   navigateToHome() {
     wx.switchTab({
       url: '/pages/index/index'
@@ -120,143 +135,5 @@ Page({
     wx.switchTab({
       url: '/pages/mine/mine'
     })
-  },
-
-  // 显示键盘 - 使用微信内置键盘
-  showCustomAmountInput: function() {
-    // 使用微信内置的输入框
-    wx.showModal({
-      title: '请输入金额',
-      placeholderText: '请输入缴费金额',
-      editable: true,
-      success: (res) => {
-        if (res.confirm && res.content) {
-          // 验证输入是否为有效数字
-          const inputAmount = parseFloat(res.content);
-          if (!isNaN(inputAmount) && inputAmount > 0) {
-            this.setData({
-              amount: inputAmount
-            });
-          } else {
-            wx.showToast({
-              title: '请输入有效金额',
-              icon: 'none'
-            });
-          }
-        }
-      }
-    });
-  },
-  
-  // 输入数字
-  inputNumber: function(e) {
-    const number = e.currentTarget.dataset.number;
-    let amount = this.data.amount;
-    
-    // 处理小数点
-    if (number === '.' && amount.includes('.')) {
-      return;
-    }
-    
-    // 限制小数点后两位
-    if (amount.includes('.') && amount.split('.')[1].length >= 2 && number !== '.') {
-      return;
-    }
-    
-    // 更新金额
-    this.setData({
-      amount: amount === '0' ? number : amount + number
-    });
-  },
-  
-  // 删除数字
-  deleteNumber: function() {
-    let amount = this.data.amount;
-    if (amount.length <= 1) {
-      this.setData({
-        amount: '0'
-      });
-    } else {
-      this.setData({
-        amount: amount.substring(0, amount.length - 1)
-      });
-    }
-  },
-  
-  // 确认输入
-  confirmInput: function() {
-    this.setData({
-      showKeyboard: false
-    });
-  },
-
-  // 添加自定义金额输入处理函数
-  onCustomAmountInput: function(e) {
-    let value = e.detail.value;
-    
-    // 限制只能输入小数点后两位
-    if (value.indexOf('.') !== -1) {
-      const parts = value.split('.');
-      if (parts[1].length > 2) {
-        value = parts[0] + '.' + parts[1].substring(0, 2);
-      }
-    }
-    
-    // 验证输入是否为有效数字
-    if (value) {
-      const inputAmount = parseFloat(value);
-      if (!isNaN(inputAmount) && inputAmount >= 0) {
-        // 更新实缴金额和自定义金额
-        this.setData({
-          amount: inputAmount,
-          customAmount: value,
-          selectedAmount: null // 取消快捷金额的选中状态
-        });
-      } else {
-        this.setData({
-          customAmount: value
-        });
-      }
-    } else {
-      // 输入框为空时
-      this.setData({
-        customAmount: '',
-        amount: 0
-      });
-    }
-  },
-
-  // 输入框获得焦点
-  onInputFocus: function() {
-    this.setData({
-      inputFocus: true,
-      selectedAmount: null // 取消快捷金额的选中状态
-    });
-  },
-  
-  // 输入框失去焦点
-  onInputBlur: function() {
-    this.setData({
-      inputFocus: false
-    });
-  },
-
-  // 从接口获取支付数据
-  fetchPaymentData: function() {
-    // 这里是模拟数据，实际应用中应该调用真实接口
-    // wx.request({
-    //   url: 'your-api-endpoint',
-    //   success: (res) => {
-    //     this.setData({
-    //       amountDue: res.data.amountDue,
-    //       balance: res.data.balance
-    //     });
-    //   }
-    // });
-    
-    // this.setData({
-    //   amountDue: 150.00,
-    //   balance: 200.50
-    // });
-  },
+  }
 }) 

pages/zhangdanlist/zhangdanlist.wxml

@@ -11,85 +11,47 @@
   <!-- 用户信息 -->
   <view class="user-info-container">
     <view class="user-info">
-      <view class="user-name">王源</view>
+      <view class="user-name">{{userInfo.name}}</view>
       <view class="user-id">
         <image src="/static_file/hh.png" class="id-icon"></image>
-        <text>320185452454104</text>
+        <text>{{userInfo.id}}</text>
       </view>
       <view class="user-address">
         <image src="/static_file/location.png" class="address-icon"></image>
-        <text>徐州市丰县****楼102室</text>
+        <text>{{userInfo.address}}</text>
       </view>
-      <!-- <view class="change-btn" bindtap="switchMeter">切换水表</view> -->
     </view>
   </view>
+  
 
-  <!-- 缴费金额 -->
-  <view class="payment-section">
-    <view class="amount-container">
-      <view class="amount-title">实缴金额</view>
-      <view class="amount-display">
-        <text class="amount-value">{{amount}}</text>
-        <text class="amount-unit">元</text>
-      </view>
-      
-      <!-- 余额显示 -->
-      <view class="balance-info">
-        <text class="balance-label">应缴金额：</text>
-        <text class="balance-value">{{actualAmount}} </text><text class="balance-unit">元</text>
-        <text class="balance-label margin-left">余额：</text>
-        <text class="balance-value">{{balance}} </text><text class="balance-unit">元</text>
-      </view>
-      
-      <view class="quick-amount">
-        <view class="amount-btn {{selectedAmount == 10 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="10">10元</view>
-        <view class="amount-btn {{selectedAmount == 30 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="30">30元</view>
-        <view class="amount-btn {{selectedAmount == 50 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="50">50元</view>
-        <view class="amount-btn {{selectedAmount == 100 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="100">100元</view>
-        <view class="amount-btn {{selectedAmount == 200 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="200">200元</view>
-        <view class="amount-btn {{selectedAmount == 500 ? 'selected' : ''}}" bindtap="selectAmount" data-amount="500">500元</view>
-        <view class="custom-input-container {{customAmount || inputFocus ? 'selected' : ''}}">
-          <text class="yuan-symbol">¥</text>
-          <input class="custom-amount-input" type="digit" bindinput="onCustomAmountInput" 
-                 value="{{customAmount}}" placeholder="自定义金额"
-                 bindfocus="onInputFocus" bindblur="onInputBlur"/>
+  <!-- 账单列表 -->
+  <scroll-view class="bill-list-container" scroll-y="true">
+    <block wx:for="{{billList}}" wx:key="index">
+      <view class="bill-date-section">{{item.date}}</view>
+      <view class="bill-card">
+        <view class="bill-info">
+          <view class="bill-icon">
+            <image src="/static_file/water.png" mode="aspectFit"></image>
+          </view>
+          <view class="bill-details">
+            <view class="bill-number">{{item.billNumber}}</view>
+            <view class="bill-usage">用水{{item.usage}}㎡ | 读数{{item.startReading}}-{{item.endReading}}</view>
+            <view class="bill-payment-time">缴费时间: {{item.paymentTime}}</view>
+          </view>
+          <view class="bill-amount-status">
+            <view class="bill-amount {{item.status === '未缴费' ? 'unpaid' : 'paid'}}">¥ {{item.amount}}</view>
+            <view class="bill-status {{item.status === '未缴费' ? 'unpaid' : 'paid'}}">{{item.status}}</view>
+          </view>
+        </view>
+        <view class="bill-action" wx:if="{{item.status === '未缴费'}}">
+          <button class="pay-btn">立即缴费</button>
+        </view>
+        <view class="bill-action" wx:else>
+          <button class="detail-btn">开发票 ></button>
         </view>
       </view>
-    </view>
-  </view>
-
-  <!-- 温馨提示 - 调整位置 -->
-  <view class="tips">
-    <text class="tips-title">温馨提示：</text>
-    <text class="tips-content">若无应缴金额，系统将充值到余额。</text>
-  </view>
-
-  <!-- 缴费按钮 - 调整样式 -->
-  <view class="pay-btn" bindtap="payNow">立即缴费</view>
-
-  <!-- 数字键盘部分 -->
-  <view class="keyboard" wx:if="{{showKeyboard}}">
-    <view class="keyboard-row">
-      <view class="key" bindtap="inputNumber" data-number="1">1</view>
-      <view class="key" bindtap="inputNumber" data-number="2">2</view>
-      <view class="key" bindtap="inputNumber" data-number="3">3</view>
-      <view class="key delete" bindtap="deleteNumber"><image src="/images/delete-icon.png" mode="aspectFit"></image></view>
-    </view>
-    <view class="keyboard-row">
-      <view class="key" bindtap="inputNumber" data-number="4">4</view>
-      <view class="key" bindtap="inputNumber" data-number="5">5</view>
-      <view class="key" bindtap="inputNumber" data-number="6">6</view>
-      <view class="key confirm" bindtap="confirmInput">确定</view>
-    </view>
-    <view class="keyboard-row">
-      <view class="key" bindtap="inputNumber" data-number="7">7</view>
-      <view class="key" bindtap="inputNumber" data-number="8">8</view>
-      <view class="key" bindtap="inputNumber" data-number="9">9</view>
-    </view>
-    <view class="keyboard-row">
-      <view class="key zero" bindtap="inputNumber" data-number="0">0</view>
-      <view class="key" bindtap="inputNumber" data-number=".">.</view>
-    </view>
-  </view>
-
+    </block>
+    <view class="list-end" wx:if="{{billList.length > 0}}">没有更多了</view>
+    <view class="empty-list" wx:else>暂无账单数据</view>
+  </scroll-view>
 </view> 

pages/zhangdanlist/zhangdanlist.wxss

@@ -9,7 +9,7 @@
 .header {
   position: relative;
   width: 100%;
-  height: 180rpx;
+  height: 300rpx;
 }
 
 .header .background {
@@ -18,21 +18,16 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, rgba(46, 130, 255, 1) 0%, rgba(46, 130, 255, 1) 84.9%, rgba(46, 130, 255, 0) 100%);
+  background-color: #4285f4;
 }
 
 .back-icon {
   position: absolute;
   left: 30rpx;
-  top: 120rpx;
+  top: 80rpx;
   font-size: 40rpx;
   color: white;
   z-index: 10;
-  width: 60rpx;
-  height: 60rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .header-title {
@@ -40,13 +35,20 @@
   font-size: 36rpx;
   margin-bottom: 20rpx;
 }
+
+/* .custom-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 5;
+} */
+
 .user-info-container {
   position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 0rpx 30rpx;
-  top: -200rpx;
+  margin-top: -100rpx;
+  padding: 0 30rpx;
+  top: -20rpx;
   width: 100%;
   box-sizing: border-box;
 }
@@ -54,330 +56,137 @@
 .user-info {
   background-color: transparent;
   color: white;
-  padding: 30rpx;
-  border-radius: 20rpx;
-  position: relative;
+  padding: 20rpx 20rpx;
   width: 100%;
 }
 
 .user-name {
   font-size: 40rpx;
   font-weight: bold;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
 }
 
 .user-id, .user-address {
   display: flex;
   align-items: center;
-  font-size: 30rpx;
-  margin-bottom: 20rpx;
-  color: rgba(255, 255, 255, 1);
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .id-icon, .address-icon {
-  width: 32rpx;
-  height: 32rpx;
+  width: 30rpx;
+  height: 30rpx;
   margin-right: 10rpx;
 }
 
-
-.user-phone, .user-address {
-  display: flex;
-  font-size: 15px;
-  margin-bottom: 3px;
-  color: rgba(255, 255, 255, 1);
-}
-
-.user-phone image, .user-address image {
-  width: 32rpx;
-  height: 32rpx;
-  margin-right: 10rpx;
-}
-
-.edit-btn {
-  position: absolute;
-  right: 30rpx;
-  top: 30rpx;
-  font-size: 28rpx;
-  color: #1989fa;
-  padding: 10rpx 20rpx;
-  border: 1px solid #1989fa;
-  border-radius: 30rpx;
-}
-
-.payment-section {
-  position: relative;
-  background-color: transparent;
-  margin: -10rpx 30rpx;
-  border-radius: 20rpx;
-  padding: 0;
-  top: -200rpx;
-  box-shadow: none;
-  width: calc(100% - 70rpx);
-  box-sizing: border-box;
+.bill-list-container {
+  flex: 1;
+  padding: 20rpx;
+  margin-top: 30rpx;
 }
 
-.payment-title {
+.bill-date-section {
   font-size: 32rpx;
-  color: rgba(46, 48, 56, 1);
-  margin-bottom: 20rpx;
-}
-
-.payment-amount {
-  font-size: 60rpx;
-  color: rgba(239, 93, 93, 1);
   font-weight: bold;
-  margin: 30rpx 0;
-}
-
-.quick-amounts {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin-top: 20rpx;
+  padding: 20rpx 10rpx;
+  color: #333;
 }
 
-.amount-item {
-  width: 30%;
-  text-align: center;
-  background-color: #f5f5f5;
-  padding: 20rpx 0;
+.bill-card {
+  background-color: white;
+  border-radius: 12rpx;
+  padding: 30rpx;
   margin-bottom: 20rpx;
-  border-radius: 8rpx;
-  font-size: 32rpx;
-}
-
-.usage-info {
-  margin-top: 30rpx;
-  font-size: 28rpx;
-  color: #666;
-  line-height: 1.6;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 }
 
-.pay-btn {
-  background-color: #1989fa;
-  color: white;
-  font-size: 36rpx;
-  text-align: center;
-  padding: 24rpx 0;
-  border-radius: 60rpx;
-  margin: 40rpx auto;
-  margin-bottom: 160rpx;
-  width: 85%;
-  max-width: 800rpx;
-}
-
-.switch-meter {
-  padding: 5px 10px;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #333;
+.bill-info {
+  display: flex;
+  align-items: center;
 }
 
-/* 金额显示样式 */
-.amount-container {
-  background-color: white;
-  border-radius: 20rpx;
-  padding: 40rpx 30rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+.bill-icon {
+  margin-right: 20rpx;
 }
 
-.amount-title {
-  font-size: 34rpx;
-  color: rgba(46, 48, 56, 1);
-  margin-bottom: 10rpx;
+.bill-icon image {
+  width: 60rpx;
+  height: 60rpx;
 }
 
-.amount-display {
-  position: relative;
-  margin-bottom: 30rpx;
-  display: flex;
-  align-items: flex-end;
+.bill-details {
+  flex: 1;
 }
 
-.amount-value {
-  font-size: 72rpx;
-  color: rgba(239, 93, 93, 1);
+.bill-number {
+  font-size: 30rpx;
   font-weight: bold;
-  line-height: 1;
-}
-
-.amount-unit {
-  font-size: 28rpx;
-  color: #333;
-  margin-left: 4rpx;
   margin-bottom: 10rpx;
 }
 
-/* 余额信息样式调整 */
-.balance-info {
-  display: flex;
-  font-size: 34rpx;
-  margin-bottom: 30rpx;
-  align-items: center;
-}
-
-.balance-label {
+.bill-usage, .bill-payment-time {
+  font-size: 26rpx;
   color: #666;
+  margin-top: 6rpx;
 }
 
-.balance-value {
-  color: rgba(239, 93, 93, 1);
-  font-weight: bold;
-}
-
-.balance-unit {
-  color: #333;
-  margin-right: 10rpx;
+.bill-amount-status {
+  text-align: right;
 }
 
-.margin-left {
-  margin-left: 20rpx;
+.bill-amount {
+  font-size: 36rpx;
+  font-weight: bold;
 }
 
-/* 快捷金额选择 */
-.quick-amount {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin-bottom: 15px;
+.bill-status {
+  font-size: 26rpx;
+  margin-top: 10rpx;
 }
 
-.amount-btn {
-  width: 30%;
-  text-align: center;
-  padding: 24rpx 0;
-  border: 2rpx solid #ddd;
-  border-radius: 10rpx;
-  margin-bottom: 24rpx;
-  font-size: 34rpx;
+.paid {
   color: #333;
-  background-color: rgba(242, 245, 250, 1);
-}
-
-.amount-btn:active {
-  background-color: #f5f5f5;
-}
-
-.custom-amount {
-  color: #1e90ff;
-  border-color: #1e90ff;
-}
-
-.custom-amount:active {
-  background-color: rgba(30, 144, 255, 0.05);
-}
-
-/* 温馨提示位置调整 */
-.tips {
-  font-size: 24rpx;
-  color: #999;
-  padding: 20rpx 30rpx;
-  top: -200rpx;
-  text-align: left;
-  border-top: none;
-  position: relative;
-  left: -100rpx;
 }
 
-.tips-title {
-  color:  rgba(239, 93, 93, 1);
-}
-tips-content {
-  color:  rgba(104, 108, 128, 1);
-}
-/* 数字键盘样式优化 */
-.keyboard {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: #f0f0f0;
-  padding: 20rpx;
-  z-index: 1000;
-  border-top: 2rpx solid #ddd;
-}
-
-.keyboard-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20rpx;
+.unpaid {
+  color: #ff4d4f;
 }
 
-.key {
-  width: 23%;
-  height: 100rpx;
-  background-color: white;
-  border-radius: 10rpx;
+.bill-action {
+  margin-top: 20rpx;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 40rpx;
-  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
-  margin: 0 10rpx;
-}
-
-.key.zero {
-  width: 48%;
-}
-
-.delete {
-  background-color: #f5f5f5;
-}
-
-.delete image {
-  width: 48rpx;
-  height: 48rpx;
+  justify-content: flex-end;
 }
 
-.confirm {
-  background-color: #1e90ff;
+.pay-btn {
+  background-color: #ff4d4f;
   color: white;
+  font-size: 28rpx;
+  padding: 10rpx 40rpx;
+  border-radius: 30rpx;
+  line-height: 1.5;
 }
 
-/* 自定义金额输入框样式 - 修改为与快捷金额按钮一致 */
-.custom-input-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  border: 2rpx solid #ddd; /* 默认边框颜色与快捷金额按钮一致 */
-  border-radius: 10rpx;
-  margin-bottom: 24rpx;
-  padding: 0 10rpx;
-  background-color: rgba(242, 245, 250, 1);
-}
-
-/* 自定义金额输入框选中状态 */
-.custom-input-container.selected {
-  border: 2rpx solid rgba(46, 125, 253, 1);
-}
-
-.yuan-symbol {
-  color: rgba(63, 65, 76, 1); /* 默认颜色 */
-  font-size: 34rpx;
-  margin-right: 4rpx;
-}
-
-/* 选中状态下的¥符号颜色 */
-.custom-input-container.selected .yuan-symbol {
-  color: rgba(46, 125, 253, 1);
-}
-
-.custom-amount-input {
-  flex: 1;
-  height: 80rpx;
-  font-size: 34rpx;
-  color: #333; 
+.detail-btn {
+  background-color: #f0f0f0;
+  color: #333;
+  font-size: 28rpx;
+  padding: 10rpx 40rpx;
+  border-radius: 30rpx;
+  line-height: 1.5;
 }
 
-/* 选中状态下的输入框文字颜色 */
-.custom-input-container.selected .custom-amount-input {
-  color: rgba(46, 125, 253, 1);
+.list-end {
+  text-align: center;
+  color: #999;
+  font-size: 26rpx;
+  padding: 30rpx 0;
 }
 
-/* 添加选中状态的样式 */
-.amount-btn.selected {
-  border: 2rpx solid rgba(46, 125, 253, 1);
-  color: rgba(46, 125, 253, 1);
+.empty-list {
+  text-align: center;
+  color: #999;
+  font-size: 28rpx;
+  padding: 100rpx 0;
 }