ss_dc_wechat_mini_program/pages/example/datetime-picker-demo.vue

<template>
  <view class="datetime-picker-demo">
    <view class="demo-title">SsDatetimePicker 组件示例</view>
    
    <!-- 表单示例 -->
    <view class="demo-form">
      <view class="form-title">表单示例（带校验）</view>
      
      <!-- 日期选择 -->
      <view class="form-row">
        <view class="label">出生日期*</view>
        <Td field="birthDate" :rules="formRules.birthDate">
          <SsDatetimePicker 
            v-model="formData.birthDate"
            mode="date"
            placeholder="请选择出生日期"
            :max-date="new Date()"
          />
        </Td>
      </view>
      
      <!-- 时间选择 -->
      <view class="form-row">
        <view class="label">上班时间</view>
        <Td field="workTime">
          <SsDatetimePicker 
            v-model="formData.workTime"
            mode="time"
            placeholder="请选择上班时间"
          />
        </Td>
      </view>
      
      <!-- 日期时间选择 -->
      <view class="form-row">
        <view class="label">预约时间*</view>
        <Td field="appointmentTime" :rules="formRules.appointmentTime">
          <SsDatetimePicker 
            v-model="formData.appointmentTime"
            mode="datetime"
            placeholder="请选择预约时间"
            :min-date="new Date()"
          />
        </Td>
      </view>
      
      <!-- 自定义格式 -->
      <view class="form-row">
        <view class="label">活动日期</view>
        <Td field="eventDate">
          <SsDatetimePicker 
            v-model="formData.eventDate"
            mode="date"
            placeholder="请选择活动日期"
            display-format="MM月DD日"
          />
        </Td>
      </view>
      
      <view class="form-actions">
        <u-button type="primary" @click="handleSubmit">提交表单</u-button>
        <u-button type="default" @click="handleReset">重置</u-button>
      </view>
    </view>
    
    <!-- 基础示例 -->
    <view class="demo-basic">
      <view class="form-title">基础示例（无校验）</view>
      
      <view class="basic-item">
        <view class="basic-label">日期选择：</view>
        <SsDatetimePicker 
          v-model="basicDate"
          mode="date"
          placeholder="选择日期"
        />
        <view class="basic-value">值：{{ basicDate }}</view>
      </view>
      
      <view class="basic-item">
        <view class="basic-label">时间选择：</view>
        <SsDatetimePicker 
          v-model="basicTime"
          mode="time"
          placeholder="选择时间"
        />
        <view class="basic-value">值：{{ basicTime }}</view>
      </view>
      
      <view class="basic-item">
        <view class="basic-label">日期时间：</view>
        <SsDatetimePicker 
          v-model="basicDatetime"
          mode="datetime"
          placeholder="选择日期时间"
        />
        <view class="basic-value">值：{{ basicDatetime }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, provide } from 'vue'
import { useFormValidation } from '@/composables/useFormValidation.js'
import SsDatetimePicker from '@/components/SsDatetimePicker/index.vue'
import Td from '@/components/Td/index.vue'

// 表单数据
const formData = ref({
  birthDate: '',
  workTime: '',
  appointmentTime: '',
  eventDate: ''
})

// 表单校验规则
const formRules = {
  birthDate: [
    { required: true, message: '请选择出生日期' }
  ],
  appointmentTime: [
    { required: true, message: '请选择预约时间' },
    { 
      validator: (value) => {
        if (!value) return true
        const appointmentDate = new Date(value)
        const now = new Date()
        if (appointmentDate <= now) {
          return '预约时间必须晚于当前时间'
        }
        return true
      },
      message: '预约时间必须晚于当前时间'
    }
  ]
}

// 使用表单校验
const { validateForm, errors, clearErrors } = useFormValidation()

// 为子组件提供数据和方法
provide('formData', formData)
provide('errors', errors)
provide('validateField', (fieldName, value, rules) => {
  // 这里可以添加自定义校验逻辑
  return true
})
provide('getFieldConfig', () => ({}))

// 基础示例数据
const basicDate = ref('')
const basicTime = ref('')
const basicDatetime = ref('')

// 提交表单
const handleSubmit = () => {
  console.log('提交表单', formData.value)
  
  const isValid = validateForm(formData.value, formRules)
  
  if (isValid) {
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    })
    console.log('表单校验通过', formData.value)
  } else {
    uni.showToast({
      title: '请检查表单信息',
      icon: 'none'
    })
    console.log('表单校验失败', errors.value)
  }
}

// 重置表单
const handleReset = () => {
  formData.value = {
    birthDate: '',
    workTime: '',
    appointmentTime: '',
    eventDate: ''
  }
  clearErrors()
  
  uni.showToast({
    title: '已重置',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
.datetime-picker-demo {
  padding: 32rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.demo-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.demo-form, .demo-basic {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 32rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  
  .label {
    width: 200rpx;
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
  }
}

.form-actions {
  display: flex;
  gap: 32rpx;
  margin-top: 48rpx;
  
  .u-button {
    flex: 1;
  }
}

.basic-item {
  margin-bottom: 32rpx;
  padding: 24rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  
  .basic-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
  }
  
  .basic-value {
    font-size: 24rpx;
    color: #999;
    margin-top: 16rpx;
    word-break: break-all;
  }
}
</style>