青橙1.1.2
This commit is contained in:
@ -2,27 +2,165 @@ import { baseUrl, globalImgUrl } from "../../../request";
|
||||
|
||||
Page({
|
||||
data: {
|
||||
countdown: '',
|
||||
countdown: "",
|
||||
orderId: 0,
|
||||
orderObj: {}, // 订单详情对象
|
||||
_secondsRemaining: 0, // 内部倒计时秒数
|
||||
_hasShownTimeout: false, // 是否已弹过“超时未支付”弹窗
|
||||
orderObj: {}, // 订单详情对象
|
||||
_secondsRemaining: 0, // 内部倒计时秒数
|
||||
_hasShownTimeout: false, // 是否已弹过“超时未支付”弹窗（本次页面停留期内）
|
||||
globalImgUrl,
|
||||
isMaskVisible: false
|
||||
isMaskVisible: false,
|
||||
_isActive: false // 页面是否处于可见状态
|
||||
},
|
||||
|
||||
// —— 非 data 状态，避免无谓 setData
|
||||
_timer: null,
|
||||
|
||||
onLoad(options) {
|
||||
console.log('options---->',options);
|
||||
this.setData({ orderId: options.id });
|
||||
this.setData({ orderId: options.id || 0 });
|
||||
this.getOrderDetail();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.setData({ _isActive: true });
|
||||
},
|
||||
|
||||
onHide() {
|
||||
this.setData({ _isActive: false });
|
||||
this._clearTimer();
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this.setData({ _isActive: false });
|
||||
this._clearTimer();
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.getOrderDetail(); // stopPullDownRefresh 放到 complete 里，更稳
|
||||
},
|
||||
|
||||
// ====== 工具函数 ======
|
||||
_clearTimer() {
|
||||
if (this._timer) {
|
||||
clearInterval(this._timer);
|
||||
this._timer = null;
|
||||
}
|
||||
},
|
||||
_pad2(n) {
|
||||
return String(n).padStart(2, "0");
|
||||
},
|
||||
_format(sec) {
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = sec % 60;
|
||||
return `${this._pad2(m)}分${this._pad2(s)}秒`;
|
||||
},
|
||||
|
||||
// ====== 拉取订单详情并初始化倒计时 ======
|
||||
getOrderDetail() {
|
||||
wx.request({
|
||||
url: baseUrl + "/courseOrder/query/detail",
|
||||
method: "POST",
|
||||
data: { id: this.data.orderId },
|
||||
header: { Authorization: wx.getStorageSync("token") },
|
||||
success: (res) => {
|
||||
if (res.data.code !== 1) {
|
||||
wx.showToast({ title: res.data.message || "获取失败", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
const order = res.data.data || {};
|
||||
this.setData({ orderObj: order });
|
||||
|
||||
// 只有“待支付”才需要倒计时；其它状态关掉计时器并清空文案
|
||||
if (order.orderStatus === "待支付") {
|
||||
this._initFromCreateTime(order.createTime);
|
||||
} else {
|
||||
this._clearTimer();
|
||||
this.setData({ countdown: "" });
|
||||
}
|
||||
},
|
||||
fail: () => wx.showToast({ title: "网络错误", icon: "none" }),
|
||||
complete: () => wx.stopPullDownRefresh(),
|
||||
});
|
||||
},
|
||||
|
||||
// 计算剩余秒数并启动定时器
|
||||
_initFromCreateTime(createTime) {
|
||||
const ts = new Date(String(createTime).replace(/-/g, "/")).getTime();
|
||||
const createMs = Number.isFinite(ts) ? ts : Date.now();
|
||||
const ttlMs = 15 * 60 * 1000; // 15分钟有效
|
||||
const now = Date.now();
|
||||
let diff = Math.floor((createMs + ttlMs - now) / 1000);
|
||||
diff = Math.max(0, diff);
|
||||
|
||||
// 初始化阶段：如果已过期，静默转“交易关闭”（不弹窗，避免干扰）
|
||||
if (diff === 0) {
|
||||
const o = { ...this.data.orderObj, orderStatus: "交易关闭" };
|
||||
this._clearTimer();
|
||||
this.setData({ orderObj: o, countdown: "" });
|
||||
return;
|
||||
}
|
||||
|
||||
// 未过期：初始化倒计时并启动
|
||||
this._clearTimer();
|
||||
this.setData({
|
||||
_secondsRemaining: diff,
|
||||
countdown: this._format(diff),
|
||||
_hasShownTimeout: false, // 重置本页弹窗标记
|
||||
});
|
||||
this._startTimer();
|
||||
},
|
||||
|
||||
// 每秒递减
|
||||
_startTimer() {
|
||||
this._clearTimer();
|
||||
this._timer = setInterval(() => {
|
||||
const sec = this.data._secondsRemaining - 1;
|
||||
|
||||
if (sec <= 0) {
|
||||
this._clearTimer();
|
||||
this._handleTimeout(); // 到点且在当前页，才弹窗
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
_secondsRemaining: sec,
|
||||
countdown: this._format(sec),
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 超时处理：仅在当前页可见时弹一次，并把状态改为“交易关闭”
|
||||
_handleTimeout() {
|
||||
const { _isActive, _hasShownTimeout } = this.data;
|
||||
|
||||
// 更新状态并隐藏倒计时
|
||||
const o = { ...this.data.orderObj, orderStatus: "交易关闭" };
|
||||
this.setData({ orderObj: o, countdown: "" });
|
||||
|
||||
// 只在当前页面 & 未弹过 时弹一次
|
||||
if (_isActive && !_hasShownTimeout) {
|
||||
wx.showModal({
|
||||
title: "提示",
|
||||
content: "订单超时未支付，已关闭",
|
||||
showCancel: false,
|
||||
complete: () => {
|
||||
// 标记已弹
|
||||
this.setData({ _hasShownTimeout: true });
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.setData({ _hasShownTimeout: true });
|
||||
}
|
||||
},
|
||||
|
||||
// ====== 支付相关 ======
|
||||
showIsPayModal() {
|
||||
const {orderId} = this.data
|
||||
const { orderId } = this.data;
|
||||
wx.showModal({
|
||||
title: '下单成功',
|
||||
content: '您确定要支付吗？',
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
title: "确认支付",
|
||||
content: "是否立即支付该订单？",
|
||||
cancelText: "取消",
|
||||
confirmText: "去支付",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.payOrder(orderId);
|
||||
@ -32,163 +170,70 @@ Page({
|
||||
},
|
||||
fail: () => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '网络错误，下单失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
wx.showToast({ title: "网络错误", icon: "none" });
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
payOrder(orderId) {
|
||||
// 同样先显示遮罩
|
||||
this.setData({ isMaskVisible: true });
|
||||
wx.showLoading({ title: '支付中...'});
|
||||
wx.request({
|
||||
url: baseUrl + '/courseOrder/payment',
|
||||
method: 'POST',
|
||||
header: { Authorization: wx.getStorageSync('token') },
|
||||
data: { id: orderId},
|
||||
success: res => {
|
||||
wx.hideLoading();
|
||||
if (res.data.code === 1) {
|
||||
// 支付成功，跳转详情页
|
||||
wx.redirectTo({
|
||||
url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
|
||||
success: res => {
|
||||
// 先把遮罩关掉
|
||||
this.setData({ isMaskVisible: false });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.setData({ isMaskVisible: false });
|
||||
wx.showToast({ title: res.data.message || '支付失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
wx.hideLoading();
|
||||
this.setData({ isMaskVisible: false });
|
||||
wx.showToast({ title: '网络错误，支付失败', icon: 'none' });
|
||||
}
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this._timer);
|
||||
},
|
||||
this.setData({ isMaskVisible: true });
|
||||
wx.showLoading({ title: "支付中..." });
|
||||
|
||||
// 拉取订单详情并初始化倒计时
|
||||
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);
|
||||
url: baseUrl + "/courseOrder/payment",
|
||||
method: "POST",
|
||||
header: { Authorization: wx.getStorageSync("token") },
|
||||
data: { id: orderId }, // 若后端用 orderId，则把键名改为 orderId
|
||||
success: (res) => {
|
||||
wx.hideLoading();
|
||||
if (res.data.code === 1) {
|
||||
wx.redirectTo({
|
||||
url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
|
||||
complete: () => this.setData({ isMaskVisible: false }),
|
||||
});
|
||||
} else {
|
||||
this.setData({ isMaskVisible: false });
|
||||
wx.showToast({ title: res.data.message || "支付失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
fail: () => wx.showToast({ title: '网络错误', icon: 'none' })
|
||||
fail: () => {
|
||||
wx.hideLoading();
|
||||
this.setData({ isMaskVisible: false });
|
||||
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 + 15 * 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 => {
|
||||
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()
|
||||
method: "POST",
|
||||
header: { Authorization: wx.getStorageSync("token") },
|
||||
data: { id: this.data.orderId }, // 后端如果需要 { orderId }，改键名
|
||||
success: (r) => {
|
||||
if (!r.data || r.data.code !== 1) {
|
||||
wx.showToast({ title: (r.data && r.data.message) || "取消失败", icon: "none" });
|
||||
}
|
||||
this.getOrderDetail();
|
||||
},
|
||||
fail: () => wx.showToast({ title: "网络错误", icon: "none" }),
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 去支付（示例跳转）
|
||||
goPay() {
|
||||
// wx.navigateTo({ url: `/pages/pay/pay?orderId=${this.data.orderId}` });
|
||||
wx.showToast({ title: '支付功能稍后开放', icon: 'none' });
|
||||
wx.showToast({ title: "支付功能稍后开放", icon: "none" });
|
||||
},
|
||||
|
||||
// 退款（示例弹窗）
|
||||
refundOrder() {
|
||||
wx.showToast({ title: '退款功能稍后开放', icon: 'none' });
|
||||
}
|
||||
wx.showToast({ title: "退款功能稍后开放", icon: "none" });
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user