新增「我的订单」页面(订单中心)

- 微信审核要求交易类小程序提交订单中心 path,之前小程序没有订单页
- 新页面 pages/orders/orders:列表展示商品名 / 状态 / 订单号 / 金额 / 下单时间,接 GET /v1/orders
- 我的页新增「我的订单」入口,文案走后台配置 profile.menu.orders
- utils/api.js 补 getOrders(),utils/format.js 补 toDateTimeString()
This commit is contained in:
Yeomai committed 2026-10-01 12:22:11 +08:00
1 parent 014fa90dcd
commit 7d5db6a867
9 files changed
+172 -1

No files matched your search

+61
View File
@@ -0,0 +1,61 @@
// pages/orders/orders.js
//
// 订单中心:列出当前用户的全部订单,微信审核要求交易类小程序必须提供这个页面。
// 数据来自服务端 GET /v1/orders(只返回自己的单)。
const api = require('../../utils/api');
const format = require('../../utils/format');
const store = require('../../utils/store');
const app = getApp();
Page({
data: {
loading: true,
list: [],
/** 按钮文案走后台配置 */
contactText: '',
},
onLoad() {
// 等启动流程把配置和身份准备好再拉,避免首屏空白
app.ready().then(() => {
this.applyConfig();
this.load();
});
},
/** 每次回到页面都重新拉一次,付款回来能立刻看到新订单。 */
onShow() {
if (!this.data.loading) this.load();
},
applyConfig() {
this.setData({ contactText: store.cfg('course.button.contact') });
},
load() {
api
.getOrders()
.then((list) => {
this.setData({
loading: false,
list: (list || []).map((item) => ({
outTradeNo: item.outTradeNo,
title: item.courseTitle || '',
statusText: item.statusText || '',
status: item.status,
amountYuan: format.fenToYuan(item.amountFen),
createdAtText: format.toDateTimeString(item.createdAt),
})),
});
})
.catch((err) => {
this.setData({ loading: false });
wx.showToast({ title: (err && err.message) || '订单加载失败', icon: 'none' });
});
},
onShareAppMessage() {
return { title: store.cfg('share.title'), path: '/pages/index/index' };
},
});
+3
View File
@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "我的订单"
}
+25
View File
@@ -0,0 +1,25 @@
<!--pages/orders/orders.wxml-->
<scroll-view class="order-page" scroll-y type="custom">
<view wx:if="{{loading}}" class="order-hint">加载中…</view>
<view wx:elif="{{list.length === 0}}" class="order-hint">暂无订单</view>
<block wx:else>
<view class="order-item" wx:for="{{list}}" wx:key="outTradeNo">
<view class="order-line">
<text class="order-title">{{item.title}}</text>
<text class="order-status">{{item.statusText}}</text>
</view>
<view class="order-line order-sub">
<text>订单号 {{item.outTradeNo}}</text>
</view>
<view class="order-line order-sub">
<text class="order-amount">¥{{item.amountYuan}}</text>
<text>{{item.createdAtText}}</text>
</view>
</view>
</block>
<button class="order-service" open-type="contact">
<text>{{contactText}}</text>
</button>
</scroll-view>
+58
View File
@@ -0,0 +1,58 @@
/* pages/orders/orders.wxss */
.order-page {
padding: 20rpx;
box-sizing: border-box;
height: 100vh;
}
.order-hint {
margin-top: 200rpx;
text-align: center;
font-size: 28rpx;
color: #999;
}
.order-item {
width: 710rpx;
margin-bottom: 20rpx;
padding: 24rpx;
border-radius: 20rpx;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.order-line {
display: flex;
justify-content: space-between;
align-items: center;
}
.order-title {
font-size: 30rpx;
color: #333;
}
.order-status {
font-size: 26rpx;
color: #00aa00;
}
.order-sub {
margin-top: 12rpx;
font-size: 24rpx;
color: #888;
}
.order-amount {
color: #e60012;
}
.order-service {
width: 710rpx;
margin: 40rpx 0 60rpx;
border-radius: 45rpx;
font-size: 30rpx;
color: #fff;
background-color: #4caf50;
}