小程序手写日历

https://segmentfault.com/a/1190000013502494

不需要调接口，想要渲染几个月的数据，手动传入即可

根据思否 Peggy7   这篇文章改了一下。

  <view class="freepop_body counter-warp">

    <view class="tac bg_ffffff">

      <view class="border_bot padtb20 padlr30 tac" v-if="canlendar_data&&canlendar_data.length>0">

        <van-icon name="arrow-left" size="20" class="vam" @click="goPrevMonth"/>

        <view class="inblock fz28 vam" style="margin: 0 50rpx">{{canlendar_data[cur].year}}年{{canlendar_data[cur].month}}月闭仔并

        <van-icon name="arrow" size="20" class="vam" @click="goNextMonth" />

      <view class="week fz28 padtb20 border_bot" id="week">

        <view :class="[idx===0||idx===6 ? 'relax':'','week-item']" v-for="(item,idx) inweek_list" :key="idx">{{item}}

      <view class="month-block fz28"戚侍 v-for="(canlendar_item,index) incanlendar_data" :key="index">

        <block v-if="index===cur">轿迹

          <view class="month-content">

            <view :class="[item.fullDate>=nowDate&&item.fullDate<=maxDate&&item.available? '':'gray','month-day',checkDate===item.fullDate?'startActive':'']" @click="chooseDate" :data-available="item.fullDate>=nowDate&&item.fullDate<=maxDate&&item.available" :data-fulldate="item.fullDate" v-for="(item,dd) in canlendar_item.allDays" :key="item.fullDate">

              <view class="isfull">

                {{item.fullDate>=nowDate &&item.fullDate<=maxDate &&!item.available?'满':''}}

<block v-if="checkDate===item.fullDate">

                  {{checkDate===item.fullDate ? '已选' : ''}}

              {{item.day?item.day:''}}

    <view style="padding: 40rpx 32rpx 0 32rpx">

      <text class="fz26">{{rule}}

    <view class="fixedBar bg_f9f9f9" style="padding: 20rpx 50rpx">

      <button class="globButton" style="border-radius: 10rpx" :disabled="disable" @click="submitFree">提 交

  import {imgObj}from '@/utils/imgs'

  import httpsfrom '@/utils/common'

  const {get,throttle}=https

  let hotel_id='',timer=null,cur_year='',cur_month='',cur_day='',arr=[]

