Files
zt-closet-wxmini-frontend/miniprogram/pages/order/order.wxml
T

118 lines
4.2 KiB
Plaintext

<view class="page page-flex">
<navigation-bar title="我的订单" scrolled="{{navScrolled}}" />
<scroll-view scroll-y class="scroll-body pb-safe" bindscrolltolower="onReachBottom" bindscroll="onNavScroll">
<view class="head">
<view class="eyebrow">Orders</view>
<view class="display">我的订单</view>
</view>
<!-- 下划线式筛选 -->
<view class="segbar">
<scroll-view scroll-x class="seg-scroll" show-scrollbar="{{false}}">
<view class="seg">
<view
wx:for="{{filters}}"
wx:key="name"
class="seg-item {{activeFilter === index ? 'is-on' : ''}}"
data-index="{{index}}"
bindtap="onFilterTap"
>{{item.name}}</view>
</view>
</scroll-view>
</view>
<empty-state
wx:if="{{!loading && !list.length}}"
icon="icon-doc"
title="还没有订单"
desc=""
buttonText="去看看额度包"
bind:action="onGoMall"
/>
<!-- 订单列表:状态用描边胶囊表达,不依赖颜色 -->
<view class="od-list">
<view class="od-card" wx:for="{{list}}" wx:key="order_no">
<view class="od-top">
<text class="od-no num">订单 {{item._orderTail}}</text>
<text wx:if="{{item._payChannelText}}" class="pill">{{item._payChannelText}}</text>
<text class="pill {{item._statusCls}}">{{item._statusText}}</text>
</view>
<view class="od-goods">{{item.goods_name}}</view>
<view class="od-benefit" wx:if="{{item._benefit}}">{{item._benefit}}</view>
<view class="od-bottom">
<view class="od-amount">实付 <text class="num">{{item._amount}}</text></view>
<view class="od-actions">
<block wx:if="{{item.order_status === 1}}">
<text wx:if="{{item._countdown}}" class="od-countdown num">剩余 {{item._countdown}}</text>
<view
wx:if="{{item._canCancel}}"
class="btn btn--ghost btn--sm"
data-no="{{item.order_no}}"
bindtap="onCancel"
>取消订单</view>
<view class="btn btn--ink btn--sm" data-no="{{item.order_no}}" bindtap="onPay">去支付</view>
</block>
<block wx:elif="{{item.order_status === 2}}">
<view
wx:if="{{item._canRefund}}"
class="btn btn--ghost btn--sm"
data-no="{{item.order_no}}"
bindtap="onRefund"
>申请退款</view>
</block>
<!-- 状态 6「申请退款中」为纯等待态:不提供任何操作入口(不可再次发起退款,后端也拒绝重复申请) -->
</view>
</view>
<view wx:if="{{item.order_status === 6}}" class="od-note">退款审核中,审核结果将通过站内通知告知</view>
</view>
</view>
<view wx:if="{{list.length && !hasMore}}" class="foot-note">没有更多了</view>
<view class="gap-64"></view>
</scroll-view>
<!-- 取消订单确认 -->
<v2-overlay
visible="{{cancelVisible}}"
type="modal"
title="取消订单"
content="确认取消该订单?"
buttons="{{cancelButtons}}"
bind:confirm="onCancelConfirm"
bind:cancel="onCancelCancel"
/>
<!-- 退款申请:底部玻璃抽屉 -->
<view wx:if="{{refundVisible}}" class="scrim" bindtap="onRefundClose"></view>
<view wx:if="{{refundVisible}}" class="sheet-wrap">
<view class="sheet" catchtap="noop">
<view class="sheet-grab"></view>
<view class="sheet-hd">
<text class="sheet-t">申请退款</text>
<text class="sheet-x" bindtap="onRefundClose">取消</text>
</view>
<view class="sheet-body">
<textarea
class="textarea od-refund-input"
value="{{refundReason}}"
bindinput="onRefundInput"
placeholder="请填写退款原因"
placeholder-class="input-ph"
maxlength="200"
/>
</view>
<view class="sheet-foot">
<view
class="btn btn--ink btn--block {{refundSubmitting ? 'is-off' : ''}}"
bindtap="onRefundSubmit"
>{{refundSubmitting ? '提交中…' : '提交申请'}}</view>
</view>
</view>
</view>
</view>