Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6b8fa40d 1 parent 7678f851

新增预约页面逻辑

Inline Side-by-side
Showing 2 changed files with 99 additions and 42 deletions
......@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
VanCheckbox: typeof import('vant/es')['Checkbox']
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
VanCol: typeof import('vant/es')['Col']
VanDatePicker: typeof import('vant/es')['DatePicker']
VanDialog: typeof import('vant/es')['Dialog']
VanEmpty: typeof import('vant/es')['Empty']
VanField: typeof import('vant/es')['Field']
......@@ -28,5 +29,6 @@ declare module '@vue/runtime-core' {
VanRow: typeof import('vant/es')['Row']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanToast: typeof import('vant/es')['Toast']
}
}
......
<!--
* @Date: 2024-01-15 13:35:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-15 16:22:20
* @LastEditTime: 2024-01-16 15:15:07
* @FilePath: /xysBooking/src/views/booking.vue
* @Description: 预约页面
* @Version: 1.0.0
......@@ -12,7 +12,7 @@
<div class="choose-date">
<div class="title">
<div class="text">选择参访日期</div>
<div class="day">01月</div>
<div @click="chooseDate" class="day">{{ currentDateText }} 月</div>
</div>
<div class="days-of-week">
<div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div>
......@@ -28,52 +28,70 @@
</div>
</div>
</div>
<div class="choose-time">
<div v-if="checked_day" class="choose-time">
<div class="title">
<div class="text">选择参访时间段</div>
</div>
<div class="time-list">
<div @click="chooseTime(item, index)" v-for="(item, index) in timePeriod" :key="index" class="time">
<div
@click="chooseTime(item, index)"
v-for="(item, index) in timePeriod"
:key="index"
:class="['time', !item.num ? 'disabled' : '']"
>
<div class="left">
<van-icon v-if="checked_time !== index" name="https://cdn.ipadbiz.cn/xys/booking/%E5%8D%95%E9%80%8901@2x.png" />&nbsp;
<van-icon v-else name="https://cdn.ipadbiz.cn/xys/booking/%E5%8D%95%E9%80%8902@2x.png" />&nbsp;
{{ item.left }}
</div>
<div class="right">余量：{{ item.right }}</div>
<div class="right">
<span v-if="item.num">余量：{{ item.right }}</span>
<span v-else>已约满</span>
</div>
</div>
</div>
</div>
</div>
<div style="height: 5rem;"></div>
<div class="next">
<div class="button" style="background-color: #A67939;">下一步</div>
<div @click="nextBtn" class="button" style="background-color: #A67939;">下一步</div>
</div>
<van-popup v-model:show="showPicker" position="bottom">
<van-date-picker
v-model="currentDate"
title="选择年月"
:min-date="minDate"
:max-date="maxDate"
:columns-type="columnsType"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
<van-toast v-model:show="show_error" style="">
<template #message>
{{ error_message }}
</template>
</van-toast>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showSuccessToast, showFailToast, showToast } from 'vant';
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { useGo } from '@/hooks/useGo'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const dates = ref([
"2024-01-01",
"2024-01-02",
"2024-01-03",
"2024-01-04",
"2024-01-05",
"2024-01-06",
"2024-01-07",
"2024-01-08",
"2024-01-09",
]);
const go = useGo();
const dates_list = ref([{
date: "2024-01-01",
......@@ -112,6 +130,7 @@ const dates_list = ref([{
price: 5,
num: 1,
}]);
const dates = ref(dates_list.value.map(item => item.date));
const findDatesInfo = (date) => {
const result = dates_list.value.find((item) => item.date === date);
......@@ -168,35 +187,62 @@ const checked_time = ref(-1);
const timePeriod = ref([{
left: '05:00-08:00',
right: 1098,
num: 1,
}, {
left: '05:00-08:00',
right: 1098,
}, {
left: '05:00-08:00',
right: 1098,
},{
left: '05:00-08:00',
right: 1098,
}, {
left: '05:00-08:00',
right: 1098,
}, {
left: '05:00-08:00',
right: 1098,
}, {
left: '05:00-08:00',
right: 1098,
},]);
left: '08:00-10:00',
right: 98,
num: 0,
}]);
const chooseTime = (item, index) => {
checked_time.value = index;
const chooseTime = (item, index) => { // 选择时间段回调
if (item.num) {
checked_time.value = index;
}
console.log(item, index);
};
const chooseDay = (date) => {
checked_day.value = date;
console.log(date);
const checked_day_price = ref(0);
const chooseDay = (date) => { // 点击日期回调
if (findDatesInfo(date).num) { // 有余数可约
checked_day.value = date;
checked_day_price.value = findDatesInfo(date).price;
}
};
const showPicker = ref(false);
const chooseDate = () => {
showPicker.value = true;
}
const raw_date = new Date();
const currentDate = ref([raw_date.getFullYear(), raw_date.getMonth()]);
const columnsType = ['year', 'month'];
const minDate = new Date(2024, 0, 1);
const maxDate = new Date(2030, 11, 1);
const currentDateText = ref((raw_date.getMonth() + 1).toString().padStart(2, '0'));
const onConfirm = ({ selectedValues, selectedOptions }) => { // 选择日期回调
showPicker.value = false;
currentDateText.value = selectedValues[1].toString();
// 清空选择
checked_day.value = '';
checked_time.value = -1;
}
const onCancel = () => {
showPicker.value = false;
}
const show_error = ref(false);
const error_message = ref('');
const nextBtn = () => {
if (!checked_day.value || checked_time.value === -1) {
show_error.value = true;
error_message.value = '请选择日期和时间段';
} else {
go('/submit', { date: checked_day.value, time: timePeriod.value[checked_time.value]['left'], price: checked_day_price.value });
}
}
</script>
<style lang="less" scoped>
......@@ -241,7 +287,7 @@ const chooseDay = (date) => {
display: flex;
padding: 0.5em 1%;
.item {
width: 11%;
width: 11.5%;
text-align: center;
margin: 0 0.3rem;
padding: 0.5rem 0;
......@@ -306,6 +352,15 @@ const chooseDay = (date) => {
.right {
color: #A67939;
}
&.disabled {
background-color: #E0E0E0;
.left {
color: #C7C7C7;
}
.right {
color: #C7C7C7;
}
}
}
}
}
......