crm-mobile/components/wk-date-picker/wk-week-picker.vue

<template>
  <view :style="{height: height + 'px'}" class="wk-date-picker picker">
    <view class="picker-header">
      <view class="cancel" @click="handleCancel">
        取消
      </view>
      <view class="picker-header-title" />
      <view class="confirm" @click="handleConfirm">
        确认
      </view>
    </view>

    <picker-view
      v-if="showPicker"
      v-model="valueIndexArr"
      indicator-class="indicator-active"
      class="picker-body"
      @change="bindChange">
      <picker-view-column class="picker-body-column">
        <view
          v-for="(item,index) in list"
          :key="index"
          class="picker-item">
          {{ item.start }}~{{ item.end }}
        </view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'WkDatePicker',
    inject: ['popup'],
    props: {
      value: {
        type: Object,
        default: () => {}
      },
      startTime: {
        type: String,
        default: null
      },
      endTime: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        height: 0,
        valueArr: [],
        valueIndexArr: [],

        list: [],
				
        maxDate: [],
        minDate: [],
				
        showPicker: false
      }
    },
    mounted() {
      this.initDate()
      const that = this
      uni.getSystemInfo({
        success: res => {
          that.height = res.windowHeight * 0.4
        }
      })
    },
    methods: {
      /**
       * 初始化
       */
      initDate() {
        // 今天是本周的第几天
        let weekOfDay = moment().format('E')
        // 获取本周周一
        let start = moment().subtract(weekOfDay - 1, 'days')
        // 获取本周周末
        let end = moment().add(7 - weekOfDay, 'days')
        const arr = []
        arr.push({
          start: start.format('YYYY-MM-DD'),
          end: moment().format('YYYY-MM-DD')
        })
        console.log('time', start, end)
				
        for (let i = 0; i < 80; i++) {
          start = start.subtract(7, 'days')
          end = end.subtract(7, 'days')
          arr.unshift({
            start: start.format('YYYY-MM-DD'),
            end: end.format('YYYY-MM-DD')
          })
        }
        this.list = arr
        const startVal = moment(this.value.start).format('YYYY-MM-DD')
        let index = arr.findIndex(o => o.start === startVal)
        if (index === -1) {
          index = arr.length - 1
        }
        this.valueIndexArr = [index]
        this.showPicker = false
        this.$nextTick(() => {
          this.showPicker = true
        })
      },
			
      bindChange({ detail }) {
        this.valueIndexArr = detail.value
      },

      handleConfirm() {
        console.log('valueArr:', this.valueArr)
        console.log('valueIndexArr: ', this.valueIndexArr)				
        const index = this.valueIndexArr[0]
        let value = this.list[index]
				
        this.$emit('input', value)
        this.$emit('select', value, () => {
          this.popup.close()
        })
      },

      handleCancel() {
        this.popup.close()
      }
    }
  }
</script>

<style scoped lang="scss">
	.picker {
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		
		.picker-header {
			height: 70rpx;
			font-size: 26rpx;
			border-bottom: 1rpx solid $border-color;
			padding: 0 30rpx;
			@include left;
			
			.picker-header-title {
				flex: 1;
			}
			.cancel {
				color: #666666;
			}
			.confirm {
				color: $theme-color;
			}
		}
		
		.picker-body {
			flex: 1;
			padding: 0 30rpx;
			.picker-body-column {
				.picker-item {
					font-size: 26rpx;
					@include center;
				}
			}
		}
	}
</style>