uniDataCenter/pages/dateplan/index.vue

<template>
  <view class="dateplan">
    <page-head :slotFlag='true' :bg_jb='true'>
      <view class="timeScreen flex" @click="clearToast('monthCalendarFlag')">{{monthInfo.year + '年'+monthInfo.month+'月'}} <view class="iconfont icon-down_icon" style="font-size: 22rpx;margin-left: 10rpx;"></view>
      </view>
    </page-head>
    <view :style="'padding-top:'+ safeAreaTop+'px'">
      <!-- 筛选 -->
      <view class="screenBox">
        <view class="screenBoxFlex">
          <view class="accountScreenBox" @click="clearToast('accountShow')">
            <image :src="accountInfo.head" mode="widthFix"></image>
            <text>{{accountInfo.name}}</text>
            <view class="iconfont icon-down_icon"></view>
          </view>
          <view v-if="userInfo.info.user_control!==0" class="accountScreenBox" @click="clearToast('staffFlag')">
            {{staffInfo.id == 0 ? '工作人员' : staffInfo.real_name}} <view class="iconfont icon-down_icon"></view>
          </view>
        </view>
        <user-filter v-if="staffFlag" :staffInfo='staffInfo' @changeUser='changeUser' @clearMask='clearMask'></user-filter>
        <account-screen v-if="accountShow" :accountList='accountList' :accountInfo='accountInfo' @changeAccount='changeAccount' @clearMask='clearMask'></account-screen>
      </view>
      <!-- 日历表头 -->
      <view class="dateplanTitle">
        <view class="dateplanIcon">
          <image @click="backToday" class="dateplanIconImg" src="../../static/img/jintian.png" mode="widthFix"></image>
        </view>
        <view class="detaplanTitleItem">主播</view>
        <view class="detaplanTitleItem">工作人员</view>
      </view>
      <!-- 日历 -->
      <scroll-view class="dateplan_container" :scroll-top='scrollTop' scroll-y="true" @scroll="scroll" :style="'height:calc(100vh - '+ safeAreaTop + 'px - 180rpx)'">
        <view :class="['datePlanItem',item.day_format.is_ing?'datePlanIng':'']" v-for="(item,index) in days" :key="index+'days'" :id="item.day_format.now_time?'now_time_box':''">
          <view class="timeBox dateplanIcon">
            <view class="week" :class="item.day_format.now_time?'c-5B80F4':''">{{item.day_format.week}}</view>
            <view class="time" :class="item.day_format.now_time?'c-5B80F4':''">{{item.day_format.day}}</view>
          </view>
          <view class="addPlan" @click="goEditPlan(index)" v-if="!item.data||!item.data.data||(item.data&&item.data.data&&(item.data.data.length==0 || ((item.data.data.anchor&&item.data.data.anchor.length==0)&&(item.data.data.normal&&item.data.data.normal.length==0))))">
            <text v-if="!operationFlag">无计划</text>
            <template v-else>
              添加计划
              <view class="iconfont icon-tianjia_icon"></view>
            </template>
          </view>
          <view class="itemCon" v-else @click="goEditPlan(index)">
            <!-- 主播 -->
            <view class="item_worker detaplanTitleItem">
              <template v-if="item.data&&item.data.data&&item.data.data.anchor">
                <view class="item_worker_con" v-for="(item_anchor,index_anchor) in item.data.data.anchor" :key="index_anchor+'anchor'">
                  <view class="worker_time" v-if="item_anchor.time">{{item_anchor.time.start_time}}-{{item_anchor.time.end_time}}</view>
                  <view class="renyuan" v-if="item_anchor.self_staff_list_name">{{item_anchor.self_staff_list_name.join(',')}}</view>
                </view>
              </template>
            </view>
            <view class="line"></view>
            <!-- 工作人员 -->
            <view class="item_worker detaplanTitleItem">
              <template v-if="item.data&&item.data.data&&item.data.data.normal">
                <view class="item_worker_con" v-for="(item_normal,index_normal) in item.data.data.normal" :key="index_normal+'normal'">
                  <view class="worker_time" v-if="item_normal.time">{{item_normal.time.start_time}}-{{item_normal.time.end_time}}</view>
                  <view class="renyuan" v-if="item_normal.self_staff_list_name">{{item_normal.self_staff_list_name.join(',')}}</view>
                </view>
              </template>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 月日历 -->
    <month-calendar v-if="monthCalendarFlag" :monthInfo='monthInfo' @changeMonth='changeMonth' @clearMask='clearMask'></month-calendar>
    <wm-watermark :text="real_name" :opacity="monthCalendarFlag||accountShow||staffFlag?0.1:0.2"></wm-watermark>
  </view>
