vant picker最新日期时间组件

<template>
  <div class="hotel-search">
    <span class="hotel-search-left" @click="showOverlay">
      <span>{{ app?.app.hotelName }}</span>
      <van-icon name="play" />
    </span>
    <span class="hotel-search-right">
      <span class="risk-title-date" @click="choiceRiskDate">
        {{ riskDetailValue }}
        <van-icon name="play" />
      </span>
    </span>
  </div>

  <van-popup
    v-model:show="showPopup"
    position="bottom"
    :style="{ height: '80%' }"
    class="hotel-popup"
  >
    <van-search
      v-model="pageParams.searchValue"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="closeOverlay">取消</div>
      </template>
    </van-search>

    <van-list v-model="loading" :finished="finished" finished-text="到底了" @load="onLoad">
      <van-cell
        v-for="item in pageParams.hotels"
        :key="item.hotelId"
        :title="item.hotelName"
        :class="{ active: item.hotelId === app?.app.hotelId }"
        @click="onClick(item)"
      >
        <span v-show="item.hotelId === app?.app.hotelId">
          <i class="van-icon van-icon-success select-checked"></i>
        </span>
      </van-cell>
    </van-list>
  </van-popup>

  <van-popup v-model:show="choiceDate" round position="bottom">
    <van-picker
      title="选择年月"
      ref="picker"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
  </van-popup>
</template>
<script lang="ts" setup>
import { inject, nextTick, onMounted, reactive, Ref, ref } from "vue";
import { AppModuleType } from "@/store/types";
import moment from "moment";

const app = inject<AppModuleType>("app");

const finished = ref(false);
const loading = ref(false);
const showPopup = ref(false);

//修改月格式，保持两位数显示
function modifyDate(m: any) {
  return m.split("年")[1].split("月")[0] < 10
    ? m.split("年")[0] + "年" + "0" + m.split("年")[1]
    : m;
}

const choiceDate = ref(false);
let newMonth = 0;
/* 日期选择组件 开始 */
let riskDetailValue = ref<any>();
let riskDetailDate = ref();
let myDate = new Date();
let picker = ref<any>();
let thisYear: any = myDate.getFullYear();
let currentYear: any = myDate.getFullYear();
// var myYear: any = myDate.getFullYear(); // 获取当年年份
var myYear: any = app?.app.easyYearMonthDate
  ? app?.app.easyYearMonthDate.split("-")[0]
  : myDate.getFullYear(); // 获取当年年份
let defaultIndex = ref(0);
let myMonth: any = [];
let currentMonth: string[] = [];

var arrYear: any[] = []; // 声明一个空数组 把遍历出的年份添加到数组里
let m = myDate.getMonth() + 1;
let d = myDate.getDate();
let showMonth = 0;
newMonth = 12;
let columns: any = [];

let props = defineProps({
  hotelId: {
    type: String,
    default: ""
  },
  hotelName: {
    type: String,
    default: ""
  }
});

app?.setHotelId(props.hotelId);
app?.setHotelName(props.hotelName);

let pageParams: any = reactive<{
  hotels: Ref<
    {
      hotelId: string;
      hotelName: string;
    }[]
  >;
  searchValue: Ref<string>;
}>({
  hotels: ref([]),
  searchValue: ref("")
});
let hotelData: any = reactive({
  hotelId: "",
  hotelName: ""
});

const showOverlay = () => {
  showPopup.value = true;
};

const closeOverlay = () => {
  closePopup();
};

onMounted(() => {
  // 获取酒店名称
  if (app?.app.hotelData) {
    hotelData = app?.app.hotelData;
    pageParams.hotels = app?.app.hotelData;
  }
});
// 判断是否选择过酒店
if (!app?.app.hotelId) {
  showPopup.value = true;
}
const onLoad = () => {
  loading.value = true;
  if (pageParams.hotels.length > 100) {
    finished.value = true;
    return;
  }
  let arr = [];
  for (let i = 0; i < hotelData.length; i++) {
    arr.push({ hotelId: hotelData[i].hotelId, hotelName: hotelData[i].hotelName });
  }
  loading.value = false;
};

let emit = defineEmits(["confirm", "cancel", "onConfirm"]);

const onClick = ({ hotelId, hotelName }: any) => {
  showPopup.value = false;
  app?.setHotelId(hotelId);
  app?.setHotelName(hotelName);
  emit("confirm", { hotelId, hotelName });
};
const closePopup = () => {
  pageParams.searchValue = "";
  showPopup.value = false;
  emit("cancel");
};

// 搜索
const onSearch = (value: string) => {
  if (value !== "") {
    var results = hotelData.filter(createStateFilter(value));
    pageParams.hotels = results;
  }
  if (value === "") {
    pageParams.hotels = hotelData;
  }
};

