zhsw_wechat/pages/huhaobangding/huhaobangding.wxml

<view class="container">
  <view class="form-group">
    <view class="form-item">
      <text class="label">户号</text>
      <input type="text" placeholder="请绑定缴费户号" placeholder-class="placeholder" />
      <view class="check-auth-btn" bindtap="showDrawer">
        查看获取方式
      </view>
    </view>

    <view class="form-item">
      <text class="label">手机号</text>
      <input type="number" placeholder="请输入手机号" placeholder-class="placeholder" />
    </view>
  </view>

  <view class="group-select">
    <text class="section-title">设置分组(可选)</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>

    <block wx:if="{{showCustomInput}}">
      <view class="custom-group">
        <view class="custom-input">
          <input type="text" placeholder="请输入标签名称" placeholder-class="placeholdersecond" bindinput="onCustomInput" />
          <text class="count">{{customTagLength}}/4字</text>
        </view>
      </view>
    </block>
  </view>

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

  <view class="tips">
    <text>1、请确认上述信息是您定期水表。</text>
    <text>2、如果您的水表为合收费表，我们将绑定的是您对应的主表信息。</text>
  </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 class="auth-method-desc">提供户号地址拨打服热线电话，客服在线时间为早9:00至晚20:00。</view>
    </view>
    <view class="auth-method-action" bindtap="makePhoneCall">拨打电话</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>