From 23b11c4bff5d4057dd8ee2bf6a328b02f7d9e97c Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Fri, 24 Oct 2025 14:22:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A2=84=E7=BA=A6popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bundle/reserve/reserve.vue | 114 +++++++++++++++++++++++++++++++++++--
 components/uni-popup.vue   |   1 +
 static/icon/up.png         | Bin 0 -> 535 bytes
 3 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 static/icon/up.png

diff --git a/bundle/reserve/reserve.vue b/bundle/reserve/reserve.vue
index 23f7dec..3c4f3cc 100644
--- a/bundle/reserve/reserve.vue
+++ b/bundle/reserve/reserve.vue
@@ -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>
diff --git a/components/uni-popup.vue b/components/uni-popup.vue
index 7fc7b05..d4d4e22 100644
--- a/components/uni-popup.vue
+++ b/components/uni-popup.vue
@@ -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;'">
diff --git a/static/icon/up.png b/static/icon/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba4e5f915e384e09d100f33952dc9e4996ba30ac
GIT binary patch
literal 535
zcmV+y0_gpTP)<h;3K|Lk000e1NJLTq000pH000XJ1^@s6nIL8d0005ZNkl<ZcmZ^g
zKWI}?6vn^r-j_scsUU@dlSnslGELp8gP@zD#Wp%<3*ulCaVTg(GAIs;NS4sFsD(%&
zV0CltphKjSPKtwqg8@rvqV0=q?(y8vhW>kpdmi_m`+dLr?zsk0F<7>J>0&mOF0QAB
zC(9>pOm;*`qaaKLOIOwOP}71uZ~pMUf@0Vs_JS}uG&LaLV*&>Nsi`lf^D$e;2y(ey
zo?V6HV4;tcX%gKESQN*sK)xubLx=~duZPd*T$%da7~3ExhYCkbV2i3aD!{T6Oe`&j
zv*O%M)mI62iy)u8TsWrd_Gm-;ho^d)v_(DbIEV&C9(5+-GvD528VkRw?;SX<^}1%S
zF?QPPHz_Sh|CLgg&^;yOGz4o9nThQW3iB_ohb`fJZvA&WD2wn}YoACuNZ$MWzBzU6
z#Xcu1_W)i3HGnyUYZD)ykJhmzzAMmh^@;ZDwJ(#n;PCfu@40-!tTdWu325^W2vG?e
z;rPclw-&u{XI5TiYLwMGUZ;N)Ksa`=D=}aknmt}j!Dpcz`81dL>DN(NnY~^0I(@kx
zdbp+KA@eV&mGpjD8kb%ujrymI^0(_=*L1k3&CYhlV{iWh00960$>LkL00006Nkl<Z
Z0{|o5szj!%qHX{H002ovPDHLkV1lr+^REB^

literal 0
HcmV?d00001