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

完善预约popup

Browse Source
This commit is contained in:
wangxiaowei
2025-10-24 14:22:31 +08:00
parent fc35d6d459
commit 23b11c4bff
3 changed files with 111 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
bundle/reserve/reserve.vue
View File

@ -16,7 +16,7 @@
<view class="btn" @tap="timePopup = true">立即预约</view>
</view>
<Popup :show="true" :width='750' :padding="0" type="bottom" radius="32rpx 32rpx 0 0">
<Popup :show="timePopup" :width='750' :padding="0" type="bottom" radius="32rpx 32rpx 0 0">
<view class="ww100 box-s-b pop-improt typeof pr time-popup">
<image style="width: 64rpx;height: 64rpx;position: absolute; top: 26rpx;right: 30rpx;" src="@/static/icon/close2.png" mode=""></image>
@ -51,7 +51,7 @@
<view class="">
合计： <price-format color="#FF5951" :subscript-size="26" :first-size="40" :second-size="40" price="100"></price-format>
</view>
<view class="d-f j-c-c a-i-c">
<view class="d-f j-c-c a-i-c" style="margin-top: 10rpx;" @tap="handleShowBill">
<view class="price-detail">费用明细</view>
<image style="width: 14rpx;height: 8rpx;margin-left: 10rpx;" src="@/static/icon/down.png" mode=""></image>
</view>
@ -61,6 +61,68 @@
</view>
</view>
</Popup>
<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">
<image style="width: 64rpx;height: 64rpx;position: absolute; top: 26rpx;right: 30rpx;" src="@/static/icon/close2.png" mode=""></image>
<view class="d-c-c pt42">
<text class="f34 fb">费用明细</text>
</view>
<view class="bg-white bill-info">
<view class="">
<view class="title1 d-b-c">
<view>场地费</view>
<view>
<price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
</view>
</view>
<view class="title2 d-b-c">
<view>场地费（￥100元/小时）</view>
<view>x3</view>
</view>
</view>
<view style="margin-top: 52rpx;">
<view class="title1 d-b-c">
<view>灯光费</view>
<view>
<price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
</view>
</view>
<view class="title2 d-b-c">
<view>灯光费（￥50元/小时）</view>
<view>x3</view>
</view>
</view>
<view class="line"></view>
<view class="title3 d-b-c">
<view>实付金额</view>
<view>
<price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
</view>
</view>
</view>
<view class="price bg-white" style="margin: 0; padding: 56rpx 22rpx 42rpx;">
<view class="d-b-c price-block" style="margin: 0;">
<view class="d-f d-c j-c-b">
<view class="">
合计： <price-format color="#FF5951" :subscript-size="26" :first-size="40" :second-size="40" price="100"></price-format>
</view>
<view class="d-f j-c-c a-i-c" style="margin-top: 10rpx;" @tap="handleShowTime">
<view class="price-detail">费用明细</view>
<image style="width: 14rpx;height: 8rpx;margin-left: 10rpx;" src="@/static/icon/up.png" mode=""></image>
</view>
</view>
<view class="price-btn">立即预定<text class="" v-if="countSelectedTime > 0">（{{countSelectedTime}}小时）</text></view>
</view>
</view>
</view>
</Popup>
</view>
</template>
@ -116,13 +178,13 @@
],
selectedTime: [],
countSelectedTime: 0
countSelectedTime: 0,
billPopup: false,
};
},
onLoad(args) {
this.getData();
},
methods: {
@ -171,6 +233,7 @@
this.currentTime = index;
},
// 计算时长
handleSelectTime(time) {
const idx = this.selectedTime.indexOf(time)
if (idx > -1) {
@ -181,6 +244,18 @@
// 计算时长
this.countSelectedTime = this.selectedTime.length * 1
},
// 显示费用明细
handleShowBill() {
this.billPopup = true;
this.timePopup = false;
},
// 显示选择时间
handleShowTime() {
this.billPopup = false;
this.timePopup = true;
}
}
};
@ -367,4 +442,35 @@
}
}
}
.bill-info {
border-radius: 16rpx;
margin: 32rpx 30rpx 22rpx;
padding: 48rpx 30rpx 30rpx;
.title1 {
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
}
.title2 {
margin-top: 12rpx;
font-weight: 400;
font-size: 24rpx;
color: #909399;
line-height: 34rpx;
}
.line {
border: 2rpx solid #F6F7F9;
margin: 34rpx 0 30rpx;
}
.title3 {
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
}
}
</style>

1
components/uni-popup.vue
View File

@ -1,5 +1,6 @@
<template>
<view>
backgroundColor__{{ backgroundColor }}
<view class="uni-mask" v-show="show" :style="{top:offsetTop + 'px'}" @click="hide"></view>
<view :class="['uni-popup','uni-popup-'+type]" v-show="show"
:style="'width:'+width+'rpx; heigth:'+heigth+'rpx;padding:'+padding+'rpx;background-color:'+backgroundColor+';box-shadow:'+boxShadow+';border-radius:'+radius+'rpx;'">

BIN
static/icon/up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 B