</template>

<script>
import accountScreen from '@/components/account-screen.vue'
import userFilter from '@/components/user-filter.vue'
import monthCalendar from '@/components/month-calendar.vue'
export default {
  components: {
    accountScreen,
    userFilter,
    monthCalendar
  },
  data () {
    return {
      safeAreaTop: this.$store.state.systemInfo.safeAreaTop,
      accountList: [],
      accountInfo: {},
      weekOrMonth: 'month',
      days: [],
      seller_id: '', //账号ID
      accountShow: false,
      staffInfo: { name: '全部', id: 0 },//工作人员
      staffFlag: false,
      monthCalendarFlag: false,
      monthInfo: {
        year: '',
        month: ''
      },
      scrollTop: 0,
      oldScrollTop: 0,
      loadFlag: false,
      operationFlag: false,
      real_name: '',
      userInfo: {},
	  todayTime:'',
	  topTodayScroll:0
    }
  },
  async onLoad () {
    await this.$onLaunched;
    this.real_name = uni.getStorageSync('userInfo').info.real_name;
    this.userInfo = uni.getStorageSync('userInfo')
    if (this.loadFlag) {//编辑返回时候，刷新接口
	console.log('从编辑业来')
      this.loadFlag = false
      this.init('edit')
    } else {//初始化进来时
      if (uni.getStorageSync('userInfo').info.is_edit == 1) {
        this.operationFlag = true;//是否有编辑权限
      }
      this.get_accountList('one')
    }
  },
  methods: {
	  backToday(){//回到今日
		if(this.todayTime == (this.monthInfo.year + '-' + this.monthInfo.month)){//当月
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(() => {
				this.scrollTop = this.topTodayScroll
			});
		}else{
			this.initData()
		}
	  },
    goEditPlan (index) {//编辑计划
      if (!this.operationFlag) return;
      let date = this.days[index].data.date;
	  console.log(this.accountInfo,'accountInfo')
      uni.navigateTo({
        url: '/pages/dateplan/editPlan?date=' + date + '&head=' + encodeURIComponent(this.accountInfo.head) + '&name=' + this.accountInfo.name + '&platform=' + this.accountInfo.platform + '&ruled=' + this.accountInfo.ruled + '&seller_id=' + this.accountInfo.seller_id
      })
      this.loadFlag = true
    },
    scroll (e) {
      this.oldScrollTop = e.detail.scrollTop
    },
    clearToast (type) {
      type != 'staffFlag' ? this.staffFlag = false : '';
      type != 'accountShow' ? this.accountShow = false : '';
      type != 'monthCalendarFlag' ? this.monthCalendarFlag = false : '';
      this[type] = !this[type]
    },
    clearMask () {
      this.staffFlag = false;
      this.accountShow = false;
      this.monthCalendarFlag = false;
    },
    changeMonth (val) {
      this.clearMask()
      if (this.monthInfo.year == val.year && this.monthInfo.month == val.month) return;
      this.monthInfo = val;
      this.initData(this.monthInfo.year + '-' + this.monthInfo.month)
      this.scrollTop = this.oldScrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0
      });
    },
    changeUser (val) {
      this.staffInfo = val;
      this.staffFlag = false;
      this.init()
      this.scrollTop = this.oldScrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0
      });
    },
    changeAccount (val) {
      this.accountInfo = val;
      this.accountShow = false;
      this.init()
      this.scrollTop = this.oldScrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0
      });
    },
    get_accountList (type) {
      uni.showLoading({ title: '加载中' });
      this.$req(this.$api.user_sellerList, 'get', {}, (res) => {
        if (res && res.errno == 0) {
          this.accountList = res.rst
          if (!this.seller_id || this.seller_id == '') {
            this.seller_id = this.accountList[0].seller_id
          }
          let accountData = this.accountList.filter((v) => {
            return v.seller_id == this.seller_id
          })
          if (accountData && accountData.length > 0) {
            this.accountInfo = accountData[0];
          } else {
            this.accountInfo = this.accountList[0];
            this.seller_id = this.accountList[0].seller_id
          }
          if (type == 'one') {
            // 在vue初始化时调用
            if (this.weekOrMonth == 'month') {
              this.initData()
            }
          }
        } else if (res.errno != 4002) {
          uni.hideLoading()
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }
      }, (err) => {
        uni.hideLoading()
      })

    },
    initData (cur) {
      uni.showLoading({ title: '加载中' });
      var date
      if (cur) {
        date = new Date(cur)
      } else {
        date = new Date()
        date = new Date(date.getFullYear() + '-' + ((date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : ('0' +
          (date.getMonth() + 1))))
      }
      let currentYear = date.getFullYear()
      let currentMonth = date.getMonth() + 1
      this.monthInfo.year = currentYear;
      this.monthInfo.month = currentMonth < 9 ? ('0' + currentMonth) : currentMonth;
      var str = this.formatDate(currentYear, currentMonth, date.getDate())
      let days = [];
      //判断每月多少天
      var day_num = new Date(currentYear, currentMonth, 0).getDate();
      // 数据插入
      for (var j = 0; j < day_num; j++) {
        var d3 = new Date(str)
        d3.setDate(d3.getDate() + j)
        days.push({ day_format: this.day_format(d3) })
      }
      this.days = days
      this.init()
    },
    init (source) {
      this.loading = true;
      uni.showLoading({ title: '加载中' });
      var params = {
        type: source == 'week' ? 2 : 1,
        staff_id: this.userInfo.info.user_control==0 ? this.userInfo.info.id : this.staffInfo.id, //工作人员
        seller_id: this.accountInfo.seller_id, //账号ID
      }
      // if (source == 'week') {
      // 	params.start_date = this.week_time[0]
      // 	params.end_date = this.week_time[1]
      // } else {
      params.month = this.monthInfo.year + '-' + this.monthInfo.month
      // }
      this.$req(this.$api.plan_livePlanListV2, 'get', params, (res) => {
        this.loading = false
        if (res && res.errno == 0) {
          let data_arr = res.rst
          uni.hideLoading()
          data_arr.forEach((item) => {
            if (item.data && item.data.length != 0) {
              item.data.anchor.forEach((item1) => {
                item1.self_staff_list = item1.staff_list.map((v) => {
                  return v.staff_id
                })
                item1.self_staff_list_name = item1.staff_list.map((v) => {
                  return v.staff_name
                })
              })
              item.data.normal.forEach((item1) => {
                item1.self_staff_list = item1.staff_list.map((v) => {
                  return v.staff_id
                })
                item1.self_staff_list_name = item1.staff_list.map((v) => {
                  return v.staff_name
                })
              })
            }
          })
          this.days.forEach((item, index) => {
            this.$set(this.days, index, Object.assign(this.days[index], {
              data: data_arr.filter((v) => {
                return v.date == item.day_format.date
              })[0]
            }))
          });
          this.$nextTick(() => {
			  if(source != 'edit'){
				  let query = uni.createSelectorQuery().in(this);
				  query.select('#now_time_box').boundingClientRect(data => {
				    if (data&&data.top) {
				  	  this.topTodayScroll = Number(data.top) - Number(data.height) - 120;
				      this.scrollTop = this.topTodayScroll
				    }
				  }).exec();
			  }
          })
          // this.old_infoList = JSON.parse(JSON.stringify(this.days))
        } else if (res.errno != 4002) {
          uni.showToast({
            title: res.err,
            icon: 'none'
          });
        }

      }, (err) => {
        uni.hideLoading()
      })
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function (year, month, day) {
      var y = year
      var m = month
      if (m < 10) m = '0' + m
      if (day) {
        var d = day
        if (d < 10) d = '0' + d
      }
      return y + '-' + m + (day ? ('-' + d) : '')
    },
    day_format (date) { //返回 类似 2016-01-02 格式的字符串
      let week = '';
      switch (date.getDay()) {
        case 0: week = '周日'; break;
        case 1: week = '周一'; break;
        case 2: week = '周二'; break;
        case 3: week = '周三'; break;
        case 4: week = '周四'; break;
        case 5: week = '周五'; break;
        case 6: week = '周六'; break;
        default: week = '';
      }
      let is_ing = false;//是否是过去式 - 直播过的
      let now_time = false;//是否是今天
      if (new Date(this.$getDay(0, false)).getTime() > date.getTime()) {
        is_ing = true
      }
      if (new Date(this.$getDay(0, false)).getTime() == date.getTime()) {
        now_time = true
		this.todayTime = date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? ('0' + (date.getMonth() + 1)) : (date
          .getMonth() + 1));
      }
      return {
        date: date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? ('0' + (date.getMonth() + 1)) : (date
          .getMonth() + 1)) + '-' + (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()),
        date2: ((date.getMonth() + 1) < 10 ? ('0' + (date.getMonth() + 1)) : (date
          .getMonth() + 1)) + '-' + (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()),
        week: week,
        day: (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()),
        is_ing: is_ing,
        now_time: now_time
      }
    },
  }
}
</script>

