小程序日历实战项目分享

小程序日历实战项目分享

日历数据从后台获取，可以展开收缩。

<view class="container">

  <view class="head_info">
    <view class="userPhoto">
      <!-- <open-data type="userAvatarUrl"></open-data> -->
      <image class="userAvatarUrl" src="{{avatarUrl}}"  mode="widthFix" />
    </view>
    <view class="had_signin_wrap">
      本周已经连续签到 <text class="signin_num">{{clockTotalDays}}</text> 天
    </view>
  </view>

  <!--日历部分-->
  <view class="date_wrap">

  <view class="date_picker_btn_wrap" hidden="{{!allDateTable}}">
    <view class="picker_left_wrap" bindtap="pre_date"><image class="picker_left" src="../../../images/picker-left.png"  mode="widthFix" /></view>

    <picker mode="date" header-text="选择时间" fields="month" value="{{indexTime}}" 
          start="{{startTime}}" 
          end="{{endTime}}" 
          bindchange="selectDataTime">
            <view class="my_flexR"><view class="triangel"></view></view>
            <view class="picker_btn">{{picker_date_str}}</view>
    </picker>
   

    <view class="picker_right_wrap" bindtap="next_date"><image class="picker_right" src="../../../images/picker-right.png"  mode="widthFix" /></view>
  </view>

        <!--完整日历-->
            <view class="table" hidden="{{!allDateTable}}">
              <!-- <view class="tr">
                <view class="th">一</view>
                <view class="th ">二</view>
                <view class="th ">三</view>
                <view class="th ">四</view>
                <view class="th ">五</view>
                <view class="th ">六</view>
                  <view class="th">日</view>
              </view> -->

              <!--最外层对象童工wx:for获取-->
              <block wx:for="{{calendarTR}}" wx:key="">
                <view class="tr">
                  <!--嵌套中的内部对象直接通过wx:for获取-->
                  <view class="td" wx:for="{{item}}"> 
                    <!--已签到日期-->
                    <view class="have_signIn" wx:if="{{item.isSignIn}}"  data-time='{{item.date}}'  bindtap="sign_in">
                      <image class="date_check_icon" src="../../../images/date_check_icon.png"  mode="widthFix" />
                      <text bindtap="toDetails">{{item.dates}}</text>
                    </view>
                    <!--当前日期-->
                    <text class="activeDate" wx:elif="{{item.currentDay}}"  data-time='{{item.date}}'  bindtap="preOrderProcess">签</text>
                    <!--其他日期-->
                    <text wx:else>{{item.dates}}</text>
                  </view>
                </view>
              </block>
             <view bindtap="select_up">
              <image hidden="{{!allDateTable}}"  class="select_down" src="../../../images/select_up.png"  mode="widthFix" />
             </view>
          </view>

            <!--今天所在行-->
            <view class="table" hidden="{{!showTodayRow}}">
                <!-- <view class="tr">
                  <view class="th">一</view>
                  <view class="th ">二</view>
                  <view class="th ">三</view>
                  <view class="th ">四</view>
                  <view class="th ">五</view>
                  <view class="th ">六</view>
                   <view class="th">日</view>
                </view> -->
                <!--今天所在行-->
                <view>
                  <view class="tr">
                    <!--嵌套中的内部对象直接通过wx:for获取-->
                    <view class="td" wx:for="{{todayRowList}}"> 
                      <!--已签到日期-->
                      <view class="have_signIn" wx:if="{{item.isSignIn}}"  data-time='{{item.date}}'  bindtap="sign_in">
                        <image class="date_check_icon" src="../../../images/date_check_icon.png"  mode="widthFix" />
                        <text bindtap="toDetails">{{item.dates}}</text>
                      </view>
                      <!--当前日期-->
                      <text class="activeDate" wx:elif="{{item.currentDay}}"  data-time='{{item.date}}'  bindtap="preOrderProcess">签</text>
                      <!--其他日期-->
                      <text wx:else>{{item.dates}}</text>
                    </view>
                  </view>
                  <view bindtap="select_down">
                    <image hidden="{{!showTodayRow}}" class="select_down" src="../../../images/select_down.png"  mode="widthFix" />
                  </view>
                </view>
    
            </view>
  </view>

  <!--福利部分-->
  <view class="gift_wrap">

    <view class="comlist">
      <image class="left" src="../../../images/gift_icon1.png"  mode="widthFix" />
      <view class="middle">
          <view class="middle_top">每日务工意外保险</view>
          <view class="middle_bottom">签到即可免费领取</view>
      </view>
      
      <block wx:if="{{insuranceState == '1'}}">
        <view class="gift_btn">待解锁</view>
      </block>
      <block wx:elif="{{insuranceState == '2'}}">
        <view class="gift_btn" bindtap="watch_baodan">生效中</view>
      </block>
      <block wx:elif="{{insuranceState == '3'}}">
        <view class="gift_btn" bindtap="overTimeFn">待解锁</view>
      </block>
      <block wx:else>
        <view class="gift_btn">已到期</view>
      </block>
   
    </view>
    <view class="comlist">
      <image class="left" src="../../../images/gift_icon2.png"  mode="widthFix" />
      <view class="middle">
          <view class="middle_top">每日领薪</view>
          <view class="middle_bottom">签到后获取每日领薪权限</view>
      </view>

      <block wx:if="{{getPaidState == '1'}}">
        <view class="gift_btn">待解锁</view>
      </block>
      <block wx:elif="{{getPaidState == '2'}}">
        <view class="gift_btn">待发放</view>
      </block>
      <block wx:elif="{{getPaidState == '3'}}">
        <view class="gift_btn" bindtap="watch_payroll">已到账</view>
      </block>

    </view>
  
  </view>
