11

src/pages/boxes/apply.vue

@@ -1,33 +1,183 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty, max, min } from "radash"
+import dayjs from "dayjs"
 
 import { hooks } from "@@/index"
-import { foodApi } from "@@/api"
+import { boxesApi } from "@@/api"
 
 const data = {
 
 }
 const state = reactive<any>({
-    pa: {
-        status: 1,
-    },
+    detailType: "add",
+    detailId: null,
+    detail: null,
+    rechargeList: [],
+    selectRechargeList: [],
+    selectRechargeIdList: [],
+    pickerDate: {
+        start: "",
+        end: "",
+    }
+})
+const applyForm = reactive<any>({
+    displayTimeRange: "",
+    displayTimeRangeStr: "",
+    bxDate: null,
+})
+const applyFormRules = reactive<any>({
+    bxDate: [
+        { required: true, message: '预约时间不能为空' }
+    ],
 })
 
-onLoad(() => {
-
+onLoad((options: any) => {
+    const { type, id } = options
+    if (!isEmpty(type)) state.detailType = type
+    if (!isEmpty(id)) state.detailId = id
+    if (type === 'view') {
+        getDetail()
+    }
+    const today = dayjs()
+    state.pickerDate.start = dayjs().format('YYYY-MM-DD')
+    state.pickerDate.end = today.add(2, 'month').format('YYYY-MM-DD')
+    applyForm.bxDate = state.pickerDate.start
+    getDateRange()
 });
 onShow(() => {
 
 })
 
+const getDetail = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { id: state.detailId }
+    const { data } = await boxesApi.detail(_pa)
+    if (!isEmpty(data)) {
+        state.detail = data
+    }
+}
+
+const getDateRange = async () => {
+    const _pa = { id: state.detailId, currentDate: applyForm.bxDate }
+    const { data } = await boxesApi.get(_pa)
+    data.avaliabilityRespList.forEach(v => {
+        v.dateTime = `${v.bxDate} ${v.hour}`
+        v.timestamp = dayjs(v.dateTime).valueOf()
+    });
+    state.rechargeList = data.avaliabilityRespList
+}
+
+const bxDateConfirm = async (e: any) => {
+    getDateRange()
+}
+
+const doTimeItem = (v: any) => {
+    if (v.status == 1) {
+        uni.showToast({ title: '该时间段已被预约', icon: "none" })
+        return
+    }
+    const flag = state.selectRechargeList.some(i => i.id == v.id)
+    if (flag) {
+        state.selectRechargeList = state.selectRechargeList.filter(i => i.id != v.id)
+        if (state.selectRechargeList.length >= 2) {
+            const { timestamp: targetMin } = min(state.selectRechargeList, (i: any) => i.timestamp)
+            state.rechargeList.forEach(i => {
+                if (i.timestamp <= v.timestamp) {
+                    state.selectRechargeList = state.selectRechargeList.filter(j => j.id != i.id)
+                }
+            })
+        }
+    } else {
+        state.selectRechargeList.push({ ...v })
+        if (state.selectRechargeList.length >= 2) {
+            const { timestamp: targetMax } = max(state.selectRechargeList, (i: any) => i.timestamp)
+            const { timestamp: targetMin } = min(state.selectRechargeList, (i: any) => i.timestamp)
+            state.rechargeList.forEach(i => {
+                if (i.timestamp >= targetMin && i.timestamp <= targetMax) {
+                    state.selectRechargeList.push({ ...i })
+                }
+            })
+        }
+    }
+    state.selectRechargeIdList = state.selectRechargeList.map(v => v.id)
+}
+
+const doSubmit = async () => {
+
+}
+
 </script>
 
 
 <template>
-    <crud-layout title="预定" bg="/static/page/blue-bg.png">
-
+    <crud-layout title="预定" mainIsScroll bg="/static/page/blue-bg.png">
+        <view class="h-30rpx" />
+        <view class="card p-x-30rpx p-y-40rpx">
+            <tm-form ref="applyFormRef" v-model="applyForm" :rules="applyFormRules" direction="vertical">
+                <tm-form-item name="bxDate" label="预约时间" :showBottom="false">
+                    <tm-picker-date v-model="applyForm.bxDate" :start="state.pickerDate.start"
+                        :end="state.pickerDate.end" v-model:model-str="applyForm.bxDate" format="YYYY-MM-DD"
+                        @confirm="bxDateConfirm">
+                        <view :style="{ pointerEvents: state.detailType == 'view' ? 'auto' : 'none' }">
+                            <tm-input v-model="applyForm.bxDate" disabled placeholder="请选择使用时间..">
+                                <template v-slot:rightIcon>
+                                    <text v-if="state.detailType != 'view'"
+                                        class="p-0.5rem color-#b1b1b1 iconfont icon-xiangxiajiantouxiao"></text>
+                                </template>
+                            </tm-input>
+                        </view>
+                    </tm-picker-date>
+                </tm-form-item>
+            </tm-form>
+        </view>
+        <view class="prefix_title m-t-35rpx">时间段</view>
+        <view class="recharge p-30rpx bg-white rounded-20rpx m-t-20rpx shadow-main">
+            <view :class="[state.selectRechargeIdList.includes(v.id) ? 'recharge_item_active' : '']"
+                class="recharge_item" v-for="(v, i) in state.rechargeList" :key="i" @tap="doTimeItem(v)">
+                <text class="sub-text-24 text-center">{{ v.bxDate }}</text>
+                <text class="sub-text-24 text-center">{{ v.hour }}</text>
+            </view>
+        </view>
+        <template #main-bottom>
+            <view v-if="state.detailType != 'view'"
+                class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+                @tap="doSubmit">
+                提交
+            </view>
+        </template>
     </crud-layout>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep() {
+    .tmFormItemLabel {
+        padding-bottom: 10rpx !important;
+    }
+}
+
+.recharge_item_active {
+    background: #e9f5fe;
+    border: 1px solid #e9f5fe !important;
+
+    &>text {
+        color: #0094ff !important;
+    }
+}
+
+.recharge {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 15rpx;
+    border-bottom: 1px solid #f9f9f9;
+
+    &_item {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #cccccc;
+        border-radius: 16rpx;
+        padding: 20rpx 0;
+    }
+}
+</style>

src/pages/boxes/detail.vue

@@ -41,7 +41,7 @@ const doSubmit = () => {
 
 
 <template>
-    <crud-layout title="" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
+    <crud-layout title="" mainIsScroll 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" />
@@ -66,11 +66,10 @@ const doSubmit = () => {
             </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!"
+            <view class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-60rpx m-y-30rpx sub-text-30 color-white!"
                 @tap="doSubmit">
                 预定
             </view>
-            <view class="h-30rpx" />
         </template>
     </crud-layout>
 </template>

src/sheep/api/boxes.ts

@@ -37,6 +37,15 @@ export default {
         showLoading: false,
       },
     }),
+  get: (data: any) =>
+    request({
+      url: "boxes/info/api/get",
+      method: "GET",
+      data,
+      custom: {
+        showLoading: false,
+      },
+    }),
   MyBookingPage: (data: any) =>
     request({
       url: "boxes/info/api/getMyBookingPage",

src/sheep/components/crud/crud-layout/crud-layout.vue

@@ -155,7 +155,9 @@ page {
       // background: #ecf4f9;
     }
 
-    &_bottom {}
+    &_bottom {
+      box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
+    }
   }
 
   &_foot {}

src/uni_modules/tm-ui/components/tm-picker-date/tm-picker-date.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, watch, PropType } from 'vue';
+import { ref, computed, onMounted, watch, type PropType } from 'vue';
 import { useTmConfig } from "../../libs/config";
 import { tmDate, type tmDateTypeTime, createDate } from '../../libs/tmDate';
 import pickerItem from './../tm-picker-view/picker-item.vue';
@@ -528,7 +528,7 @@ onMounted(() => {
 	</view>
 	<tm-drawer @open="onOpen" :widthCoverCenter="true" :disabledScroll="true" :title="title" @close="onClose"
 		@confirm="onConfirm" @cancel="onCancel" :showFooter="true" v-model:show="show" :show-close="true" size="850">
-		<view v-if="yanchiDuration&&show" class="tmPickerDateWrap">
+		<view v-if="yanchiDuration && show" class="tmPickerDateWrap">
 			<picker-item @change-deep="change" :selected-index="_modelValueIndex" :list="dateList"
 				:cell-units="cellUnits.slice(0, dateList.length)"></picker-item>
 		</view>