zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 提交订单的loading 添加

Browse Source
This commit is contained in:
zoujing
2025-12-01 16:55:10 +08:00
parent c20563ecf5
commit 09452bf600
2 changed files with 108 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/pages-booking/index.vue
View File

@@ -203,96 +203,107 @@ const validateUserForms = () => {
// 处理支付点击事件
const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
console.log("处理支付点击事件", userFormList.value);
// 判断是酒店类型
if (goodsData.commodityTypeCode === "0") {
// 校验用户姓名
if (!validateUserForms()) {
// 点击后立即展示 loading
uni.showLoading({ title: "正在提交订单..." });
try {
console.log("处理支付点击事件", userFormList.value);
// 判断是酒店类型
if (goodsData.commodityTypeCode === "0") {
// 校验用户姓名
if (!validateUserForms()) {
uni.hideLoading();
return;
}
}
// 校验手机号
if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
uni.hideLoading();
uni.showToast({ title: "请输入正确的手机号", icon: "none" });
return;
}
// 购买的商品id
const commodityId = goodsData.commodityId;
// 消费者信息
const consumerInfoEntityList = userFormList.value;
// 购买数量
const purchaseAmount = consumerInfoEntityList.length;
// 支付方式 0-微信 1-支付宝 2-云闪付
const payWay = "0";
// 支付渠道 0-app 1-小程序 2-h5
const paySource = "1";
const params = {
commodityId,
purchaseAmount,
payWay,
paySource,
consumerInfoEntityList,
};
//酒店类型添加入住时间、离店时间
if (goodsData.commodityTypeCode === "0" && selectedDate.value) {
const { startDate, endDate } = selectedDate.value;
// 入住时间
params.checkInData = startDate;
// 离店时间
params.checkOutData = endDate;
}
const res = await orderPay(params);
console.log("确认订单---2:", res);
// 检查接口返回数据
if (!res || !res.data) {
uni.hideLoading();
uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
return;
}
const { data } = res;
const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
// 验证支付参数是否完整
if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
uni.hideLoading();
uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
return;
}
// 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
uni.hideLoading();
// 调用微信支付
uni.requestPayment({
provider: "wxpay",
timeStamp: String(timeStamp), // 确保为字符串类型
nonceStr: String(nonceStr),
package: String(packageVal), // 确保为字符串类型
signType: String(signType),
paySign: String(paySign),
success: () => {
uni.showToast({
title: "支付成功",
icon: "success",
success: () => {
uni.navigateTo({
url: "/pages-order/order/list",
});
},
});
},
fail: () => {
uni.showToast({ title: "支付失败，请重试", icon: "none" });
},
});
} catch (error) {
console.error(error);
uni.showToast({ title: "请求出错，请重试", icon: "none" });
} finally {
// 防止某些分支忘记 hide，确保最终关闭 loading（requestPayment 后也可以安全调用 hide）
uni.hideLoading();
}
// 校验手机号
if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
uni.showToast({ title: "请输入正确的手机号", icon: "none" });
return;
}
// 购买的商品id
const commodityId = goodsData.commodityId;
// 消费者信息
const consumerInfoEntityList = userFormList.value;
// 购买数量
const purchaseAmount = consumerInfoEntityList.length;
// 支付方式 0-微信 1-支付宝 2-云闪付
const payWay = "0";
// 支付渠道 0-app 1-小程序 2-h5
const paySource = "1";
const params = {
commodityId,
purchaseAmount,
payWay,
paySource,
consumerInfoEntityList,
};
//酒店类型添加入住时间、离店时间
if (goodsData.commodityTypeCode === "0" && selectedDate.value) {
const { startDate, endDate } = selectedDate.value;
// 入住时间
params.checkInData = startDate;
// 离店时间
params.checkOutData = endDate;
}
const res = await orderPay(params);
console.log("确认订单---2:", res);
// 检查接口返回数据
if (!res || !res.data) {
uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
return;
}
const { data } = res;
const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
// 验证支付参数是否完整
if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
// console.error("支付参数不完整:", {
// nonceStr: !!nonceStr,
// packageVal: !!packageVal,
// paySign: !!paySign,
// signType: !!signType,
// timeStamp: !!timeStamp,
// });
uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
return;
}
// 调用微信支付
uni.requestPayment({
provider: "wxpay",
timeStamp: String(timeStamp), // 确保为字符串类型
nonceStr: String(nonceStr),
package: String(packageVal), // 确保为字符串类型
signType: String(signType),
paySign: String(paySign),
success: () => {
uni.showToast({
title: "支付成功",
icon: "success",
success: () => {
uni.navigateTo({
url: "/pages-order/order/list",
});
},
});
},
fail: () => {
uni.showToast({ title: "支付失败，请重试", icon: "none" });
},
});
}, 1000);
</script>

17
src/pages-order/order/components/FooterSection/index.vue
View File

@@ -71,10 +71,14 @@ const handleButtonClick = async (orderData) => {
uni.navigateTo({
url: `/pages/goods/index?commodityId=${orderData.commodityId}`,
});
return;
}
// 待支付状态，调用支付接口
if (statusCode.value === "0") {
// 显示 loading
uni.showLoading({ title: "正在提交订单..." });
const orderId = orderData.orderId;
const payWay = orderData.payWay;
const paySource = orderData.paySource;
@@ -84,6 +88,7 @@ const handleButtonClick = async (orderData) => {
// 检查接口返回数据
if (!res || !res.data) {
uni.hideLoading();
uni.showToast({ title: "订单创建失败，请重试", icon: "none" });
return;
}
@@ -93,17 +98,14 @@ const handleButtonClick = async (orderData) => {
// 验证支付参数是否完整
if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
// console.error("支付参数不完整:", {
// nonceStr: !!nonceStr,
// packageVal: !!packageVal,
// paySign: !!paySign,
// signType: !!signType,
// timeStamp: !!timeStamp,
// });
uni.hideLoading();
uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
return;
}
// 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
uni.hideLoading();
// 调用微信支付
uni.requestPayment({
provider: "wxpay",
@@ -126,6 +128,7 @@ const handleButtonClick = async (orderData) => {
}
} catch (error) {
console.error("操作失败:", error);
uni.hideLoading();
}
};
</script>