</view>```

```javascript
var app = getApp();
var utils = require('../../../utils/activity_util');
var request = require('../../../utils/request.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl:wx.getStorageSync('userInfo')?wx.getStorageSync('userInfo').avatarUrl:'',

    calendarTR:[],
    clockDate:utils.getobjDateYM(),//原始格式2020-02
    picker_date_str:utils.getobjDateYM().split('-')[0] + '年' + utils.getobjDateYM().split('-')[1] + '月',//拼接格式

    insuranceState:'',
    getPaidState:'',
    clockTotalDays:'',

    latitude:"",
    longitude:"",
    todayRowList:'',

    allDateTable:false,
    showTodayRow:true,
  },

  /**
   * 选择时间
   * @param {*} e 
   */
  selectDataTime: function(e) {
    console.log('点击确定选择的时间是:',e.detail.value)
    var that = this;
    let picker_str = e.detail.value.split('-')[0] + '年' + e.detail.value.split('-')[1] + '月';
    that.setData({
      clockDate:e.detail.value,//年月格式，2020-02
      picker_date_str:picker_str,
    })
    
    that.calendar();
  },
  /**
   * 上一个日期
   */
  pre_date:function(){
    debugger
  },
  /**
   * 下一个日期
   */
  next_date:function(){
    debugger
  },
    /**
   * 展示日历
   */
  calendar:function(){
    var that = this;
    wx.request({
      url: app.globalData.URL + '/program/signin/getSignInPage.htm',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        ["sprit-program-core-" + wx.getStorageSync("id") + "-token"]: wx.getStorageSync("token")
      },
      data: {
        ruleMgtId: 1650,
        userId: wx.getStorageSync('userId'),
        currentMonth:that.data.clockDate,
      },
      success: function (res) {
        // 成功
        if (res.data.success) {
          that.setData({
            calendarTR:res.data.data.calendarsList,
            insuranceState:res.data.data.insuranceState,//保险状态
            getPaidState:res.data.data.getPaidState,//领薪状态
            clockTotalDays:res.data.data.clockTotalDays,
          })
          that.getTodayLine(res.data.data.calendarsList || "");
        }
        // 失败
        if (!res.data.success) {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }

      }
    })
  },

  /**
   * 获取到日历今天所在行
   */
  getTodayLine:function(calendarsList){
    var that = this;
      if(calendarsList != ''){
        for(var i = 0; i < calendarsList.length; i++){
          let dateRow = calendarsList[i];
          for(var j = 0; j < dateRow.length; j++){
            if(dateRow[j] && dateRow[j].currentDay == true){
              console.log(calendarsList[i]);
              that.setData({
                todayRowList:calendarsList[i],//今天所在行
              })
            }
          }
        }

      }
  },

  /**
   * 日历展开收起
   */
  select_down:function(){
    var that = this;
    that.setData({
      allDateTable:true,
      showTodayRow:false,
    })
  },
  select_up:function(){
    var that = this;
    that.setData({
      allDateTable:false,
      showTodayRow:true,
    })
  },

  /**
   * 每日务工意外保险按钮操作
   * @param {*} options 
   */
  //超过投保时间
  overTimeFn:function(){
    wx.showToast({
      title: '您有保单正在生效中',
      icon: 'none',
      duration: 2000
    })
  },
  //查看已到账页面
  watch_payroll:function(){
    wx.navigateTo({
      url: '../signInWelfare/commission',
    })
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that = this;
    that.calendar();
  },

  /**
   * 务工卡核身预下单
   */
  preOrderProcess:function(){
    var that = this;
    wx.showLoading({  // 显示加载中loading效果 
      title: "加载中",
      mask: true  //开启蒙版遮罩
    });
    wx.request({
      url: app.globalData.URL + 'program/signin/preOrderProcess.htm',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        ["sprit-program-core-" + wx.getStorageSync("id") + "-token"]: wx.getStorageSync("token")
      },
      data: {
        wechatOpenid:wx.getStorageSync('openid'),
      },
      success: function (data) {
        // 成功
        if (data.data.success) {
          let openid = data.data.openid || '';
          let token = data.data.token || '';
          let authenticate_number = data.data.authenticate_number || '';
          let mchid = data.data.mchid || '';
          let sub_mchid = data.data.sub_mchid || '';
          that.authen_with_auth(openid,token,authenticate_number,mchid,sub_mchid);//一键核身
        }
        // 失败
        if (!data.data.success) {
          wx.showToast({
            title: data.data.message,
            icon: 'none',
            duration: 2000
          })
        }

      }
    })
  },

    /**
   * 务工卡一键授权并核身
   */
  authen_with_auth:function(openid,token,authenticate_number,mchid,sub_mchid){
    //隐藏加载界面
    wx.hideLoading();
    var that = this;
    wx.navigateToMiniProgram({
      appId: 'wxd24d9057cd83d47a',
      path: '/pages/card/authen_with_auth?mchid='+mchid+'&sub_mchid='+sub_mchid+'&sub_appid=wx9ffd7688c45b8a30&openid='+openid+'&token='+token+'&authenticate_number='+authenticate_number+' ',
      success(res) {
        // 打开成功
      }
    })
  },


  /**
   * 签到
   * @param {*} options 
   */
  onAuthLocation: function () {
    let that = this
    wx.getSetting({
        success: (res) => {
            // res.authSetting有多种属性，比如res.authSetting['scope.userInfo']表示获取用户头像等信息，详情看官方文档

            // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
            // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
            // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
            // 拒绝授权后再次进入重新授权
            if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
            
                // console.log('authSetting:status:拒绝授权后再次进入重新授权', res.authSetting['scope.userLocation'])
                wx.showModal({
                    title: '',
                    content: '需要获取你的地理位置，请确认授权',
                    success: function (res) {

                        if (res.cancel) {
                            wx.showToast({
                                title: '拒绝授权',
                                icon: 'none'
                            })
                            // setTimeout(() => {
                            //     wx.navigateBack()
                            // }, 1500)
                        } 
                        else if (res.confirm) {
                            wx.openSetting({
                                success: function (dataAu) {
                                    // console.log('dataAu:success', dataAu)
                                    if (dataAu.authSetting["scope.userLocation"] == true) {
                                        //再次授权，调用wx.getLocation的API
                                        that.getLocation(dataAu)
                                    } else {
                                        wx.showToast({
                                            title: '授权失败',
                                            icon: 'none'
                                        })
                                        // setTimeout(() => {
                                        //     wx.navigateBack()
                                        // }, 1500)
                                    }
                                }
                            })
                        }

                    }//success
                })
            }
            // 初始化进入，未授权
            else if (res.authSetting['scope.userLocation'] == undefined) {
                // console.log('authSetting:status:初始化进入，未授权', res.authSetting['scope.userLocation'])
                //调用wx.getLocation的API
                that.getLocation(res)
            }
            // 已授权
            else if (res.authSetting['scope.userLocation']) {
                // console.log('authSetting:status:已授权', res.authSetting['scope.userLocation'])
                //调用wx.getLocation的API
                that.getLocation(res)
            }
        }
    })
},


