feat: ui update
This commit is contained in:
@@ -1,19 +1,26 @@
|
||||
<view class="page page-flex">
|
||||
<navigation-bar title="我的订单" />
|
||||
<navigation-bar title="我的订单" scrolled="{{navScrolled}}" />
|
||||
|
||||
<scroll-view scroll-y class="scroll-body" bindscrolltolower="onReachBottom">
|
||||
<!-- 筛选 -->
|
||||
<scroll-view scroll-x class="filter-scroll" show-scrollbar="{{false}}">
|
||||
<view class="filter-row">
|
||||
<view
|
||||
wx:for="{{filters}}"
|
||||
wx:key="name"
|
||||
class="filter-item {{activeFilter === index ? 'active' : ''}}"
|
||||
data-index="{{index}}"
|
||||
bindtap="onFilterTap"
|
||||
>{{item.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<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}}"
|
||||
@@ -24,32 +31,79 @@
|
||||
bind:action="onGoMall"
|
||||
/>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="list">
|
||||
<view class="order-card card" wx:for="{{list}}" wx:key="order_no">
|
||||
<view class="order-top">
|
||||
<text class="order-no">订单 {{item._orderTail}}</text>
|
||||
<text wx:if="{{item._payChannelText}}" class="tag tag-gray">{{item._payChannelText}}</text>
|
||||
<text class="tag tag-{{item._statusType}}">{{item._statusText}}</text>
|
||||
<!-- 订单列表：状态用描边胶囊表达，不依赖颜色 -->
|
||||
<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="order-body">
|
||||
<view class="order-goods">{{item.goods_name}}</view>
|
||||
<view class="order-benefit" wx:if="{{item._benefit}}">{{item._benefit}}</view>
|
||||
<view class="order-bottom">
|
||||
<text class="order-amount">实付 <text class="num">{{item._amount}}</text></text>
|
||||
<view class="order-actions">
|
||||
<block wx:if="{{item.order_status === 1}}">
|
||||
<text wx:if="{{item._countdown}}" class="countdown">剩余 {{item._countdown}}</text>
|
||||
<view wx:if="{{item._canCancel}}" class="action-btn outline" data-no="{{item.order_no}}" bindtap="onCancel">取消订单</view>
|
||||
<view class="action-btn primary" data-no="{{item.order_no}}" bindtap="onPay">去支付</view>
|
||||
</block>
|
||||
<block wx:elif="{{item.order_status === 2}}">
|
||||
<view class="action-btn outline" data-no="{{item.order_no}}" bindtap="onRefund">申请退款</view>
|
||||
</block>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user