admin/qingcheng-xiaochengxu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序提交

Browse Source
This commit is contained in:
yuanteng
2025-07-20 18:22:59 +08:00
parent a1d21c67b8
commit fa2a7b3499
61 changed files with 2505 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
pages/course/orderDetail/orderDetail.js Normal file
View File

@ -0,0 +1,139 @@
import { baseUrl, globalImgUrl } from "../../../request";
Page({
data: {
countdown: '',
orderId: 0,
orderObj: {}, // 订单详情对象
_secondsRemaining: 0, // 内部倒计时秒数
_hasShownTimeout: false, // 是否已弹过“超时未支付”弹窗
globalImgUrl,
},
onLoad(options) {
console.log('options---->',options);
this.setData({ orderId: options.id });
this.getOrderDetail();
},
onUnload() {
clearInterval(this._timer);
},
// 拉取订单详情并初始化倒计时
getOrderDetail() {
wx.request({
url: baseUrl + '/courseOrder/query/detail',
method: 'POST',
data: { id: this.data.orderId },
header: { Authorization: wx.getStorageSync('token') },
success: res => {
console.log('订单详情--->',res.data.data);
if (res.data.code !== 1) return wx.showToast({ title: res.data.message, icon: 'none' });
const order = res.data.data;
this.setData({ orderObj: order });
// 仅“待支付”需要倒计时
if (order.orderStatus === '待支付') {
this._initFromCreateTime(order.createTime);
}
},
fail: () => wx.showToast({ title: '网络错误', icon: 'none' })
});
},
// 计算剩余秒数并启动定时器
_initFromCreateTime(createTime) {
// 将 "2025-07-13 12:38:17" → 时间戳
const createMs = new Date(createTime.replace(/-/g, '/')).getTime();
const now = Date.now();
let diff = Math.floor((createMs + 30 * 60 * 1000 - now) / 1000);
if (diff <= 0) {
// 已超时
this._handleTimeout();
} else {
// 未超时，初始化秒数并启动倒计时
this.setData({
_secondsRemaining: diff,
countdown: this._format(diff)
});
this._startTimer();
}
},
// 每秒递减
_startTimer() {
this._timer = setInterval(() => {
let sec = this.data._secondsRemaining - 1;
if (sec <= 0) {
clearInterval(this._timer);
this._handleTimeout();
} else {
this.setData({
_secondsRemaining: sec,
countdown: this._format(sec)
});
}
}, 1000);
},
// 超时处理：弹窗 + 改状态
_handleTimeout() {
if (!this.data._hasShownTimeout) {
wx.showModal({
title: '提示',
content: '订单超时未支付，已取消',
showCancel: false
});
this.setData({ _hasShownTimeout: true });
}
// 更新状态并隐藏倒计时
const o = this.data.orderObj;
o.orderStatus = '交易取消';
this.setData({
orderObj: o,
countdown: '00分00秒'
});
},
// 秒数 → "MM分SS秒"
_format(sec) {
const m = Math.floor(sec / 60);
const s = sec % 60;
const mm = m < 10 ? '0' + m : m;
const ss = s < 10 ? '0' + s : s;
return `${mm}分${ss}秒`;
},
// 取消订单
cancelOrder() {
wx.showModal({
title: '取消订单',
content: '是否要取消订单？',
success: res => {
if (res.confirm) {
wx.request({
url: baseUrl + "/courseOrder/cancel",
method: 'POST',
data: { courseId: this.data.orderId },
header: { Authorization: wx.getStorageSync('token') },
success: () => this.getOrderDetail()
});
}
}
});
},
// 去支付（示例跳转）
goPay() {
// wx.navigateTo({ url: `/pages/pay/pay?orderId=${this.data.orderId}` });
wx.showToast({ title: '支付功能稍后开放', icon: 'none' });
},
// 退款（示例弹窗）
refundOrder() {
wx.showToast({ title: '退款功能稍后开放', icon: 'none' });
}
});

3
pages/course/orderDetail/orderDetail.json Normal file
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

87
pages/course/orderDetail/orderDetail.wxml Normal file
View File

