wangxiaowei/xiuhuwangqiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善订单预约

Browse Source
This commit is contained in:
wangxiaowei
2025-12-06 19:39:25 +08:00
parent a5a81f869e
commit becadb1d0c
3 changed files with 441 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
bundle/reserve/confirm.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="">
<view style="padding-bottom: 200rpx;">
<!-- 费用明细弹窗 -->
<Popup :show="billPopup" :width='750' :padding="0" type="bottom" backgroundColor="#FBFBFB" radius="32rpx 32rpx 0 0">
<view class="ww100 box-s-b pop-improt typeof pr time-popup">
@ -51,6 +51,17 @@
</view>
</view>
<!-- 使用余额支付优惠的折扣 -->
<view style="margin-top: 52rpx;" v-if="bill.dis">
<view class="title1 d-b-c">
<view style="color: #4C9F44;">优惠</view>
<view>
<text style="margin-right: 6rpx;"> - </text>
<price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" :price="bill.dis"></price-format>
</view>
</view>
</view>
<view class="line"></view>
<view class="title3 d-b-c">
@ -86,12 +97,22 @@
<view class="title">预约信息</view>
<template v-if="typeId == 1">
<view class="desc">预约场地：{{ room.title }}</view>
<view class="desc">
预约时间：{{ date && date.dayLabel ? date.dayLabel : '' }}
{{ date && date.hour ? date.hour : '' }}:{{ date && date.minute ? date.minute : '' }}
<view class="desc">场馆信息：{{ order.ground_name }}</view>
<view class="desc">活动日期：{{ order.day_time }}</view>
<view class="desc">预约时长：{{ order.hours }}小时</view>
<view class="desc">场地信息：</view>
<view class="desc" v-for="(item, index) in order.trade" :key="index">
<view class="fb">{{ index }}</view>
<view class="date-grid">
<view class="date-time-btn" v-for="(item2, index2) in item" :key="index2">
{{ item2.start_time }}-{{ item2.end_time }}
</view>
</view>
</view>
<view class="desc">预约时长：{{ date && date.duration ? date.duration : 0 }}小时</view>
<!-- <view class="desc">
预约时间：
{{ date && date.hour ? date.hour : '' }}:{{ date && date.minute ? date.minute : '' }}
</view> -->
</template>
<template v-if="typeId == 2">
@ -144,6 +165,26 @@
</view>
</view>
<!-- 支付方式 -->
<view class="buy-checkout p-0-30">
<view>
<view :class="payType == 'wxpay' ? 'item active' : 'item'" @tap="payTypeFunc('wxpay')" style="padding-bottom: 10rpx;">
<view class="d-s-c">
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-weixin"></span></view>
<text class="key">微信支付：</text>
</view>
<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
</view>
<view :class="payType == 'balance' ? 'item active' : 'item'" @tap="payTypeFunc('balance')">
<view class="d-s-c">
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
<text class="key">余额支付：(剩余：{{balance}})</text>
</view>
<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
</view>
</view>
</view>
<!-- 立即预定 -->
<view class="price" v-if="showPrice">
<view class="line"></view>
@ -175,6 +216,7 @@
data() {
return {
orderId: 0,
venueId: 0,
roomId: 0,
typeId: 1, // 网球场1 篮球场2
@ -196,12 +238,17 @@
price: 0, // 灯光单价
total: 0 // 灯光总价
},
dis: 0, // 折扣优惠
total: 0 // 总价
}
},
payType: 'wxpay', // 支付方式 wxpay\balance
balance: 0,
order: {},
};
},
onLoad(args) {
this.orderId = args.orderId || 0;
this.venueId = args.venueId || 0;
this.roomId = args.roomId || 0;
this.typeId = args.typeId || 1;
@ -224,6 +271,19 @@
self.countSelectedTime = 4
}
// 获取余额
self._post(
'user.user/userMoney',
{
app_id: self.getAppId(),
},
function (res) {
if (res.code) {
self.balance = res.data.balance
}
}
)
// 获取场馆详情
self._post(
'ground.ground/groundDetails',
@ -258,6 +318,33 @@
}
)
// 获取订单详情
self._post(
'order.groundOrder/orderGroundDetails',
{
app_id: self.getAppId(),
order_id: self.orderId, // 场馆包间ID
},
function(res) {
console.log("🚀 ~ res:", res)
if (res.code) {
self.order = res.data.lists;
self.countSelectedTime = self.order.hours
self.countPrice()
}
self.loadding = false;
}
)
},
countPrice() {
let self = this;
uni.showLoading({
title: '加载中'
});
// 计算费用明细
if (self.countSelectedTime > 0) {
self._post(
@ -267,11 +354,13 @@
room_id: self.roomId,
nums: self.countSelectedTime,
type_id: self.typeId,
pay_type: self.payType
},
function(res) {
const result = res.data.lists
self.bill = {
total: result.order_amount,
dis: result.dis,
cdf: {
nums: result.nums,
price: result.room_price,
@ -304,6 +393,12 @@
this.showPrice = true;
},
// 选择支付方式
payTypeFunc(n) {
this.payType = n;
this.countPrice()
},
// 去支付
toConfirm() {
if (this.countSelectedTime === 0) {
@ -512,27 +607,6 @@
border-radius: 6rpx;
margin: 8rpx auto 0 auto;
}
/* 日期网格：一行四个，间距 20rpx */
.date-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
padding: 0 30rpx; /* 保持与上方时间切换区域一致的左右内边距 */
}
.date-item {
background-color: #F7F7F7;
border-radius: 10rpx;
height: 72rpx; /* 可按需调整高度 */
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #303133;
box-sizing: border-box;
}
/* 可选：选中样式 */
.date-item.active {
border-color: #365A9A;
@ -601,4 +675,42 @@
line-height: 42rpx;
}
}
.buy-checkout-top {
padding: 100rpx 0;
}
.buy-checkout {
border-radius: 16rpx;
background-color: #FFFFFF;
margin: 28rpx 30rpx 0;
.item {
border-bottom: none;
border-radius: 2rpx;
padding: 30rpx 0;
}
}
.buy-checkout .item.active .iconfont.icon-xuanze {
color: #365A9A;
}
/* 日期网格：一行三个，间距 20rpx */
.date-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
}
.date-time-btn {
width: 100%;
height: 60rpx;
line-height: 60rpx;
background: #365A9A;
color: #fff;
font-size: 26rpx;
border-radius: 10rpx;
text-align: center;
}
</style>