zhsw_wechat/pages/huhaobangding/huhaobangding.wxml

<view class="container2">
  <view class="custom-nav">
    <view class="nav-back" bindtap="navigateBack">
      <view class="back-arrow"></view>
    </view>
    <view class="nav-title">户号绑定</view>
  </view>
  
  <view class="form-group1">
    <view class="form-item">
      <text class="label">水站公司<text class="required">*</text></text>
      <view class="picker-container" bindtap="showWaterCompanyPicker">
        <text class="picker-text">{{waterCompany || '请选择水站公司'}}</text>
        <view class="arrow-right"></view>
      </view>
    </view>
  </view>

  <view class="form-group2">
    <view class="form-item">
      <text class="label">户号<text class="required">*</text></text>
      <input type="text" placeholder="请绑定缴费户号" placeholder-class="placeholder" bindinput="onHuHaoInput" value="{{huHao}}" />
      <view class="check-auth-btn" bindtap="showDrawer">
        查看获取方式
      </view>
    </view>

    <view class="form-item">
      <text class="label">户名<text class="required">*</text></text>
      <input type="text" placeholder="请输入户名" placeholder-class="placeholder" bindinput="onHuMingInput" value="{{huMing}}" />
    </view>
  </view>

  <view class="group-select">
    <text class="section-title">选择分组<text class="optional">(选填)</text></text>
    <view class="tag-group">
      <!-- <view class="tag {{selectedTag === '默认户号' ? 'active' : ''}}" bindtap="selectTag" data-tag="默认户号">默认户号</view> -->
      <view class="tag {{selectedTag === '家' ? 'active' : ''}}" bindtap="selectTag" data-tag="家">家</view>
      <view class="tag {{selectedTag === '父母' ? 'active' : ''}}" bindtap="selectTag" data-tag="父母">父母</view>
      <view class="tag {{selectedTag === '公司' ? 'active' : ''}}" bindtap="selectTag" data-tag="公司">公司</view>
      <view class="tag {{selectedTag === '出租' ? 'active' : ''}}" bindtap="selectTag" data-tag="出租">出租</view>
      <view class="tag {{selectedTag === '朋友' ? 'active' : ''}}" bindtap="selectTag" data-tag="朋友">朋友</view>
      <view class="tag {{selectedTag === '自定义' ? 'active' : ''}}" bindtap="selectTag" data-tag="自定义">自定义</view>
    </view>

    <block wx:if="{{showCustomInput}}">
      <view class="custom-group">
        <view class="custom-input">
          <input type="text" placeholder="请输入标签名称" maxlength="4" bindinput="onTagInput" />
          <view class="char-limit {{tagLength > 4 ? 'error' : ''}}">{{tagLength}}/4</view>
        </view>
      </view>
    </block>
  </view>

  <view class="submit-btn">
    <button type="primary" bindtap="confirmBinding">确认绑定</button>
  </view>

  <view class="tips">
    <text>1、水站公司选择可以根据催缴通知单查询或者电话咨询水利站工作人员。</text>
    <text>2、绑定户号：户号必须准确，否则无法绑定。</text>
    <text>3、户号可以从催缴单上查询或者当地营业厅。</text>
  </view>

</view>

<view class="picker-mask" wx:if="{{showWaterCompanyPicker}}" bindtap="hideWaterCompanyPicker"></view>
<view class="picker-container-modal {{showWaterCompanyPicker ? 'show' : ''}}">
  <view class="picker-header">
    <view class="picker-cancel" bindtap="hideWaterCompanyPicker">取消</view>
    <view class="picker-title">选择水站公司</view>
    <view class="picker-confirm" bindtap="confirmWaterCompany">确定</view>
  </view>
  <picker-view class="water-company-picker" indicator-style="height: 50px;" value="{{waterCompanyIndex}}" bindchange="onWaterCompanyChange">
    <picker-view-column>
      <view wx:for="{{waterCompanyList}}" wx:key="index" class="picker-item">{{item}}</view>
    </picker-view-column>
  </picker-view>
</view>

<view class="drawer-mask" wx:if="{{showDrawer}}" bindtap="hideDrawer"></view>
<view class="drawer-container {{showDrawer ? 'show' : ''}}">
  <view class="drawer-close"></view>
  <view class="drawer-title">获取户号方式</view>

  <view class="auth-method">
    <image class="auth-method-icon" src="/static_file/tzd.png" mode="aspectFit"></image>
    <view class="auth-method-content">
      <view class="auth-method-title">检查水费催缴通知单</view>
      <view class="auth-method-desc">从纸质版水费催缴通知单上查看用水户号。</view>
    </view>
    <view class="preview" bindtap="previewImage">
      <image class="preview-icon" src="/static_file/yl.png"></image>
      <text class="preview-text">预览图</text>
    </view>
  </view>

  <view class="auth-method">
    <image class="auth-method-icon" src="/static_file/phone.png" mode="aspectFit"></image>
    <view class="auth-method-content">
      <view class="auth-method-title">电话查询</view>
    </view>
  </view>
  
  <view class="phone-query-list">
    <view class="phone-query-item" wx:for="{{phoneQueryList}}" wx:key="id">
      <view class="phone-query-name">{{item.name}}</view>
      <view class="phone-query-contact">
        <text>联系电话：{{item.phone}}</text>
        <view class="call-btn" data-phone="{{item.phone}}" bindtap="makePhoneCall">拨打电话</view>
      </view>
      <view class="phone-query-time">客服在线时间：{{item.time}}</view>
    </view>
  </view>
</view>

<!-- 修改预览模态框部分 -->
<view class="preview-modal {{showPreview ? 'show' : ''}}" bindtap="closePreview">
  <view class="preview-content" catchtap="preventBubble">
    <image class="preview-image" src="/static_file/jcsfcjtzd.jpg" mode="widthFix"></image>
    <view class="close-preview-btn" bindtap="closePreview">关闭</view>
  </view>
</view>