feat: 快速预定页面调整

src/components/DetailPopup/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    :safe-area="false"
+    @maskClick="handleClose"
+  >
+    <view class="refund-popup bg-F5F7FA border-box">
+      <view
+        class="border-box flex flex-items-center justify-between pt-12 pb-12 relative"
+      >
+        <view
+          class="flex-full font-size-16 color-171717 line-height-24 text-center"
+          >明细详情</view
+        >
+        <!-- 关闭按钮 -->
+        <uni-icons
+          class="close absolute"
+          type="close"
+          size="20"
+          color="#CACFD8"
+          @click="handleClose"
+        />
+      </view>
+      <!-- 内容区域 -->
+      <view class="rounded-12 bg-white ml-12 mr-12 mb-40">
+        <view
+          class="border-box border-bottom flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12"
+        >
+          <text class="font-size-16 font-500 color-171717">在线支付</text>
+          <text class="font-size-14 color-171717">239</text>
+        </view>
+        <view
+          class="border-box flex flex-items-center flex-justify-between pt-12 pb-12 ml-12 mr-12"
+        >
+          <text class="font-size-16 font-500 color-171717">房费</text>
+          <text class="font-size-14 color-171717">239</text>
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+
+// Props定义
+const props = defineProps({
+  // 弹窗显示状态
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  // 订单数据
+  orderData: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+// Events定义
+const emit = defineEmits(["update:modelValue"]);
+
+// 弹窗引用
+const popupRef = ref(null);
+
+// 获取退款模板
+const commodityPurchaseInstruction = computed(() => {
+  if (props.orderData.commodityPurchaseInstruction) {
+    return props.orderData.commodityPurchaseInstruction;
+  }
+
+  return {};
+});
+
+// 方法定义
+const show = () => popupRef.value && popupRef.value.open();
+
+const hide = () => popupRef.value && popupRef.value.close();
+
+// 监听modelValue变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      show();
+    } else {
+      hide();
+    }
+  },
+  { immediate: true }
+);
+
+const handleClose = () => {
+  emit("update:modelValue", false);
+  emit("close");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

src/components/DetailPopup/styles/index.scss

@@ -0,0 +1,9 @@
+.refund-popup {
+  border-radius: 15px 15px 0 0;
+  padding-bottom: 40px;
+}
+
+.close {
+  top: 14px;
+  right: 12px;
+}