uniapp 小程序 周选择器

这里贴出来的是子组件的代码，父组件只是打开了一下popup

//  打开了一下popup
$refs.popup.open('bottom')

如果不想用子组件的话，直接打开popup就可以用

<template>
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <view class="my_popup">
      <view class="my_selectDeta">
        <view class="my_button" @click="iconClose">
          取消
        </view>
        <view class="my_button" type="primary" @click="confirm">
          确定
        </view>
      </view>
      <picker-view :value="selectValue" class="picker-view" @change="pickerChange">
        <picker-view-column>
          <view v-for="(item, index) in years" :key="index" class="year-item">
            {{ item }}年
          </view>
        </picker-view-column>

        <picker-view-column>
          <view v-for="(item, index) in weeks" :key="index" class="weeks-item">
            {{ `第${index + 1}周(` + item + ')' }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      selectValue: [0, 0],
      years: [],
      year: '', // 当前年
      // weeks: [],
      week: '', // 当前周
      myDate: new Date(),
    }
  },
  // watch: {
  //   year: {
  //     handler(newValue) {
  //       const index = this.years.findIndex((item) => item == newValue);
  //       this.selectValue = [index, 0];
  //     },
  //     deep: true // 深度监听父组件传过来对象变化
  //   },
  // },
  computed: {
    weeks() {
      const ONE_DAY = 24 * 3600 * 1000;
      let firstDay =
        new Date(this.year + '/01/01').getDay() == 0
          ? 7
          : new Date(this.year + '/01/01').getDay();
      let weeklist = [];
      let firstweekday = '';
      let endweekday = new Date(this.year + '/12/28').getTime();
      if (firstDay > 4) {
        firstweekday =
          new Date(this.year + '/01/01').getTime() +
          (8 - firstDay) * ONE_DAY;
      } else if (firstDay <= 4) {
        firstweekday =
          new Date(this.year + '/01/01').getTime() -
          (firstDay - 1) * ONE_DAY;
      }
      for (let i = 0; i < 54; i++) {
        let numWeek = i * 7 * ONE_DAY;
        let firstday = firstweekday + numWeek;
        let endday = firstday + 6 * ONE_DAY;
        if (firstday <= endweekday) {
          weeklist.push(
            `${uni.$u.timeFormat(firstday, 'mm/dd')}-${uni.$u.timeFormat(endday, 'mm/dd')}`
          );
        }
      }
      console.log("computed-weeklist", weeklist)
      return weeklist;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    pickerChange(e) {
      const currentData = e.detail.value
      this.year = this.years[currentData[0]];
      this.week = this.weeks[currentData[1]];
      console.log("pickerChange", e, this.year, this.week);
    },
    // 初始化时的默认当前周
    init(data = new Date()) {
      for (let i = this.myDate.getFullYear(); i <= this.myDate.getFullYear() + 10; i++) {
        this.years.push(i);
      }
      let beginTime = uni.$u.timeFormat(this.getWeek(0, data), 'mm/dd')
      let endTime = uni.$u.timeFormat(this.getWeek(1, data), 'mm/dd');
      this.year = data ? new Date(data).getFullYear() : this.myDate.getFullYear()
      this.week = `${beginTime}-${endTime}`
      this.selectValue = [this.years.indexOf(this.year), this.weeks.indexOf(this.week)]
      console.log('weeks-init', this.year, this.years, this.week, this.weeks, beginTime, endTime, this.selectValue);
      // this.$nextTick(() => {
      //   this.selectValue = [this.years.indexOf(this.year), this.weeks.indexOf(this.week)]
      // })
      // this.$emit('changeWeekTime', this.dateObj)
    },
    // 获取当前周
    getWeek(type, data = "") {
      let now = new Date(data)
      let day = now.getDay() //返回星期几的某一天;
      if (!type) {
        let dayNumber = day == 0 ? 6 : day - 1
        now.setDate(now.getDate() - dayNumber)
      } else {
        let dayNumber = day == 0 ? 0 : 7 - day
        now.setDate(now.getDate() + dayNumber)
      }
      let date = now.getDate()
      let month = now.getMonth() + 1
      //年-月-日
      let s = now.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' +
        date :
        date)
      let datebefore = now
      return datebefore
    },
    iconClose() {
      this.$refs.popup.close()
    },
    changeDateObj() {
      const [firstWeek, lastWeek] = this.week
        .split('-')
        .map((item) => item.replace('/', '-'));
      return this.year + '-' + firstWeek + '至' + this.year + '-' + lastWeek
    },
    confirm() {
      console.log("confirm", this.year, this.week)
      let obj = {
        type: '4',
        date: this.changeDateObj()
      }
      uni.setStorageSync('weChatData', obj)
      uni.reLaunch({
        url: '/hxz/weChat/index'
      })
      this.iconClose();
    }
  },
}
</script>
<style scoped lang="scss">
.my_popup {
  height: 550rpx;
  border-radius: 8rpx 8rpx 0 0;
  position: relative;
  font-weight: 500;
  color: #1b1d21;

  .my_selectDeta {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    color: rgb(96, 98, 102);
    border-bottom: 1px solid #f5f7f8;
  }

  .my_button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .picker-view {
    width: 100%;
    height: 600rpx;
  }

}

.year-item,
.weeks-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

原文地址：https://blog.csdn.net/zhaoyapeng_/article/details/143512622

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！