zhsw_wechat/pages/huhaobangding/huhaobangding.wxml

<view class="custom-nav">
  <view bindtap="goBack">
    <image src="/static_file/backcion.png" mode="aspectFit" class="back-icon"></image>
  </view>
  <view class="nav-title">户号绑定</view>
</view>

<scroll-view scroll-y="true" class="page-scroll">
  <view class="container2">
    <view class="form-group1">
      <view class="form-item">
        <text class="label">水站公司<text class="required">*</text></text>
        <block wx:if="{{isChange}}">
          <view class="picker-container" bindtap="showWaterCompanyPicker">
            <text class="picker-text">{{waterCompany || '请选择水站公司'}}</text>
            <view class="arrow-right">
          </view>
        </view>
        </block>
        <block wx:else>
          <view class="picker-container" >
            <text style="color: black;" class="picker-text">{{waterCompany || '请选择水站公司'}}</text>
          </view>
        </block>
      
      </view>
    </view>

    <view class="form-group2">
      <view class="form-item">
        <text class="label">户号<text class="required">*</text></text>
        <input class="labelInput" type="number" maxlength="9" 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="optional"></text></text>
        <input class="labelInput" type="text" maxlength="30" placeholder="请输入户名" placeholder-class="placeholder" bindinput="onHuMingInput" value="{{huMing}}" />
        <view class="check-auth-btn" bindtap="getHuMing">
          获取户名
        </view>
      </view>
      <view class="form-item">
        <text class="label">手机号<text class="required">*</text></text>
        <input class="labelInput" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" bindinput="onPhoneInput" value="{{phone}}" />
      </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="请输入标签名称" bindinput="onTagInput" value="{{customTag}}" />
            <view class="char-limit {{tagLength > 4 ? 'error' : ''}}">{{tagLength}}/4字</view>
          </view>
        </view>
      </block>
    </view>

    <view class="submit-btn">
      <button class="pay-btn" hover-class="pay-btn-hover" hover-stay-time="100" bindtap="confirmBinding">确认绑定</button>
    </view>

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

  </view>
</scroll-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.name}}</view>
    </picker-view-column>
  </picker-view>
</view>

<view class="drawer-mask" wx:if="{{showDrawer}}" bindtap="hideDrawer" catchtouchmove="preventTouchMove"></view>
<view class="drawer-container {{showDrawer ? 'show' : ''}}" catchtouchmove="preventNonListScroll">
  <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-container">
    <scroll-view class="phone-query-scroll" 
                 scroll-y="true" 
                 enhanced="true" 
                 show-scrollbar="true" 
                 bounces="true" 
                 fast-deceleration="true"
                 data-id="phoneQueryList">
      <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>
    </scroll-view>
  </view>
</view>

<!-- 修改预览模态框部分 -->
<view class="preview-modal {{showPreview ? 'show' : ''}}" bindtap="closePreview" catchtouchmove="preventTouchMove">
  <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>