初始化项目模板

2026-01-04 17:53:40 +08:00
1 parent 80fd6a1d4b
commit b3a69a1f27
@@ -0,0 +1,99 @@
+<template>
+  <view class="relative">
+    <!-- 输入框触发 -->
+    <input
+      type="text"
+      readonly
+      :value="selectedDate ? selectedDate.format('YYYY-MM-DD') : '选择日期'"
+      @click="showCalendar = !showCalendar"
+      class="w-full px-4 py-2 border-2 border-[#9C032D] rounded-lg cursor-pointer bg-white"
+    />
+
+    <!-- 日历容器 -->
+    <view
+      v-if="showCalendar"
+      class="fixed bottom-0 left-1/2 transform -translate-x-1/2 mb-4 w-[320px] bg-[#f8d7da] border-2 border-[#9C032D] rounded-lg p-4 z-50 shadow-xl"
+    >
+      <!-- 头部 -->
+      <view class="flex justify-between items-center mb-4">
+        <button @click="changeMonth(-1)" class="text-[#9C032D] hover:text-[#80022a] transition-colors">◀</button>
+        <view class="font-bold text-[#9C032D]">
+          {{ currentDate.format('YYYY年MM月') }}
+        </view>
+        <button @click="changeMonth(1)" class="text-[#9C032D] hover:text-[#80022a] transition-colors">▶</button>
+      </view>
+
+      <!-- 星期 -->
+      <view class="grid grid-cols-7 gap-1 mb-2">
+        <view v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day" class="text-center text-sm text-[#9C032D] font-medium">
+          {{ day }}
+        </view>
+      </view>
+
+      <!-- 日期格子 -->
+      <view class="grid grid-cols-7 gap-1">
+        <view
+          v-for="(date, index) in calendarDays"
+          :key="index"
+          @click="selectDate(date)"
+          :class="[
+            'text-center p-1 rounded cursor-pointer transition-colors',
+            date.month() !== currentDate.month() ? 'text-gray-400' : 'text-[#9C032D]',
+            date.isSame(selectedDate, 'day') ? 'bg-[#9C032D] text-white' : 'hover:bg-[#f5b5ba]',
+          ]"
+        >
+          {{ date.date() }}
+        </view>
+      </view>
+
+      <!-- 确认按钮 -->
+      <button @click="confirmDate" class="w-full mt-4 py-2 bg-[#9C032D] text-white rounded-lg hover:bg-[#80022a] transition-colors">确认</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  modelValue: String, // 接收外部v-model
+});
+
+const emit = defineEmits(['update:modelValue', 'confirm']);
+
+const showCalendar = ref(false);
+const currentDate = ref(dayjs());
+const selectedDate = ref(props.modelValue ? dayjs(props.modelValue) : null);
+
+// 生成日历日期数组
+const calendarDays = computed(() => {
+  const start = currentDate.value.startOf('month').startOf('week');
+  const end = currentDate.value.endOf('month').endOf('week');
+  const days = [];
+  let day = start;
+
+  while (day <= end) {
+    days.push(day);
+    day = day.add(1, 'day');
+  }
+  return days;
+});
+
+// 切换月份
+const changeMonth = (delta) => {
+  currentDate.value = currentDate.value.add(delta, 'month');
+};
+
+// 选择日期
+const selectDate = (date) => {
+  selectedDate.value = date;
+};
+
+// 确认选择
+const confirmDate = () => {
+  showCalendar.value = false;
+  emit('update:modelValue', selectedDate.value.format('YYYY-MM-DD'));
+  emit('confirm', selectedDate.value.format('YYYY-MM-DD'));
+};
+</script>