WindowBird/OfficeSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
WindowBird 2025-10-31 10:45:23 +08:00
parent b5660c2872
commit 5c8cacf998
4 changed files with 35 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
components/DateBar.vue
View File

@ -1,81 +0,0 @@
<template>
<scroll-view scroll-x class="date-bar">
<view
v-for="item in days"
:key="item.date"
class="date-item"
:class="{selected: item.date===modelValue, holiday: item.isHoliday, weekend: item.isWeekend}"
@click="$emit('update:modelValue', item.date)"
>
<view class="week">{{ item.weekStr }}</view>
<view class="date">{{ item.day }}</view>
<view class="tips" v-if="item.tip">{{ item.tip }}</view>
</view>
</scroll-view>
</template>
<script setup>
const props = defineProps({
days: {
type: Array,
required: true
},
modelValue: {
type: String,
required: true
}
});
const emit = defineEmits(['update:modelValue']);
</script>
<style scoped lang="scss">
.date-bar {
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
background: #fff;
padding: 0 8rpx 0 8rpx;
width: 100%;
white-space: nowrap;
}
.date-item {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: 68rpx;
min-width: 68rpx;
margin-right: 8rpx;
margin-top: 12rpx;
cursor: pointer;
height: 76rpx;
border-radius: 14rpx;
transition: background .18s;
}
.week {
font-size: 13px;
color: #b1b1b1;
margin-bottom: 4rpx;
}
.date {
font-size: 21px;
font-weight: 500;
color: #333;
}
.tips {
font-size: 10px;
color: #fa5e5e;
margin-top: 2rpx;
}
.selected {
background: linear-gradient(180deg, #eaf5ff 70%, #c0eaff 100%);
color: #2885ff;
border-bottom: 4rpx solid #2885ff;
}
.holiday .date {
color: #fa5e5e;
}
.weekend .week {
color: #179c29;
}
</style>

2
components/FabPlus.vue
View File

@ -1,5 +1,5 @@
<template>
<button class="fab-plus" @click="$emit('click')">＋</button>
<button class="fab-plus" >＋</button>
</template>
<style scoped lang="scss">
.fab-plus {

7
components/TimeTable.vue
View File

@ -18,12 +18,11 @@
</template>
<script setup>
import { computed } from 'vue';
import ScheduleBlock from './ScheduleBlock.vue';
const props = defineProps({
hours: {
type: Array,
default: () => Array.from({length: 12}, (_,i) => i+8) // 8~19点
default: () => Array.from({length: 24}, (_,i) => i) // 8~19点
},
events: {
type: Array,
@ -44,7 +43,7 @@ function getEventsByHour(hour) {
display: flex;
border-bottom: 1px dashed #e3e3e3;
align-items: center;
height: 52px;
height: 30px;
}
.time-label {
width: 44px;
@ -54,6 +53,6 @@ function getEventsByHour(hour) {
.schedule-cell {
flex: 1;
position: relative;
min-height: 44px;
min-height: 28px;
}
</style>

65
pages/index/index.vue
View File

@ -7,9 +7,6 @@
<!-- 内容区域 -->
<view class="content-wrapper" :style="{ paddingTop: ( tabsHeight) + 'px' }">
<!-- 日期条 -->
<DateBar :days="weekDays" v-model="selectedDate" />
<view>
<uv-calendar ref="calendar" mode="single" @change="handleConfirm" closeOnClickConfirm="false"></uv-calendar>
<button @click="openCalendar">选择日期</button>
@ -29,18 +26,16 @@
<uv-tabbar :value="value" @change="index=>value = index">
<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
<uv-tabbar-item text="直播 " icon="play-right"></uv-tabbar-item>
<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
</uv-tabbar>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { ref, computed } from 'vue';
import DateBar from '@/components/DateBar.vue';
import TimeTable from '@/components/TimeTable.vue';
import FabPlus from '@/components/FabPlus.vue';
import AddEventModal from '@/components/AddEventModal.vue';
// 获取状态栏高度
@ -62,36 +57,17 @@ function click(item) {
console.log('切换tab:', item.name);
}
// 生成一周日期
function getWeekDays() {
const days = [];
const base = new Date();
base.setHours(0,0,0,0);
for(let i=-2; i<=4; i++) {
const d = new Date(base);
d.setDate(base.getDate() + i);
const ymd = d.toISOString().slice(0,10);
days.push({
date: ymd,
weekStr: '日一二三四五六'[d.getDay()],
day: d.getDate(),
tip: '',
isHoliday: d.getDay() === 0 || d.getDay() === 6,
isWeekend: d.getDay() === 6 || d.getDay() === 0,
});
}
return days;
}
const weekDays = ref(getWeekDays());
const selectedDate = ref(weekDays.value.find(i=>i.date === new Date().toISOString().slice(0,10))?.date || weekDays.value[2].date);
// 当前选择的日期，格式：YYYY-MM-DD
const selectedDate = ref(new Date().toISOString().slice(0, 10));
// 小时段
const hours = Array.from({length: 13}, (_,i)=>i+8); // 8~20点
const hours = Array.from({length: 24}, (_,i)=>i); // 8~20点
// 示例日程
const today = new Date().toISOString().slice(0, 10);
const allEvents = ref([
{id:1,title:'日程标题',startHour:15,startMin:30,color:'#e3fae6',date:weekDays.value[3].date},
{id:2,title:'日程标题',startHour:16,startMin:0,color:'#fae1e1',date:weekDays.value[3].date},
{id:3,title:'日程标题',startHour:23,startMin:0,color:'#e3fae6',date:weekDays.value[3].date},
{id:1,title:'日程标题',startHour:15,startMin:30,color:'#e3fae6',date:today},
{id:2,title:'日程标题',startHour:16,startMin:0,color:'#fae1e1',date:today},
{id:3,title:'日程标题',startHour:23,startMin:0,color:'#e3fae6',date:today},
]);
// 根据当前选择日期过滤
@ -107,7 +83,28 @@ const openCalendar = () => {
}
}
const handleConfirm = (e) => {
console.log('日历选择：', e)
console.log('日历选择：', e);
// 处理日历返回的日期，可能是对象或字符串
let dateStr = '';
if (typeof e === 'string') {
dateStr = e;
} else if (e?.date) {
dateStr = e.date;
} else if (e?.value) {
dateStr = e.value;
} else if (Array.isArray(e) && e.length > 0) {
// 如果是数组，取第一个
dateStr = typeof e[0] === 'string' ? e[0] : (e[0]?.date || e[0]?.value || '');
}
// 格式化日期为 YYYY-MM-DD
if (dateStr) {
const date = new Date(dateStr);
if (!isNaN(date.getTime())) {
selectedDate.value = date.toISOString().slice(0, 10);
console.log('更新选择日期：', selectedDate.value);
}
}
}
// 悬浮按钮/弹窗控制