feat: 快速预定交互调整

src/pages-booking/components/FooterSection/index.vue

@@ -2,11 +2,11 @@
   <view
     class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
   >
-    <text class="font-size-14 font-500 color-525866 mr-4"> 在线付 </text>
     <text
       class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
-      >88</text
     >
+      {{ totalAmt }}
+    </text>
     <!-- <view class="flex flex-items-center" @click="emit('detailClick')">
       <text class="font-size-12 color-A3A3A3 mr-4">明细</text>
       <uni-icons type="up" size="16" color="#A3A3A3" />
@@ -19,15 +19,47 @@
         class="icon"
         src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
       />
-      <text class="font-size-16 font-500 color-white">立即预定</text>
+      <text
+        class="font-size-16 font-500 color-white"
+        @click="emit('payClick', orderData)"
+        >立即支付</text
+      >
     </view>
   </view>
 </template>
 
 <script setup>
-import { defineEmits } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 
-const emit = defineEmits(["detailClick"]);
+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);
+  },
+});
+
+const totalAmt = computed(() => {
+  const { totalDays } = props.selectedDate;
+  const { specificationPrice } = props.orderData;
+
+  return count.value * Number(specificationPrice) * totalDays;
+});
 </script>
 
 <style scoped lang="scss">