php/www/webapp/o2o/js/panel/dataPicker.js

define(['$', 'template', 'product'], function ($, template, product) {
  var cachePageData = {};
  return {
    body: '',
    init: function (pageData, dtd) {
      var $view = this;
      var $doc = $(document);
      $.newTouch('.day', function(event) {
        event.preventDefault();
        // $.each(cachePageData.offDay, function(index, val) {
        //   if ($(this).attr('data-value') == val) {
        //     var i = $(this).index();
        //     $('.picker-time').find('ul').eq(i).find('li').addClass('off');
        //   }
        // });
        $(this).addClass('on').siblings().removeClass('on');
        $('.picker-time', $view).find('li').removeClass('on');
        $('.picker-time', $view)
          .find('ul').eq($(this).index()).show()
          .siblings().hide();
      }, $view);

      $.newTouch('.j-book-time', function(event) {
        event.preventDefault();
        if ($(this).hasClass('off')) return;
        var $day = $('.picker-day-box',$view).find('.row').find('.on');
        var dayText = $day.text();
        var dayVal = $day.data('value');
        var time = $(this).data('value');
        $(this).addClass('on').siblings().removeClass('on');
        $view.trigger('spa:closepanel');
        // if ($(this).hasClass('current')) {
        //   precedence = 1;
        //   $doc.trigger('spa:openpanel', ['simpleAlert', {
        //     title: '温馨提示',
        //     message: '您选择了加急服务，需要额外支付' + product.precedence + '元服务费。'
        //   }]);
        // } else {
        //   precedence = 0;
        // }
        var values = [],
          texts = [];
        values.push(dayVal);
        values.push(time);
        texts.push(dayText);
        texts.push(time);
        var callback = pageData.pushData.callback;
        if (callback && $.isFunction(callback.onSelect)) {
          callback.onSelect(values, texts);
        }

      }, $view);

      dtd.resolve();
    },
    beforeopen: function (pageData, dtd) {
      var $view = this;
      var pushData = pageData.pushData;
      var columns = pushData['columns'];
      var selected = pushData['selected'];
      // var type = pushData['type'];
      // var offDay = pushData['offDay'];
      // cachePageData.offDay = offDay;
      $('.spa-page-bg', $view).css({
        opacity: 0
      }).transition({
        opacity: 0.6
      });
      var tpl = template('common/dataPicker', {
        columns: columns
      });
      $view.find('.spa-page-body').html(tpl);

      var $pickerDay = $('.picker-day', $view);
      var $pickerTime = $('.picker-time', $view);
      var $li = $pickerTime.find('li').eq(0);
      var index = $pickerDay.find('.on').index();
      // $pickerDay.find('ul').eq(index).removeClass('hide').siblings().addClass('hide');
      $pickerTime.find('ul').eq(index).removeClass('hide').siblings().addClass('hide');

      // 18点之后 或者半点之后 顺延一小时
      if ($li.data('now') >= 18 || $li.data('time') > 10 || $pickerTime.find('ul').eq(0).find('li').length == 0 ) {
        $li.hide();
      };

      if ($pickerTime.find('ul').eq(0).find('li').length <1) {
        $pickerTime.find('ul').eq(0).addClass('hide');
        $pickerTime.find('ul').eq(1).removeClass('hide');
        $pickerDay.find('li').eq(1).addClass('on').siblings().removeClass('on');
        var restDay = $pickerDay.find('li').eq(1).attr('data-value');
        if (restDay == '2016-01-01') {
          $pickerDay.find('li').eq(2).addClass('on').siblings().removeClass('on');
          $pickerTime.find('ul').eq(2).removeClass('hide').siblings().addClass('hide');
        }
      }

      // 九点前 九点不能预约
      if ($li.data('now') < 9 ) {
        $li.hide();
      }

      // if (type == 6) {
      //   if ($li.data('now') <= 19) {
      //     $pickerDay.find('li').eq(0).addClass('hide').removeClass('on');
      //     $pickerDay.find('li').eq(1).addClass('on');
      //     $pickerTime.find('ul').eq(0).addClass('hide');
      //     $pickerTime.find('ul').eq(1).removeClass('hide');
      //   } else {
      //     $pickerDay.find('li').eq(0).addClass('hide').removeClass('on');
      //     $pickerDay.find('li').eq(1).addClass('hide').removeClass('on');
      //     $pickerDay.find('li').eq(2).addClass('on');
      //     $pickerTime.find('ul').eq(0).addClass('hide');
      //     $pickerTime.find('ul').eq(1).addClass('hide');
      //     $pickerTime.find('ul').eq(2).removeClass('hide');
      //   }
      // }

      // $('.picker-day').find('li').each(function(index, el) {
      //   $.each(cachePageData.offDay, function(i, v) {
      //     if (v == $(el).attr('data-value') ) {
      //       $('.picker-time').find('ul').eq(index).find('li').addClass('off');
      //     };
      //   });
      // });

      if ($pickerDay.find('li').eq(0).attr('data-value') == '2016-01-01') {
        $('.picker-time').find('ul').eq(0).find('li').addClass('off');
      }

      var myScroll;

      (function loaded () {
        myScroll = new IScroll('.picker-day', { scrollX: true, scrollY: false, mouseWheel: true });
      })();

      if (selected) { // 如果选择过日期 修正日期位置
        var days = (new Date(selected) - new Date(columns['columnDay'][0]['value'])) / 86400000;
        var viewW = document.body.clientWidth;
        var l = parseInt(viewW / 80);
        if (days >= l) { // 选择日期不在 viewport 内
          myScroll.scrollToElement($('.picker-day-box', $view).find('.day').eq(days)[0]);
          $('.picker-day-box', $view)
            .find('.day').eq(days).addClass('on')
            .siblings().removeClass('on');
        }
        // if (type == 6) {
        //   $('.picker-time', $view)
        //     .find('ul').eq(days).removeClass('hide')
        //     .siblings().addClass('hide');
        //   $('.picker-day-box', $view)
        //     .find('li').eq(days).addClass('on')
        //     .siblings().removeClass('on');
        // }
      } else {
        if ($li.data('now') >= 18) { // 时间超过 18 点， 修正显示第二天
          var restDay = $pickerDay.find('li').eq(1).attr('data-value');
          if (restDay == '2016-01-01') {
            $pickerDay.find('li').eq(2).addClass('on').siblings().removeClass('on');
            $pickerTime.find('ul').eq(2).removeClass('hide').siblings().addClass('hide');
          } else {
            $pickerDay.find('li').eq(1).addClass('on').siblings().removeClass('on');
            $pickerTime.find('ul').eq(1).removeClass('hide').siblings().addClass('hide');
          }
        }
      }

      dtd.resolve();
    },
    beforeclose: function (panelData, dtd) {
      var $view = this;

      $('.spa-page-bg', $view).transition({
        opacity: 0
      });

      dtd.resolve();
    }
  }
})