zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 快速预定页面调整

Browse Source
This commit is contained in:
duanshuwen
2025-10-25 14:05:34 +08:00
parent ea36177f05
commit b9c1f45b29
24 changed files with 458 additions and 1301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages-booking/index.vue
View File

@@ -14,14 +14,37 @@
<view class="booking-content flex-full border-box p-12">
<!-- 预约内容 -->
<view class="border-box bg-white p-12 rounded-12 mb-12">
<view class="font-size-16 font-500 color-000 line-height-24"
>【温泉季】戏水单人票 +单人简餐</view
>
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection
v-if="orderData.commodityTypeCode === '0'"
:selectedDate="selectedDate"
/>
<view
class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
>温泉早鸟票2张 黄南武辣子鸡2人套餐1份</view
>
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1"
>宽敞大床房/奶油ins风/交通便捷/投影电影/近地铁站/氛围灯/舒适温暖/出行必备/独享整套房源
</view>
<view class="border-box border-bottom">
<view class="font-size-12 color-99A0AE line-height-16 pb-12"
>温泉早鸟票2张 黄南武辣子鸡2人套餐1份</view
>
<!-- 权益部分 -->
<view class="flex flex-items-center mb-8">
<text
class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
>自助早餐券*2</text
>
<text
class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
>自助早餐券*2</text
>
<text
class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
>自助早餐券*2</text
>
</view>
</view>
<view
class="border-box flex flex-items-center flex-justify-between pt-12"
@@ -30,7 +53,9 @@
>使用时间:周一至周日9:00-22:00</text
>
<view class="flex flex-items-center">
<text class="font-size-12 color-2D91FF line-height-16"
<text
class="font-size-12 color-2D91FF line-height-16"
@click="refundVisible = true"
>取消政策</text
>
<uni-icons type="right" size="15" color="#99A0AE" />
@@ -44,16 +69,56 @@
<!-- 酒店类型 -->
<UserSection />
</view>
<!-- 底部 -->
<FooterSection @detailClick="detailVisible = true" />
<!-- 取消政策弹窗 -->
<RefundPopup v-model="refundVisible" :orderData="orderData" />
<!-- 明细弹窗 -->
<DetailPopup v-model="detailVisible" :orderData="orderData" />
</view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import TopNavBar from "@/components/TopNavBar/index.vue";
import DateRangeSection from "./components/DateRangeSection/index.vue";
import ContactSection from "./components/ConactSection/index.vue";
import UserSection from "./components/UserSection/index.vue";
import RefundPopup from "@/components/RefundPopup/index.vue";
import DetailPopup from "@/components/DetailPopup/index.vue";
import FooterSection from "./components/FooterSection/index.vue";
import { goodsDetail } from "@/request/api/GoodsApi";
const title = ref("预约");
const refundVisible = ref(false);
const detailVisible = ref(false);
const orderData = ref({});
const selectedDate = ref({
startDate: "",
endDate: "",
totalDays: 1,
});
onLoad((options) => {
const { commodityId, startDate, endDate, totalDays } = options;
selectedDate.value.startDate = startDate;
selectedDate.value.endDate = endDate;
selectedDate.value.totalDays = totalDays;
getGoodsDetail(commodityId);
});
const getGoodsDetail = async (commodityId) => {
const res = await goodsDetail({ commodityId });
if (res.code === 200) {
orderData.value = res.data;
}
};
</script>
<style scoped lang="scss">