zhsw_wechat/pages/huhaoguanli/huhaoguanli.wxml

<!-- 通知详情页面 -->
<view class="container">
  <view class="header">
    <image class="background" src="/static_file/background.png" mode="widthFix" />
  </view>
  
  <!-- 导航栏 -->
  <view class="custom-nav">
    <view class="fixed-back" bindtap="goBack">←</view>
    <view class="nav-title">户号管理</view>
  </view>
  
  <scroll-view scroll-y="true" class="scroll-area">
    <view class="card-list">
      <view class="card" wx:for="{{huHaoList}}" wx:key="id">
        <view class="card-inner">
          <image class="card-background" src="/static_file/card.png" mode="aspectFill" />
          <view class="card-header">
            <view class="name-tag">
              <text class="name">{{item.username}}</text>
              <text class="tag" wx:if="{{item.groupName}}">{{item.groupName}}</text>
            </view>
          </view>
          <view class="card-body">
            <text class="phone">{{item.usernumber}}</text>
            <text class="address">{{item.address}}</text>
          </view>
          <view class="card-footer">
            <button class="unbind-btn" bindtap="unbindHuHao" data-id="{{item.id}}">解除绑定</button>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
  
  <!-- 底部固定按钮 -->
  <view class="bottom-btn-container">
    <button class="bind-new-btn" bindtap="goToBindNewHuHao">+绑定新户号</button>
  </view>
  
  <!-- 解绑确认弹窗 -->
  <view class="modal-mask" wx:if="{{showUnbindModal}}">
    <view class="modal-content">
      <view class="modal-icon-wrapper">
        <image class="modal-icon" src="/static_file/jbtx.png" mode="aspectFit"></image>
      </view>
      <view class="modal-body">
        <view class="modal-title">确定解绑户号吗？</view>
        <view class="modal-desc">解绑后无法恢复</view>
        <view class="modal-btns">
          <button class="cancel-btn" bindtap="cancelUnbind">取消</button>
          <button class="confirm-btn" bindtap="confirmUnbind">解绑</button>
        </view>
      </view>
    </view>
  </view>
</view>