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

<!--components/parking-order.wxml-->
<view class="popup-mask" wx:if="{{showPopup}}" wx:for="{{occupyOrder}}" 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'>{{item.chargstationname}}</text>
          <text class="chargpile">{{item.chargpileids}} </text>
        </view>
      </view>
    <!-- 充电桩名称 -->
    <view class="pile-info">{{item.chargpilename}}</view>
    <!-- 时间信息 -->
    <view class="time-info">
      <view class="info-row">
        <text class="label">占位开始时间：</text>
        <text class="value">{{item.occupyBeginTime || 0}}</text>
      </view>
      <view class="info-row">
        <text class="label">已占位时长：</text>
        <text class="value">{{item.occupyTime || 0}}</text>
      </view>
    </view>
    <!-- 费用信息 -->
    <view class="info-row fee-info">
      <text class="label">已产生占位费：</text>
      <text class="value">{{item.occupyFee || 0}}</text>
    </view>
    <!-- 警告文字 -->
    <view class="warning-text">
      为避免给您带来更多的经济损失，请充电结束后及时挪车！
    </view>
    <!-- 按钮 -->
    <button class="confirm-btn" bindtap="handleConfirm">
      我已知晓，将尽快挪车
    </button>
    <!-- 联系客服 -->
    <view class="contact-link" bindtap="handleContact">联系客服</view>
  </view>
</view>