1c0ea86e69
remove the global DetailPopup SCSS style file, update the component import path in the booking page, and rewrite the component using Tailwind CSS classes.
69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
<template>
|
|
<van-popup ref="popupRef" position="bottom" v-model:show="show">
|
|
<div class="rounded-t-[15px] pb-10 bg-[#f5f7fa] ">
|
|
<div class=" flex items-center justify-between pt-[12px] pb-[12px] relative">
|
|
<div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
|
|
明细详情
|
|
</div>
|
|
<!-- 关闭按钮 -->
|
|
<van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8" @click="close" />
|
|
</div>
|
|
<!-- 内容区域 -->
|
|
<div class="rounded-[12px] bg-white ml-[12px] mr-[12px] mb-[40px]">
|
|
<div class="border-b border-ink-200 flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
|
|
<span class="text-[16px] font-medium text-[#171717]">在线支付</span>
|
|
<span class="text-[14px] text-[#171717]">239</span>
|
|
</div>
|
|
<div class=" flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
|
|
<span class="text-[16px] font-medium text-[#171717]">房费</span>
|
|
<span class="text-[14px] text-[#171717]">239</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, defineExpose } 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 show = ref(false)
|
|
|
|
// 获取退款模板
|
|
const commodityPurchaseInstruction = computed(() => {
|
|
if (props.orderData.commodityPurchaseInstruction) {
|
|
return props.orderData.commodityPurchaseInstruction;
|
|
}
|
|
|
|
return {};
|
|
});
|
|
|
|
// 方法定义
|
|
const open = () => show.value = true;
|
|
|
|
const close = () => show.value = false;
|
|
|
|
defineExpose({
|
|
open,
|
|
close,
|
|
});
|
|
</script>
|