export default {

data () {

return {

imgObj:imgObj,

      rule:'',

      disable:true,//按钮是否可点击

      week_list: ['日','一','二','三','四','五','六'],

      checkDate:'',//选择的日期

      cur:0,//第几个月份

      nowDate:'',//今天

      maxDate:'',//最大日期

      canlendar_data:[]

}

},

  onLoad(options){

hotel_id=options.hotelId

    // let {spa_date}=this.$store.state

// this.checkDate=spa_date.date[0]+'-'+spa_date.date[1]+'-'+spa_date.date[2]

    this.getDate_()

    const date =new Date()

    cur_year = date.getFullYear()

    cur_month = date.getMonth() +1

    cur_day = date.getDate()

    let month = cur_month.toString().length ===1 ?`0${cur_month}` : cur_month

    let day = cur_day.toString().length ===1 ?`0${cur_day}` : cur_day

    let nowDate =`${cur_year}-${month}-${day}`

    this.nowDate=nowDate

  },

  onUnload(){

//this.reset()

    clearTimeout(timer)

  },

  methods: {

reset(){

this.rule=''

      this.checkDate=''

    },

    goPrevMonth(){

if(this.cur==0){

return false

      }else{

this.cur--

}

},

    goNextMonth(){

if(this.cur==(this.canlendar_data.length-1)){

return false

      }else{

this.cur++

}

},

    chooseDate(e) {

const available = e.currentTarget.dataset.available

      const fullDate = e.currentTarget.dataset.fulldate

      if(!available) {

return false

      }else{

this.checkDate=fullDate

      }

},

    // chooseTheDate(data,index){

//  this.theCheck=data

//  this.theCheckIndex=index

//  this.disable=false

// },

    async getDate_() {

const loginResult =await get('api_v2/free/reservation',{

hotel_id:hotel_id

})

if (loginResult.code==200) {

let data=loginResult.data

        let newBrr=[]

        data.options.map((n,index)=>{

let tomo =new Date()

          tomo.setTime(tomo.getTime() + index *24 *60 *60 *1000)//1天 以后

          let tomoYear=tomo.getFullYear(),tomoMonth=tomo.getMonth() +1,tomoDate=tomo.getDate()

          tomoMonth=tomoMonth<10?'0'+tomoMonth:tomoMonth

          tomoDate=tomoDate<10?'0'+tomoDate:tomoDate

          newBrr.push({

val:tomoYear+'-'+tomoMonth+'-'+tomoDate,

            flag:n

})

})

this.maxDate=newBrr[newBrr.length-1].val

        arr=newBrr

        this.fillCalendar(6)

        this.rule=data.rule.replace(/\\n/g,"\n")

        this.disable=false

      }

},

    submitFree:throttle(async function() {

wx.showLoading({

title:'',

        mask:true

      })

let {checkDate}=this

      let that=this

      if(checkDate==''){

wx.showToast({

title:'请选择预约日期',

          icon:'none',

          duration:2000

        })

return false

      }

const loginResult =await get('api_v2/free/submit',{

hotel_id:hotel_id,

        estimated_at:checkDate

})

if (loginResult.code==200) {

wx.hideLoading()

        let data=loginResult.data

        let orderid=data.order_id

        that.goOrderdetail(orderid)

        that.$fire.fire('alreadyFree')

      }

}),

    goBack(){

wx.navigateBack({

delta:1

      })

},

    goOrderdetail:throttle(function(id) {

wx.redirectTo({

url:'/pages/orderdetailspa/index?orderId='+id

})

}),

    // 获取每月总天数

    getAllDaysOfMonth(year,month) {

return new Date(year,month,0).getDate()

    },

    // 获取每月第一天是星期几

    getFirstDayOfMonth(year,month) {

return new Date(year, month -1, 1).getDay()

    },

    // 计算本月前空了几格

    getEmptyGrids(year,month) {

// FirstDayOfMonth代表本月的第一天是星期几

      const FirstDayOfMonth =this.getFirstDayOfMonth(year, month)

      let emptyGrids = []

      // 有空格的情况

      if (FirstDayOfMonth >0) {

for (let i =0i <FirstDayOfMonthi++) {

emptyGrids.push({

'num':'',

            'fullDate':'x'  //x是我自己定义的一个值，代表没有日期

          })

        }

// 将空格放入数组

        return emptyGrids

      }else{

// 否则返回一个新数组

        return []

      }

},

    // 计算本月日历

    getDaysOfThisMonth(year,month) {

let days = []

      const AllDaysOfMonth =this.getAllDaysOfMonth(year, month)

      let fullMonth = month.toString().length ===1 ?`0${month}`:month

      for (let i =0i <AllDaysOfMonthi++) {

let day = i+1, fullDay = day,fullDate=''

        fullDay = fullDay.toString().length ===1 ?`0${day}` : fullDay

        fullDate=`${year}-${fullMonth}-${fullDay}`

        let obj={

day,

          fullDay,

          fullDate,

          'available':true

        }

for(let j=0j

if(fullDate==arr[j].val){

obj.available=arr[j].flag

          }

}

days.push(obj)

      }

// 返回每个月的具体日期

      return days

    },

    // 循环渲染日历

// 从本月开始渲染，n代表包括本月开始连续渲染几个月

    fillCalendar(n) {

let year = cur_year, month = cur_month, fullMonth, canlendar_data = []

      // 计算年月以及具体日历

      for (let i = cur_monthi <cur_month + ni++) {

let EmptyGrids =this.getEmptyGrids(year, month)

        let DaysOfThisMonth =this.getDaysOfThisMonth(year, month)

        // 把空格和具体日历合为一个数组

        let allDays = [...EmptyGrids, ...DaysOfThisMonth]

        // 对年份和月份的计算做一些判断

        if (month >12) {

year++

          month =1

          fullMonth ='01'

          canlendar_data.push({

year,

            month,

            fullMonth,

            allDays })

          month++

        }else{

fullMonth = month.toString().length ===1 ?`0${month}` : month

          canlendar_data.push({

year,

            month,

            fullMonth,

            allDays })

          month++

        }

}

this.canlendar_data=canlendar_data

    },

  }

}

<style lang="less">

  @import "../../../styles/freecalendar.less"

默认情况下，小程序官方提供的异步API都是基于回调函数实现的，这样就容易造成回调地狱的问题，代码的可读性、维护性差。API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于 Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。实现API Promise化主要依赖于miniprogram-api-promise这个第三方的州戚 npm 包。首先需要确认已经正确安装了node，使用的开发工具为微信官方的微伍谨信开发者工具。

在项目文件夹下对项目进行初始化，执行npm init -y 此时项目文件夹下会创建package.json文件。 执行npm i --save miniprogram-api-promise安装第三方包。此时会在项目根目录下创建node_modules文件夹。 选择  工具-->构建npm  等待构建完成点击确定，此时会创建miniprogram_npm文件夹。

在入口文件app.js中按需引入。

import {promisifyAll} from "miniprogram-api-promise"

const wxp=wx.p={}

promisifyAll(wx,wxp)

然后就可以通过wx.p来调用promise化的api。举个例子在test.js文件中

async getTestData(){

const {data:res}=await wx.p.request({methods:'册橘陵GET',url: 'https://xxx.xxx.xx', })

---