// 微信获得经纬度
getLocation: function (userLocation) {
    let that = this
    wx.getLocation({
        type: "wgs84",
        success: function (res) {
            // console.log('getLocation:success', res)
            var latitude = res.latitude
            var longitude = res.longitude
            console.log('latitude:' + latitude,'longitude' + longitude);
            that.setData({
                location:latitude+'-'+longitude,
                latitude:latitude,
                longitude:longitude,
            })
            that.getSignInLocation(latitude,longitude);
        },
        fail: function (res) {
            console.log('fail', res.errMsg);
            that.setData({
              latitude:"",
              longitude:"",
            })
            if (res.errMsg === 'getLocation:fail:auth denied') {
                wx.showToast({
                    title: '拒绝授权',
                    icon: 'none'
                })

                return
            }
            if (!userLocation || !userLocation.authSetting['scope.userLocation']) {
                // that.getUserLocation()
            } 
            else if (userLocation.authSetting['scope.userLocation']) {
                wx.showModal({
                    title: '',
                    content: '请在系统设置中打开定位服务',
                    showCancel: false,
                    success: result => {
                        if (result.confirm) {
                            // wx.navigateBack()
                        }
                    }
                })
            }
            else {
                wx.showToast({
                    title: '授权失败',
                    icon: 'none'
                })
       
            }
        }
    })
},
  /**
   * 转换地理位置
   */
  getSignInLocation:function(latitude,longitude){
    var that = this;
    wx.request({
      url: app.globalData.URL + 'program/signin/getSignInLocation.htm',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        ["sprit-program-core-" + wx.getStorageSync("id") + "-token"]: wx.getStorageSync("token")
      },
      data: {
        latWeixin:latitude,//微信纬度 必传
        lngWeixin:longitude,
        latBaiDu:'',//百度纬度 如果获取不到百度经纬度可不传
        lngBaiDu:'',
      },
      success: function (res) {
        // 成功
        if (res.data.success) {
          let address = res.data.data.address ||'';
          let city = res.data.data.city ||'';
          let district = res.data.data.district || '';
          let province = res.data.data.province || '';
          that.insertSignIn(address,city,district,province);
        }
        // 失败
        if (!res.data.success) {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }

      }
    })
  },

  /**
   * 执行签到操作
   */
  insertSignIn:function(address,city,district,province){
    var that = this;
    wx.request({
      url: app.globalData.URL + 'program/signin/insertSignIn.htm',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        ["sprit-program-core-" + wx.getStorageSync("id") + "-token"]: wx.getStorageSync("token")
      },
      data: {
        ruleMgtId: 1650,
        userId: wx.getStorageSync('userId'),
        clockOutAddress:{"address":address,"city":city,"district":district,"latWeixin":that.data.latitude,"lngWeixin":that.data.longitude,"latBaiDu":"","lngBaiDu":"","province":province},
      },
      success: function (res) {
        // 成功
        if (res.data.success) {
          that.calendar();//查询详情
        }
        // 失败
        if (!res.data.success) {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }

      }
    })
  },

  /**
   * 点击已签到日期
   */
  toDetails:function(){
    var that = this;
    wx.request({
      url: app.globalData.URL + 'program/signin/getSignInPageDetail.htm',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        ["sprit-program-core-" + wx.getStorageSync("id") + "-token"]: wx.getStorageSync("token")
      },
      data: {
        ruleMgtId: 1650,
        userId: wx.getStorageSync('userId'),
        currentMonth:that.data.clockDate,
      },
      success: function (res) {
        // 成功
        if (res.data.success) {
          that.setData({
            insuranceState:res.data.data.insuranceState,//保险状态
            getPaidState:res.data.data.getPaidState,//领薪状态
          })
        }
        // 失败
        if (!res.data.success) {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }

      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

```css
.container{
  width: 698rpx;
  margin:0 auto;
  margin-top:30rpx;
}
.head_info{
  display: flex;
  width: 100%;
  padding-top:17rpx;
  padding-bottom:17rpx;
  border-bottom:1px solid rgba(0, 0, 0, 0.1);
  background:#fff;
}
.userPhoto{
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  overflow:hidden;
  margin-left:24rpx;
  position: relative;
}
.userAvatarUrl{
  position: absolute;
  width: 100%;
  height:100%;
  top:0;
  left:0;
}
.had_signin_wrap{
  font-size: 24rpx;
  position: relative;
  top: 40rpx;
  left: 20rpx;
}
.signin_num{
  font-size:32rpx;
  color:#FC663B;
}
.date_wrap{
  width: 100%;
  background:#fff;
}

.gift_wrap{
  width: 100%;
}
.comlist{
  background:#fff;
  display: flex;
  padding:36rpx  24rpx;
  border-radius: 8px;
  margin-top:30rpx;
}
.comlist .left{
  width: 48rpx;
  margin-right:30rpx;
  position: relative;
  top:20rpx;
}
.comlist .middle{
  flex:2;
}
.middle_top{
  font-size:28rpx;
}
.middle_bottom{
  font-size:20rpx;
  color:#999;
  margin-top:12rpx;
}
.gift_btn{
  padding:6rpx 24rpx;
  height:60rpx;
  color:rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 60rpx;
  background: #F1F1F1;
  border-radius: 24px;
}


.dateConWrap .table{
  background:#fff;
}
.table {
  border: 0px solid darkgray;
 }
 .tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 110rpx;
  align-items: center;
  margin-bottom: -7rpx;
 }
 .td {
  width:98rpx;
  height:100rpx;
  line-height: 100rpx;
  justify-content: center;
  text-align: center;
  font-size:28rpx;
  border:1px solid rgba(153, 153, 153, 0.1);
  margin-right: -2rpx;
 }

 .th {
  width: 98rpx;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 100rpx;
  align-items: center;
  /* border:1px solid blue; */
 }

.activeDate{
  display:inline-block;
  width:100%;
  height:100%;
  text-align: center;
  color:#fff;
  background:#FC663B;
  box-shadow: 0px 0px 24px 0px rgba(177,107,107,0.49);
  border-radius: 4px;
  font-size:32rpx;
}

.have_signIn{
  position: relative;
}
.date_check_icon{
  width: 20rpx;
  height:20rpx;
  position: absolute;
  top:5rpx;
  left:5rpx;
}
.date_picker_btn_wrap{
  display: flex;
  font-size:28rpx;
  width: 320rpx;
  margin:0 auto;
  text-align: center;
  line-height: 96rpx;
}
.picker_btn{
  margin:0 40rpx;
}
.picker_left{
  width: 12rpx;
}
.picker_right{
  width: 12rpx;
}
.picker_left_wrap{
  /* border:1px solid blue; */
}
.picker_right_wrap{
  /* border:1px solid blue; */
}

.select_down{
  width: 25rpx;
  height:15rpx;
  padding:50rpx 0;
  position: relative;
  left:50%;
  transform: translateX(-50%);
}