@ -0,0 +1,87 @@
<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>
</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.totalAmount }}</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.totalAmount - orderObj.originPrice }}</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.originPrice }}</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>
<view class="flex-col justify-start items-center text-wrapper_2" bindtap="goPay">
<text class="font_3 text_18">立即支付</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>
</view>
</view>

217
pages/course/orderDetail/orderDetail.wxss Normal file
View File

@ -0,0 +1,217 @@
.ml-37 {
margin-left: 69.38rpx;
}
.ml-7 {
margin-left: 13.13rpx;
}
.mt-15 {
margin-top: 28.13rpx;
}
.ml-3 {
margin-left: 5.63rpx;
}
.ml-23 {
margin-left: 40.13rpx;
}
.mt-17 {
margin-top: 31.88rpx;
}
.mt-11 {
margin-top: 20.63rpx;
}
.mt-389 {
margin-top: 729.38rpx;
}
/* 整体布局 */
.page {
padding-top: 26.25rpx;
background-color: #f8f8f8;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.group {
padding: 0 18.75rpx;
}
/* 调整首屏 section 右边内边距，不让价格太贴边 */
.section {
padding: 0 22.5rpx 33.75rpx 22.5rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 7.22rpx;
}
/* 订单详情区 */
.group_2 {
padding: 33.75rpx 0 26.25rpx;
border-bottom: solid 1.88rpx #e3e3e3;
}
.group_3 {
margin-right: 18.75rpx;
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.23rpx;
color: #f84947;
}
.text {
line-height: 24.56rpx;
}
.text_2 {
line-height: 24.17rpx;
}
.group_4 {
margin-right: 33.75rpx;
}
.image {
border-radius: 9.38rpx;
width: 208.13rpx;
height: 133.13rpx;
}
.font_3 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.64rpx;
}
.text_3 {
color: #000000;
line-height: 35.63rpx;
}
.text_4 {
color: #3d3d3d;
line-height: 22.76rpx;
}
/* 订单详情二级区 */
.section_2 {
padding: 33.75rpx 22.5rpx 0;
background-color: #ffffff;
border-radius: 7.39rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.group_5 {
line-height: 24.28rpx;
}
.font_4 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 19.93rpx;
color: #323232;
}
.group_6 {
margin-top: 30rpx;
width: 369.94rpx;
}
.font_5 {
font-size: 26.25rpx;
line-height: 31.88rpx;
color: #323232;
}
.group_7 {
margin-top: 11.25rpx;
padding-bottom: 26.25rpx;
}
.section_3 {
padding-top: 9.38rpx;
background-color: #ffffff;
}
.divider {
background-color: #cccccc;
height: 1.88rpx;
}
.group_8 {
padding: 0 3.75rpx;
}
.font {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.23rpx;
color: #696969;
}
.text_7 {
line-height: 24.36rpx;
}
.text_6 {
line-height: 31.88rpx;
}
.text_5 {
line-height: 24.28rpx;
}
.text_8 {
color: #323232;
}
.text_9 {
line-height: 24.52rpx;
}
.text_10 {
line-height: 24.43rpx;
}
.text_11 {
width: 270rpx;
}
.pos {
position: absolute;
left: 141.05rpx;
top: 142.92rpx;
}
/* 调整价格明细区右边内边距 */
.section_4 {
padding: 22.5rpx 22.5rpx 0 22.5rpx;
background-color: #ffffff;
border-radius: 4.01rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text_12 {
line-height: 24.41rpx;
}
.text_13 {
line-height: 24.41rpx;
}
.text_14 {
/* margin-right: 15rpx; */
}
.group_9 {
padding: 22.5rpx 0 18.75rpx;
border-top: solid 1.88rpx #e3e3e3;
}
.text_15 {
line-height: 24.49rpx;
}
.text_16 {
color: #f84947;
}
/* 底部按钮 */
.text-wrapper {
padding: 37.5rpx 0;
flex: 1 1 375rpx;
background-color: #ffffff;
height: 105rpx;
}
.text-wrapper_2 {
padding: 37.5rpx 0;
flex: 1 1 375rpx;
background-color: #ff8d1a;
height: 105rpx;
}
.text_17 {
color: #323232;
}
.text_18 {
color: #ffffff;
line-height: 27.81rpx;
}
.bottom-buttons {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
background-color: #ffffff; /* 可以根据需要设置背景色 */
}