美化了样式
This commit is contained in:
@ -1,88 +1,101 @@
|
||||
<view class="flex-col page">
|
||||
<view class="flex-col group">
|
||||
<view class="flex-col section">
|
||||
<!-- 订单状态 + 倒计时 -->
|
||||
<view class="flex-row justify-between self-stretch group_2">
|
||||
<text class="font">订单状态</text>
|
||||
<view class="flex-row group_3">
|
||||
<text class="font_2 text" wx:if="{{ orderObj.orderStatus === '待支付' }}">请在{{countdown}}内完成支付</text>
|
||||
<text class="font_2 text_2 ml-37">{{ orderObj.orderStatus }}</text>
|
||||
<!-- 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 class="flex-row self-stretch group_4 mt-15">
|
||||
<image
|
||||
class="shrink-0 image"
|
||||
src="{{ globalImgUrl + orderObj.image }}"
|
||||
/>
|
||||
<text class="flex-1 self-start font_3 text_3 ml-7">
|
||||
{{ orderObj.name }}
|
||||
</text>
|
||||
</view>
|
||||
<!-- 课程价格 -->
|
||||
<text class="self-end font_3 text_4 mt-15">￥{{ orderObj.originPrice }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单详情 -->
|
||||
<view class="mt-16 flex-col section_2">
|
||||
<view class="self-start group_5">
|
||||
<text class="font text_5">订单编号：</text>
|
||||
<text class="font_4">{{ orderObj.orderNumber }}</text>
|
||||
</view>
|
||||
<view class="flex-row items-baseline self-start group_6">
|
||||
<text class="shrink-0 font text_6">下单时间：</text>
|
||||
<text class="flex-1 font_5 ml-3">{{ orderObj.createTime }}</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start self-stretch relative group_7">
|
||||
<view class="flex-col section_3">
|
||||
<view class="self-stretch divider"></view>
|
||||
<view class="flex-row self-stretch group_8 mt-17">
|
||||
<text class="font text_7">支付方式：</text>
|
||||
<text class="ml-8 font text_8">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-row items-center self-stretch mt-17">
|
||||
<text class="font text_9">交易号：</text>
|
||||
<!-- TODO -->
|
||||
<text class="font_4 ml-23">4002506191307440406460485418</text>
|
||||
</view>
|
||||
<text class="self-start font text_10 mt-17" wx:if="{{ orderObj.orderStatus === '交易成功' }}">交付时间：</text>
|
||||
</view>
|
||||
<text class="font_5 text_11 pos" wx:if="{{ orderObj.orderStatus === '交易成功' }}">{{ orderObj.updateTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格明细 -->
|
||||
<view class="mt-16 flex-col section_4">
|
||||
<view class="flex-row justify-between items-center">
|
||||
<text class="font text_12">课程价格</text>
|
||||
<text class="font_4">￥{{ orderObj.originPrice }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center mt-11">
|
||||
<text class="font text_13">价格折扣</text>
|
||||
<text class="font_4 text_14">-￥{{ orderObj.originPrice - orderObj.totalAmount }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center group_9 mt-11">
|
||||
<text class="font_2 text_15">订单金额</text>
|
||||
<text class="font_4 text_16">￥{{ orderObj.totalAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮：待支付 -->
|
||||
<view class="flex-row bottom-buttons" wx:if="{{ orderObj.orderStatus === '待支付' }}">
|
||||
<view class="flex-col justify-start items-center text-wrapper" bindtap="cancelOrder">
|
||||
<text class="font_3 text_17">取消</text>
|
||||
<!-- 订单详情 -->
|
||||
<view class="card">
|
||||
<view class="kv">
|
||||
<text class="kv-key">订单编号</text>
|
||||
<text class="kv-val selectable">{{ orderObj.orderNumber }}</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2" bindtap="showIsPayModal">
|
||||
<text class="font_3 text_18">立即支付</text>
|
||||
|
||||
<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="flex-row bottom-buttons" wx:if="{{ orderObj.orderStatus === '已支付' }}">
|
||||
<view class="flex-col justify-start items-center text-wrapper_2" bindtap="refundOrder">
|
||||
<text class="font_3 text_18">退款</text>
|
||||
<!-- 价格明细 -->
|
||||
<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>
|
||||
<view wx:if="{{isMaskVisible}}" class="page-mask"></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>
|
||||
|
||||
Reference in New Issue
Block a user