uni-admission-fee/components/w-picker/half-picker.vue

<template>
  <view class="w-picker-view">
    <view
      style="
        display: flex;
        justify-content: space-around;
        font-size: 18px;
        font-weight: 700;
        padding: 30upx 0;
        border-bottom: 1rpx solid rgb(134 134 134);
        border-top: 1rpx solid rgb(134 134 134);
        color:#1936C9
      "
    >
      <view>年份</view>
      <view>月</view>
      <view>日</view>
      <view>场次</view>
    </view>

    <picker-view
      class="d-picker-view"
      :indicator-style="itemHeight"
      :value="pickVal"
      @change="handlerChange"
    >
      <picker-view-column>
        <view
          class="w-picker-item"
          v-for="(item, index) in range.years"
          :key="index"
          >{{ item }}</view
        >
      </picker-view-column>
      <picker-view-column>
        <view
          class="w-picker-item"
          v-for="(item, index) in range.months"
          :key="index"
          >{{ item }}</view
        >
      </picker-view-column>
      <picker-view-column>
        <view
          class="w-picker-item"
          v-for="(item, index) in range.days"
          :key="index"
          >{{ item }}</view
        >
      </picker-view-column>
      <picker-view-column>
        <view
          class="w-picker-item"
          v-for="(item, index) in range.sections"
          :key="index"
          >{{ item }}</view
        >
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickVal: [],
      range: {},
      checkObj: {},
    };
  },
  props: {
    itemHeight: {
      type: String,
      default: "44px",
    },
    startYear: {
      type: String,
      default: "",
    },
    endYear: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Array, Number],
      default: "",
    },
    current: {
      //是否默认选中当前日期
      type: Boolean,
      default: false,
    },
    disabledAfter: {
      //是否禁用当前之后的日期
      type: Boolean,
      default: false,
    },
    disabledBefore: {
      //是否禁用当前之前
      type: Boolean,
      default: true,
    },
  },
  watch: {
    value(val) {
      this.initData();
    },
  },
  created() {
    this.initData();
  },
  methods: {
    formatNum(n) {
      return Number(n) < 10 ? "0" + Number(n) : Number(n) + "";
    },
    checkValue(value) {
      let strReg = /^\d{4}-\d{2}-\d{2} [\u4e00-\u9fa5]{2}$/,
        example;
      if (!strReg.test(value)) {
        console.log(
          new Error(
            "请传入与mode、fields匹配的value值，例value=" + example + ""
          )
        );
      }
      return strReg.test(value);
    },
    resetData(year, month, day) {
      let curDate = this.getCurrenDate();
      let curFlag = this.current;
      let curYear = curDate.curYear;
      let curMonth = curDate.curMonth;
      let curDay = curDate.curDay;
      let curHour = curDate.curHour;
      let months = [],
        days = [],
        sections = [];
      let disabledAfter = this.disabledAfter;
      let monthsLen = disabledAfter ? (year * 1 < curYear ? 12 : curMonth) : 12;
      let totalDays = new Date(year, month, 0).getDate(); //计算当月有几天;
      let daysLen = disabledAfter
        ? year * 1 < curYear || month * 1 < curMonth
          ? totalDays
          : curDay
        : totalDays;
      let sectionFlag = disabledAfter
        ? (year * 1 < curYear || month * 1 < curMonth || day * 1 < curDay) ==
          true
          ? false
          : true
        : curHour > 12 == true
        ? true
        : false;

      sections = ["上午", "下午"];
      for (let month = 1; month <= monthsLen; month++) {
        months.push(this.formatNum(month));
      }
      for (let day = 1; day <= daysLen; day++) {
        days.push(this.formatNum(day));
      }
      return {
        months,
        days,
        sections,
      };
    },
    getData(dVal) {
      //用来处理初始化数据
      let curFlag = this.current;
      let disabledAfter = this.disabledAfter;
      let curDate = this.getCurrenDate();
      let curYear = curDate.curYear;
      let curMonthdays = curDate.curMonthdays;
      let curMonth = curDate.curMonth;
      let curDay = curDate.curDay;
      let curHour = curDate.curHour;
      let defaultDate = this.getDefaultDate();
      let startYear = this.getStartDate().getFullYear();
      let endYear = this.getEndDate().getFullYear();
      let years = [],
        months = [],
        days = [],
        sections = [];
      let year = dVal[0] * 1;
      let month = dVal[1] * 1;
      let day = dVal[2] * 1;
      let monthsLen = disabledAfter
        ? year < curYear
          ? 12
          : curDate.curMonth
        : 12;
      let daysLen = disabledAfter
        ? year < curYear || month < curMonth
          ? defaultDate.defaultDays
          : curDay
        : curFlag
        ? curMonthdays
        : defaultDate.defaultDays;
      let sectionFlag = disabledAfter
        ? (year * 1 < curYear || month * 1 < curMonth || day * 1 < curDay) ==
          true
          ? false
          : true
        : curHour > 12 == true
        ? true
        : false;
      for (
        let year = startYear;
        year <= (disabledAfter ? curYear : endYear);
        year++
      ) {
        years.push(year.toString());
      }
      for (let month = 1; month <= monthsLen; month++) {
        months.push(this.formatNum(month));
      }
      for (let day = 1; day <= daysLen; day++) {
        days.push(this.formatNum(day));
      }
      sections = ["上午", "下午"];
      if (this.disabledBefore) {
        years = years.filter((item) => item * 1 >= curYear);
        months = months.filter((item) => item * 1 >= curMonth);
        days = days.filter((item) => item * 1 >= curDay);

        let nowcurDate = new Date();
        let nowcurYear = nowcurDate.getFullYear();
        let nowcurMonth = nowcurDate.getMonth() + 1;
        let nowcurDay = nowcurDate.getDate();
        let nowcurHour = nowcurDate.getHours();
        if (
          curYear === nowcurYear &&
          curMonth === nowcurMonth &&
          curDay === nowcurDay &&
          nowcurHour > 12
        ) {
          sections = ["下午"];
        } else {
          sections = ["上午", "下午"];
        }
      }
      return {
        years,
        months,
        days,
        sections,
      };
    },
    getCurrenDate() {
      let curDate = new Date();
      let curYear = curDate.getFullYear();
      let curMonth = curDate.getMonth() + 1;
      let curMonthdays = new Date(curYear, curMonth, 0).getDate();
      let curDay = curDate.getDate();
      let curHour = curDate.getHours();
      let curSection = "上午";
      if (curHour >= 12) {
        curSection = "下午";
      }
      return {
        curDate,
        curYear,
        curMonth,
        curMonthdays,
        curDay,
        curHour,
        curSection,
      };
    },
    getDefaultDate() {
      let value = this.value;
      let reg = /-/g;
      let defaultDate = value
        ? new Date(value.split(" ")[0].replace(reg, "/"))
        : new Date();
      let defaultYear = defaultDate.getFullYear();
      let defaultMonth = defaultDate.getMonth() + 1;
      let defaultDay = defaultDate.getDate();
      let defaultDays = new Date(defaultYear, defaultMonth, 0).getDate() * 1;
      return {
        defaultDate,
        defaultYear,
        defaultMonth,
        defaultDay,
        defaultDays,
      };
    },
    getStartDate() {
      let start = this.startYear;
      let startDate = "";
      let reg = /-/g;
      if (start) {
        startDate = new Date(start + "/01/01");
      } else {
        startDate = new Date("1970/01/01");
      }
      return startDate;
    },
    getEndDate() {
      let end = this.endYear;
      let reg = /-/g;
      let endDate = "";
      if (end) {
        endDate = new Date(end + "/12/31");
      } else {
        endDate = new Date();
      }
      return endDate;
    },
    getDval() {
      let value = this.value;
      let dVal = null;
      let aDate = new Date();
      let year = this.formatNum(aDate.getFullYear());
      let month = this.formatNum(aDate.getMonth() + 1);
      let day = this.formatNum(aDate.getDate());
      let hour = aDate.getHours();
      let section = "上午";
      if (hour >= 12) section = "下午";
      if (value) {
        let flag = this.checkValue(value);
        if (!flag) {
          dVal = [year, month, day, section];
        } else {
          let v = value.split(" ");
          dVal = [...v[0].split("-"), v[1]];
        }
      } else {
        dVal = [year, month, day, section];
      }
      return dVal;
    },
    initData() {
      let startDate,
        endDate,
        startYear,
        endYear,
        startMonth,
        endMonth,
        startDay,
        endDay;
      let years = [],
        months = [],
        days = [],
        sections = [];
      let dVal = [],
        pickVal = [];
      let value = this.value;
      let reg = /-/g;
      let range = {};
      let result = "",
        full = "",
        year,
        month,
        day,
        section,
        obj = {};
      let defaultDate = this.getDefaultDate();
      let defaultYear = defaultDate.defaultYear;
      let defaultMonth = defaultDate.defaultMonth;
      let defaultDay = defaultDate.defaultDay;
      let defaultDays = defaultDate.defaultDays;
      let curFlag = this.current;
      let disabledAfter = this.disabledAfter;
      let curDate = this.getCurrenDate();
      let curYear = curDate.curYear;
      let curMonth = curDate.curMonth;
      let curMonthdays = curDate.curMonthdays;
      let curDay = curDate.curDay;
      let curSection = curDate.curSection;
      let dateData = [];
      dVal = this.getDval();
      startDate = this.getStartDate();
      endDate = this.getEndDate();
      startYear = startDate.getFullYear();
      startMonth = startDate.getMonth();
      startDay = startDate.getDate();
      endYear = endDate.getFullYear();
      endMonth = endDate.getMonth();
      endDay = endDate.getDate();
      dateData = this.getData(dVal);
      years = dateData.years;
      months = dateData.months;
      days = dateData.days;
      sections = dateData.sections;
      pickVal = disabledAfter
        ? [
            dVal[0] && years.indexOf(dVal[0]) != -1
              ? years.indexOf(dVal[0])
              : 0,
            dVal[1] && months.indexOf(dVal[1]) != -1
              ? months.indexOf(dVal[1])
              : 0,
            dVal[2] && days.indexOf(dVal[2]) != -1 ? days.indexOf(dVal[2]) : 0,
            dVal[3] && sections.indexOf(dVal[3]) != -1
              ? sections.indexOf(dVal[3])
              : 0,
          ]
        : curFlag
        ? [
            years.indexOf(curYear + ""),
            months.indexOf(this.formatNum(curMonth)),
            days.indexOf(this.formatNum(curDay)),
            sections.indexOf(curSection),
          ]
        : [
            dVal[0] && years.indexOf(dVal[0]) != -1
              ? years.indexOf(dVal[0])
              : 0,
            dVal[1] && months.indexOf(dVal[1]) != -1
              ? months.indexOf(dVal[1])
              : 0,
            dVal[2] && days.indexOf(dVal[2]) != -1 ? days.indexOf(dVal[2]) : 0,
            dVal[3] && sections.indexOf(dVal[3]) != -1
              ? sections.indexOf(dVal[3])
              : 0,
          ];
      range = { years, months, days, sections };
      year = dVal[0] ? dVal[0] : years[0];
      month = dVal[1] ? dVal[1] : months[0];
      day = dVal[2] ? dVal[2] : days[0];
      section = dVal[3] ? dVal[3] : sections[0];
      result = full = `${year + "-" + month + "-" + day + " " + section}`;
      obj = {
        year,
        month,
        day,
        section,
      };
      this.range = range;
      this.checkObj = obj;
      this.$nextTick(() => {
        this.pickVal = pickVal;
      });
      this.$emit("change", {
        result: result,
        value: full,
        obj: obj,
      });
    },
    handlerChange(e) {
      let arr = [...e.detail.value];
      let data = this.range;
      let year = "",
        month = "",
        day = "",
        section = "";
      let result = "",
        full = "",
        obj = {};
      let months = null,
        days = null,
        sections = null;
      let disabledAfter = this.disabledAfter;
      year =
        arr[0] || arr[0] == 0
          ? data.years[arr[0]] || data.years[data.years.length - 1]
          : "";
      month =
        arr[1] || arr[1] == 0
          ? data.months[arr[1]] || data.months[data.months.length - 1]
          : "";
      day =
        arr[2] || arr[2] == 0
          ? data.days[arr[2]] || data.days[data.days.length - 1]
          : "";
      section =
        arr[3] || arr[3] == 0
          ? data.sections[arr[3]] || data.sections[data.sections.length - 1]
          : "";
      result = full = `${year + "-" + month + "-" + day + " " + section}`;
      let resetData = this.resetData(year, month, day);
      if (this.disabledAfter) {
        months = resetData.months;
        days = resetData.days;
        sections = resetData.sections;
      } else {
        if (year % 4 == 0 || month != this.checkObj.month) {
          days = resetData.days;
        }
      }

      if (this.disabledBefore) {
        let curDate = new Date();
        let curYear = curDate.getFullYear();
        let curMonth = curDate.getMonth() + 1;
        let curMonthdays = new Date(curYear, curMonth, 0).getDate();
        let curDay = curDate.getDate();
        let curHour = curDate.getHours();
        if (
          year === curYear + "" &&
          month * 1 === curMonth &&
          day === curDay + "" &&
          curHour > 12
        ) {
          this.range.sections = ["下午"];
        } else {
          this.range.sections = ["上午", "下午"];
        }
      }

      if (months) this.range.months = months;
      if (days) this.range.days = days;
      if (sections) this.range.sections = sections;
      obj = {
        year,
        month,
        day,
        section,
      };
      this.checkObj = obj;
      this.$emit("change", {
        result: result,
        value: full,
        obj: obj,
      });
    },
  },
};
</script>

<style lang="scss">
@import "./w-picker.css";
</style>