Web_TracerMethodology/pages/calendar/components/changeCalendar.vue

<template>
  <view class="changeCalendar">
    <view class="zheZhao"></view>
    <view class="content">
      <view class="title">选择日期</view>
      <view class="cont">
        <view class="highLight" v-if="pcOrYd">
          <view
            class="left"
            :style="{ marginTop: top }"
            @touchstart="touchstart1"
            @touchmove="touchmove1"
          >
            <view
              v-for="(item, i) in yearList"
              :style="index1 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
            >
              {{ item }}
            </view>
          </view>
          <view class="diagonalLine"> / </view>
          <view
            class="right"
            :style="{ marginTop: top2 }"
            @touchstart="touchstart2"
            @touchmove="touchmove2"
          >
            <view
              v-for="(item, i) in monthList"
              :style="index2 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
            >
              {{ item }}
            </view>
          </view>
        </view>
        <view class="highLight" v-else>
          <view
            class="left"
            :style="{ marginTop: top }"
            @mousedown="mousedown1"
          >
            <view
              v-for="(item, i) in yearList"
              :style="index1 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
            >
              {{ item }}
            </view>
          </view>
          <view class="diagonalLine"> / </view>
          <view
            class="right"
            :style="{ marginTop: top2 }"
            @mousedown="mousedown2"
          >
            <view
              v-for="(item, i) in monthList"
              :style="index2 == i ? { color: '#292C33' } : { color: '#DADEE6' }"
            >
              {{ item }}
            </view>
          </view>
        </view>
      </view>
      <view class="change">
        <view class="cancel" @click="cancelCC">取消</view>
        <view class="sure" @click="sureCC">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
