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">
		<text class="fenjie">/</text>
        <picker-view
          :indicator-style="indicatorStyle"
          :value="value"
          @change="bindChange"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in years" :key="index"
              >{{ item }}年</view
            >
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in months" :key="index"
              >{{ item }}月</view
            >
          </picker-view-column>
          <!-- <picker-view-column>
		        <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
		    </picker-view-column> -->
        </picker-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 {
      title: "picker-view",
      years: [],
      year: "",
      months: [],
      month: "",
      days: [],
      day: "",
      value: [],
      visible: true,
      // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
      indicatorStyle: `height: 80rpx;`,
    };
  },
  mounted() {
    this.year = this.changedYear;
    this.month = this.changedMonth;

    let date = new Date();
    let years = [];
    let year = date.getFullYear();
    let months = [
      "01",
      "02",
      "03",
      "04",
      "05",
      "06",
      "07",
      "08",
      "09",
      "10",
      "11",
      "12",
    ];
    let month = date.getMonth() + 1;
    let days = [];
    let day = date.getDate();

    for (let i = 1990; i <= date.getFullYear() + 100; i++) {
      years.push(i);
    }
    this.years = years;
    this.months = months;
    this.value = [this.changedYear - 1990, this.changedMonth - 1];
  },
  methods: {
    bindChange(e) {
      const val = e.detail.value;
      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
    },
    cancelCC() {
      this.$emit("cancelCC", false);
    },
    sureCC() {
      this.$emit("sureCC", false, this.year, this.month);
    },
  },
};
</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;
  .picker-view {
    width: 100%;
    height: 400rpx;
    // margin-top: 20rpx;
  }
  .item {
    height: 80rpx;
    line-height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 40rpx;
  }
  .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;
	  position: relative;
	  .fenjie{
		  position: absolute;
		  left: 391.87rpx;
		  top: 187.5rpx;
		  font-size: 25rpx;
		  font-weight: bold;
	  }
    }
    .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;
      }
    }
    uni-picker-view {
      display: block;
      height: 400rpx !important;
    }

    uni-picker-view .uni-picker-view-wrapper {
      display: flex;
      position: relative;
      overflow: hidden;
      height: 100%;
      background-color: white;
    }

    uni-picker-view[hidden] {
      display: none;
    }

    picker-view {
      width: 100%;
      height: 600upx;
      font-weight: bold;
    }
  }
}
</style>