110 lines
3.8 KiB
Plaintext
110 lines
3.8 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 class="btn btn--ghost btn--sm" data-no="{{item.order_no}}" bindtap="onRefund">申请退款</view>
|
|
</block>
|
|
</view>
|
|
</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>
|