zhsw_wechat/pages/huhaobangding/huhaobangding.js

const app = getApp()

Page({
  data: {
    selectedTag: '',
    showCustomInput: false,
    customTagLength: 0,
    showDrawer: false,
    showPreview: false,
    
    // 新增数据
    waterCompany: '',
    waterCompanyList: ['北京水务集团', '上海水务集团', '广州水务集团', '深圳水务集团', '杭州水务集团'],
    waterCompanyIndex: [0],
    showWaterCompanyPicker: false,
    tempWaterCompanyIndex: [0],
    
    huHao: '',
    huMing: '',
    customTag: '',
    tagLength: 0,
    showQueryMethods: false,
    phoneQueryList: [
      {
        id: 1,
        name: '1、前进西路营业厅',
        phone: ' 17630145126',
        time: '8:30-17:30'
      },
      {
        id: 2,
        name: '2、浦江路营业厅',
        phone: '0516-17630145126',
        time: '8:30-17:30'
      },
      {
        id: 3,
        name: '3、 测试路营业厅',
        phone: '17630145126-345',
        time: '8:30-17:30'
      }
      // 可以添加更多项，将支持滚动显示
    ]
  },

  selectTag(e) {
    const tag = e.currentTarget.dataset.tag;
    this.setData({
      selectedTag: tag,
      showCustomInput: tag === '自定义'
    });
  },

  onCustomInput(e) {
    const value = e.detail.value;
    this.setData({
      customTagLength: value.length,
      customTag: value
    });
  },

  // 显示抽屉
  showDrawer() {
    this.setData({
      showDrawer: true
    });
  },

  // 隐藏抽屉
  hideDrawer() {
    this.setData({
      showDrawer: false
    });
  },

  // 拨打电话
  makePhoneCall(e) {
    const phone = e.currentTarget.dataset.phone;
    wx.makePhoneCall({
      phoneNumber: phone
    });
  },

  // 修改预览图片方法
  previewImage: function() {
    this.setData({
      showPreview: true
    });
  },

  // 关闭预览
  closePreview: function() {
    this.setData({
      showPreview: false
    });
  },

  // 防止点击图片内容时关闭预览
  preventBubble: function() {
    return;
  },

  // 显示水站公司选择器
  showWaterCompanyPicker: function() {
    this.setData({
      showWaterCompanyPicker: true,
      tempWaterCompanyIndex: this.data.waterCompanyIndex
    });
  },

  // 隐藏水站公司选择器
  hideWaterCompanyPicker: function() {
    this.setData({
      showWaterCompanyPicker: false
    });
  },

  // 水站公司选择变化
  onWaterCompanyChange: function(e) {
    this.setData({
      tempWaterCompanyIndex: e.detail.value
    });
  },

  // 确认水站公司选择
  confirmWaterCompany: function() {
    const index = this.data.tempWaterCompanyIndex[0];
    this.setData({
      waterCompanyIndex: this.data.tempWaterCompanyIndex,
      waterCompany: this.data.waterCompanyList[index],
      showWaterCompanyPicker: false
    });
  },

  // 户号输入
  onHuHaoInput: function(e) {
    this.setData({
      huHao: e.detail.value
    });
  },

  // 户名输入
  onHuMingInput: function(e) {
    this.setData({
      huMing: e.detail.value
    });
  },

  // 确认绑定
  confirmBinding: function() {
    // 验证必填字段
    if (!this.data.waterCompany) {
      wx.showToast({
        title: '请选择水站公司',
        icon: 'none'
      });
      return;
    }

    if (!this.data.huHao) {
      wx.showToast({
        title: '请输入户号',
        icon: 'none'
      });
      return;
    }

    if (!this.data.huMing) {
      wx.showToast({
        title: '请输入户名',
        icon: 'none'
      });
      return;
    }

    // 处理分组信息
    let groupInfo = this.data.selectedTag;
    if (this.data.selectedTag === '自定义' && this.data.customTag) {
      groupInfo = this.data.customTag;
    }

    // 提交数据
    wx.showLoading({
      title: '绑定中...',
    });

    // 模拟API调用
    setTimeout(() => {
      wx.hideLoading();
      wx.showToast({
        title: '绑定成功',
        icon: 'success',
        duration: 2000,
        success: () => {
          // 绑定成功后跳转
          setTimeout(() => {
            wx.navigateBack();
          }, 2000);
        }
      });
    }, 1500);
  },

  onLoad: function() {
    // 延迟设置导航栏，确保页面已完全加载
    setTimeout(() => {
      wx.setNavigationBarTitle({
        title: '户号绑定'
      });
      
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#0066FF'
      });
    }, 100);
  },

  // 添加返回方法
  navigateBack: function() {
    wx.navigateBack();
  },

  onTagInput(e) {
    this.setData({
      tagLength: e.detail.value.length
    });
  },

  showQueryMethodsModal() {
    this.setData({
      showQueryMethods: true
    });
  },

  closeQueryMethods() {
    this.setData({
      showQueryMethods: false
    });
  }
});