YGChatCS/components/Calender/demo.vue

<template>
  <view class="demo-page">
    <!-- 页面标题 -->
    <view class="demo-header">
      <text class="demo-title">日历组件交互演示</text>
      <text class="demo-subtitle">点击日期图标打开日历</text>
    </view>

    <!-- 日期选择器 -->
    <view class="date-picker-container">
      <view class="date-picker" @tap="openCalendar">
        <view class="date-display">
          <text class="date-label">选择日期</text>
          <text class="date-value" v-if="selectedDate">{{ formatDate(selectedDate) }}</text>
          <text class="date-placeholder" v-else>请点击日期图标选择</text>
        </view>
        <view class="date-icon">
          <uni-icons type="calendar-filled" size="24" color="#1890ff"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 选择结果展示 -->
    <view class="result-display" v-if="selectedDate">
      <view class="result-card">
        <text class="result-title">已选择日期</text>
        <text class="result-date">{{ formatDate(selectedDate) }}</text>
        <text class="result-price" v-if="selectedPrice">价格：¥{{ selectedPrice }}</text>
      </view>
    </view>

    <!-- 日历组件 -->
    <Calendar
      :visible="calendarVisible"
      :price-data="priceData"
      mode="single"
      :default-value="selectedDate"
      @close="handleCalendarClose"
      @select="handleDateSelect"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Calendar from './index.vue'

// 响应式数据
const calendarVisible = ref(false)
const selectedDate = ref('')
const selectedPrice = ref(null)

// 模拟价格数据
const priceData = ref({
  '2024-01-15': 299,
  '2024-01-16': 399,
  '2024-01-17': 199,
  '2024-01-18': 299,
  '2024-01-19': 399,
  '2024-01-20': 499,
  '2024-01-21': 599,
  '2024-01-22': 299,
  '2024-01-23': 199,
  '2024-01-24': 299,
  '2024-01-25': 399,
  '2024-01-26': 299,
  '2024-01-27': 199,
  '2024-01-28': 299,
  '2024-02-01': 399,
  '2024-02-02': 299,
  '2024-02-03': 199,
  '2024-02-04': 299,
  '2024-02-05': 399,
  '2024-02-06': 499,
  '2024-02-07': 599,
  '2024-02-08': 299,
  '2024-02-09': 199,
  '2024-02-10': 299
})

// 方法定义
// 打开日历
const openCalendar = () => {
  calendarVisible.value = true
}

// 处理日历关闭
const handleCalendarClose = () => {
  calendarVisible.value = false
}

// 处理日期选择
const handleDateSelect = (data) => {
  selectedDate.value = data.date
  selectedPrice.value = data.price
  calendarVisible.value = false
  
  // 输出选择结果到控制台
  console.log('选择的日期:', data.date)
  console.log('日期价格:', data.price)
}

// 格式化日期显示
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
  const weekDay = weekDays[date.getDay()]
  
  return `${year}年${month}月${day}日 周${weekDay}`
}
</script>

<style lang="scss" scoped>
.demo-page {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.demo-header {
  text-align: center;
  margin-bottom: 40px;
}

.demo-title {
  display: block;
  font-size: 28px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
}

.demo-subtitle {
  display: block;
  font-size: 16px;
  color: #8c8c8c;
}

.date-picker-container {
  margin-bottom: 30px;
}

.date-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  border: 2px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  
  &:active {
    border-color: #1890ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
    transform: translateY(-1px);
  }
}

.date-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-label {
  font-size: 14px;
  color: #8c8c8c;
  font-weight: 500;
}

.date-value {
  font-size: 18px;
  color: #262626;
  font-weight: 600;
}

.date-placeholder {
  font-size: 16px;
  color: #bfbfbf;
  font-style: italic;
}

.date-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #f0f8ff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.date-picker:active .date-icon {
  background-color: #e6f7ff;
  transform: scale(1.1);
}

.result-display {
  margin-bottom: 20px;
}

.result-card {
  padding: 20px;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.result-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.result-date {
  font-size: 20px;
  color: #ffffff;
  font-weight: 600;
}

.result-price {
  font-size: 16px;
  color: #fff2e8;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 16px;
}
</style>