nd_wxapp/pages/rili/index.js

import todo from '../../component/v2/plugins/todo'
import selectable from '../../component/v2/plugins/selectable'
import solarLunar from '../../component/v2/plugins/solarLunar/index'
import timeRange from '../../component/v2/plugins/time-range'
import week from '../../component/v2/plugins/week'
import holidays from '../../component/v2/plugins/holidays/index'
import plugin from '../../component/v2/plugins/index'
import util, {formatDate, object2Date} from '../../utils/util.js'
const app = getApp()
plugin
  .use(todo)
  .use(solarLunar)
  .use(selectable)
  .use(week)
  .use(timeRange)
  .use(holidays)

const conf = {
  data: {
    outList:[],
    visitList:[],
    tableData: [],
    curDate: '',
    fromDate:'',
    toDate:'',
    userInfo:{},
    calendarConfig: {
      theme: 'elegant',
      showHolidays: false,
      emphasisWeek: true,
      chooseAreaMode: false,
      autoChoosedWhenJump: true,
      highlightToday: true,
      defaultDate: formatDate(new Date())
      // autoChoosedWhenJump: true
    },
    actionBtn: [
      {
        text: '跳转指定日期',
        action: 'jump',
        color: 'olive'
      },
      {
        text: '获取当前已选',
        action: 'getSelectedDates',
        color: 'red'
      },
      {
        text: '取消选中日期',
        action: 'cancelSelectedDates',
        color: 'mauve'
      },
      {
        text: '设置待办事项',
        action: 'setTodos',
        color: 'cyan'
      },
      {
        text: '删除指定代办',
        action: 'deleteTodos',
        color: 'pink'
      },
      {
        text: '清空待办事项',
        action: 'clearTodos',
        color: 'red'
      },
      {
        text: '获取所有代办',
        action: 'getTodos',
        color: 'purple'
      },
      {
        text: '禁选指定日期',
        action: 'disableDates',
        color: 'olive'
      },
      {
        text: '指定可选区域',
        action: 'enableArea',
        color: 'pink'
      },
      {
        text: '指定特定可选',
        action: 'enableDates',
        color: 'red'
      },
      {
        text: '选中指定日期',
        action: 'setSelectedDates',
        color: 'cyan'
      },
      {
        text: '周月视图切换',
        action: 'switchView',
        color: 'orange'
      },
      {
        text: '获取自定义配置',
        action: 'getConfig',
        color: 'olive'
      },
      {
        text: '获取日历面板日期',
        action: 'getCalendarDates',
        color: 'purple'
      }
    ]
  },
  initData(){
    let curDate = formatDate(new Date());
    let fromDate = curDate.substr(0,8)+ "01"
    let toDate = curDate.substr(0,8)+ "31"
    this.setData( {curDate, fromDate, toDate})
  },
  afterTapDate(e) {
    let curDate = object2Date( e.detail );
    this.setData({curDate});
    this.filterData()
  },
  onLoad: function(){
    this.initData();
    app.checkLogin(res=>{
      if( !res.userId ){
        wx.navigateTo({
          url: '/pages/index/index',
        })
      }else{
        this.setData({userInfo: res})
        this.loadData()
      }
    })
  },
  filterData(){
    let {curDate, outList, visitList} = this.data;
    
    let allList = outList.map( item=>{
        item.isOut= true
        return item;
      }).concat( visitList );

    let tableData = []
    for( let i in  allList){
      if( allList[i].fromDate <= curDate && allList[i].toDate >= curDate){
        tableData.push( allList[i] );
      }
    }
    console.log("filterData", curDate, tableData)
    this.setData({tableData})
  },
  gotoDetail( e ){
    let {id,out} = e.currentTarget.dataset;
    if( out ){
      wx.navigateTo({
        url: `/pages/detail/out/index?id=${id}`,
      })
    }else{
      wx.navigateTo({
        url: `/pages/detail/visit/index?id=${id}`,
      })
    }
  },
  loadData(){
    let {fromDate, toDate} = this.data;
    app.formPost("User.loadData", {fromDate, toDate}).then( res=>{
      if( res.code == 200){
        let outList = res.data.outList||[];
        let visitList = res.data.visitList||[];
        this.setData({outList, visitList});
        this.filterData();
        this.loadMarks();
      }
    })
  },
  loadMarks(){
    const calendar = this.selectComponent('#calendar').calendar
    let {outList, visitList} = this.data;
    var dateMap = {};
    // 外出
    for(let i in outList ){
      let item = outList[i];
      let {fromDate,toDate} = item;
      if( toDate < fromDate) continue;
      while( fromDate <= toDate){
        dateMap[fromDate] = 1;
        fromDate = util.nextDate(fromDate);
      }
    }
    // 
    for(let i in visitList ){
      let item = visitList[i];
      let {fromDate,toDate} = item;
      if( toDate < fromDate) continue;
      let tempDate = fromDate
      while( tempDate <= toDate){
        let curNum = dateMap[tempDate]||0;
        if(  curNum == 1 ){
           dateMap[tempDate] = 3;
        } else if( !curNum ){
          dateMap[tempDate] = 2
        }
        tempDate = util.nextDate( tempDate );
      }
    }
    var dates = [];
    for( let date in dateMap ){
      let d = new Date(date);
      let item = {year: d.getFullYear(), month: d.getMonth()+1, date: d.getDate()};
      switch( dateMap[date] ){
        case 1:
          // item.todoText = "出";
          // item.dotColor = "red"
          item.todoText = [['出', '#FBBF24']];
          break;
        case 2:
        //  item.todoText = "临";
        //  item.dotColor = "green"
          item.todoText = [['临', '#34D399']];
          break;
        default:
          // item.todoText = "临&出";
          item.todoText = [['临', '#34D399'], ['出', '#FBBF24']];
      }
      dates.push( item );
    }
    calendar.setTodos({
      showLabelAlways: true,
      dates
    })
  },
  whenChangeMonth(e) {
    console.log('whenChangeMonth', e.detail)
    let {year, month} = e.detail.next;
    let fromDate = object2Date({year, month:month, date:1})
    let toDate = object2Date({year, month:month, date:31})
    this.setData({fromDate, toDate})
    this.loadData()
  },
  whenChangeWeek(e) {
    console.log('whenChangeWeek', e.detail)
  },
  takeoverTap(e) {
    console.log('takeoverTap', e.detail)
  },
  afterCalendarRender(e) {
    console.log('afterCalendarRender', e)
    // 获取日历组件上的 calendar 对象
    // const calendar = this.selectComponent('#calendar').calendar
    // console.log('afterCalendarRender -> calendar', calendar)
  },
  onSwipe(e) {
    console.log('onSwipe', e)
  },
  showToast(msg) {
    if (!msg || typeof msg !== 'string') return
    wx.showToast({
      title: msg,
      icon: 'none',
      duration: 1500
    })
  },
  onShareAppMessage: function () {
    let {nickname} = this.data.userInfo
    return {
      title: `【${nickname}】向您推荐莅临外出小程序`,
      path: `/pages/rili/index`
    }
  },
  generateRandomDate(type) {
    let random = ~~(Math.random() * 10)
    switch (type) {
      case 'year':
        random = 201 * 10 + ~~(Math.random() * 10)
        break
      case 'month':
        random = (~~(Math.random() * 10) % 9) + 1
        break
      case 'date':
        random = (~~(Math.random() * 100) % 27) + 1
        break
      default:
        break
    }
    return random
  },
  handleAction(e) {
    const { action, disable } = e.currentTarget.dataset
    if (disable) {
      this.showToast('抱歉，还不支持～😂')
    }
    this.setData({
      rst: []
    })
    const calendar = this.selectComponent('#calendar').calendar
    const { year, month } = calendar.getCurrentYM()
    switch (action) {
      case 'config':
        calendar
          .setCalendarConfig({
            showLunar: false,
            theme: 'elegant',
            multi: true
          })
          .then(conf => {
            console.log('设置成功：', conf)
          })
        break
      case 'getConfig':
        const config = calendar.getCalendarConfig()
        this.showToast('请在控制台查看结果')
        console.log('自定义配置: ', config)
        break
      case 'jump': {
        const year = this.generateRandomDate('year')
        const month = this.generateRandomDate('month')
        const date = this.generateRandomDate('date')
        const config = calendar.getCalendarConfig()
        if (config.weekMode) {
          calendar['weekModeJump']({ year, month, date })
        } else {
          calendar[action]({ year, month, date })
        }
        break
      }
      case 'getSelectedDates': {
        const selected = calendar[action]()
        if (!selected || !selected.length)
          return this.showToast('当前未选择任何日期')
        this.showToast('请在控制台查看结果')
        console.log('get selected dates: ', selected)
        const rst = selected.map(item => JSON.stringify(item))
        this.setData({
          rst
        })
        break
      }
      case 'cancelSelectedDates':
        const selected = calendar.getSelectedDates()
        calendar[action](selected)
        break
      case 'setTodos': {
        const dates = [
          {
            year,
            month,
            date: this.generateRandomDate('date'),
            todoText: Math.random() * 10 > 5 ? '领奖日' : ''
          }
        ]
        calendar[action]({
          showLabelAlways: true,
          dates
        })
        console.log('set todo: ', dates)
        break
      }
      case 'deleteTodos': {
        const todos = [...calendar.getTodos()]
        if (todos.length) {
          calendar[action]([todos[0]]).then(() => {
            const _todos = [...calendar.getTodos()]
            setTimeout(() => {
              const rst = _todos.map(item => JSON.stringify(item))
              this.setData(
                {
                  rst
                },
                () => {
                  console.log('delete todo: ', todos[0])
                }
              )
            })
          })
        } else {
          this.showToast('没有待办事项')
        }
        break
      }
      case 'clearTodos':
        const todos = [...calendar.getTodos()]
        if (!todos || !todos.length) {
          return this.showToast('没有待办事项')
        }
        calendar[action]()
        break
      case 'getTodos': {
        const selected = calendar[action]()
        if (!selected || !selected.length)
          return this.showToast('未设置待办事项')
        const rst = selected.map(item => JSON.stringify(item))
        rst.map(item => JSON.stringify(item))
        console.log("rst", rst)
        this.setData({
          rst
        })
        break
      }
      case 'disableDates':
        calendar[action]([
          {
            year,
            month,
            date: this.generateRandomDate('date')
          }
        ])
        break
      case 'enableArea': {
        let sDate = this.generateRandomDate('date')
        let eDate = this.generateRandomDate('date')
        if (sDate > eDate) {
          ;[eDate, sDate] = [sDate, eDate]
        }
        const area = [`${year}-${month}-${sDate}`, `${year}-${month}-${eDate}`]
        calendar[action](area)
        this.setData({
          rstStr: JSON.stringify(area)
        })
        break
      }
      case 'enableDates':
        const dates = [
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`,
          `${year}-${month}-${this.generateRandomDate('date')}`
        ]
        calendar[action](dates)
        this.setData({
          rstStr: JSON.stringify(dates)
        })
        break
      case 'switchView':
        if (!this.week) {
          calendar[action]('week').then(calendarData => {
            console.log('switch success!', calendarData)
          })
          this.week = true
        } else {
          calendar[action]().then(calendarData => {
            console.log('switch success!', calendarData)
          })
          this.week = false
        }
        break
      case 'setSelectedDates':
        const toSet = [
          {
            year,
            month,
            date: this.generateRandomDate('date')
          },
          {
            year,
            month,
            date: this.generateRandomDate('date')
          }
        ]
        calendar[action](toSet)
        break
      case 'getCalendarDates':
        this.showToast('请在控制台查看结果')
        console.log(
          calendar.getCalendarDates({
            lunar: true
          })
        )
        break
      default:
        break
    }
  }
}

Page(conf)