uniDataCenter/pages/dateplan/editPlanTime...

<template>
  <view class="mask" @touchmove.stop.prevent="moveStop" @click="cancelEvent">
    <view class="mask-container" @click.stop="moveStop">
      <view class="operationBox">
        <view class="cancel" @click="cancelEvent">取消</view>
        <view class="define" @click="submitEvent">确定</view>
      </view>
      <view class="timeBox">
        <view :class="['timeBoxItem',type==1?'timeBoxItem1_active':'']" @click="timeClick(1)">
          <view class="time">{{editTime.startLiveTime.time}}</view>
          <view class="date">{{editTime.startLiveTime.date}}</view>
        </view>
        <view :class="['timeBoxItem',type==2?'timeBoxItem2_active':'']" @click="timeClick(2)">
          <view class="time">{{editTime.endLiveTime.time}}</view>
          <view class="date">{{editTime.endLiveTime.date}}</view>
        </view>
      </view>
      <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
        <picker-view-column>
          <view class="item" v-for="(item,index) in dates" :key="index">{{item}}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item,index) in hours" :key="index">{{item}}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}</view>
        </picker-view-column>
      </picker-view>
    </view>

  </view>
</template>

<script>
export default {
  props: ['editTimeData'],
  data () {
    const hours = []
    const minutes = []
    for (let i = 0; i <= 23; i++) {
      hours.push((i < 10 ? '0' + i : i))
    }
    for (let i = 0; i <= 60; i += 5) {
      minutes.push((i < 10 ? '0' + i : i))
    }
    return {
      type: 1,
      editTime: this.editTimeData,
      indicatorStyle: `height: 50px;`,
      value: [0, 0, 0],
      minutes,
      hours,
      dates: [],
      visible: false
    }
  },
  created () {
    for (let i = -30; i <= 30; i++) {
      this.dates.push(this.$getDay(i))
    }
    this.timeInit()

  },
  methods: {
    timeInit () {
      let date_index = 0;
      let hour_index = 0;
      let minute_index = 0;
      this.dates.filter((v, index) => {
        if (new Date(v).getTime() == new Date((this.type == 1 ? this.editTimeData.startLiveTime.date :
          this.editTimeData.endLiveTime.date)).getTime()) {
          date_index = index
          return v
        }
      })
      let h = 0;
      let m = 0;
      if (this.type == 1) {
        if (this.editTimeData.startLiveTime.time) {
          h = this.editTimeData.startLiveTime.time.split(':')[0];
          m = this.editTimeData.startLiveTime.time.split(':')[1];
        }
      } else {
        if (this.editTimeData.endLiveTime.time) {
          h = this.editTimeData.endLiveTime.time.split(':')[0];
          m = this.editTimeData.endLiveTime.time.split(':')[1];
        }
      }
      for (var i in this.hours) {
        if (this.hours[i] >= h) {
          hour_index = i;
          break;
        }
      }
      for (var i in this.minutes) {
        if (this.minutes[i] >= m) {
          minute_index = i;
          break;
        }
      }
      this.value = [date_index, hour_index, minute_index]
      this.visible = true
    },
    timeClick (type) {
      this.type = type
      this.timeInit()
    },
    bindChange (e) { //picker 改变
      const val = e.detail.value
      if (this.type == 1) {
        this.editTime.startLiveTime.date = this.dates[val[0]];
        this.editTime.startLiveTime.time = this.hours[val[1]] + ':' + this.minutes[val[2]]
      } else {
        this.editTime.endLiveTime.date = this.dates[val[0]];
        this.editTime.endLiveTime.time = this.hours[val[1]] + ':' + this.minutes[val[2]]
      }
    },
    submitEvent () {
      this.$emit('changeTime', this.editTime)
    },
    cancelEvent () {
      this.$emit('closeEvent')
    },
    moveStop () { }
  }
}
</script>

<style scoped lang="scss">
.mask {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;

  .mask-container {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #ffffff;
    width: 100%;
    height: 700rpx;
    border-top-left-radius: 38rpx;
    border-top-right-radius: 38rpx;

    .operationBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 36rpx;

      .cancel,
      .define {
        font-size: 28rpx;
        line-height: 40rpx;
      }

      .cancel {
        color: #747474;
      }

      .define {
        color: #1f2126;
      }
    }

    .timeBox {
      display: flex;
      align-items: center;
      height: 124rpx;
      border-top: 2rpx solid #e8e8e8;
      border-bottom: 2rpx solid #e8e8e8;

      .timeBoxItem {
        flex: 1;
        padding-left: 78rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .time {
          color: #000000;
          font-size: 32rpx;
          line-height: 44rpx;
          font-weight: 500;
        }

        .date {
          color: #34383a;
          font-size: 32rpx;
          line-height: 44rpx;
        }

        &.timeBoxItem1_active {
          background: url(../../static/img/editTime1.png) no-repeat;
          background-size: 100% 100%;
          opacity: 0.7;
          .time,
          .date {
            color: #ffffff;
          }
        }

        &.timeBoxItem2_active {
          background: url(../../static/img/editTime2.png) no-repeat;
          background-size: 100% 100%;
          opacity: 0.7;
          .time,
          .date {
            color: #ffffff;
          }
        }
      }
    }
  }
}

picker-view {
  width: 100%;
  height: 400rpx;
  margin-top: 20rpx;
}

.item {
  line-height: 100rpx;
  text-align: center;
  color: #000000;
  font-weight: bold;
}
</style>