starwork-uniapp/src/pages/approval/components/VisitDuration.vue

<template>
  <view class="px-2 text-3.5">
    <view v-if="inline">
      <view class="flex flex-items-center pos-relative pb-1.5" @click="toSelect">
        <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
        <view>{{ title }}</view>
        <view class="ml-a mr-2" :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
          {{ text || placeholder }}
        </view>
        <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
      </view>
    </view>
    <view v-else>
      <view class="flex flex-items-center pos-relative">
        <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
        <view>{{ title }}</view>
      </view>
      <view class="py-2" @click="toSelect">
        <view class="flex flex-items-center flex-justify-between">
          <view :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
            {{ text || placeholder }}
          </view>
          <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
        </view>
      </view>
    </view>
    <wd-popup v-model="show" position="bottom" custom-style="border-radius:12rpx;">
      <view v-if="showDuration">
        <view
          class="px-4 py-2 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center"
        >
          <view @click="show = false">取消</view>
          <view class="font-bold text-4 flex-1 text-center">访问时长</view>
          <view class="flex flex-items-center" @click="changeSelect">
            <view class="custom-color-blue">自定义时间</view>
            <wd-icon name="arrow-right" size="14px" class="ml-1" color="#255cf7"></wd-icon>
          </view>
        </view>
        <scroll-view class="h-60 text-3.5" :scroll-y="true">
          <view
            v-for="item in durationList"
            :key="item.value"
            @click="changeDuration(item)"
            class="py-4 px-4 flex flex-items-center"
          >
            <view>{{ item.label }}</view>
            <view
              class="bg-#f3f5fa ml-a w-12 h-6 rounded-5 flex flex-items-center flex-justify-center"
            >
              <wd-icon
                v-if="duration === item.label"
                name="check"
                size="15px"
                class="ml-1"
                color="#255cf7"
              ></wd-icon>
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-else>
        <view
          class="px-4 py-2 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center"
        >
          <view class="flex flex-items-center" @click="showDuration = true">
            <wd-icon name="arrow-left" size="14px" class="ml-1" color="#0d0f10"></wd-icon>
            <view class="custom-color-black">返回</view>
          </view>
          <view class="font-bold text-4 flex-1 text-center">时间选择器</view>
          <wd-icon
            name="close"
            size="14px"
            class="ml-1"
            color="#0d0f10"
            @click="show = false"
          ></wd-icon>
        </view>
        <wd-datetime-picker-view
          :formatter="formatter"
          type="datetime"
          v-model="timestamp"
          @change="change"
        />
      </view>
      <view
        @click="confirm"
        class="py-2.5 rounded custom-bg-blue w-90% mx-5% font-bold text-center color-white text-3.5 my-2"
      >
        完成
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'

  const text = ref<string | null>(null)
  const show = ref<boolean>(false)
  const timestamp = ref<number>(0)
  const duration = ref<string>('')

  const showDuration = ref<boolean>(true)

  const formatter = (type, value) => {
    switch (type) {
      case 'year':
        return value + '年'
      case 'month':
        return value + '月'
      case 'date':
        return value + '日'
      case 'hour':
        return value + '时'
      case 'minute':
        return value + '分'
      default:
        return value
    }
  }

  const props = defineProps({
    id: {
      type: Number,
      required: true
    },
    required: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    },
    value: {
      type: [String, null],
      default: null
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    inline: {
      type: Boolean,
      default: false
    }
  })

  const durationList = [
    { label: '30分钟', value: 1800000 },
    { label: '1小时', value: 3600000 },
    { label: '2小时', value: 7200000 },
    { label: '3小时', value: 10800000 },
    { label: '5小时', value: 18000000 },
    { label: '8小时', value: 28800000 },
    { label: '12小时', value: 43200000 },
    { label: '24小时', value: 86400000 }
  ]

  onMounted(() => {
    if (props.value) {
      text.value = props.value
      duration.value = props.value
    }
  })

  const changeSelect = () => {
    timestamp.value = new Date().getTime()
    showDuration.value = false
  }

  const toSelect = () => {
    show.value = true
  }

  const change = value => {
    timestamp.value = value.value
    duration.value = ''
  }

  const changeDuration = item => {
    duration.value = item.label
    timestamp.value = 0
  }

  const confirm = () => {
    if (timestamp.value === 0) {
      text.value = duration.value
    } else {
      text.value = dayjs(timestamp.value).format('YYYY-M-D HH:mm')
    }
    show.value = false
  }
</script>