const createStateFilter = (queryString: string) => {
  return (state: { hotelId: string; hotelName: string }) => {
    return state.hotelName.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

if (d < 6) {
  // 如果不是5号之后，则展示上上个月，否则显示上个月
  if (m === 1) {
    riskDetailValue.value = `${thisYear - 1}年${newMonth - 1}月`;
    riskDetailDate.value = `${thisYear - 1}-${newMonth - 1}`;
    showMonth = newMonth - 1;
  } else if (m === 2) {
    riskDetailValue.value = `${thisYear - 1}年${newMonth}月`;
    riskDetailDate.value = `${thisYear - 1}-${newMonth}`;
    showMonth = newMonth;
  } else {
    riskDetailValue.value = modifyDate(`${thisYear}年${m - 2}月`);
    riskDetailDate.value = `${thisYear}-${m - 2}`;
    showMonth = m - 2;
  }
} else {
  if (m === 1) {
    riskDetailValue.value = `${thisYear - 1}年${newMonth}月`;
    riskDetailDate.value = `${thisYear - 1}-${newMonth}`;
    showMonth = newMonth;
  } else {
    riskDetailValue.value = modifyDate(`${thisYear}年${m - 1}月`);
    riskDetailDate.value = `${thisYear}-${m - 1}`;
    showMonth = m - 1;
  }
}

let splitDate: any = [];
const pickerDate = () => {
  if (app?.app.chooseYearMonthDate) {
    riskDetailValue.value = app?.app.chooseYearMonthDate;
  }

  if (app?.app.easyYearMonthDate) {
    splitDate = app?.app.easyYearMonthDate.split("-") as string[];
  } else {
    splitDate = riskDetailDate.value.split("-") as string[];
    app?.setDefaultYearMonthDate(riskDetailDate.value);
  }

  if (myYear == 2021) {
    myMonth = ["10月", "11月", "12月"];
    currentMonth = myMonth;
    defaultIndex.value = myMonth.indexOf(splitDate[1] + "月") || 0;
  } else {
    if (myYear == currentYear) {
      myMonth = [];
      for (var i = 1; i <= showMonth; i++) {
        myMonth.push(`${i}月`);
        if (i === showMonth) {
          myMonth.push(`YTD`);
        }
      }
      currentMonth = myMonth;
      if (splitDate[1] === "YTD") {
        defaultIndex.value = (myMonth && myMonth.indexOf(splitDate[1])) || currentMonth.length - 4;
      } else {
        defaultIndex.value =
          (myMonth && myMonth.indexOf(splitDate[1] + "月")) || currentMonth.length - 4;
      }
    }
    if (myYear != currentYear) {
      myMonth = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ];
      currentMonth = myMonth;
      defaultIndex.value = myMonth.indexOf(splitDate[1] + "月") || 0;
    }
  }
  let section = currentYear - 2022; // 声明一个变量 获得当前年份至想获取年份差
  arrYear.length = 0;
  for (var i = 0; i <= section; i++) {
    // 遍历并添加年份到数组
    arrYear.unshift(currentYear--);
  }
  currentYear = new Date().getFullYear();

  columns = [
    // 第一列
    {
      values: arrYear,
      defaultIndex: arrYear.indexOf(~~splitDate[0])
    },
    // 第二列
    {
      values: currentMonth,
      defaultIndex: defaultIndex
    }
  ];
};
pickerDate();

const onConfirm = async (value: any, index: any) => {
  if (value[1] === "全年" || value[1] === "YTD") {
    riskDetailValue.value = modifyDate(`${value[0]}年${value[1].split("月")[0]}`);
  } else {
    riskDetailValue.value = modifyDate(`${value[0]}年${value[1].split("月")[0]}月`);
  }
  riskDetailDate.value = `${value[0]}-${value[1].split("月")[0]}`;
  app?.setEasyYearMonthDate(riskDetailDate.value);
  app?.setChooseYearMonthDate(riskDetailValue.value);
  choiceDate.value = false;
  emit("onConfirm");
};

const onCancel = () => {
  emit("cancel");
  choiceDate.value = false;
};

const onChange = (value: any, index: any) => {
  myYear = value[0];
  pickerDate();
  nextTick(() => {
    picker.value.setColumnValues(1, currentMonth);
  });
};

const choiceRiskDate = () => {
  pickerDate();
  choiceDate.value = true;
};
</script>
<style lang="less" scoped>
// 酒店搜索样式
.hotel-search {
  padding: 0;
  background: #fff;
  .hotel-search-left {
    justify-content: left;
    font-size: 14px;
    flex: 0.75;
  }
  .hotel-search-right {
    justify-content: right;
    flex: 0.3;
    ::v-deep(.van-cell) {
      padding: 8px 0;
    }
    ::v-deep(.van-cell__title) {
      font-size: 12px;
      flex: none;
    }
    ::v-deep(.van-cell__value) {
      font-size: 14px;
      flex: none;
    }
  }
}
</style>