wechat-pilelog/components/parking-order/parking-order.wxml

<!--components/parking-order.wxml-->
<view class="popup-mask" wx:if="{{showPopup}}" wx:for="{{occupyFeeOrderList}}" wx:key="id">
  <!-- <view class="popup-mask" wx:for="{{occupyFeeOrderList}}" wx:key="id"> -->
  <view class="popup-content">
    <!-- 标题 -->
    <view class="popup-title">占位提醒</view>
    <!-- 充电站信息区域 -->
    <view class='charging_text_title'>
        <view class='charging'>
          <image src='/images/zhangweifei.png'></image>
        </view>
        <view class='charging_text_title1'>
          <text class='bold occupyTest'>{{item.brandName || ''}}{{item.chargstationname}}</text>
          <text class="chargpile occupyTest">{{item.chargpileids}} </text>
        </view>
      </view>
    <!-- 充电桩名称 -->
    <view class="pile-info">{{item.chargpilename}}</view>
    <!-- 时间信息 -->
    <view class="time-info">
      <view class="info-row">
        <text class="label occupyTest">占位开始时间：</text>
        <text class="value occupyTest">{{item.occupyBeginTime || 0}}</text>
      </view>
      <view class="info-row">
        <text class="label occupyTest">已占位时长：</text>
        <text class="value occupyTest">{{item.occupyTime || 0}}分</text>
      </view>
    </view>
    <!-- 费用信息 -->
    <view class="info-row fee-info" style="margin-bottom: 18rpx;">
      <text class="label occupyTest">已产生占位费：</text>
      <text class="value occupyTest">{{item.occupyFee || 0}}元</text>
    </view>
   <!-- 费用信息 -->
   <view>
   <view style="font-weight: 600;font-size: 24rpx;padding: 0 10rpx;">费用说明</view>
      <view class="info-rows" style="padding: 0 10rpx;">
        <text class="value occupyTest" style="margin: none;white-space: normal;">收费规则：{{template.costCycleFee || 0}}元/{{template.costCycle|| 0}}分钟,{{template.freeTime || 0}}分钟内免费</text>
        <text class="value occupyTest" style="white-space: normal;"  wx:if='{{template.maxFee > 0}}'>,单次封顶{{template.maxFee}}元/次
        </text>
      </view>
    </view>
    <!-- 时间信息 -->
    <view class="info-row">
      <text class="value occupyTest">收费时段：</text>
      <view class="value occupyTest" style="font-size: 24rpx;">{{template.costTimePeriod || '无'}}</view>
    </view>
    <!-- 警告文字 -->
    <view class="warning-text">
      为避免给您带来更多的经济损失，请充电结束后及时挪车！
    </view>
    <!-- 按钮 -->
    <button class="confirm-btn" bindtap="handleConfirm">
      我已知晓，将尽快挪车
    </button>
    <!-- 联系客服 -->
    <view class="contact-link" bindtap="handleContact">联系客服</view>
  </view>
</view>