小程序获取当前时间页面swiper滑动切换

小程序获取当前时间页面swiper滑动切换_第1张图片
utils/utils.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

//判断两个时间比较大小
function compareDate(d1, d2) {
  return ((new Date(d1.replace(/-/g, "\/"))) > (new Date(d2.replace(/-/g, "\/"))));
}

//当前时间获取
function getCurrentToday() {
  const date = new Date()
  var year = date.getFullYear();
  var mouths = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
  var day = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
  var hours = date.getHours();
  var Minutes = date.getMinutes();//当前分
  var currentdate = year + "-" + mouths + "-" + day + "\t" + hours + ":" + Minutes;
  return currentdate
}

/**
 * 传入时间后几天
 * param:传入时间:dates:"2018-04-02",later:往后多少天
 */
function dateLater(dates, later) {
  let dateObj = {};
  let show_day = new Array('七', '一', '二', '三', '四', '五', '六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  dateObj.dates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "." + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.newdates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.year = date.getFullYear();
  dateObj.month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
  dateObj.day = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.week = show_day[day];
  return dateObj;
}

module.exports = {
  formatTime: formatTime,
  compareDate: compareDate,
  getCurrentToday: getCurrentToday,
  dateLater: dateLater

}

utils/config.js

var config = {
  host: 'url',//后台接口地址
  getHost() {
    return this.host;
  }
}
module.exports = config;

utils/network.js

//封装一个加载中请求效果
var requestHandler = {
  url: '',
  data: {},
  method: '',
  success: function (res) {
  },
  fail: function () {
  },
  complete: function () {
  }
}

function request(requestHandler) {
  var data = requestHandler.data;
  var url = requestHandler.url;
  var method = requestHandler.method;
  wx.showLoading({
    title: '加载中',
  })
  wx.request({
    url: url,
    data: data,
    method: method,
    success: function (res) {
      requestHandler.success(res)
      setTimeout( () =>{
        wx.hideLoading()
      }, 500)
    },
    fail: function () {
      wx.hideLoading();
      requestHandler.fail();
    },
    complete: function () {

    }
  })
}
module.exports = {
  request: request
}

pages/index.wxml


 
      
      
            
            
              今天
              {{item.week}}
              
              {{item.dates}}                 
              
              
            
      
    

     
    
      
        
          
          暂无排课
          
敬请期待
{{item.area}} 团课 {{item.course_name}}
{{item}}
{{item.date}} {{item.between_time}}

pages/index.wxss

/* pages/team/team.wxss */
.title{background: #313131;padding-left: 3%;line-height: 46rpx;}
.content{width: 92%;margin: 20rpx auto;position: relative;}
.f_content{display: flex;background:#313131;padding: 10rpx 0;align-items: center;
border-radius: 0 0 10rpx 10rpx;}
.content image{height: 130rpx;width: 130rpx;border-radius: 50%;}
.f_content .left{width: 30%;text-align: center;}
.f_content .right{width: 70%;position: relative}
.c_tit{height: 56rpx;line-height: 56rpx;background: #000;padding-left: 3%;border-radius:10rpx 10rpx 0 0;}
.color_t{color:#1fa39c;}
.content .fixation{width:94rpx;height: 88rpx;position:absolute;top: 0;right: 0;border-radius:0;}
.right .btn{background:none;color:#1fa39c;position: absolute;top:20rpx;right:10rpx;
border: 1px solid #1fa39c;width: 90rpx;height: 58rpx;padding: 0;}



.container_date{display: flex;justify-content: space-around;margin: 10rpx auto;border-bottom:1px solid #323232;}
.item{font-size:12px;text-align: center;width:14.2%;height:70rpx;}
.hide{display:none;}
.show{display:inline-block;}
.core{margin: 0 auto;position: relative;}
.img_xian{
  height: 69rpx;
  width: 69rpx;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right: 0;
  margin: auto;
  opacity: 0
}
.img_xian.active{opacity: 1}

pages/index.js

// pages/team/team.js
var util = require('../../utils/util.js');
var config = require("../../utils/config.js");
var network = require("../../utils/network.js");
Page({

  /**
   * 页面的初始数据
   */
  data: {
    courseName:'',
    courseId:'',
    tuanCourse:[],
    year:'',
    mon:'',
    day:'',
    dateList:[],
    showIndex: 0,
    winHeight: "",//窗口高度
    url:getApp().globalData.url,
    isShow:false,
    shopid:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    if(options.shop_id){
      this.setData({
        shopid:options.shop_id
      })
    }
    wx.getSystemInfo({
      success: (res) => {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 180;
        console.log(calc)
        this.setData({
          winHeight: calc
        });
      }
    });
    let dateList = this.getDates(7);
    let year = dateList[0].year;
    let mon = dateList[0].month;
    let day = dateList[0].day;
    const date = new Date()
    this.setData({
      courseName:options.name,
      courseId:options.id,
      dateList: dateList,
      year: year,
      mon: mon,
      day: day
    })
    this.getData()
  },
  //获取当前时间
  getCurrentMonthFirst: function () {
    var date = new Date();
    var todate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
    return todate;
  },
  bindSelect: function (e) {
    //console.log(e)//选择结果值
    //console.log(e.currentTarget.dataset.index)
    this.setData({
      isShow:false,
      showIndex: e.currentTarget.dataset.index,
      day: this.data.dateList[e.currentTarget.dataset.index].day,
      mon: this.data.dateList[e.currentTarget.dataset.index].month,
      year: this.data.dateList[e.currentTarget.dataset.index].year,
    })
    this.getData();
  },
  getDates: function (days, todate = this.getCurrentMonthFirst()) {
    var dateArry = [];
    for (var i = 0; i < days; i++) {
      var dateObj = util.dateLater(todate, i);
      dateArry.push(dateObj)
    }
    return dateArry;
  },
  getData:function(){
    network.request({
      url: config.host + 'api_v1/course', //课程
      data: {
        cate_id: this.data.courseId,
        course_name: this.data.courseName,
        year:this.data.year,
        mon:this.data.mon,
        day:this.data.day,
        shop_id:this.data.shopid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        // console.log(res.data.data)
        this.setData({
          tuanCourse: res.data.data,
          isShow: true
        })
       // console.log(this.data.tuanCourse[0].val)
      }
    })
  },
  switchTab: function (e) {//页面滑动出发事件
    //console.log(e)
    this.setData({
      isShow:false,
      showIndex: e.detail.current,
      day: this.data.dateList[e.detail.current].day,
      mon: this.data.dateList[e.detail.current].month,
      year: this.data.dateList[e.detail.current].year,
    })
    this.getData();
  }

})

你可能感兴趣的:(小程序,tab滑动)