fix: 待支付|再次预定交互逻辑调整
This commit is contained in:
@@ -27,7 +27,7 @@
|
|||||||
v-if="shouldShowButton"
|
v-if="shouldShowButton"
|
||||||
:class="['reserve-button', { loading: isLoading }]"
|
:class="['reserve-button', { loading: isLoading }]"
|
||||||
:disabled="isLoading"
|
:disabled="isLoading"
|
||||||
@click="handleButtonClick"
|
@click="handleButtonClick(orderData)"
|
||||||
>
|
>
|
||||||
{{ isLoading ? "处理中..." : buttonText }}
|
{{ isLoading ? "处理中..." : buttonText }}
|
||||||
</button>
|
</button>
|
||||||
@@ -52,7 +52,7 @@ const PAY_WAY_MAP = {
|
|||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
|
||||||
// 定义事件发射器
|
// 定义事件发射器
|
||||||
const emit = defineEmits(["show-refund-popup"]);
|
const emit = defineEmits(["show-refund-popup", "pay-success"]);
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
orderData: {
|
orderData: {
|
||||||
@@ -102,15 +102,13 @@ const shouldShowButton = computed(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 处理按钮点击事件
|
// 处理按钮点击事件
|
||||||
const handleButtonClick = async () => {
|
const handleButtonClick = async (orderData) => {
|
||||||
if (isLoading.value) return; // 防止重复点击
|
if (isLoading.value) return; // 防止重复点击
|
||||||
|
|
||||||
const status = props.orderData.orderStatus;
|
try {
|
||||||
const orderId = props.orderData.orderId;
|
isLoading.value = true;
|
||||||
// 支付方式
|
|
||||||
const payWay = props.orderData.payWay;
|
const status = orderData.orderStatus;
|
||||||
// 支付渠道
|
|
||||||
const paySource = "1";
|
|
||||||
|
|
||||||
if (status === "2") {
|
if (status === "2") {
|
||||||
// 情况2:待使用状态,显示退款弹窗
|
// 情况2:待使用状态,显示退款弹窗
|
||||||
@@ -118,35 +116,81 @@ const handleButtonClick = async () => {
|
|||||||
return; // 直接返回,不执行后续代码
|
return; // 直接返回,不执行后续代码
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
// 再次预定跳转商品详情
|
||||||
isLoading.value = true;
|
if (["3", "5", "6"].includes(status)) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/goods/index?commodityId=${orderData.commodityId}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 待支付状态,调用支付接口
|
||||||
|
if (status === "0") {
|
||||||
|
const orderId = orderData.orderId;
|
||||||
|
const payWay = orderData.payWay;
|
||||||
|
const paySource = orderData.paySource;
|
||||||
|
|
||||||
// 情况1:待支付状态或其他状态,先预下单再支付
|
|
||||||
// 第一步:预下单
|
|
||||||
const res = await orderPayNow({ orderId, payWay, paySource });
|
const res = await orderPayNow({ orderId, payWay, paySource });
|
||||||
console.log(res);
|
console.log("确认订单---2:", res);
|
||||||
|
|
||||||
// 仅作为示例,非真实参数信息。
|
// 检查接口返回数据
|
||||||
|
if (!res || !res.data) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "订单创建失败,请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
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",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用微信支付
|
||||||
uni.requestPayment({
|
uni.requestPayment({
|
||||||
provider: "wxpay",
|
provider: "wxpay",
|
||||||
timeStamp: String(Date.now()),
|
timeStamp: String(timeStamp), // 确保为字符串类型
|
||||||
nonceStr: "A1B2C3D4E5",
|
nonceStr: String(nonceStr),
|
||||||
package: "prepay_id=wx20180101abcdefg",
|
package: String(packageVal), // 确保为字符串类型
|
||||||
signType: "MD5",
|
signType: String(signType),
|
||||||
paySign: "",
|
paySign: String(paySign),
|
||||||
success: (res) => {
|
success: () => {
|
||||||
console.log("success:" + JSON.stringify(res));
|
uni.showToast({
|
||||||
|
title: "支付成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
success: () => {
|
||||||
|
emit("pay-success");
|
||||||
|
},
|
||||||
|
});
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
console.log("fail:" + JSON.stringify(err));
|
uni.showToast({
|
||||||
|
title: "支付失败,请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("操作失败:", error);
|
console.error("操作失败:", error);
|
||||||
uni.showToast({
|
|
||||||
title: error.message || "操作失败,请重试",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
} finally {
|
} finally {
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,16 +28,6 @@ $font-weight-semibold: 600;
|
|||||||
$transition-fast: 0.2s ease;
|
$transition-fast: 0.2s ease;
|
||||||
$transition-normal: 0.3s ease;
|
$transition-normal: 0.3s ease;
|
||||||
|
|
||||||
// 动画关键帧
|
|
||||||
@keyframes loading-spin {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-info {
|
.order-info {
|
||||||
background-color: $order-bg-color;
|
background-color: $order-bg-color;
|
||||||
border-radius: $order-border-radius;
|
border-radius: $order-border-radius;
|
||||||
@@ -153,21 +143,6 @@ $transition-normal: 0.3s ease;
|
|||||||
&::before {
|
&::before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载动画
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin: -8px 0 0 -8px;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-top: 2px solid #fff;
|
|
||||||
border-radius: $uni-border-radius-circle;
|
|
||||||
animation: loading-spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,11 @@
|
|||||||
<GoodsInfo :orderData="orderData" />
|
<GoodsInfo :orderData="orderData" />
|
||||||
<UserInfo :orderData="orderData" />
|
<UserInfo :orderData="orderData" />
|
||||||
<NoticeInfo :orderData="orderData" />
|
<NoticeInfo :orderData="orderData" />
|
||||||
<OrderInfo :orderData="orderData" @show-refund-popup="showRefundPopup" />
|
<OrderInfo
|
||||||
|
:orderData="orderData"
|
||||||
|
@show-refund-popup="showRefundPopup"
|
||||||
|
@pay-success="handlePaySuccess"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- 退款状态显示 -->
|
<!-- 退款状态显示 -->
|
||||||
<RefundPopup
|
<RefundPopup
|
||||||
@@ -51,12 +55,14 @@ import RefundPopup from "./components/RefundPopup/index.vue";
|
|||||||
const refundVisible = ref(false);
|
const refundVisible = ref(false);
|
||||||
const orderData = ref({});
|
const orderData = ref({});
|
||||||
|
|
||||||
onLoad(async ({ orderId }) => {
|
onLoad(({ orderId }) => getOrderDetail(orderId));
|
||||||
const res = await userOrderDetail({ orderId });
|
|
||||||
|
|
||||||
|
// 获取订单详情
|
||||||
|
const getOrderDetail = async (orderId) => {
|
||||||
|
const res = await userOrderDetail({ orderId });
|
||||||
orderData.value = res.data;
|
orderData.value = res.data;
|
||||||
console.log(res);
|
console.log(res);
|
||||||
});
|
};
|
||||||
|
|
||||||
// 监听页面滚动事件
|
// 监听页面滚动事件
|
||||||
const backgroundColor = ref("transparent");
|
const backgroundColor = ref("transparent");
|
||||||
@@ -105,6 +111,11 @@ const handleRefundConfirm = async ({ orderId }) => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 再次预定
|
||||||
|
const handlePaySuccess = ({ orderId }) => {
|
||||||
|
getOrderDetail(orderId);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -123,6 +123,19 @@ const goodsInfo = async (params) => {
|
|||||||
commodityId: goodsData.value.commodityId,
|
commodityId: goodsData.value.commodityId,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (goodsData.value.commodityStatus !== "1") {
|
||||||
|
uni.showModal({
|
||||||
|
title: "温馨提示",
|
||||||
|
content: "商品已下架,是否返回上一页?",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.navigateBack({ delta: 1 });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const configGoodsData = () => {
|
const configGoodsData = () => {
|
||||||
|
|||||||
@@ -9,15 +9,15 @@ const userWorkOrderList = (args) => {
|
|||||||
return request.post("/hotelBiz/workOrder/userWorkOrderList", args);
|
return request.post("/hotelBiz/workOrder/userWorkOrderList", args);
|
||||||
};
|
};
|
||||||
|
|
||||||
/// 获取工单类型
|
// 获取工单类型
|
||||||
const workOrderTypeListForBiz = () => {
|
const workOrderTypeListForBiz = () => {
|
||||||
return request.get('/hotelBiz/workOrder/workOrderTypeListForBiz', {});
|
return request.get("/hotelBiz/workOrder/workOrderTypeListForBiz", {});
|
||||||
}
|
};
|
||||||
|
|
||||||
/// 创建工单
|
// 创建工单
|
||||||
const createWorkOrder = (args) => {
|
const createWorkOrder = (args) => {
|
||||||
return request.post('/hotelBiz/workOrder/createWorkOrder', args);
|
return request.post("/hotelBiz/workOrder/createWorkOrder", args);
|
||||||
}
|
};
|
||||||
|
|
||||||
// 获取订单详情
|
// 获取订单详情
|
||||||
const userOrderDetail = (args) => {
|
const userOrderDetail = (args) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user