yueche_app/pages/select/select.vue

<template>
  <view class="date-select-page">

    <!-- 日历选择组件 -->
    <view class="calendar-wrap">
      <wd-calendar-view 
        type="daterange"
        v-model="dateRange"
        :start-date="new Date('2025-01-01')"
        :end-date="new Date()"
        placeholder="开始时间 ~ 结束时间"
        @change="handleDateChange"
      />
    </view>

    <!-- 确认按钮 -->
    <view class="confirm-btn" @click="confirmSelect">
      确认选择
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

// 绑定日历选择的时间范围（数组：[开始时间, 结束时间]）
const dateRange = ref([])
// 格式化后的开始/结束时间
const startT = ref('')
const endT = ref('')

// 日历选择变化回调
const handleDateChange = ({ value }) => {
  if (Array.isArray(value) && value.length === 2) {
    startT.value = dayjs(value[0]).format('YYYY-MM-DD')
    endT.value = dayjs(value[1]).format('YYYY-MM-DD')
  }
}

// 确认选择并返回
const confirmSelect = () => {
  if (!startT.value || !endT.value) {
    uni.showToast({ title: '请选择完整的时间范围', icon: 'none' })
    return
  }
  // 方式1：通过uni.setStorageSync传递参数
  uni.setStorageSync('selectedDateRange', {
    startTime: startT.value,
    endTime: endT.value,
    showText: `${startT.value} ~ ${endT.value}`
  })
  // 方式2：通过页面栈传递参数（更推荐）
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2] // 获取上一页实例
  prevPage.$vm.selectedDate = {
    startTime: startT.value,
    endTime: endT.value,
    showText: `${startT.value} ~ ${endT.value}`
  }
  
  // 返回上一页
  uni.navigateBack({ delta: 1 })
}
</script>

<style scoped>
.date-select-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}
.nav-bar {
  height: 44px;
  line-height: 44px;
  background-color: #fff;
  padding: 0 15rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.back-btn {
  color: #007aff;
  font-size: 16px;
}
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.calendar-wrap {
  padding: 15rpx;
  background-color: #fff;
  margin: 10rpx;
  border-radius: 10rpx;
}
.confirm-btn {
  margin: 20rpx 15rpx;
  height: 45px;
  line-height: 45px;
  background-color: #007aff;
  color: #fff;
  text-align: center;
  border-radius: 8rpx;
  font-size: 16px;
}
</style>