form.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="ss-p-x-30 ss-p-y-30">
  3. <!-- <picker mode="date" :value="formData.birthday" start="" end="" @change="bindDateChange">
  4. <view class="uni-input">{{ formData.birthday }}</view>
  5. </picker> -->
  6. <view class="color-primary text-center font-size-18 ss-m-b-100">
  7. 请选择您的出生日期
  8. </view>
  9. <uni-forms ref="formRef" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="76px" label-align="right">
  10. <uni-forms-item required label="出生日期" name="birthday">
  11. <uni-datetime-picker v-model="formData.birthday" type="date" />
  12. </uni-forms-item>
  13. <view class="f-horizon-center">
  14. <button type="primary" size="default" class="send-button" @click="handleSubmit">提 交</button>
  15. </view>
  16. </uni-forms>
  17. </view>
  18. </template>
  19. <script setup>
  20. import { ref, unref } from 'vue'
  21. const formRef = ref(null)
  22. const formData = ref({
  23. birthday: ''
  24. })
  25. const rules = {
  26. birthday: {
  27. rules: [{required: true, errorMessage: '请选择您的出生日期' }]
  28. }
  29. }
  30. const bindDateChange = (e) => {
  31. console.log(e.detail.value, 'change')
  32. formData.value.birthday = e.detail.value
  33. }
  34. const handleSubmit = async () => {
  35. const valid = await unref(formRef).validate()
  36. if (!valid) return
  37. console.log('submit', formData.value.birthday)
  38. uni.setStorageSync('birthday', formData.value.birthday)
  39. uni.reLaunch({
  40. url: `/pages/drawLots/index`
  41. })
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. :deep {
  46. .uni-picker {
  47. height: 60px !important;
  48. }
  49. }
  50. </style>