1111

src/pages/boxes/apply.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+
+import { hooks } from "@@/index"
+import { foodApi } from "@@/api"
+
+const data = {
+
+}
+const state = reactive<any>({
+    pa: {
+        status: 1,
+    },
+})
+
+onLoad(() => {
+
+});
+onShow(() => {
+
+})
+
+</script>
+
+
+<template>
+    <crud-layout title="预定" bg="/static/page/blue-bg.png">
+
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/boxes/detail.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty } from "radash"
+
+import { hooks, router } from "@@/index"
+import { boxesApi } from "@@/api"
+
+import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
+import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
+
+const data = {
+
+}
+const state = reactive<any>({
+    detailId: null,
+    detail: {},
+})
+
+onLoad((options: any) => {
+    if (!isEmpty(options.id)) {
+        state.detailId = options.id
+    }
+});
+onShow(() => {
+    getDetail()
+})
+
+const getDetail = async () => {
+    const _pa = { id: state.detailId }
+    const { data } = await boxesApi.detail(_pa)
+    state.detail = data
+    state.detail.imagesArray = data.images?.split(",")
+}
+
+const doSubmit = () => {
+    router.jump('/pages/boxes/apply', { id: state.detail.id })
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
+        <z-swiper>
+            <z-swiper-item v-for="(v, i) in state.detail.imagesArray" :key="i">
+                <image class="w-100vw" :src="v" mode="widthFix" />
+            </z-swiper-item>
+        </z-swiper>
+        <view class="p-x-15rpx">
+            <view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
+                <view class="flex-row items-center justify-between">
+                    <view class="flex-row items-center">
+                        <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view>
+                    </view>
+                    <view class="second-text-26">可容纳{{ state.detail.capacity }}</view>
+                </view>
+                <view class="flex-col m-t-15rpx">
+                    <view class="sub-text-32">{{ state.detail.name }}</view>
+                </view>
+            </view>
+            <view class="h-15rpx" />
+            <view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
+                <view class="prefix_title">详情</view>
+                <view class="m-t-15rpx" v-html="state.detail.description"></view>
+            </view>
+        </view>
+        <template #main-bottom>
+            <view class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-60rpx m-t-60rpx sub-text-30 color-white!"
+                @tap="doSubmit">
+                预定
+            </view>
+            <view class="h-30rpx" />
+        </template>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep() {
+    .layout_main>scroll-view {
+        padding: 0 !important;
+    }
+}
+</style>

src/pages/boxes/list.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty } from "radash"
+
+import { hooks, router } from "@@/index"
+import { boxesApi } from "@@/api"
+
+import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
+import CustomWaterfallsFlow from "@@/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue"
+
+const data = {
+    tabs: [
+        { id: null, name: '全部', disabled: false },
+        { id: 0, name: '空闲', disabled: false },
+        { id: 1, name: '部分空闲', disabled: false },
+        { id: 2, name: '已满', disabled: false },
+    ],
+}
+
+const state = reactive<any>({
+    detailId: null,
+    pa: {
+        status: data.tabs[0].id,
+    },
+})
+
+const pageRef = ref<any>(null)
+const pageHook = hooks.usePage(pageRef, boxesApi.page, null, 'data.list')
+const query = (page: number, pagesize: number) => {
+    pageHook.startPage(page, pagesize, false, state.pa);
+}
+
+onLoad((options: any) => {
+    if (!isEmpty(options.id)) {
+        state.detailId = options.id
+        state.pa.merchantId = options.id
+    }
+});
+onShow(() => {
+    if (pageRef.value) {
+        pageRef.value.reload(false)
+    }
+})
+
+const doTab = (e: any) => {
+    const target = data.tabs[e];
+    state.pa.status = target.id
+    pageRef.value.reload(true)
+}
+
+const doCard = (v: any) => {
+    router.jump('/pages/boxes/detail', { id: v.id })
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="包厢预定" bg="/static/page/blue-bg.png">
+        <z-paging ref="pageRef" height="100%" :fixed="false" v-model="pageHook.list" :default-page-size="5"
+            safe-area-inset-bottom :loading-more-enabled="true" :show-scrollbar="false" @query="query"
+            :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" @scroll="pageHook.scroll">
+            <template #top>
+                <view class="bg-white rounded-16rpx px-20rpx m-x-10rpx m-t-15rpx">
+                    <z-tabs :list="data.tabs" @change="doTab" />
+                </view>
+            </template>
+            <view class="h-20rpx" />
+            <custom-waterfalls-flow v-model="pageHook.list" imageKey="images" :columnSpace="1" @wapperClick="doCard"
+                @imageClick="doCard">
+                <template v-slot:default="v">
+                    <view class="p-x-15rpx p-t-10rpx p-b-20rpx">
+                        <view class="sub-text-28 show-line">{{ v.name }}</view>
+                        <view class="m-t-10rpx flex-row items-center">
+                            <view class="second-text-32 color-#f63a36!">
+                                ¥{{ v.price }}
+                            </view>
+                        </view>
+                        <view class="flex-row items-center m-t-10rpx">
+                            <view class="second-text-26">可容纳{{ v.capacity }}人</view>
+                            <view class="w-1px h-20rpx m-x-5rpx bg-#999" />
+                            <view class="flex-row-center">
+                                <tm-tag v-if="v.status == 0" size="xs" color="success">
+                                    {{ hooks.useEnum("boxesBxStatusEnum", v.status.toString()) }}
+                                </tm-tag>
+                                <tm-tag v-if="v.status == 1" size="xs">
+                                    {{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
+                                </tm-tag>
+                                <tm-tag v-if="v.status == 2" size="xs" color="error">
+                                    {{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
+                                </tm-tag>
+                            </view>
+                        </view>
+                        <view class="flex-row items-center m-t-10rpx">
+                            <view class="second-text-26">{{ v.address }}</view>
+                        </view>
+                    </view>
+                </template>
+            </custom-waterfalls-flow>
+        </z-paging>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>