nsgk_wechat/pages/apply/index.wxml

<!--pages/apply/index.wxml-->
<view class="ns" style="height:{{isIPX?'88px':'64px'}};">
  <image src="../../image/apply/back.png" style="top:{{isIPX?'54px':'30px'}};" mode="widthFix" bindtap="back"></image>
  <text style="top:{{isIPX?'54px':'30px'}};">支出申请</text>
</view>
<!-- 付款单位开始 -->
<view class="top" style="margin-top:{{isIPX?'100px':'75px'}};">
  <image src="../../image/apply/dress_icon.png" mode="widthFix"></image>
  <view class="top-tit">付款单位</view>
  <view class="top-title">{{bookName}}</view>
</view>

<view class="main">
  <van-tabs sticky color="#000">
    <van-tab title="银行账户">
      <view class="bank_box">
        <text class="zt">一般户</text>
        <image src="../../image/apply/jsyh_bg2.png" style="width: 100%;position: absolute;bottom:0;z-index: 9;"  mode="widthFix"></image>
        <image src="../../image/apply/bgt.png" style="width: 100%;position: absolute;top:0;right:0;z-index: 9;height: 100%;"></image>
        <view class="bank_content">
          <image src="../../image/apply/jsyh_icon.png" style="width: 28%;"  mode="widthFix"></image>
          <view style="margin-bottom: 2vh;">6217 0021 9000 7972 186<text>卡号</text></view> 
          <view>可用余额</view> 
          <view style="font-weight: bold;font-size: 22px;margin-top: 2vh;">10,288.83</view> 
        </view>
      </view>

      <view class="bank_box">
        <text class="zt">一般户</text>
        <image src="../../image/apply/jsyh_bg2.png" style="width: 100%;position: absolute;bottom:0;z-index: 9;"  mode="widthFix"></image>
        <image src="../../image/apply/bgt.png" style="width: 100%;position: absolute;top:0;right:0;z-index: 9;height: 100%;"></image>
        <view class="bank_content">
          <image src="../../image/apply/jsyh_icon.png" style="width: 28%;"  mode="widthFix"></image>
          <view style="margin-bottom: 2vh;">6217 0021 9000 7972 186<text>卡号</text></view> 
          <view>可用余额</view> 
          <view style="font-weight: bold;font-size: 22px;margin-top: 2vh;">10,288.83</view> 
        </view>
      </view>

    </van-tab>
    <van-tab title="公务卡">
    
      <view class="bank_box">
        <image src="../../image/apply/jsyh_bg2.png" style="width: 100%;position: absolute;bottom:0;z-index: 9;"  mode="widthFix"></image>
        <view class="bank_content gwk">
          <image src="../../image/apply/gwk_icon.png" style="width: 28%;"  mode="widthFix"></image>
          <view style="margin-bottom: 2vh;">6217 0021 9000 7972 186<text>卡号</text></view> 
          <view>可用余额</view> 
          <view style="font-weight: bold;font-size: 22px;margin-top: 2vh;">10,288.83</view> 
        </view>
        <view class="holder">持有人：王强</view>
      </view>
      
    </van-tab>
  </van-tabs>
</view>

<view class="bottom">
  <view class="btn1" bindtap="openBox">支付模板</view>
  <view class="btn2" bindtap="swichPaymentApply">下一步</view>
</view>

<van-action-sheet show="{{show}}" title="支付模板" bind:close="closeBox">
  <van-swipe-cell right-width="{{ 65 }}">
    <van-cell-group>
      <van-cell label="支付水电、网费、房租" bindtap="goTemplate"  >
        <view slot="title">
          <view class="van-cell-text">日常支付水电模板<van-tag plain type="danger" color="#FC9A55" style="margin-left:10px;">默认</van-tag></view>
        </view>
        <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mrmb.png?sign=5e5df640777f6a7993c45e1a559dd998&t=1648619865" class="custom-icon" size="40" style="margin-right: 10px;" />
      </van-cell>
    </van-cell-group>
    <view slot="right" class="deleteBox">
      <image src="../../image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
    </view>
  </van-swipe-cell>
  <van-swipe-cell right-width="{{ 65 }}">
    <van-cell-group>
      <van-cell title="日常支付水电模板" label="支付水电、网费、房租"  >
        <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mb.png?sign=2a8bbe2cb4d4e0f28a99fddbe042d26c&t=1648620032" class="custom-icon" size="40" style="margin-right: 10px;" />
      </van-cell>
    </van-cell-group>
    <view slot="right" class="deleteBox">
      <image src="../../image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
    </view>
  </van-swipe-cell>
  <van-swipe-cell right-width="{{ 65 }}">
    <van-cell-group>
      <van-cell title="日常支付水电模板" label="支付水电、网费、房租"  >
        <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mb.png?sign=2a8bbe2cb4d4e0f28a99fddbe042d26c&t=1648620032" class="custom-icon" size="40" style="margin-right: 10px;" />
      </van-cell>
    </van-cell-group>
    <view slot="right" class="deleteBox">
      <image src="../../image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
    </view>
  </van-swipe-cell>
  <van-swipe-cell right-width="{{ 65 }}">
    <van-cell-group>
      <van-cell title="日常支付水电模板" label="支付水电、网费、房租"  >
        <van-icon slot="icon" name="https://636c-cloud1-8gya17a31667774d-1310628902.tcb.qcloud.la/icon_mb.png?sign=2a8bbe2cb4d4e0f28a99fddbe042d26c&t=1648620032" class="custom-icon" size="40" style="margin-right: 10px;" />
      </van-cell>
    </van-cell-group>
    <view slot="right" class="deleteBox">
      <image src="../../image/apply/icon_delete.png" style="width: 25px;height: 25px;margin: 0 auto;"></image>
    </view>
  </van-swipe-cell>
</van-action-sheet>