export default {
  props: {
    changedYear: {},
    changedMonth: {},
  },
  data() {
    return {
      startYear: 1990,
      nowYear: moment().format("YYYY"),
      undYear: parseInt(moment().format("YYYY")) + 100,
      yearList: [],
      monthList: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ],
      top: "0rpx",
      top2: "0rpx",
      pageY: 0,
      pageY2: 0,
      index1: 0,
      index2: 0,
      pcOrYd: false,
    };
  },
  mounted() {
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.pcOrYd = true;
    } else {
      this.pcOrYd = false;
    }
    let list = [];
    for (let i = this.startYear; i < this.undYear; i++) {
      list.push(i);
    }
    this.yearList = list;
    for (let i = 0; i < this.yearList.length; i++) {
      if (this.yearList[i] == this.changedYear) {
        this.top = -i * 80 + "rpx";
        this.index1 = i;
      }
    }
    for (let i = 0; i < this.monthList.length; i++) {
      if (this.monthList[i] == this.changedMonth) {
        this.top2 = -i * 80 + "rpx";
        this.index2 = i;
      }
    }
  },
  methods: {
    cancelCC() {
      this.$emit("cancelCC", false);
    },
    sureCC() {
      this.$emit(
        "sureCC",
        false,
        this.yearList[this.index1],
        this.monthList[this.index2]
      );
    },
    touchstart1() {
      this.pageY = event.touches[0].pageY;
    },
    touchmove1() {
      if (this.pageY < event.touches[0].pageY) {
        let dif = event.touches[0].pageY - this.pageY;
        this.index1 = this.index1 - Math.round(dif / 2);
        if (this.index1 <= 0) {
          this.index1 = 0;
          this.top = "0rpx";
        } else {
          this.top = -this.index1 * 80 + "rpx";
        }
      } else {
        let dif = this.pageY - event.touches[0].pageY;
        this.index1 = this.index1 + Math.round(dif / 2);
        if (this.index1 >= this.yearList.length - 1) {
          this.index1 = this.yearList.length - 1;
          this.top = -(this.yearList.length - 1) * 80 + "rpx";
        } else {
          this.top = -this.index1 * 80 + "rpx";
        }
        this.top = -this.index1 * 80 + "rpx";
      }
      this.pageY = event.touches[0].pageY;
    },
    touchstart2() {
      this.pageY2 = event.touches[0].pageY;
    },
    touchmove2() {
      if (this.pageY2 < event.touches[0].pageY) {
        let dif = event.touches[0].pageY - this.pageY2;
        this.index2 = this.index2 - Math.round(dif / 2);
        if (this.index2 <= 0) {
          this.index2 = 0;
          this.top2 = "0rpx";
        } else {
          this.top2 = -this.index2 * 80 + "rpx";
        }
      } else {
        let dif = this.pageY2 - event.touches[0].pageY;
        this.index2 = this.index2 + Math.round(dif / 2);
        if (this.index2 >= this.monthList.length - 1) {
          this.index2 = this.monthList.length - 1;
          this.top2 = -(this.monthList.length - 1) * 80 + "rpx";
        } else {
          this.top2 = -this.index2 * 80 + "rpx";
        }
      }
      this.pageY2 = event.touches[0].pageY;
    },
    mousedown1() {
      this.pageY = event.pageY;
      document.onmousemove = (e) => {
        if (this.pageY < e.pageY) {
          let dif = e.pageY - this.pageY;
          this.index1 = this.index1 - Math.round(dif / 2);
          if (this.index1 <= 0) {
            this.index1 = 0;
            this.top = "0rpx";
          } else {
            this.top = -this.index1 * 80 + "rpx";
          }
        } else {
          let dif = this.pageY - e.pageY;
          this.index1 = this.index1 + Math.round(dif / 2);
          if (this.index1 >= this.yearList.length - 1) {
            this.index1 = this.yearList.length - 1;
            this.top = -(this.yearList.length - 1) * 80 + "rpx";
          } else {
            this.top = -this.index1 * 80 + "rpx";
          }
        }
        this.pageY = e.pageY;
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false; //兼容firefox
    },
    mousedown2() {
      this.pageY2 = event.pageY;
      document.onmousemove = (e) => {
        if (this.pageY2 < e.pageY) {
          let dif = e.pageY - this.pageY2;
          this.index2 = this.index2 - Math.round(dif / 2);
          if (this.index2 <= 0) {
            this.index2 = 0;
            this.top2 = "0rpx";
          } else {
            this.top2 = -this.index2 * 80 + "rpx";
          }
        } else {
          let dif = this.pageY2 - e.pageY;
          this.index2 = this.index2 + Math.round(dif / 2);
          if (this.index2 >= this.monthList.length - 1) {
            this.index2 = this.monthList.length - 1;
            this.top2 = -(this.monthList.length - 1) * 80 + "rpx";
          } else {
            this.top2 = -this.index2 * 80 + "rpx";
          }
        }
        this.pageY2 = e.pageY;
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false; //兼容firefox
    },
  },
};
</script>

<style lang="less">
.changeCalendar {
  // margin-top: -105rpx;
  // width: 100%;
  // height: 100vh;
  // background: #12141A;
  // opacity: 0.5;
  // position: absolute;
  // left: 0rpx;
  // top: 0rpx;
  // z-index: 3;
  .zheZhao {
    width: 100%;
    height: calc(100% - 575rpx);
    background: #12141a;
    opacity: 0.5;
    position: absolute;
    left: 0rpx;
    top: 0rpx;
    z-index: 3;
  }
  .content {
    width: 100%;
    height: 600rpx;
    background-color: #fff;
    position: absolute;
    bottom: 0rpx;
    opacity: 1;
    z-index: 4;
    border-radius: 25rpx 25rpx 0rpx 0px;
    // height: 575rpx;
    .title {
      margin-top: 35rpx;
      margin-left: 40rpx;
      font-size: 30rpx;
      color: #292c33;
    }
    .cont {
      margin: 42.5rpx 0rpx 17.5rpx 0rpx;
      height: 400rpx;
      overflow: hidden;
      // .top{
      // 	height: 190rpx;
      // 	opacity: .3;
      // 	z-index: 4;
      // }
      .highLight {
        height: 80rpx;
        // z-index: 3;
        position: relative;
        // top: 222.5rpx;
        top: 160rpx;
        .left {
          padding-right: 62.5rpx;
          width: 49%;
          float: left;
          text-align: right;
          color: #dadee6;
          font-size: 40rpx;
          font-weight: bold;

          uni-view {
            line-height: 80rpx;
          }
        }
        .diagonalLine {
          width: 2%;
          float: left;
          text-align: center;
          font-size: 25rpx;
          font-weight: bold;
          line-height: 80rpx;
        }
        .right {
          padding-left: 62.5rpx;
          float: left;
          width: 49%;
          text-align: left;
          color: #dadee6;
          font-size: 40rpx;
          font-weight: bold;
          uni-view {
            line-height: 80rpx;
          }
        }
      }
      // .bottom{
      // 	height: 190rpx;
      // 	opacity: .3;
      // 	z-index: 4;
      // }
    }
    .change {
      text-align: center;
      border-top: 0.62rpx solid #dadee6;
      .cancel {
        padding: 26.25rpx 0rpx;
        display: inline-block;
        width: 50%;
        color: #3377ff;
      }
      .sure {
        padding: 26.25rpx 0rpx;
        display: inline-block;
        width: 50%;
        color: #fff;
        background-color: #3377ff;
      }
    }
  }
}
</style>