Skip to content

Y
yanshouyi-Minipro
Commit 8c72da9d authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

date range

parent 62781dd9
Pipeline #446 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 1346 additions and 2 deletions
      components/miku-calendar/mikuCalendar.vue 0 → 100644
      View file @ 8c72da9d
      <template>
      <view class="calendar-area" :style="{background:calendarBg,borderRadius:calendarBorderRadius}">
      <!-- 自定义日历头部 -->
      <view class="calendar-head flex space-between align-items">
      <!-- 跳转上月的箭头 -->
      <view v-if="showArrow === true"
      class="flex align-items calendar-arrow"
      :style="{height: arrowHeight + 'px'}"
      @click="jumpToLastMonth">
      <view :style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}" :class="'arrow-style arrow-left-transform'"></view>
      </view>
      <!-- 跳转上月的文字 -->
      <view v-else @click="jumpToLastMonth" class="pre-month" :style="{color: themeColor}">上月</view>
      <!-- 日历头部显示当前展示月份 -->
      <view :style="{color: themeColor}">{{new Date(benchmark).getFullYear()}}年{{ new Date(benchmark).getMonth() + 1}}月</view>
      <!-- 跳转下月的箭头 -->
      <view v-if="showArrow === true"
      class="flex align-items calendar-arrow"
      :style="{height: arrowHeight + 'px'}"
      @click="jumpToNextMonth">
      <view :style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}" :class="'arrow-style arrow-right-transform'"></view>
      </view>
      <!-- 跳转下月的文字 -->
      <view v-else @click="jumpToNextMonth" class="next-month" :style="{color: themeColor}">下月</view>
      </view>
      <!-- 自定义日历 周一...周日 抬头 -->
      <view class="flex flex-wrap">
      <view v-for="(i,index) in weekText" :key="index" class="flex-class" :style="{width: 100/7 +'%',height:gridHeight+'px'}">
      <view :style="{color: themeColor}">{{ i }}</view>
      </view>
      </view>
      <!-- 自定义日历日期格子 模式单选 -->
      <view class="flex flex-wrap" v-if="mode === 'date'" style="padding-bottom: 10px">
      <swiper :current="swiperCurrent" @change="swiperChange" class="swiper" :style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false" :autoplay="false" :duration="500">
      <swiper-item style="width: 100%">
      <view style="width: 100%" class="flex flex-wrap">
      <view v-for="(item,index) in month0" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
      <!-- 日期格子 模式单选 符合当月的格子 -->
      <view v-if="judgeShowType(0,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
      <!-- judge(day) === true 选中单个日期 -->
      <view class="flex-class1 flex-wrap relative"
      :style="{ width:'100%', height:gridHeight+'px' }"
      v-if="judge(item.date)"
      @click="clickDay(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
      </view>
      <!-- judge(day) === false 没选中的日期 -->
      <view :style="{ width:'100%',height:gridHeight + 'px'}"
      class="flex-class1 flex-wrap day-normal-dark relative"
      v-else
      @click="clickDay(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
      </view>
      <!-- -->
      </view>
      <!-- 日期格子 模式单选 不符合当月的格子 -->
      <view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
      <view :style="{width:'100%',height:gridHeight+'px'}"
      class="flex-class1 day-normal fontColor-normal relative"
      @click="clickDayNotThisMonth(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
      </view>
      </view>
      </view>
      </view>
      </swiper-item>
      <swiper-item>
      <view style="width: 100%" class="flex flex-wrap">
      <view v-for="(item,index) in month1" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
      <!-- 日期格子 模式单选 符合当月的格子 -->
      <view v-if="judgeShowType(1,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
      <!-- judge(day) === true 选中单个日期 -->
      <view class="flex-class1 flex-wrap relative"
      :style="{ width:'100%', height:gridHeight+'px' }"
      v-if="judge(item.date)"
      @click="clickDay(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
      {{ new Date(item.date).getDate()}}
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
      </view>
      <!-- judge(day) === false 没选中的日期 -->
      <view :style="{ width:'100%',height:gridHeight + 'px'}"
      class="flex-class1 flex-wrap day-normal-dark relative"
      v-else
      @click="clickDay(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
      {{ new Date(item.date).getDate()}}
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
      </view>
      <!-- -->
      </view>
      <!-- 日期格子 模式单选 不符合当月的格子 -->
      <view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
      <view :style="{width:'100%',height:gridHeight+'px'}"
      class="flex-class1 day-normal fontColor-normal relative"
      @click="clickDayNotThisMonth(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">
      {{ new Date(item.date).getDate()}}
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
      </view>
      </view>
      </view>
      </view>
      </swiper-item>
      <swiper-item>
      <view style="width: 100%" class="flex flex-wrap">
      <view v-for="(item,index) in month2" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
      <!-- 日期格子 模式单选 符合当月的格子 -->
      <view v-if="judgeShowType(2,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
      <!-- judge(day) === true 选中单个日期 -->
      <view class="flex-class1 flex-wrap relative"
      :style="{ width:'100%', height:gridHeight+'px' }"
      v-if="judge(item.date)"
      @click="clickDay(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
      {{ new Date(item.date).getDate()}}
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
      </view>
      <!-- judge(day) === false 没选中的日期 -->
      <view :style="{ width:'100%',height:gridHeight + 'px'}"
      class="flex-class1 flex-wrap day-normal-dark relative"
      v-else
      @click="clickDay(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
      {{ new Date(item.date).getDate()}}
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
      </view>
      <!-- -->
      </view>
      <!-- 日期格子 模式单选 不符合当月的格子 -->
      <view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
      <view :style="{width:'100%',height:gridHeight+'px'}"
      class="flex-class1 day-normal fontColor-normal relative"
      @click="clickDayNotThisMonth(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
      </view>
      </view>
      </view>
      </view>
      </swiper-item>
      </swiper>
      </view>
      <!-- 自定义日历日期格子 模式时间范围 -->
      <view class="flex flex-wrap" v-if="mode === 'dateRange'" style="padding-bottom: 10px">
      <swiper :current="swiperCurrent" @change="swiperChange" class="swiper" :style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false" :autoplay="false" :duration="500">
      <swiper-item style="width: 100%">
      <view style="width: 100%" class="flex flex-wrap">
      <view v-for="(item,index) in month0" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
      <!-- 本月的展示日期 -->
      <view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(0,item.date) " style="width: 100%">
      <!-- judge(day) === 1 选中日期范围开头 已选结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height: gridHeight+'px',
      background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-if="judge(item.date) === 1"
      @click="clickDay(item.date)"
      >
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      开始
      </view>
      </view>
      <!-- judge(day) === 3 选中日期范围中间区域-->
      <view class="flex-class"
      :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
      background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
      v-else-if="judge(item.date) === 3"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
      </view>
      <!-- judge(day) === 2 选中日期范围结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height: gridHeight+'px',
      background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 2"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      结束
      </view>
      </view>
      <!-- judge(day) === 5 选中日期范围开头 未选结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 5"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      开始
      </view>
      </view>
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 6"
      @click="clickDay(item.date)">
      <view class="grid-text" style="display: flex;align-items: center;justify-content: center">
      {{ new Date(item.date).getDate()}}
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginLeft:'10rpx'}">{{ item.info }}</view>
      </view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      开始/结束
      </view>
      </view>
      <view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position: 'relative' }"
      class="flex-class day-normal-dark"
      v-else
      @click="clickDay(item.date)"
      >
      <view class="flex-class">
      <view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
      {{ new Date(item.date).getDate()}}
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop: '-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
      </view>
      </view>
      <!-- 它月的展示日期 -->
      <view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
      <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
      :class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
      @click="clickDayNotThisMonth(item.date)"
      >
      {{ new Date(item.date).getDate()}}
      </view>
      <view class="bottom-dots absolute " v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop: '-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: 'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
      </view>
      </view>
      </view>
      </swiper-item>
      <swiper-item style="width: 100%">
      <view style="width: 100%" class="flex flex-wrap">
      <view v-for="(item,index) in month1" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
      <!-- 本月的展示日期 -->
      <view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(1,item.date)" style="width: 100%">
      <!-- judge(day) === 1 选中日期范围开头 已选结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height: gridHeight+'px',
      background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-if="judge(item.date) === 1"
      @click="clickDay(item.date)"
      >
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      开始
      </view>
      </view>
      <!-- judge(day) === 3 选中日期范围中间区域-->
      <view class="flex-class"
      :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
      background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
      v-else-if="judge(item.date) === 3"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
      </view>
      <!-- judge(day) === 2 选中日期范围结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height: gridHeight+'px',
      background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 2"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      结束
      </view>
      </view>
      <!-- judge(day) === 5 选中日期范围开头 未选结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 5"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      开始
      </view>
      </view>
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 6"
      @click="clickDay(item.date)">
      <view class="grid-text" style="display: flex;align-items: center;justify-content: center">{{ new Date(item.date).getDate()}}
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginLeft:'10rpx'}">{{ item.info }}</view>
      </view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      开始/结束
      </view>
      </view>
      <view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position:'relative' }"
      class="flex-class day-normal-dark"
      v-else
      @click="clickDay(item.date)"
      >
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
      </view>
      </view>
      <!-- 它月的展示日期 -->
      <view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
      <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
      :class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
      @click="clickDayNotThisMonth(item.date)"
      >
      {{ new Date(item.date).getDate()}}
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop:'-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: 'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
      </view>
      <!-- <view v-else :style="{fontSize: fontSize +'px'}" :class="'flex-class '" style="width: 100%">
      <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
      :class="judge(item.date) === 3? 'flex-class day-normal fontColor bg':'flex-class day-normal fontColor-normal'"
      @click="clickDayNotThisMonth(item.date)"
      >
      {{ new Date(day).getDate()}}
      </view>
      </view>-->
      </view>
      </view>
      </swiper-item>
      <swiper-item style="width: 100%">
      <view style="width: 100%" class="flex flex-wrap">
      <view v-for="(item,index) in month2" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
      <!-- 本月的展示日期 -->
      <view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(2,item.date)" style="width: 100%">
      <!-- judge(day) === 1 选中日期范围开头 已选结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height: gridHeight+'px',
      background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-if="judge(item.date) === 1"
      @click="clickDay(item.date)"
      >
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      开始
      </view>
      </view>
      <!-- judge(day) === 3 选中日期范围中间区域-->
      <view class="flex-class"
      :style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
      background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
      v-else-if="judge(item.date) === 3"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
      </view>
      <!-- judge(day) === 2 选中日期范围结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height: gridHeight+'px',
      background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 2"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      结束
      </view>
      </view>
      <!-- judge(day) === 5 选中日期范围开头 未选结尾-->
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 5"
      @click="clickDay(item.date)">
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
      开始
      </view>
      </view>
      <view class="flex-class flex-wrap relative"
      :style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
      v-else-if="judge(item.date) === 6"
      @click="clickDay(item.date)">
      <view class="grid-text" style="display: flex;align-items: center;justify-content: center">
      {{ new Date(item.date).getDate()}}
      <view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginLeft:'10rpx'}">{{ item.info }}</view></view>
      <view class="start-text absolute">
      <view class="bottom-dots-else" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 2px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
      </view>
      </view>
      开始/结束
      </view>
      </view>
      <view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position:'relative' }"
      class="flex-class day-normal-dark"
      v-else
      @click="clickDay(item.date)"
      >
      <view class="grid-text">{{ new Date(item.date).getDate()}}</view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
      </view>
      </view>
      <!-- 它月的展示日期 -->
      <view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
      <view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
      :class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
      @click="clickDayNotThisMonth(item.date)"
      >
      {{ new Date(item.date).getDate()}}
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='dot'">
      <view style="width: 100%;padding-top: 0px" class="flex-class1">
      <view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop:'-10rpx'}"></view>
      </view>
      </view>
      <view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: 'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
      </view>
      </view>
      </view>
      </swiper-item>
      </swiper>
      </view>
      </view>
      </template>
      <script>
      export default {
      name: "customCalendar",
      props:{
      date:{ // 父组件传值 选中的单个日期
      type: Number,
      default: null
      },
      dateRange:{ // 父组件传值 选中的日期范围数组
      type:Array,
      default: function () {
      return [];
      }
      },
      dateRangeMax:{ // 连选天数最大值
      type: Number,
      default: null
      },
      calendarBg:{ // 日历组件整体背景色，默认白色
      type:String,
      default:'#fff'
      },
      calendarBorderRadius:{
      type:String,
      default:'20rpx'
      },
      showArrow:{ // 是否展示上下月的跳转箭头,false时展示文字
      type:Boolean,
      default:true
      },
      arrowSize:{ // 上下月跳转箭头的尺寸大小
      type: Number,
      default: 8
      },
      arrowColor:{ // 上下月跳转箭头的颜色
      type:String,
      default:'#3a3a3a'
      },
      arrowHeight:{
      type: Number,
      default: 25
      },
      gridHeight:{ // 日期格子高度
      type: Number,
      default: 42
      },
      themeColor:{
      type: String,
      default:'rgb(100,124,203)'
      },
      dayWidth:{ // 选中日期的圆圈宽高
      type: Number,
      default: 30
      },
      dayBg:{ // 选中日期的圆背景色
      type: String,
      default: '#6161F9'
      },
      dayColor:{ // 选中日期的圆文字颜色
      type: String,
      default: '#fff'
      },
      fontSize:{ // 日期格子文字的大小
      type: Number,
      default: 13.5
      },
      mode:{
      type:String,
      default:'date'
      },
      selected:{
      type:Array,
      default: function () {
      return [];
      }
      }
      },
      data(){
      return{
      benchmark: new Date().getTime(), // 基准点 时间戳
      sonDate: new Date().getTime(), // 选中单个日期
      sonDateRange:[], // 选中日期范围
      dotsList:[], // 打点数组
      month: [], // 以基准点调整的月份日历展示数组（增加打点）
      month0: [], // 以基准点调整的月份日历展示数组（增加打点）
      month1: [], // 以基准点调整的月份日历展示数组（增加打点）
      month2: [], // 以基准点调整的月份日历展示数组（增加打点）
      // weekText: ['一','二','三','四','五','六','日'], // 周抬头
      weekText: ['一','二','三','四','五','六','日'], // 周抬头
      swiperCurrent:1,
      }
      },
      watch:{
      date:{ // 父组件绑定的单个日历值传给sonDate
      handler(val){
      // console.log('父组件绑定的单个日历值传给sonDate',val)
      if(this.mode === 'date'){
      if(val !== 0 && val !== ''){
      this.sonDate = new Date(val).getTime()
      this.benchmark = new Date(val).getTime() // 校准基准点
      // console.log('选中日期与显示保持一致：',this.formatDateTime(this.sonDate,2))
      }else{
      this.sonDate = new Date().getTime()
      this.benchmark = new Date().getTime() // 校准基准点
      // console.log('选中日期初始化：',this.formatDateTime(this.sonDate,2))
      }
      this.dotsList = this.selected
      this.adjustCalendarDate() // 根据该日期计算当月
      }
      },
      deep:true,
      immediate: true
      },
      dateRange:{
      handler(val) {
      if(this.mode === 'dateRange'){
      // console.log('父组件绑定的日期数值传给sonDateRange',this.dateRange)
      if(val !== undefined){
      this.sonDateRange = val
      this.benchmark = val[0] // 校准基准点
      }
      this.dotsList = this.selected
      this.adjustCalendarDate() // 根据该日期计算当月
      }
      },
      deep:true,
      immediate: true
      }
      },
      methods:{
      judgeShowType(current,date){
      // getMonth 0-11
      if(parseInt(current) === parseInt(this.swiperCurrent)){
      return new Date(this.benchmark).getMonth() === new Date(date).getMonth()
      }
      if(parseInt(this.swiperCurrent) - parseInt(current) === 1 || parseInt(this.swiperCurrent) - parseInt(current) === -2){
      if(new Date(this.benchmark).getMonth() === 0){
      return new Date(date).getMonth() === 11
      }else{
      return new Date(this.benchmark).getMonth() - 1 === new Date(date).getMonth()
      }
      }
      if(parseInt(current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) - parseInt(current) === 2){
      if(new Date(this.benchmark).getMonth() === 11){
      return new Date(date).getMonth() === 0
      }else{
      return new Date(this.benchmark).getMonth() + 1 === new Date(date).getMonth()
      }
      }
      },
      /**
      * swiper 改变时会触发
      */
      swiperChange(e){
      if(parseInt(this.swiperCurrent) - parseInt(e.detail.current) === 1 || parseInt(this.swiperCurrent) - parseInt(e.detail.current) === -2 ){
      this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark,2),1)).getTime()
      }
      if(parseInt(e.detail.current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) - parseInt(e.detail.current) === 2 ){
      this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark,3)).getTime()
      }
      this.swiperCurrent = e.detail.current
      this.adjustCalendarDate()
      },
      /**
      * 获取0点 23:59:59时间戳
      */
      getDayZero(timeStamp,type){
      let temp = parseInt(timeStamp)
      let day = new Date(new Date(temp).toLocaleDateString()).getTime()
      if(type === 1){
      return this.formatDateTime(day,1)
      }
      if(type === 2){
      return this.formatDateTime(day + 86400000 - 1,1)
      }
      /*if(type == 1){
      console.log(this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2) )
      return this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2) // 设置指定时间的时分秒字段
      }
      if(type == 2){
      return this.formatDateTime(new Date(new Date(day).setHours(23, 59, 59, 59)).getTime(),2) // 设置指定时间的时分秒字段
      }*/
      },
      /**
      * 判断日期是否为选中的日期
      */
      judge(day){
      if(this.mode === 'date'){ // 模式为单选日期
      if(new Date(this.getDayZero(new Date(this.formatDateTime(this.sonDate,2)).getTime(),1)).getTime() === new Date(this.getDayZero(new Date(day).getTime(),1)).getTime()){
      return true
      }else {
      return false
      }
      }
      if(this.mode === 'dateRange'){ // 模式为单选日期
      if(JSON.stringify(this.sonDateRange) !== '{}' ){
      if(this.sonDateRange.length === 1){
      if( new Date(day).getTime() === this.sonDateRange[0] ){
      return 5
      }
      }
      if(this.sonDateRange.length === 2){
      if(new Date(day).getTime() === this.sonDateRange[0] && this.sonDateRange[0] === this.sonDateRange[1]){
      return 6
      }else{
      if( new Date(day).getTime() === this.sonDateRange[0] ){
      return 1
      }else if( new Date(day).getTime() === this.sonDateRange[1] ){
      return 2
      }else if( new Date(day).getTime() > this.sonDateRange[0] && new Date(day).getTime() < this.sonDateRange[1] ){
      return 3
      } else {
      return 4
      }
      }
      }
      } else {
      return 4
      }
      }
      },
      dateRangeMaxDeal(){
      // console.log('超过连选天数',this.dateRangeMax)
      let t1 = this.getDayZero(this.sonDateRange[0],1)
      let t2 = this.getDayZero(this.sonDateRange[1],2)
      this.$emit('dateRangeMaxDeal',[t1,t2])
      },
      /**
      * 点击了单个日期
      */
      clickDay(day){
      // console.log('触发点击')
      if(this.mode === 'date'){
      this.sonDate = new Date(day).getTime()
      this.$emit("dateChange",this.sonDate)
      this.adjustCalendarDate()
      }
      if(this.mode === 'dateRange'){
      if(JSON.stringify(this.sonDateRange) === '{}'){
      this.sonDateRange = [new Date(day).getTime()]
      }else{
      if(this.sonDateRange.length === 1){
      let t = this.sonDateRange[0]
      // console.log(this.sonDateRange[0],new Date(day).getTime(),this.dateRangeMax,'最多连选')
      if(this.sonDateRange[0] > new Date(day).getTime()){ // 判断日期选择顺序
      if(!isNaN(parseInt(this.dateRangeMax))){
      if(parseInt(this.sonDateRange[0]) - parseInt(new Date(day).getTime()) > this.dateRangeMax * 24*60*60*1000){
      this.sonDateRange[0] = t - (this.dateRangeMax - 1) * 24*60*60*1000
      this.sonDateRange.push(t)
      this.dateRangeMaxDeal()
      return
      }
      }
      this.sonDateRange[0] = new Date(day).getTime()
      this.sonDateRange.push(t)
      } else {
      if(!isNaN(parseInt(this.dateRangeMax))){
      if(parseInt(new Date(day).getTime()) -parseInt(this.sonDateRange[0]) > this.dateRangeMax * 24*60*60*1000){
      this.sonDateRange.push(t + (this.dateRangeMax - 1) * 24*60*60*1000)
      this.dateRangeMaxDeal()
      return
      }
      }
      this.sonDateRange.push(new Date(day).getTime())
      }
      let t1 = this.getDayZero(this.sonDateRange[0],1)
      let t2 = this.getDayZero(this.sonDateRange[1],2)
      this.$emit('confirm',[t1,t2])
      }else if(this.sonDateRange.length === 2){
      this.sonDateRange = [new Date(day).getTime()]
      }
      }
      }
      },
      /**
      * 点击了非本月的单个日期
      */
      clickDayNotThisMonth(day){
      if(this.mode === 'date'){ // 模式为单选日期
      this.sonDate = new Date(day).getTime()
      let m = new Date(day).getMonth() //点击日期的月份和基准月做对比，看是它的上月还是下月
      let mark = new Date(this.benchmark).getMonth()
      let next = true // 默认点了下月
      if(mark > 0 && mark < 11){
      if(m === mark + 1){next = true}
      if(m === mark - 1){next = false}
      }else{
      if(mark === 0){
      if(m === 11){next = false}
      if(m === 1){next = true}
      }
      if(mark === 11){
      if(m === 10){next = false}
      if(m === 0){next = true}
      }
      }
      if(next === true){
      this.jumpToNextMonth()
      }else{
      this.jumpToLastMonth()
      }
      this.$emit("dateChange",this.sonDate)
      }
      if(this.mode === 'dateRange'){
      }
      },
      /**
      * 校准日历
      */
      adjustCalendar(){
      // console.log('以this.benchmark为中心点 校准展示月份')
      let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,1)
      let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,2)
      let lastMonday = monthStart
      let nextSunday = monthEnd
      if(new Date(monthStart).getDay() !== 1){ // 如果月初不是周一，补全
      lastMonday = this.getOneDay(new Date(monthStart).getTime(),1) //补全周一
      }
      if(new Date(monthEnd).getDay() !== 0){ // 如果月底不是周日，补全
      nextSunday = this.getOneDay(new Date(monthEnd).getTime(),7) // 补全周日
      }
      let month = this.getRangeOfDates(lastMonday, nextSunday)
      // console.log(monthStart,'monthStart',monthEnd,'monthEnd')
      // console.log(lastMonday,'lastMonday',nextSunday,'nextSunday')
      // console.log(month,'month')
      let list = []
      for(let i in month){ // 增加打点信息
      let obj = { date: month[i] }
      for(let j in this.dotsList){
      // console.log(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1))
      // console.log(this.getDayZero(new Date(month[i]).getTime(),1))
      if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month[i]).getTime(),1)){
      obj = Object.assign({}, obj, this.dotsList[j])
      }
      }
      list.push(obj)
      }
      this.month = list
      // console.log(this.month)
      },
      /**
      * mode='date' 校准展示日历
      */
      adjustCalendarDate(){
      // console.log('以this.benchmark为中心点 校准展示月份')
      let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,1)
      let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,2)
      let lastMonday = monthStart
      let nextSunday = monthEnd
      if(new Date(monthStart).getDay() !== 1){ // 如果月初不是周一，补全
      lastMonday = this.getOneDay(new Date(monthStart).getTime(),1) //补全周一
      }
      if(new Date(monthEnd).getDay() !== 0){ // 如果月底不是周日，补全
      nextSunday = this.getOneDay(new Date(monthEnd).getTime(),7) // 补全周日
      }
      let monthStart1= this.getPreMonthBeginAndEnd(monthStart,1)
      let monthEnd1= this.getPreMonthBeginAndEnd(monthStart,2)
      let lastMonday1 = monthStart1
      let nextSunday1 = monthEnd1
      if(new Date(monthStart1).getDay() !== 1){ // 如果月初不是周一，补全
      lastMonday1 = this.getOneDay(new Date(monthStart1).getTime(),1) //补全周一
      }
      if(new Date(monthEnd1).getDay() !== 0){ // 如果月底不是周日，补全
      nextSunday1 = this.getOneDay(new Date(monthEnd1).getTime(),7) // 补全周日
      }
      let y = new Date(monthStart).getFullYear()
      let m1 = new Date(monthStart).getMonth() + 1 // 来月
      let two = new Date(y, m1, 1).getTime()
      let monthStart2= this.getMonthBeginAndEnd(two,1)
      let monthEnd2= this.getMonthBeginAndEnd(two,2)
      let lastMonday2 = monthStart2
      let nextSunday2 = monthEnd2
      if(new Date(monthStart2).getDay() !== 1){ // 如果月初不是周一，补全
      lastMonday2 = this.getOneDay(new Date(monthStart2).getTime(),1) //补全周一
      }
      if(new Date(monthEnd2).getDay() !== 0){ // 如果月底不是周日，补全
      nextSunday2 = this.getOneDay(new Date(monthEnd2).getTime(),7) // 补全周日
      }
      let month = this.getRangeOfDates(lastMonday, nextSunday)
      let month1 = this.getRangeOfDates(lastMonday1, nextSunday1)
      let month2 = this.getRangeOfDates(lastMonday2, nextSunday2)
      let list = [] // 当月
      let list1 = [] // 上月
      let list2 = [] // 下月
      for(let i in month){ // 增加打点信息
      let obj = { date: month[i] }
      for(let j in this.dotsList){
      if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month[i]).getTime(),1)){
      obj = Object.assign({}, obj, this.dotsList[j])
      }
      }
      list.push(obj)
      }
      for(let i in month1){ // 增加打点信息
      let obj = { date: month1[i] }
      for(let j in this.dotsList){
      if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month1[i]).getTime(),1)){
      obj = Object.assign({}, obj, this.dotsList[j])
      }
      }
      list1.push(obj)
      }
      for(let i in month2){ // 增加打点信息
      let obj = { date: month2[i] }
      for(let j in this.dotsList){
      if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month2[i]).getTime(),1)){
      obj = Object.assign({}, obj, this.dotsList[j])
      }
      }
      list2.push(obj)
      }
      if(this.swiperCurrent === 0){
      this.month1 = list2
      this.month2 = list1
      this.month0 = list
      }else if(this.swiperCurrent === 1){
      this.month1 = list
      this.month0 = list1
      this.month2 = list2
      }else{
      this.month2 = list
      this.month0 = list2
      this.month1 = list1
      }
      // console.log(this.month1)
      },
      /**
      * 当月的月初与月底
      */
      getMonthBeginAndEnd(d,type){
      let y = new Date(d).getFullYear()
      let m = new Date(d).getMonth()
      let m1 = new Date(d).getMonth() + 1 // 来月
      let one = new Date(y, m, 1).getTime()
      let two = new Date(y, m1, 1).getTime()
      if(type === 1){
      return this.formatDateTime(new Date(one).getTime(),1)
      }
      if(type === 2){
      return this.formatDateTime(new Date(two).getTime() - 1,1)
      }
      if(type === 3){
      return this.formatDateTime(new Date(two).getTime(),1)
      }
      },
      /**
      * 指定某日的上月月初和月底
      */
      getPreMonthBeginAndEnd(d,type){
      let y = new Date(d).getFullYear()
      let m = new Date(d).getMonth()
      let m1 = new Date(d).getMonth() - 1
      let one = new Date(y, m1, 1).getTime()
      let two = new Date(y, m, 1).getTime()
      if(type === 1){
      return this.formatDateTime(new Date(one).getTime(),1)
      }
      if(type === 2){
      return this.formatDateTime(new Date(two).getTime() - 1,1)
      }
      },
      /**
      * 时间戳格式化
      */
      formatDateTime (timeStamp,type) {
      timeStamp = parseInt(timeStamp)
      if (timeStamp == null) {
      return ''
      } else {
      const date = new Date(timeStamp)
      const y = date.getFullYear() // 年
      let MM = date.getMonth() + 1 // 月
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate() // 日
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours() // 时
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()// 分
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()// 秒
      s = s < 10 ? ('0' + s) : s
      if(type === 1){
      return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
      } else if (type === 2){
      return y + '/' + MM + '/' + d
      } else if (type === 3){
      return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
      } else if (type === 4){
      return y + '/' + MM + '/' + d
      } else {
      return h + ':' + m + ':' + s
      }
      }
      },
      /**
      * 获取时间段内的所有日期/指定星期几的日期 (不传 week 就是所有日期)
      * tupe:1 计算两个日期相差的天数
      */
      getRangeOfDates(startTime, endTime, week,type) {
      // 获取时间段内的所有日期/指定星期几的日期
      week = week == 7 ? 0 : week;
      let dateList = [];
      startTime = new Date(startTime);
      endTime = new Date(endTime);
      while ((endTime.getTime() - startTime.getTime()) >= 0) {
      let year = startTime.getFullYear();
      let month = startTime.getMonth() + 1 < 10 ? '0' + (startTime.getMonth() + 1) : startTime.getMonth() + 1;
      let day = startTime.getDate().toString().length == 1 ? '0' + startTime.getDate() : startTime.getDate();
      if(isNaN(week) || startTime.getDay() == week) {
      dateList.push(`${year}/${month}/${day}`);
      }
      startTime.setDate(startTime.getDate() + 1);
      }
      if(type === 1){
      return dateList.length;
      }else{
      return dateList
      }
      },
      /**
      * 获取指定日期所在周的周几 周n
      */
      getOneDay(timeStamp,n){
      let now = new Date(timeStamp);
      let nowTime = now.getTime();
      let day = now.getDay();
      if(now.getDay() === 0){
      day = 7;
      }
      let oneDayTime = 24 * 60 * 60 * 1000;
      let dayTime = nowTime
      if(n < day){
      dayTime = nowTime - (day-n) * oneDayTime
      }
      if(n > day){
      dayTime = nowTime + (n-day) * oneDayTime
      }
      return this.formatDateTime(new Date(dayTime).getTime(),1)
      },
      /**
      * 跳转上月
      */
      jumpToLastMonth(){
      this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark,2),1)).getTime() // 基准点改为 上个月的月初 时间戳
      if(this.swiperCurrent !== 0){
      this.swiperCurrent -= 1
      }else{
      this.swiperCurrent = 2
      }
      this.adjustCalendarDate()
      },
      /**
      * 跳转下月
      */
      jumpToNextMonth(){
      this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark,3)).getTime()// 基准点改为 下个月的月初 时间戳
      if(this.swiperCurrent !== 2){
      this.swiperCurrent += 1
      }else{
      this.swiperCurrent = 0
      }
      this.adjustCalendarDate()
      }
      }
      }
      </script>
      <style scoped lang="stylus">
      .calendar-area
      width: 100%;
      max-width 500px
      .calendar-head // 日历头部
      padding-top 20rpx
      .calendar-arrow
      padding 0 40rpx
      .pre-month // 上月跳转文字
      margin-left: 5px
      padding: 0 10px
      .next-month // 下月跳转文字
      margin-right: 5px
      padding: 0 10px
      .day-normal-dark
      background: transparent;
      color: rgb(12,12,12);
      .day-normal
      background: transparent;
      .start-text
      width: 100%;
      font-size: 9px;
      text-align: center;
      bottom: 0;
      display flex
      align-items center
      justify-content center
      overflow hidden
      .bottom-dots
      width: 100%;
      font-size: 9px;
      text-align: center;
      bottom: 4rpx
      .bottom-dots-else
      font-size: 9px;
      text-align: center;
      bottom: 4rpx
      .bottom-texts
      width: 100%;
      font-size: 9px;
      text-align: center;
      //bottom: -4.5px
      bottom: 0px
      .grid-text
      width: 100%;
      text-align: center
      .arrow-style
      background-color: transparent; /* 模块背景为透明 */
      border-style: solid;
      .arrow-left-transform
      transform rotate(225deg)/*箭头方向可以自由切换角度*/
      .arrow-right-transform
      transform rotate(45deg)/*箭头方向可以自由切换角度*/
      .flex-class
      display flex
      align-items center
      justify-content center
      .flex-class1
      display flex
      align-items flex-start
      justify-content center
      .flex
      display flex
      .justify-content1
      justify-content center
      .space-between
      justify-content space-between
      .align-items
      align-items center
      .flex-wrap
      flex-wrap wrap
      .flex-no-wrap
      flex-wrap nowrap
      .relative
      position relative
      .absolute
      position absolute
      .bg
      background #6161f921
      .fontColor-normal
      color: rgb(187,187,187);
      .fontColor
      color #6161f9
      </style>
      pages/home/importFile.vue
      View file @ 8c72da9d
      ...@@ -6,22 +6,81 @@ ...@@ -6,22 +6,81 @@
      <view class="jisuanqi" @click="exportExcel" style="margin-top:100rpx;"> <view class="jisuanqi" @click="exportExcel" style="margin-top:100rpx;">
      导出 导出
      </view> </view>
      <view class="jisuanqi" @click="showCalendar=true" style="margin-top:100rpx;">
      选择日期
      </view>
      <view class="content-confirm" style="margin-top:100rpx;">
      日期选择{{searchDate}}
      <!-- <calendar-select v-model="showCalendar"
      maxDate="2021-6-20"
      :addOrRemoveData="addOrRemoveData"
      mode="range"
      :altPrice="dataPrice"
      @change="changeDate"></calendar-select>
      -->
      <button @click="open">打开弹窗</button>
      <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <miku-calendar
      :calendarBg="'#fff'"
      :dateRange="[new Date('2024/02/01').getTime(),new Date('2024/02/27').getTime()]"
      :dateRangeMax="365"
      @dateRangeMaxDeal="dateRangeMaxDeal"
      mode='dateRange'
      :showArrow="true"
      themeColor="rgb(100,124,203)"
      arrowColor="rgb(100,124,203)"
      @confirm = "calendarConfirm"
      ></miku-calendar>
      </uni-popup>
      </view>
      <!-- <web-view :src="localUrl" @message="handlePostMessage"></web-view> --> <!-- <web-view :src="localUrl" @message="handlePostMessage"></web-view> -->
      </view> </view>
      </template> </template>
      <script> <script>
      import * as XLSX from '@/common/excel.js' import * as XLSX from '@/common/excel.js'
      import CalendarSelect from '@/components/calendar-select/calendar-select.vue'
      import mikuCalendar from "@/components/miku-calendar/mikuCalendar.vue"
      var that; var that;
      export default { export default {
      components: {
      CalendarSelect,
      mikuCalendar
      },
      data() { data() {
      return { return {
      searchDate: '',
      date: new Date('2023/09/20').getTime(),
      title: "app端导出excel", title: "app端导出excel",
      successTip: "", successTip: "",
      // localUrl: '../../hybrid/html/local.html' // 本地页面的 URL // localUrl: '../../hybrid/html/local.html' // 本地页面的 URL
      localUrl: 'http://www.minestar.cn/index.html', // 本地页面的 URL localUrl: 'http://www.minestar.cn/index.html', // 本地页面的 URL
      excelList:[{ excelList:[{
      'ctime':22, 'payname':22, 'remark':22,'typename':22,'type':22,'money':22 'ctime':22, 'payname':22, 'remark':22,'typename':22,'type':22,'money':22
      }] //接口提供数据 }], //接口提供数据
      showCalendar: false,
      dataPrice: [ // 日历上的价格
      {
      date: '2021-4-23',
      price: 98
      },
      {
      date: '2021-4-28',
      price: 108
      },
      {
      date: '2021-4-29',
      price: 98
      }
      ],
      addOrRemoveData: ['2021-04-23', '2021-04-27']
      } }
      }, },
      onLoad() { onLoad() {
      ...@@ -29,6 +88,27 @@ ...@@ -29,6 +88,27 @@
      // this.localUrl = `/hybrid/html/local.html`; // this.localUrl = `/hybrid/html/local.html`;
      }, },
      methods: { methods: {
      open(){
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open('center')
      },
      calendarConfirm(e){
      console.log(e)
      const formattedDates = e.map(date => date.split(' ')[0]);
      this.searchDate = formattedDates
      this.$refs.popup.close()
      },
      dateRangeMaxDeal(e){
      console.log('超过最大连选天数：',e)
      },
      dateChange(day){
      this.date = day
      },
      // 获取选中的日期
      changeDate(data) {
      console.log(data)
      },
      uploadExcel(){ uploadExcel(){
      // wx.miniapp.chooseFile({ // wx.miniapp.chooseFile({
      // success(res) { // success(res) {
      ...@@ -136,4 +216,11 @@ ...@@ -136,4 +216,11 @@
      }, },
      } }
      } }
      </script> </script>
      \ No newline at end of file <style>
      ::v-deep .uni-popup .uni-popup__wrapper{
      display: block;
      position: relative;
      width: 80vw;
      }
      </style>
      \ No newline at end of file
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment