完善预约popup

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>

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;'">