product_wx/uni_modules/lys-date/components/lys-date/lys-date.vue

<template>
  <view class="lys-date">
    <view class="lys-date-con">
      <view class="lys-date-con-title">
        <view class="" @tap="cancleTime">取 消</view>
        <view class="">
          <!-- <view class="">选择时间</view>
					<view class="">{{ showSelectDayStr }}</view> -->
        </view>
        <view class="" @tap="submitTime">确 定</view>
      </view>
      <!-- <view class="lys-date-con-sel">
        <view :class="selType == 1 ? 'sel' : ''" @tap="changeType(1)">日</view>
        <view :class="selType == 2 ? 'sel' : ''" @tap="changeType(2)">周</view>
        <view :class="selType == 3 ? 'sel' : ''" @tap="changeType(3)">月</view>
        <view :class="selType == 4 ? 'sel' : ''" @tap="changeType(4)">年</view>
      </view> -->
      <view class="lys-date-con-picker">
        <picker-view
          :value="selectValue"
          @change="bindChange"
          class="picker-view"
          indicator-style="height: 50px;"
        >
          <picker-view-column v-for="(item, index) in columns" :key="index">
            <view
              class="item"
              v-for="(childItem, childIndex) in item"
              :key="childIndex"
              >{{ childItem }}</view
            >
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
import { dateFormat } from "./format.js";
export default {
  props: {
    type: {
      type: Number | String,
      default: 1,
    },
    time: {
      type: String,
      default: "",
    },
    startTime: {
      type: String,
      default: "",
    },
    endTime: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selType: 1,
      selectYear: "",
      selectYearIndex: "",
      selectMonth: "",
      selectMonthIndex: "",
      selectWeek: "",
      selectWeekIndex: "",
      selectDay: "",
      selectDayIndex: "",
      timeStr: "",
      selectValue: [],
      columns: [],
      showSelectDayStr: "",
    };
  },
  mounted() {
    // 处理类型
    this.selType = this.type;
    // 所有的都转化为，以天为维度，这样统一度量尺
    // 自定义的以开始时间为准，转化为日，周，月

    // 处理时间问题
    if (this.type == 1) {
      // 类型为，日
      if (this.time == "") {
        this.timeStr = new Date().getTime();
      } else {
        this.timeStr = new Date(this.time.replace(/-/g, "/")).getTime();
      }
    }
    if (this.type == 2) {
      // 类型为，周
      // 2022年 第3周，根据传过来的字符串，找出本周的开始时间
      if (this.time == "") {
        this.timeStr = new Date().getTime();
      } else {
        // 分割字符串，获取到数字
        let year = this.time.substr(0, 4); // 年
        let week = this.time.substr(6).replace("周", ""); // 周
        let day = this.changeWeekToFirstDay(year, week);
        this.timeStr = new Date(day.replace(/\-/g, "/")).getTime();
      }
    }
    // 类型为，月
    if (this.type == 3) {
      // 2022年 3月，根据传过来的字符串，找出本周的开始时间
      if (this.time == "") {
        this.timeStr = new Date().getTime();
      } else {
        // 分割字符串，获取到数字
        let year = this.time.substr(0, 4); // 年
        let month = this.time.substr(6).replace("月", ""); // 周
        let day = year + "-" + month + "-01";
        this.timeStr = new Date(day.replace(/\-/g, "/")).getTime();
      }
    }

    // 类型为，年
    if (this.type == 4) {
      if (this.time == "") {
        this.timeStr = new Date().getTime();
      } else {
        // 分割字符串，获取到数字
        let year = this.time.substr(0, 4); // 年
        let day = year + "-01-01";
        this.timeStr = new Date(day.replace(/\-/g, "/")).getTime();
      }
    }

    this.changeType(this.type);
  },
  watch: {
    selectYearIndex() {
      if (this.selType == 1) this.daysFun();
      if (this.selType == 2) this.weeksFun();
      if (this.selType == 3) this.monthsFun();
      this.columnsFun();
      this.selectValueFun();
      this.showSelectDay();
    },
    selectMonthIndex() {
      if (this.selType == 1) this.daysFun();
      this.columnsFun();
      this.selectValueFun();
      this.showSelectDay();
    },
    selectDayIndex() {
      this.selectValueFun();
      this.showSelectDay();
    },
    selectWeekIndex() {
      this.selectValueFun();
      this.showSelectDay();
    },
  },
  methods: {
    changeType(flg) {
      this.selType = flg;
      if (flg == 1) {
        this.yearsFun();
        this.monthsFun();
        this.daysFun();
      }
      if (flg == 2) {
        this.yearsFun();
        this.weeksFun();
      }
      if (flg == 3) {
        this.yearsFun();
        this.monthsFun();
      }
      if (flg == 4) {
        this.yearsFun();
      }
      this.columnsFun();
      this.selectValueFun();
      this.showSelectDay();
    },
    columnsFun() {
      let data = [];
      // 日
      if (this.selType == 1) {
        data.push(this.years);
        data.push(this.months);
        data.push(this.days);
      }
      // 周
      if (this.selType == 2) {
        data.push(this.years);
        data.push(this.weeks);
      }
      // 月
      if (this.selType == 3) {
        data.push(this.years);
        data.push(this.months);
      }
      // 年
      if (this.selType == 4) {
        data.push(this.years);
      }
      this.columns = data;
    },
    selectValueFun() {
      this.selectValue = [];
      this.$nextTick(() => {
        if (this.selType == 1)
          this.selectValue = [
            this.selectYearIndex,
            this.selectMonthIndex,
            this.selectDayIndex,
          ];
        if (this.selType == 2)
          this.selectValue = [this.selectYearIndex, this.selectWeekIndex];
        if (this.selType == 3)
          this.selectValue = [this.selectYearIndex, this.selectMonthIndex];
        if (this.selType == 4) this.selectValue = [this.selectYearIndex];
      });
    },
    showSelectDay() {
      // 日
      if (this.selType == 1) {
        let day = `${this.selectYear}-${this.selectMonth}-${this.selectDay}`;
        let week = new Date(day.replace(/\-/g, "/")).getDay();
        let weekArray = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        this.showSelectDayStr = `${day} ${weekArray[week]}`;
        this.timeStr = new Date(day.replace(/\-/g, "/")).getTime();
      }
      // 周
      if (this.selType == 2) {
        let startDay = dateFormat(
          "m-d",
          this.changeWeekToFirstDay(this.selectYear, this.selectWeekIndex + 1)
        );
        let endDay = dateFormat(
          "m-d",
          this.changeWeekToEndDay(this.selectYear, this.selectWeekIndex + 1)
        );
        this.showSelectDayStr = `${this.selectYear}年 ${this.selectWeek} (${startDay} 至 ${endDay})`;
        this.timeStr = new Date(
          this.changeWeekToFirstDay(
            this.selectYear,
            this.selectWeek.replace("第", "").replace("周", "")
          ).replace(/\-/g, "/")
        ).getTime();
      }
      // 月
      if (this.selType == 3) {
        this.showSelectDayStr = `${this.selectYear}年 ${this.selectMonth}月`;
        this.timeStr = new Date(
          `${this.selectYear}/${this.selectMonth}/01`
        ).getTime();
      }
      // 年
      if (this.selType == 4) {
        this.showSelectDayStr = `${this.selectYear}年`;
        this.timeStr = new Date(
          `${this.selectYear}/${this.selectMonth}/01`
        ).getTime();
      }
      console.log(
        "当前所选时间==>" +
          this.timeStr +
          "==>" +
          dateFormat("Y-m-d", this.timeStr)
      );
    },
    yearsFun() {
      // 年初始化
      let year = new Date(this.timeStr).getFullYear();
      let endYear = new Date().getFullYear();
      let years = [];
      let j = 0;
      for (var i = 2000; i <= endYear; i++) {
        years.push(i);
        if (year == i) {
          this.selectYearIndex = j;
          this.selectYear = i;
        }
        j++;
      }
      this.years = years;
      console.log("yearsFun===>", this.selectYearIndex, this.selectYear);
    },
    monthsFun() {
      // 月初始化
      let month = new Date(this.timeStr).getMonth() + 1;
      let months = [];
      for (var i = 1; i <= 12; i++) {
        months.push(("" + i).padStart(2, "0"));
        if (month == i) {
          this.selectMonthIndex = i - 1;
          this.selectMonth = ("" + i).padStart(2, "0");
        }
      }
      this.months = months;
    },
    weeksFun() {
      let weeks = [];
      let year = this.years[this.selectYearIndex];
      // 判断今年有多少天
      let yearStart = new Date(`${year}/01/01 00:00:00`).getTime();
      let yearEnd = new Date(`${year}/12/31 23:59:59`).getTime();
      let allDday = (yearEnd - yearStart + 1000) / (1 * 24 * 60 * 60 * 1000);
      // 计算有多少周
      let week = Math.ceil(allDday / 7);
      // 计算当前属于第几周，+1s,
      let selWeek = Math.ceil(
        (this.timeStr + 1000 - yearStart) / (1 * 24 * 60 * 60 * 1000) / 7
      );
      for (var i = 1; i <= week; i++) {
        weeks.push("第" + i + "周");
        if (selWeek == i) {
          this.selectWeekIndex = i - 1;
          this.selectWeek = "第" + i + "周";
        }
      }
      this.weeks = weeks;
    },
    daysFun() {
      // 日初始化
      let day = new Date(this.timeStr).getDate();
      let days = [];
      let monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if (this.selectMonth == "02" && this.selectYear % 4 == 0) {
        // 闰年二月份需要特殊处理
        monthDays[1] = 29;
      }
      let maxDay = monthDays[this.selectMonthIndex];
      for (let i = 1; i <= maxDay; i++) {
        days.push(("" + i).padStart(2, "0"));
        if (day == i) {
          this.selectDayIndex = i - 1;
          this.selectDay = ("" + i).padStart(2, "0");
        }
      }
      this.days = days;
    },
    changeWeekToFirstDay(year, selWeek) {
      let yearStart = new Date(`${year}/01/01 00:00:00`).getTime();
      yearStart += (selWeek - 1) * 7 * 1 * 24 * 60 * 60 * 1000;
      return dateFormat("Y-m-d", yearStart);
    },
    changeWeekToEndDay(year, selWeek) {
      let yearStart = new Date(`${year}/01/01 00:00:00`).getTime();
      yearStart += selWeek * 7 * 1 * 24 * 60 * 60 * 1000 - 1000;
      return dateFormat("Y-m-d", yearStart);
    },
    dayToWeek(day) {},
    bindChange(e) {
      let value = e.detail.value;
      if (this.selType == 1) {
        this.selectYearIndex = value[0];
        this.selectYear = this.years[value[0]];
        this.selectMonthIndex = value[1];
        this.selectMonth = this.months[value[1]];
        this.selectDayIndex = value[2];
        this.selectDay = this.days[value[2]];
      }
      if (this.selType == 2) {
        this.selectYearIndex = value[0];
        this.selectYear = this.years[value[0]];
        this.selectWeekIndex = value[1];
        this.selectWeek = this.weeks[value[1]];
      }
      if (this.selType == 3) {
        this.selectYearIndex = value[0];
        this.selectYear = this.years[value[0]];
        this.selectMonthIndex = value[1];
        this.selectMonth = this.months[value[1]];
      }
      if (this.selType == 4) {
        this.selectYearIndex = value[0];
        this.selectYear = this.years[value[0]];
      }
    },
    cancleTime() {
      this.$emit("cancleTime");
    },
    submitTime() {
      let time = "";
      if (this.selType == 1)
        time = `${this.selectYear}-${this.selectMonth}-${this.selectDay}`;
      if (this.selType == 2) time = `${this.selectYear}${this.selectWeek}`;
      if (this.selType == 3)
        time = `${this.selectYear}年 ${this.selectMonth}月`;
      if (this.selType == 4) time = `${this.selectYear}年`;
      this.$emit("submitTime", time, this.selType, this.timeStr);
    },
  },
};
</script>

<style lang="scss" scoped src="./index.scss"></style>