124 lines
3.2 KiB
Vue
124 lines
3.2 KiB
Vue
<template>
|
|
<view class="order-detail-page">
|
|
<TopNavBar
|
|
titleAlign="center"
|
|
:backgroundColor="backgroundColor"
|
|
:backIconColor="backIconColor"
|
|
:shadow="shadow"
|
|
fixed
|
|
>
|
|
<template #title>
|
|
{{ title }}
|
|
</template>
|
|
</TopNavBar>
|
|
|
|
<view class="order-detail-wrapper">
|
|
<OrderStatusInfo :orderData="orderData" />
|
|
<OrderQrcode
|
|
v-if="orderData.orderStatus === '2'"
|
|
size="132"
|
|
unit="px"
|
|
:val="orderData.orderId"
|
|
/>
|
|
<GoodsInfo :orderData="orderData" />
|
|
<UserInfo :orderData="orderData" />
|
|
<NoticeInfo :orderData="orderData" />
|
|
<OrderInfo
|
|
:orderData="orderData"
|
|
@show-refund-popup="showRefundPopup"
|
|
@pay-success="handlePaySuccess"
|
|
/>
|
|
|
|
<!-- 退款状态显示 -->
|
|
<RefundPopup
|
|
v-model="refundVisible"
|
|
:orderData="orderData"
|
|
@confirm="handleRefundConfirm"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
|
|
import { userOrderDetail, orderRefund } from "@/request/api/OrderApi";
|
|
import TopNavBar from "@/components/TopNavBar/index.vue";
|
|
import OrderQrcode from "./components/OrderQrcode/index.vue";
|
|
import OrderStatusInfo from "./components/OrderStatusInfo/index.vue";
|
|
import GoodsInfo from "./components/GoodsInfo/index.vue";
|
|
import UserInfo from "./components/UserInfo/index.vue";
|
|
import NoticeInfo from "./components/NoticeInfo/index.vue";
|
|
import OrderInfo from "./components/OrderInfo/index.vue";
|
|
import RefundPopup from "./components/RefundPopup/index.vue";
|
|
|
|
const refundVisible = ref(false);
|
|
const orderData = ref({});
|
|
|
|
onLoad(({ orderId }) => getOrderDetail(orderId));
|
|
|
|
// 获取订单详情
|
|
const getOrderDetail = async (orderId) => {
|
|
const res = await userOrderDetail({ orderId });
|
|
orderData.value = res.data;
|
|
console.log(res);
|
|
};
|
|
|
|
// 监听页面滚动事件
|
|
const backgroundColor = ref("transparent");
|
|
const backIconColor = ref("#fff");
|
|
const title = ref("");
|
|
const shadow = ref(false);
|
|
onPageScroll(({ scrollTop }) => {
|
|
// 当滚动到顶部时，显示返回按钮
|
|
if (scrollTop <= 0) {
|
|
backgroundColor.value = "transparent";
|
|
backIconColor.value = "#fff";
|
|
title.value = "";
|
|
shadow.value = false;
|
|
} else {
|
|
backgroundColor.value = "#ffffff";
|
|
backIconColor.value = "#333333";
|
|
title.value = "订单详情";
|
|
shadow.value = true;
|
|
}
|
|
});
|
|
|
|
// 显示退款弹窗
|
|
const showRefundPopup = () => {
|
|
refundVisible.value = true;
|
|
};
|
|
|
|
// 确认退款
|
|
const handleRefundConfirm = async ({ orderId }) => {
|
|
try {
|
|
// 调用退款API
|
|
await orderRefund({ orderId });
|
|
|
|
uni.showToast({
|
|
title: "退款申请已提交",
|
|
icon: "success",
|
|
});
|
|
|
|
// 刷新订单状态
|
|
const res = await userOrderDetail({ orderId });
|
|
orderData.value = res.data;
|
|
} catch (error) {
|
|
console.error("退款失败:", error);
|
|
uni.showToast({
|
|
title: "退款申请失败，请重试",
|
|
icon: "none",
|
|
});
|
|
}
|
|
};
|
|
|
|
// 再次预定
|
|
const handlePaySuccess = ({ orderId }) => {
|
|
getOrderDetail(orderId);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./styles/detail.scss";
|
|
</style>
|