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.valuethis.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 - 1now.setDate(now.getDate() - dayNumber)} else {let dayNumber = day == 0 ? 0 : 7 - daynow.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 = nowreturn 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>