<style scoped lang="scss">
.dateplan {
  background: #ffffff;
}
.timeScreen {
  color: #ffffff;
  font-size: 40rpx;
  line-height: 60rpx;
  margin-left: 20rpx;
  margin-top: 16rpx;
}
.screenBox {
  .screenBoxFlex {
    padding: 20rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #e8e8e8;
  }
  .accountScreenBox {
    display: flex;
    align-items: center;
    height: 60rpx;
    line-height: 60rpx;
    background: #f4f6f6;
    border-radius: 30rpx;
    padding: 0 18rpx;
    color: #5f656f;
    font-size: 24rpx;
    font-weight: bold;
    image {
      width: 30rpx;
      height: 30rpx;
      border-radius: 4px;
      margin-right: 10rpx;
    }
    .iconfont {
      font-size: 14rpx;
      margin-left: 10rpx;
    }
  }
}
.dateplanTitle {
  display: flex;
  align-items: center;
  height: 78rpx;
  box-shadow: 0px 4rpx 8rpx 0px rgba(202, 202, 202, 0.5);
  .dateplanIcon {
    color: #555555;
    font-size: 26rpx;
  }
  .detaplanTitleItem {
    color: #555555;
    font-size: 26rpx;
    line-height: 78rpx;
  }
}
.dateplanIcon {
  width: 100rpx;
  text-align: center;
}
.detaplanTitleItem {
  width: calc(50vw - 50rpx);
  padding-left: 30rpx;
}
.dateplan_container {
  overflow-y: auto;
}
.datePlanItem {
  display: flex;
  align-items: flex-start;
  margin: 25rpx 0;
  margin-right: 12rpx;
  .timeBox {
    color: #000000;
    .week {
      font-size: 24rpx;
      line-height: 34rpx;
    }
    .time {
      font-size: 48rpx;
      line-height: 66rpx;
    }
  }
  .line {
    width: 2rpx;
    height: 100%;
    background: #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
  }
  .itemCon {
    display: flex;
    align-items: center;
    background: #e4e9fc;
    padding: 6rpx 0;
    position: relative;
    .item_worker {
      color: #3048bc;
      padding-right: 4rpx;
      .renyuan {
        font-size: 28rpx;
        line-height: 34rpx;
        word-break: break-all;
      }
      .worker_time {
        font-size: 24rpx;
        line-height: 30rpx;
        word-break: break-all;
      }
    }
    .item_worker_con {
      margin: 10rpx 0;
    }
  }
}
.datePlanIng {
  .timeBox {
    color: #bcc0c3;
  }
  .itemCon {
    background: #f2f6ff;
    .item_worker {
      color: #aab3df;
    }
  }
}
.addPlan {
  width: 100%;
  height: 92rpx;
  background: #f8f7f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d6d6d;
  font-size: 24rpx;
  line-height: 34rpx;
  .iconfont {
    color: #c8c8c8;
    font-size: 26rpx;
    margin-left: 17rpx;
  }
}
.dateplanIconImg {
  width: 40rpx;
  height: 40rpx;
  margin-top: 6rpx;
}
</style>