zhsw_wechat/pages/lijijiaofei/lijijiaofei.js

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
    // });
  },
})