feat(order): add order detail and list pages with components for order management
- Implemented order detail page with components for displaying order status, user info, and refund options. - Created order list page with pagination and order cards for displaying all orders. - Added styles for order detail and list pages. - Developed a prompt document outlining component requirements for the order management system. - Introduced a new Card component for quick booking with a responsive design. - Enhanced Tabs component for better navigation between different categories. - Integrated z-paging for efficient data loading and management in order and quick booking lists. - Added service order card component for displaying service requests with call functionality. - Updated main CSS for improved viewport handling.
This commit is contained in:
duanshuwen
92
src/pages/booking/components/ConactSection/index.vue
Normal file
92
src/pages/booking/components/ConactSection/index.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<!-- 选择数量 -->
|
||||
<div class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12">
|
||||
<div class="flex-full">
|
||||
<div class="font-size-16 font-500 color-000 line-height-24">选择数量</div>
|
||||
<div class="font-size-12 color-A3A3A3 line-height-16">请选择套餐数量</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Stepper v-model="count" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用日期 -->
|
||||
<UseDateRange
|
||||
v-if="orderData.reservationEnabled"
|
||||
:openDateRangeList="orderData.openDateRangeList"
|
||||
v-model:selectedDate="reservationDate"
|
||||
/>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<div class="bg-white rounded-12 overflow-hidden">
|
||||
<div
|
||||
class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
|
||||
>
|
||||
联系方式
|
||||
</div>
|
||||
<div class="flex flex-items-center border-box p-12">
|
||||
<div class="font-size-14 font-500 color-525866 mr-12">联系人姓名</div>
|
||||
<div class="right">
|
||||
<input
|
||||
class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
|
||||
v-model.trim="userFormList[0].visitorName"
|
||||
placeholder="请输入联系人"
|
||||
maxlength="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-items-center border-box p-12">
|
||||
<div class="font-size-14 font-500 color-525866 mr-12">手机号码</div>
|
||||
<div class="right">
|
||||
<input
|
||||
class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
|
||||
v-model.trim="userFormList[0].contactPhone"
|
||||
placeholder="请输入联系手机"
|
||||
maxlength="11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineProps } from "vue";
|
||||
import Stepper from "@/components/Stepper/index.vue";
|
||||
import UseDateRange from "@/components/UseDateRange/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
userFormList: {
|
||||
type: Array,
|
||||
default: () => [{ visitorName: "", contactPhone: "" }],
|
||||
},
|
||||
reservationDate: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
orderData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "update:reservationDate"]);
|
||||
const count = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => {
|
||||
emit("update:modelValue", val);
|
||||
},
|
||||
});
|
||||
const reservationDate = computed({
|
||||
get: () => props.reservationDate,
|
||||
set: (val) => {
|
||||
emit("update:reservationDate", val);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
115
src/pages/booking/components/FooterSection/index.vue
Normal file
115
src/pages/booking/components/FooterSection/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div
|
||||
class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
|
||||
>
|
||||
<span
|
||||
class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
|
||||
>
|
||||
{{ totalAmt }}
|
||||
</span>
|
||||
<!-- <div class="flex flex-items-center" @click="emit('detailClick')">
|
||||
<span class="font-size-12 color-A3A3A3 mr-4">明细</span>
|
||||
<uni-icons type="up" size="16" color="#A3A3A3" />
|
||||
</div> -->
|
||||
<div
|
||||
class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
|
||||
@click="handleBooking"
|
||||
>
|
||||
<img
|
||||
class="icon"
|
||||
src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
|
||||
/>
|
||||
<span class="font-size-16 font-500 color-white">立即支付</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineProps, defineEmits, ref, onMounted, watch } from "vue";
|
||||
import { DebounceUtils } from "@/utils";
|
||||
import { preOrder } from "@/request/api/OrderApi";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
orderData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
selectedDate: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["detailClick", "payClick"]);
|
||||
const count = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => {
|
||||
emit("update:modelValue", val);
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => count.value,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
preOrderPay();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
preOrderPay();
|
||||
});
|
||||
|
||||
const totalAmt = ref(props.orderData.specificationPrice);
|
||||
|
||||
const preOrderPay = async () => {
|
||||
preOrder({
|
||||
commodityId: props.orderData.commodityId,
|
||||
purchaseAmount: count.value,
|
||||
checkInData: props.selectedDate.startDate,
|
||||
checkOutData: props.selectedDate.endDate,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log("预支付金额计算结果:", res);
|
||||
totalAmt.value = res.data.payAmt;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("预支付金额计算失败:", err);
|
||||
});
|
||||
};
|
||||
|
||||
const handleBooking = DebounceUtils.createDebounce(() => {
|
||||
emit("payClick", props.orderData);
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.booking-footer {
|
||||
border-radius: 15px 15px 0 0;
|
||||
padding: 12px 12px 42px;
|
||||
}
|
||||
|
||||
.amt {
|
||||
&::before {
|
||||
content: "¥";
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 48px;
|
||||
width: 34px;
|
||||
}
|
||||
</style>
|
||||
71
src/pages/booking/components/UserSection/index.vue
Normal file
71
src/pages/booking/components/UserSection/index.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-12 overflow-hidden mb-12">
|
||||
<div class="flex flex-items-center border-box p-12 border-bottom">
|
||||
<div class="font-size-16 font-500 color-000 line-height-24 flex-full">
|
||||
入住信息
|
||||
</div>
|
||||
<div class="right">
|
||||
<Stepper v-model="count" unit="间" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-box pl-12 pr-12">
|
||||
<div
|
||||
class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
|
||||
v-for="(item, index) in userFormList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="font-size-14 font-500 color-525866 mr-12">住客姓名</div>
|
||||
<div class="right">
|
||||
<input
|
||||
class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
|
||||
v-model.trim="item.visitorName"
|
||||
placeholder="请输入姓名"
|
||||
maxlength="11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-items-center border-box pt-12 pb-12">
|
||||
<div class="font-size-14 font-500 color-525866 mr-12">联系手机</div>
|
||||
<div class="right">
|
||||
<input
|
||||
class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
|
||||
v-model.trim="userFormList[0].contactPhone"
|
||||
placeholder="请输入联系手机"
|
||||
maxlength="11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import Stepper from "@/components/Stepper/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
userFormList: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
visitorName: "",
|
||||
contactPhone: "",
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
const count = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => {
|
||||
emit("update:modelValue", val);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
338
src/pages/booking/index.vue
Normal file
338
src/pages/booking/index.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<div class="booking h-screen flex flex-col">
|
||||
<TopNavBar
|
||||
titleAlign="center"
|
||||
:backgroundColor="$theme - color - 100"
|
||||
backIconColor="#000"
|
||||
:shadow="false"
|
||||
>
|
||||
<template #title>
|
||||
{{ GOODS_TYPE[orderData.orderType] }}
|
||||
</template>
|
||||
</TopNavBar>
|
||||
|
||||
<div
|
||||
class="booking-content flex-full border-box p-12 overflow-hidden scroll-y"
|
||||
>
|
||||
<!-- 预约内容 -->
|
||||
<div class="border-box bg-white p-12 rounded-12 mb-12">
|
||||
<!-- 酒店类型入住离店日期部分 -->
|
||||
<DateRangeSection
|
||||
v-if="orderData.orderType == 0"
|
||||
:selectedDate="selectedDate"
|
||||
:showBtn="true"
|
||||
@click="navigateToDetail(orderData)"
|
||||
/>
|
||||
|
||||
<div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
|
||||
{{ orderData.commodityName }}
|
||||
</div>
|
||||
|
||||
<div class="border-box border-bottom">
|
||||
<div class="font-size-12 color-99A0AE line-height-16 pb-12 break-all">
|
||||
{{ orderData.commodityDescription }}
|
||||
</div>
|
||||
|
||||
<!-- 权益部分 -->
|
||||
<div class="flex flex-items-center mb-8">
|
||||
<span
|
||||
class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
|
||||
v-for="(item, index) in orderData.commodityFacilityList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="border-box flex flex-items-center flex-justify-between pt-12"
|
||||
>
|
||||
<span class="font-size-12 color-525866 line-height-18"
|
||||
>取消政策及说明</span
|
||||
>
|
||||
<div class="flex flex-items-center">
|
||||
<span
|
||||
class="font-size-12 theme-color-500 line-height-16"
|
||||
@click="refundVisible = true"
|
||||
>取消政策</span
|
||||
>
|
||||
<uni-icons type="right" size="15" color="#99A0AE" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 非酒店类型 -->
|
||||
<ContactSection
|
||||
v-if="orderData.orderType != 0"
|
||||
v-model="quantity"
|
||||
:userFormList="userFormList"
|
||||
v-model:reservationDate="selectedReservationDate"
|
||||
:orderData="orderData"
|
||||
/>
|
||||
|
||||
<!-- 酒店类型 -->
|
||||
<UserSection
|
||||
v-if="orderData.orderType == 0"
|
||||
v-model="quantity"
|
||||
:userFormList="userFormList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<FooterSection
|
||||
v-if="Object.keys(orderData).length"
|
||||
v-model="quantity"
|
||||
:selectedDate="selectedDate"
|
||||
:orderData="orderData"
|
||||
@detailClick="detailVisible = true"
|
||||
@payClick="handlePayClick"
|
||||
/>
|
||||
|
||||
<!-- 取消政策弹窗 -->
|
||||
<RefundPopup v-model="refundVisible" :orderData="orderData" />
|
||||
|
||||
<!-- 明细弹窗 -->
|
||||
<DetailPopup v-model="detailVisible" :orderData="orderData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, nextTick } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||||
import DateRangeSection from "@/components/DateRangeSection/index.vue";
|
||||
import ContactSection from "./components/ConactSection/index.vue";
|
||||
import UserSection from "./components/UserSection/index.vue";
|
||||
import RefundPopup from "@/components/RefundPopup/index.vue";
|
||||
import DetailPopup from "@/components/DetailPopup/index.vue";
|
||||
import FooterSection from "./components/FooterSection/index.vue";
|
||||
import { goodsDetail, orderPay } from "@/request/api/GoodsApi";
|
||||
import { useSelectedDateStore } from "@/store";
|
||||
import { GOODS_TYPE } from "@/constant/type";
|
||||
import { ThrottleUtils, PhoneUtils } from "@/utils";
|
||||
|
||||
const refundVisible = ref(false);
|
||||
const detailVisible = ref(false);
|
||||
const orderData = ref({});
|
||||
const selectedDate = ref({
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
totalDays: 1,
|
||||
});
|
||||
const quantity = ref(1);
|
||||
const selectedReservationDate = ref("");
|
||||
|
||||
// 工具函数
|
||||
const createEmptyUserForm = () => ({ visitorName: "", contactPhone: "" });
|
||||
const userFormList = ref([createEmptyUserForm()]);
|
||||
const isDeleting = ref(false); // 标志位，防止删除时watch冲突
|
||||
|
||||
// 监听 quantity 变化，动态调整 userFormList
|
||||
watch(
|
||||
quantity,
|
||||
async (newQuantity) => {
|
||||
// 只有在酒店类型（orderType == 0）时才动态调整 userFormList
|
||||
if (orderData.value.orderType !== 0) return;
|
||||
|
||||
// 如果正在执行删除操作，跳过watch逻辑
|
||||
if (isDeleting.value) {
|
||||
isDeleting.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const currentLength = userFormList.value.length;
|
||||
|
||||
if (newQuantity > currentLength) {
|
||||
// 数量增加，添加新的表单项
|
||||
const newForms = Array.from({ length: newQuantity - currentLength }, () =>
|
||||
createEmptyUserForm(),
|
||||
);
|
||||
userFormList.value.push(...newForms);
|
||||
} else if (newQuantity < currentLength) {
|
||||
// 数量减少，删除多余的表单项
|
||||
userFormList.value.splice(newQuantity);
|
||||
}
|
||||
|
||||
// 等待DOM更新完成
|
||||
await nextTick();
|
||||
},
|
||||
{ immediate: false },
|
||||
);
|
||||
|
||||
onLoad((options) => {
|
||||
const { commodityId } = options;
|
||||
|
||||
getGoodsDetail(commodityId);
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
const selectedDateStore = useSelectedDateStore();
|
||||
|
||||
selectedDate.value.startDate = selectedDateStore.selectedDate.startDate;
|
||||
selectedDate.value.endDate = selectedDateStore.selectedDate.endDate;
|
||||
selectedDate.value.totalDays = selectedDateStore.selectedDate.totalDays;
|
||||
});
|
||||
|
||||
const getGoodsDetail = async (commodityId) => {
|
||||
const res = await goodsDetail({ commodityId });
|
||||
|
||||
console.log("获取商品详情", res);
|
||||
|
||||
orderData.value = res.data;
|
||||
// 取commodityFacilityList前3个
|
||||
orderData.value.commodityFacilityList = res.data.commodityFacilityList.slice(
|
||||
0,
|
||||
3,
|
||||
);
|
||||
};
|
||||
|
||||
// 跳转商品详情
|
||||
const navigateToDetail = ({ commodityId }) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods/index?commodityId=${commodityId}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 验证用户姓名
|
||||
const validateUserForms = () => {
|
||||
const invalidUsers = userFormList.value.filter((user) => {
|
||||
return user.visitorName.trim() === "";
|
||||
});
|
||||
|
||||
if (invalidUsers.length) {
|
||||
uni.showToast({ title: "请填写姓名", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 处理支付点击事件
|
||||
const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
|
||||
console.log("处理支付点击事件", userFormList.value);
|
||||
// 预约日期，酒店类型不需要
|
||||
if (orderData.value.reservationEnabled) {
|
||||
if (!selectedReservationDate.value) {
|
||||
uni.showToast({ title: "请选择预约日期", icon: "none" });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 校验用户姓名
|
||||
if (!validateUserForms()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 校验手机号
|
||||
if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
|
||||
uni.showToast({ title: "请输入正确的手机号", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
// 购买的商品id
|
||||
const commodityId = goodsData.commodityId;
|
||||
// 消费者信息
|
||||
const consumerInfoEntityList = userFormList.value;
|
||||
// 购买数量
|
||||
const purchaseAmount = quantity.value;
|
||||
// 支付方式 0-微信 1-支付宝 2-云闪付
|
||||
const payWay = "0";
|
||||
// 支付渠道 0-app 1-小程序 2-h5
|
||||
const paySource = "1";
|
||||
|
||||
const params = {
|
||||
commodityId,
|
||||
purchaseAmount,
|
||||
payWay,
|
||||
paySource,
|
||||
consumerInfoEntityList,
|
||||
};
|
||||
|
||||
// 预约日期，酒店类型不需要
|
||||
if (orderData.value.reservationEnabled) {
|
||||
params.reservationDate = selectedReservationDate.value;
|
||||
}
|
||||
|
||||
//酒店类型添加入住时间、离店时间
|
||||
if (goodsData.orderType == 0 && selectedDate.value) {
|
||||
const { startDate, endDate } = selectedDate.value;
|
||||
// 入住时间
|
||||
params.checkInData = startDate;
|
||||
// 离店时间
|
||||
params.checkOutData = endDate;
|
||||
}
|
||||
|
||||
// 点击后立即展示 loading
|
||||
uni.showLoading({ title: "正在提交订单..." });
|
||||
const res = await orderPay(params);
|
||||
console.log("确认订单---2:", res);
|
||||
uni.hideLoading();
|
||||
|
||||
// 检查接口返回数据
|
||||
if (!res || !res.data) {
|
||||
uni.hideLoading();
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: res.msg || "订单创建失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = res;
|
||||
const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
|
||||
|
||||
// 验证支付参数是否完整
|
||||
if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
|
||||
uni.hideLoading();
|
||||
setTimeout(() => {
|
||||
uni.showToast({ title: "支付参数错误，请重试", icon: "none" });
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// 在发起微信支付前关闭 loading（避免与原生支付 UI 冲突）
|
||||
uni.hideLoading();
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 调用微信支付
|
||||
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: (e) => {
|
||||
console.error("支付失败：", e);
|
||||
uni.showToast({ title: "支付失败，请重试", icon: "none" });
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "支付功能开发中",
|
||||
showCancel: false,
|
||||
});
|
||||
// #endif
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
4
src/pages/booking/styles/index.scss
Normal file
4
src/pages/booking/styles/index.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
.booking {
|
||||
background: linear-gradient(180deg, $theme-color-100 0%, #f5f7fa 100%) 0 86px / 100%
|
||||
100px no-repeat;
|
||||
}
|
||||
Reference in New Issue
Block a user