102 lines
3.4 KiB
Plaintext
102 lines
3.4 KiB
Plaintext
<!-- pages/order/orderDetail.wxml -->
|
|
<view class="page">
|
|
|
|
<!-- 中间内容滚动，底部按钮固定，所以这里预留底部内边距 -->
|
|
<scroll-view scroll-y class="content no-scrollbar">
|
|
|
|
<!-- 订单状态 + 倒计时 + 课程信息 -->
|
|
<view class="card header-card">
|
|
<!-- 状态与倒计时 -->
|
|
<view class="status-line">
|
|
<view class="status-badge {{ orderObj.orderStatus === '待支付' ? 'status-pending' : (orderObj.orderStatus === '已支付' || orderObj.orderStatus === '交易成功' ? 'status-success' : 'status-default') }}">
|
|
<text class="status-text">{{ orderObj.orderStatus }}</text>
|
|
</view>
|
|
<view wx:if="{{ orderObj.orderStatus === '待支付' }}" class="countdown-pill">
|
|
<text class="countdown-text">请在 {{ countdown }} 内完成支付</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 课程信息 -->
|
|
<view class="course-line">
|
|
<image class="cover" src="{{ globalImgUrl + orderObj.image }}" mode="aspectFill" lazy-load="true" />
|
|
<view class="course-info">
|
|
<text class="course-title ellipsis-2">{{ orderObj.name }}</text>
|
|
<view class="price-line">
|
|
<text class="price-origin">￥{{ orderObj.originPrice }}</text>
|
|
<text class="price-amount">应付：￥{{ orderObj.totalAmount }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单详情 -->
|
|
<view class="card">
|
|
<view class="kv">
|
|
<text class="kv-key">订单编号</text>
|
|
<text class="kv-val selectable">{{ orderObj.orderNumber }}</text>
|
|
</view>
|
|
|
|
<view class="kv">
|
|
<text class="kv-key">下单时间</text>
|
|
<text class="kv-val">{{ orderObj.createTime }}</text>
|
|
</view>
|
|
|
|
<view class="divider"></view>
|
|
|
|
<view class="kv">
|
|
<text class="kv-key">支付方式</text>
|
|
<text class="kv-val">微信支付</text>
|
|
</view>
|
|
|
|
<view class="kv">
|
|
<text class="kv-key">交易号</text>
|
|
<!-- 这里可替换为真实字段 -->
|
|
<text class="kv-val selectable">4002506191307440406460485418</text>
|
|
</view>
|
|
|
|
<view wx:if="{{ orderObj.orderStatus === '交易成功' }}" class="kv">
|
|
<text class="kv-key">交付时间</text>
|
|
<text class="kv-val">{{ orderObj.updateTime }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 价格明细 -->
|
|
<view class="card">
|
|
<view class="kv">
|
|
<text class="kv-key">课程价格</text>
|
|
<text class="kv-val">￥{{ orderObj.originPrice }}</text>
|
|
</view>
|
|
|
|
<view class="kv">
|
|
<text class="kv-key">价格折扣</text>
|
|
<text class="kv-val discount">-￥{{ (orderObj.originPrice - orderObj.totalAmount) >= 0 ? (orderObj.originPrice - orderObj.totalAmount) : 0 }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="kv total">
|
|
<text class="kv-key total-key">订单金额</text>
|
|
<text class="kv-val total-val">￥{{ orderObj.totalAmount }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<!-- 底部按钮：待支付 -->
|
|
<view class="footer" wx:if="{{ orderObj.orderStatus === '待支付' }}">
|
|
<view class="footer-inner two-btns">
|
|
<view class="btn btn-ghost" bindtap="cancelOrder">取消</view>
|
|
<view class="btn btn-primary" bindtap="showIsPayModal">立即支付</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮：已支付 -->
|
|
<view class="footer" wx:if="{{ orderObj.orderStatus === '已支付' }}">
|
|
<view class="footer-inner one-btn">
|
|
<view class="btn btn-primary" bindtap="refundOrder">退款</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 遮罩 -->
|
|
<view wx:if="{{ isMaskVisible }}" class="page-mask"></view>
|
|
</view>
|