wx-starlock/pages/cycleDate/cycleDate.vue

<template>
  <view>
    <view class="font-bold text-base bg-white">
      <view class="border-b-solid border-b-1 border-b-gray-200" @click="showStartDate = true">
        <view class="mx-3 flex items-center h-100">
          <view class="w-168">生效日期</view>
          <view class="ml-a flex items-center">
            <view v-if="startDate" class="mr-2">
              <view>{{ timeFormat(startDate, 'yyyy-mm-dd') }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
      <view>
        <view class="mx-3 flex items-center h-100" @click="showEndDate = true">
          <view class="w-168">失效日期</view>
          <view class="ml-a flex items-center">
            <view v-if="endDate" class="mr-2">
              <view>{{ timeFormat(endDate, 'yyyy-mm-dd') }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="font-bold text-base bg-white mt-2">
      <view class="border-b-solid border-b-1 border-b-gray-200">
        <view class="mx-3">
          <view class="pt-2">有效日</view>
          <view class="mr-2 flex items-center justify-around py-2">
            <view
              v-for="(item, index) in list"
              :key="index"
              :class="[weekDays.includes(index + 1) ? 'bg-#5eb7ac text-white' : '']"
              @click="
                weekDays.includes(index + 1)
                  ? weekDays.splice(weekDays.indexOf(index + 1), 1)
                  : weekDays.push(index + 1)
              "
              class="rounded-50% border-solid border-3 border-gray-400 flex items-center justify-center w-70 h-70"
              >{{ item }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="font-bold text-base bg-white mt-2">
      <view class="border-b-solid border-b-1 border-b-gray-200" @click="showStartTime = true">
        <view class="mx-3 flex items-center h-100">
          <view class="w-168">生效时间</view>
          <view class="ml-a flex items-center">
            <view v-if="startTimeText" class="mr-2">
              <view>{{ startTimeText }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
      <view>
        <view class="mx-3 flex items-center h-100" @click="showEndTime = true">
          <view class="w-168">失效时间</view>
          <view class="ml-a flex items-center">
            <view v-if="endTimeText" class="mr-2">
              <view>{{ endTimeText }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <view
      :class="[
        canSubmit ? 'bg-[#5eb7ac]' : 'bg-[#9d9da3]',
        'mx-4',
        'h-100',
        'text-white',
        'text-center',
        'font-bold',
        'mt-4',
        'flex',
        'items-center',
        'justify-center'
      ]"
      style="border-radius: 50rpx"
      @click="save"
      >保存</view
    >
    <up-datetime-picker
      :hasInput="false"
      :show="showStartDate"
      v-model="defaultStartDate"
      mode="date"
      closeOnClickOverlay
      :visibleItemCount="5"
      @close="showStartDate = false"
      @confirm="confirmDate('start', $event)"
      @cancel="showStartDate = false"
    ></up-datetime-picker>
    <up-datetime-picker
      :hasInput="false"
      :show="showEndDate"
      v-model="defaultEndDate"
      mode="date"
      closeOnClickOverlay
      :visibleItemCount="5"
      @close="showEndDate = false"
      @confirm="confirmDate('end', $event)"
      @cancel="showEndDate = false"
    ></up-datetime-picker>
    <up-datetime-picker
      :hasInput="false"
      :show="showStartTime"
      v-model="defaultStartTime"
      mode="time"
      closeOnClickOverlay
      :visibleItemCount="5"
      @close="showStartTime = false"
      @confirm="confirmTime('start', $event)"
      @cancel="showStartTime = false"
    ></up-datetime-picker>
    <up-datetime-picker
      :hasInput="false"
      :show="showEndTime"
      v-model="defaultEndTime"
      mode="time"
      closeOnClickOverlay
      :visibleItemCount="5"
      @close="showEndTime = false"
      @confirm="confirmTime('end', $event)"
      @cancel="showEndTime = false"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
  import { timeFormat } from 'uview-plus'
  import { computed, getCurrentInstance, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

  const showStartDate = ref(false)
  const showEndDate = ref(false)
  const showStartTime = ref(false)
  const showEndTime = ref(false)

  const startDate = ref(null)
  const endDate = ref(null)
  const weekDays = ref([])

  const startTimeText = ref(null)
  const endTimeText = ref(null)

  const defaultStartTime = ref('')
  const defaultEndTime = ref('')
  const defaultStartDate = ref(0)
  const defaultEndDate = ref(0)

  const list = ['一', '二', '三', '四', '五', '六', '日']

  const canSubmit = computed(() => {
    return (
      startDate.value &&
      endDate.value &&
      weekDays.value.length > 0 &&
      startTimeText.value &&
      endTimeText.value
    )
  })

  onLoad(options => {
    if (options.info) {
      const info = JSON.parse(options.info)
      if (info.startDate) {
        weekDays.value = info.weekDays
        startDate.value = info.startDate
        endDate.value = info.endDate

        defaultStartDate.value = info.startDate
        defaultEndDate.value = info.endDate
        startTimeText.value = timeFormat(info.startDate, 'h:M')
        endTimeText.value = timeFormat(info.endDate, 'h:M')
      } else {
        defaultStartTime.value = timeFormat(new Date(), 'h:M')
        defaultEndTime.value = timeFormat(new Date(), 'h:M')
        defaultStartDate.value = new Date().getTime()
        defaultEndDate.value = new Date().getTime()
      }
    }
  })

  const compareTime = (time1, time2) => {
    const [h1, m1] = time1.split(':').map(Number)
    const [h2, m2] = time2.split(':').map(Number)

    const date1 = new Date()
    date1.setHours(h1, m1, 0, 0)

    const date2 = new Date()
    date2.setHours(h2, m2, 0, 0)

    return date1 - date2
  }

  const save = () => {
    if (!canSubmit.value) {
      return
    }
    if (startDate.value > endDate.value) {
      uni.showToast({
        title: '失效日期需晚于生效日期',
        icon: 'none'
      })
      return
    }
    if (compareTime(startTimeText.value, endTimeText.value) >= 0) {
      uni.showToast({
        title: '失效时间需晚于生效时间',
        icon: 'none'
      })
      return
    }
    const data = {
      startDate: updateTime(startDate.value, startTimeText.value),
      endDate: updateTime(endDate.value, endTimeText.value),
      weekDays: weekDays.value.sort()
    }
    uni.navigateBack({
      success() {
        eventChannel.emit('change', data)
      }
    })
  }

  const updateTime = (datetime, timeStr) => {
    const date = new Date(datetime)
    const [hours, minutes] = timeStr.split(':').map(Number)
    date.setHours(hours, minutes, 0, 0) // 设置小时、分钟，秒和毫秒归零
    return date.getTime()
  }

  const confirmDate = (type, date) => {
    if (type === 'start') {
      startDate.value = date.value
      showStartDate.value = false
    } else {
      endDate.value = date.value
      showEndDate.value = false
    }
  }

  const confirmTime = (type, date) => {
    if (type === 'start') {
      startTimeText.value = date.value
      showStartTime.value = false
    } else {
      endTimeText.value = date.value
      showEndTime.value = false
    }
  }
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }
</style>