zhsw_wechat/pages/lijijiaofei/lijijiaofei.js

const app = getApp();
Page({
  data: {
    images: {
      logo: '',
      background: '',
      card: '',
      tzd: "",
      phone: "",
      yl: "",
      jcsfcjtzd: ""
    },
    userInfo: {
      name: app.globalData.currentAccountInfo.username,
      id:  app.globalData.currentAccountInfo.usernumber,
      address: app.globalData.currentAccountInfo.address
    },
    billInfo: {}, // 存储从首页传递过来的账单信息
    quickAmounts: [10, 30, 50, 100, 200, 500],
    waterUsage: {
      lastReading: 2000,
      currentReading: 2050,
      nextReading: 3020,
      usage: 87
    },
    showKeyboard: false,
    selectedAmount: null,
    customAmount: '',
    inputFocus: false,
  },
  onLoad(options) {
    // 接收从homepage传递的账单信息
    if (options.billInfo) {
      const billInfo = JSON.parse(decodeURIComponent(options.billInfo));
      this.setData({
        amount: billInfo.amount, // 默认实缴金额为应缴金额
        actualAmount: billInfo.amountDue, // 设置应缴金额
        balance: billInfo.balance   //余额 
      });
    }

    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: '处理中',
    });
    wx.request({
      url: app.globalData.interfaceUrls.prepayOrder,
      method: 'POST',
      header: {
        'content-type': 'application/json',
        'token': app.globalData.userWxInfo.token,
        'source': "wc",
        '!SAAS_LOGIN_TOKEN_!': app.globalData.currentAccountInfo.dsKey
      },
      data: {
        openId: app.globalData.userWxInfo.openid,
        totalAmount: 1,
        description: '测试订单',
      },
      success: res => {
        wx.hideLoading();
        console.log('预下单', res);
        wx.requestPayment({
          timeStamp: res.data.data.timeStamp,
          nonceStr: res.data.data.nonceStr,
          package: res.data.data.packageVal,
          signType: 'RSA',
          paySign: res.data.data.paySign,
          success: res => {
            console.log('支付结果', res)
          }, 
          complete: () => {

          }
        })
      }
    })
    // 模拟支付
    // 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) {
      // 移除非数字和小数点字符
      value = value.replace(/[^\d.]/g, '');
      
      // 确保只有一个小数点
      const parts = value.split('.');
      if (parts.length > 2) {
        value = parts[0] + '.' + parts.slice(1).join('');
      }
      
      // 限制小数点后最多两位
      if (parts.length === 2 && parts[1].length > 2) {
        value = parts[0] + '.' + parts[1].substring(0, 2);
      }
      
      // 限制总长度小于8位（包含小数点）
      if (value.length > 7) {
        value = value.substring(0, 7);
      }
    }
    
    this.setData({
      customAmount: value,
      selectedAmount: 0, // 清除其他金额选择
      amount: value || '0.00' // 更新显示金额
    });
  },

  // 输入框获得焦点
  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
    // });
  },
})