初始化商家端
This commit is contained in:
wangxiaowei
20
components/fu-calendar/css/iconfont.css
Normal file
20
components/fu-calendar/css/iconfont.css
Normal file
@ -0,0 +1,20 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALkAAsAAAAABvQAAAKYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBTIE9ATYCJAMMCwgABCAFhG0HRRsSBhHVkxFkPwbH3d3uIhZlasTr/SlKTLHEYu+9d0fwtMZv3u7efRFJokmjeP3RFBKJ0DVBiTRCJCRCsigWyfd/00nH2qdalQSQnVuxbOa/48i4vMtnObCtXU4gJDVyrufbKis81nyey+mNAgpkfssCS3Ht+XxMwAQD2hujyC6QgLxh7Kql8pCeE2g3bUUcHJ5nYq0KvC4QzzgzY62FmKKYxVahbjhaxDuV1vQm3eGt+n78sRrdJFWGt548PXBiO98nHifaak3NpSDECfB0hYwVFOK6MXcqC5OTtetKd3WtCGmp5H+DkgWG+qB/vETUcGMnWID5xPcJJiL4PndCAhnUSWETR4g9GE6iH5fbFzf1KUY5w7eXE3BdG3eueiuSzcpXepr9EEdTYLTZB1tb2dEsqoK/nkZ/tsGbHW2UZHBKNrY13vs5yEJBzGw8dpfqdalmPF5yC6/Mu63T3KfPefK//sbx+2f1of639hXwZWXwWUWa+2JYgNaz+oO/KB84UAIltufiyZgsCmQzE7MJ7UFQE8Ohft+mK+5XJgKthjIkLaaQtZohC3sFlQ7rqLXaRrtlx6c7DHgui9KGJS8AQq8PSLp9RNbrE1nYX1EZ9g+13mhDOz4XY1f2WQ7euyfBRHCIVSXcFgGlTuyNm1PAip4p80rFzYGMeJIk1Hi5eAQByCV2RCWWRKSESuGTQ/AaeJ4goRQFsFHNI4armkabPqTawo/12iMBEwIOwlJFcDYhQMV41FthPgUwRR6T7Gjpi+cAKcInJxJU8QHkkS4Y1PIo70RKmCSEKIKSBB9xCDzAIzmBCJsXFQAbUuUnZEKrNDSKDtWp2xv8Hyg1O8B35EiRoxh8yJsBq4qA3f8UpbfAzQBFsUqtsRg=') format('woff2')
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-changyongicon-:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-jiantouyou:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
691
components/fu-calendar/fu-calendar.vue
Normal file
691
components/fu-calendar/fu-calendar.vue
Normal file
@ -0,0 +1,691 @@
|
||||
<template>
|
||||
<view class="fu-calendar-wrap">
|
||||
<!-- 日历选择 start -->
|
||||
<view class="fu-calendar-data fu-flex fu-justify-center fu-align-center fu-margin fu-height-72" v-if="changeTitle">
|
||||
<block v-if="changeYear">
|
||||
<view class="fu-arrow fu-left fu-flex fu-justify-between fu-align-center" @click="prevYear">
|
||||
<text class="iconfont icon-changyongicon-" :style="[yaColor]"></text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="changeMonth">
|
||||
<view class="fu-arrow single fu-left fu-flex fu-justify-between fu-align-center" @click="prevMonth">
|
||||
<text class="iconfont icon-jiantouyou" :style="[maColor]"></text>
|
||||
</view>
|
||||
</block>
|
||||
<view class="fu-title fu-text-32 fu-text-333">{{ currentDate[0] }}{{ $t('年') }}{{ currentDate[1] }}{{ $t('月') }}</view>
|
||||
<block v-if="changeMonth">
|
||||
<view class="fu-arrow single fu-right fu-flex fu-justify-between fu-align-center" @click="nextMonth">
|
||||
<text class="iconfont icon-jiantouyou" :style="[maColor]"></text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="changeYear">
|
||||
<view class="fu-arrow fu-flex fu-right fu-justify-between fu-align-center" @click="nextYear">
|
||||
<text class="iconfont icon-changyongicon-" :style="[yaColor]"></text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 日历选择 end -->
|
||||
<!-- 星期 start -->
|
||||
<view class="fu-week fu-flex fu-justify-between fu-align-center fu-text-333 fu-height-72">
|
||||
<view class="fu-week-item fu-text-center" v-for="item in weekData" :key="item">{{ item }}</view>
|
||||
</view>
|
||||
<!-- 星期 end -->
|
||||
<!-- 日历 start -->
|
||||
<view class="fu-calendar fu-flex fu-justify-between fu-align-center fu-flex-wrap fu-text-333">
|
||||
<!-- mode == date || mode == range -->
|
||||
<view
|
||||
class="fu-calendar-item fu-text-center"
|
||||
@click="changeCalendar(item, index)"
|
||||
:class="{ isNot: item.isNot, isFuture: item.isFuture && !item.isNot }"
|
||||
v-for="(item, index) in calendar"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="fu-calendar-num fu-flex fu-justify-center fu-align-center"
|
||||
:class="{ signin: mode == 'signin', range: mode == 'range', start: item.start, end: item.end }"
|
||||
:style="[(item.dayActive || item.start || item.end) && !item.isNot ? dayBg : {}, item.active && !item.isNot ? activeBg : {}]"
|
||||
>
|
||||
{{ item.day }}
|
||||
<view class="fu-calendar-text" v-show="item.start">{{ startText }}</view>
|
||||
<view class="fu-calendar-text" v-show="item.end">{{ endText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 日历 end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @author 邓东方
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
// 月份切换按钮箭头颜色
|
||||
'month-arrow-color': {
|
||||
type: String,
|
||||
default: '#666666',
|
||||
},
|
||||
// 年份切换按钮箭头颜色
|
||||
'year-arrow-color': {
|
||||
type: String,
|
||||
default: '#999999',
|
||||
},
|
||||
// 是否显示顶部年月
|
||||
'change-title': {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否显示顶部的切换年份方向的按钮
|
||||
'change-year': {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否显示顶部的切换月份方向的按钮
|
||||
'change-month': {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 日期模式 date 单个日期选择模式 range 日期段选择模式 signin 签到日期展示模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'date',
|
||||
},
|
||||
// 未来日期是否可选择 默认不可选择
|
||||
future: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 日期段回显时 若只传入一个日期则不显示
|
||||
//日期段选择时默认显示开始时间
|
||||
'start-time': {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//日期段选择时默认显示结束时间
|
||||
'end-time': {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 起始日期底部的提示文字
|
||||
'start-text': {
|
||||
type: String,
|
||||
default: global.i18n.t('开始'),
|
||||
},
|
||||
// 结束日期底部的提示文字
|
||||
'end-text': {
|
||||
type: String,
|
||||
default: global.i18n.t('结束'),
|
||||
},
|
||||
// 选择日期开始结束当天背景色
|
||||
'active-bg-color': {
|
||||
type: String,
|
||||
default: 'rgba(41,121,255,1)',
|
||||
},
|
||||
// 选择日期中间的背景色
|
||||
'range-bg-color': {
|
||||
type: String,
|
||||
default: 'rgba(41,121,255,0.13)',
|
||||
},
|
||||
// 当前日期是否高亮
|
||||
isDefaultDay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 单个日期选择默认选中时间 xxxx-yy-dd
|
||||
currenTime: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 签到模式数据 [xxxx-yy-dd]
|
||||
signinData: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekData: [
|
||||
global.i18n.t('日'),
|
||||
global.i18n.t('一'),
|
||||
global.i18n.t('二'),
|
||||
global.i18n.t('三'),
|
||||
global.i18n.t('四'),
|
||||
global.i18n.t('五'),
|
||||
global.i18n.t('六'),
|
||||
], //星期
|
||||
calendar: [], //日历数组
|
||||
currentDate: [], //当前日期
|
||||
currentDay: '', //当天时间
|
||||
start: '', //开始时间
|
||||
end: '', //结束时间
|
||||
isEmit: true, //mode == range是否推送
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 背景色
|
||||
dayBg() {
|
||||
return { background: this.activeBgColor, color: '#ffffff' }
|
||||
},
|
||||
// 时间段背景色
|
||||
activeBg() {
|
||||
return { background: this.rangeBgColor, color: '#ffffff' }
|
||||
},
|
||||
// 年份箭头颜色
|
||||
yaColor() {
|
||||
return { color: this.yearArrowColor }
|
||||
},
|
||||
// 月份箭头颜色
|
||||
maColor() {
|
||||
return { color: this.monthArrowColor }
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
signinData: {
|
||||
deep: true,
|
||||
handler(newVal, oldVal) {
|
||||
if (this.mode == 'signin') {
|
||||
this.singinFun(this.calendar, newVal)
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let currentDate = this.currentime()
|
||||
let y = currentDate[0]
|
||||
let m = currentDate[1] > 9 ? currentDate[1] : '0' + currentDate[1]
|
||||
let d = currentDate[2] > 9 ? currentDate[2] : '0' + currentDate[2]
|
||||
this.currentDate = currentDate
|
||||
// mode == 'date' 在传入单个时间时 currentDay不再显示默认的当前时间
|
||||
if (this.mode == 'date') {
|
||||
if (this.currenTime) {
|
||||
this.currentDay = this.currenTime
|
||||
} else {
|
||||
if (this.isDefaultDay) {
|
||||
this.currentDay = `${y}-${m}-${d}`
|
||||
}
|
||||
}
|
||||
}
|
||||
// mode == 'date' isDefaultDay == true时 当前时间才显示
|
||||
if (this.mode == 'range') {
|
||||
if (this.isDefaultDay) {
|
||||
this.currentDay = `${y}-${m}-${d}`
|
||||
}
|
||||
}
|
||||
// 日历赋值
|
||||
this.calendar = this.getCalendar(currentDate[0], currentDate[1], currentDate[2])
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description 获取当前时间函数
|
||||
*/
|
||||
currentime() {
|
||||
var date = new Date()
|
||||
var y = Number(date.getFullYear())
|
||||
var m = Number(date.getMonth() + 1)
|
||||
var d = Number(date.getDate())
|
||||
return [y, m, d]
|
||||
},
|
||||
/**
|
||||
* @description 获取日历
|
||||
* @param {String,Number} y 年
|
||||
* @param {String,Number} m 月
|
||||
*/
|
||||
getCalendar(y, m) {
|
||||
// 求解cy年cm月cd日是星期几,parseInt代表取整 d=1是去每个月第一天
|
||||
var cc = parseInt(y / 100) //c
|
||||
var cy = y - cc * 100 //y
|
||||
var cm = m //m
|
||||
var cd = 1 //d
|
||||
// 某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算
|
||||
if (m == 1 || m == 2) {
|
||||
cc = parseInt((y - 1) / 100)
|
||||
cy = y - 1 - cc * 100
|
||||
cm = 12 + m
|
||||
}
|
||||
//w=y+[y/4]+[c/4]-2c+[26(m+1）/10]+d-1
|
||||
// var csum = y + [y / 4] + [c / 4] - 2c+[26(m + 1）/10]+d-1;
|
||||
var csum = cy + parseInt(cy / 4) + parseInt(cc / 4) - 2 * cc + parseInt((26 * (cm + 1)) / 10) + cd - 1
|
||||
// 注意使用蔡勒公式时出现负数情况 fd 每月第一天星期几
|
||||
if (csum < 0) {
|
||||
var fd = parseInt(((csum % 7) + 7) % 7)
|
||||
} else {
|
||||
var fd = parseInt(csum % 7)
|
||||
}
|
||||
|
||||
// 上个月天数
|
||||
var cond1 = y % 4 == 0 //条件1：年份必须要能被4整除
|
||||
var cond2 = y % 100 != 0 //条件2：年份不能是整百数
|
||||
var cond3 = y % 400 == 0 //条件3：年份是400的倍数
|
||||
//当条件1和条件2同时成立时，就肯定是闰年，所以条件1和条件2之间为“与”的关系。
|
||||
//如果条件1和条件2不能同时成立，但如果条件3能成立，则仍然是闰年。所以条件3与前2项为“或”的关系。
|
||||
//所以得出判断闰年的表达式：
|
||||
var cond = (cond1 && cond2) || cond3
|
||||
//判断当月有多少天
|
||||
var allDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][m - 1]
|
||||
if (cond && m == 2) {
|
||||
allDays = 29
|
||||
}
|
||||
//上个月是不是去年
|
||||
let prevYear = y
|
||||
let prevMonth = m - 1
|
||||
if (m == 1) {
|
||||
prevYear = y - 1
|
||||
prevMonth = 12
|
||||
}
|
||||
let _prevMonth = prevMonth > 9 ? prevMonth : '0' + prevMonth
|
||||
let _m = m > 9 ? m : '0' + m
|
||||
//判断上个月天数
|
||||
var prevDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][prevMonth - 1]
|
||||
var calendar = []
|
||||
//这里塞入上个月末尾日期
|
||||
//day 日 active 是否选择 isNot 是不是这个月 formData 日期格式 isBg 是否加背景色（日期段筛选时使用）
|
||||
for (let i = 1; i <= fd; i++) {
|
||||
let prevDay = prevDays - fd + i
|
||||
let _prevDay = prevDay > 9 ? prevDay : '0' + prevDay
|
||||
|
||||
calendar.push({
|
||||
day: prevDay,
|
||||
active: false,
|
||||
isNot: true,
|
||||
formData: prevYear + '-' + _prevMonth + '-' + _prevDay,
|
||||
})
|
||||
}
|
||||
//这里塞入正常这个月的日期
|
||||
let week = [
|
||||
global.i18n.t('星期日'),
|
||||
global.i18n.t('星期一'),
|
||||
global.i18n.t('星期二'),
|
||||
global.i18n.t('星期三'),
|
||||
global.i18n.t('星期四'),
|
||||
global.i18n.t('星期五'),
|
||||
global.i18n.t('星期六'),
|
||||
]
|
||||
for (let i = 1; i <= allDays; i++) {
|
||||
let _i = i > 9 ? i : '0' + i
|
||||
calendar.push({
|
||||
day: i,
|
||||
active: false,
|
||||
isNot: false,
|
||||
formData: y + '-' + _m + '-' + _i,
|
||||
week: week[((i + fd - 1) % 7) % 7],
|
||||
year: y,
|
||||
month: m,
|
||||
allDays: allDays,
|
||||
})
|
||||
}
|
||||
//下个月是不是下一年
|
||||
let nextYear = y
|
||||
let nextMonth = m + 1
|
||||
if (m == 12) {
|
||||
nextYear = y + 1
|
||||
nextMonth = 1
|
||||
}
|
||||
let _nextMonth = nextMonth > 9 ? nextMonth : '0' + nextMonth
|
||||
//判断数组最后一排剩余几个位置塞入下个月日期
|
||||
let takedie = calendar.length % 7
|
||||
if (7 - takedie > 0 && 7 - takedie < 7) {
|
||||
for (let i = 1; i <= 7 - takedie; i++) {
|
||||
let _i = i > 9 ? i : '0' + i
|
||||
calendar.push({
|
||||
day: i,
|
||||
active: false,
|
||||
isNot: true,
|
||||
formData: nextYear + '-' + _nextMonth + '-' + _i,
|
||||
})
|
||||
}
|
||||
}
|
||||
// 默认当天时间加背景色
|
||||
if (this.mode == 'date') {
|
||||
// 在range模式时 start end不存在时走这个
|
||||
if (this.isDefaultDay || this.currentDay) {
|
||||
this.currentDayFun(calendar, this.currentDay, true)
|
||||
}
|
||||
}
|
||||
if (this.mode == 'range') {
|
||||
// 在range模式时 start end不存在时走这个
|
||||
if (this.isDefaultDay || this.currentDay) {
|
||||
if (!this.startTime || !this.endTime) {
|
||||
this.currentDayFun(calendar, this.currentDay, true)
|
||||
}
|
||||
}
|
||||
// 当开始时间与结束时间存在时
|
||||
if (this.startTime && this.endTime && this.startTime != this.endTime) {
|
||||
// 当没有选择过时 进行赋值操作 若是已经点击过 start end存在值 就不需要赋值了
|
||||
if (!this.start && !this.end) {
|
||||
this.start = this.startTime
|
||||
this.end = this.endTime
|
||||
// 判断开始结束值存入本地
|
||||
if (!uni.getStorageSync('startItem')) {
|
||||
let startItem = calendar.find((item) => item.formData == this.start)
|
||||
uni.setStorageSync('startItem', JSON.stringify(startItem))
|
||||
}
|
||||
if (!uni.getStorageSync('endItem')) {
|
||||
let endItem = calendar.find((item) => item.formData == this.end)
|
||||
uni.setStorageSync('endItem', JSON.stringify(endItem))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.rangeDayFun(calendar, true)
|
||||
}
|
||||
if (this.mode == 'signin') {
|
||||
this.singinFun(calendar, this.signinData)
|
||||
}
|
||||
// 判断未来日期是否可选择
|
||||
if (!this.future) {
|
||||
let nowData = new Date().getTime()
|
||||
calendar.forEach((val) => {
|
||||
val.isFuture = false
|
||||
if (new Date(val.formData).getTime() > nowData) {
|
||||
val.isFuture = true
|
||||
}
|
||||
})
|
||||
}
|
||||
return calendar
|
||||
},
|
||||
/**
|
||||
* @description 高亮日期 签到模式
|
||||
*/
|
||||
singinFun(calendar, data) {
|
||||
calendar.forEach((a) => {
|
||||
a.dayActive = false
|
||||
data.forEach((b) => {
|
||||
if (a.formData == b) {
|
||||
a.dayActive = true
|
||||
}
|
||||
})
|
||||
})
|
||||
this.calendar = calendar
|
||||
this.$forceUpdate()
|
||||
},
|
||||
/**
|
||||
* @description 单个日期是否高亮
|
||||
* @param {Array} calendar 日历数组
|
||||
* @param {String} day 选择的日期
|
||||
* @param {Boolen} isInit 初始化触发change时间参数
|
||||
*/
|
||||
currentDayFun(calendar, day, isInit = false) {
|
||||
let that = this
|
||||
calendar.forEach((item) => {
|
||||
item.dayActive = false
|
||||
if (Math.floor(new Date(item.formData).getTime() / 1000) == Math.floor(new Date(day).getTime() / 1000)) {
|
||||
item.dayActive = true
|
||||
if (this.mode == 'date') {
|
||||
that.$emit('change', {
|
||||
day: item.day,
|
||||
time: item.formData,
|
||||
week: item.week,
|
||||
year: item.year,
|
||||
month: item.month,
|
||||
allDays: item.allDays,
|
||||
isInit: isInit,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.calendar = calendar
|
||||
this.$forceUpdate()
|
||||
},
|
||||
/**
|
||||
* @description 日期范围选择
|
||||
*/
|
||||
rangeDayFun(calendar, isInit = false) {
|
||||
// 判断 start end 和中间的时间
|
||||
calendar.forEach((val) => {
|
||||
val.start = false
|
||||
val.end = false
|
||||
val.active = false
|
||||
val.dayActive = false
|
||||
|
||||
// 开始时间
|
||||
if (new Date(val.formData).getTime() == new Date(this.start).getTime()) {
|
||||
val.start = true
|
||||
}
|
||||
// 结束时间
|
||||
if (new Date(val.formData).getTime() == new Date(this.end).getTime()) {
|
||||
val.end = true
|
||||
}
|
||||
// 当开始结束时间选择完毕 开始时间大于结束时间时进行翻转
|
||||
if (this.start && this.end && new Date(this.start).getTime() > new Date(this.end).getTime()) {
|
||||
let start = this.start
|
||||
this.start = this.end
|
||||
this.end = start
|
||||
}
|
||||
// 开始结束中间时间段
|
||||
if (new Date(val.formData).getTime() > new Date(this.start).getTime() && new Date(val.formData).getTime() < new Date(this.end).getTime()) {
|
||||
val.active = true
|
||||
}
|
||||
})
|
||||
|
||||
if (this.start && this.end && this.isEmit) {
|
||||
let startItem = JSON.parse(uni.getStorageSync('startItem'))
|
||||
let endItem = JSON.parse(uni.getStorageSync('endItem'))
|
||||
this.$emit('change', {
|
||||
start: this.start,
|
||||
startYear: startItem.year,
|
||||
startWeek: startItem.week,
|
||||
startMonth: startItem.month,
|
||||
startDay: startItem.day,
|
||||
end: this.end,
|
||||
endYear: endItem.year,
|
||||
endWeek: endItem.week,
|
||||
endMonth: endItem.month,
|
||||
endDay: endItem.day,
|
||||
isInit: isInit,
|
||||
})
|
||||
this.isEmit = false
|
||||
}
|
||||
this.calendar = calendar
|
||||
this.$forceUpdate()
|
||||
},
|
||||
/**
|
||||
* @description 点击日期
|
||||
* @param {Object} item 入参 所点击日期信息
|
||||
*/
|
||||
changeCalendar(item, index) {
|
||||
// 签到模式纯展示模式
|
||||
if (this.mode == 'signin') return
|
||||
// 未来日期 上下月日期不可选择
|
||||
if (item.isFuture || item.isNot) return
|
||||
if (this.mode == 'date') {
|
||||
if (this.currentDay == item.formData) return
|
||||
// 选择日期记录
|
||||
this.currentDay = item.formData
|
||||
this.currentDayFun(this.calendar, item.formData)
|
||||
}
|
||||
if (this.mode == 'range') {
|
||||
// 当已经选择了开始结束时间时 再次点击时先清空之前的时间
|
||||
if (this.start && this.end) {
|
||||
this.start = ''
|
||||
this.end = ''
|
||||
this.isEmit = true
|
||||
uni.removeStorageSync('startItem')
|
||||
uni.removeStorageSync('endItem')
|
||||
}
|
||||
// 默认先赋值开始时间
|
||||
if (!this.start && !this.end) {
|
||||
this.start = item.formData
|
||||
uni.setStorageSync('startItem', JSON.stringify(item))
|
||||
} else if (this.start && !this.end) {
|
||||
// 当第二次选择时间和第一次相同时 不再触发赋值
|
||||
if (this.start == item.formData) return
|
||||
this.end = item.formData
|
||||
uni.setStorageSync('endItem', JSON.stringify(item))
|
||||
}
|
||||
|
||||
this.rangeDayFun(this.calendar)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 上年今月
|
||||
*/
|
||||
prevYear() {
|
||||
let currentDate = this.currentDate
|
||||
currentDate = [currentDate[0] - 1, currentDate[1]]
|
||||
this.currentDate = currentDate
|
||||
this.calendar = this.getCalendar(currentDate[0], currentDate[1])
|
||||
},
|
||||
/**
|
||||
* @description 下年今月
|
||||
*/
|
||||
nextYear() {
|
||||
let currentDate = this.currentDate
|
||||
currentDate = [Number(currentDate[0]) + 1, Number(currentDate[1])]
|
||||
this.currentDate = currentDate
|
||||
this.calendar = this.getCalendar(currentDate[0], currentDate[1])
|
||||
},
|
||||
/**
|
||||
* @description 上月
|
||||
*/
|
||||
prevMonth() {
|
||||
let currentDate = this.currentDate
|
||||
if (currentDate[1] - 1 == 0) {
|
||||
currentDate = [currentDate[0] - 1, 12]
|
||||
} else {
|
||||
currentDate = [currentDate[0], currentDate[1] - 1]
|
||||
}
|
||||
this.currentDate = currentDate
|
||||
this.calendar = this.getCalendar(currentDate[0], currentDate[1])
|
||||
},
|
||||
/**
|
||||
* @description 下月
|
||||
*/
|
||||
nextMonth() {
|
||||
let currentDate = this.currentDate
|
||||
if (currentDate[1] == 12) {
|
||||
currentDate = [Number(currentDate[0]) + 1, 1]
|
||||
} else {
|
||||
currentDate = [Number(currentDate[0]), Number(currentDate[1]) + 1]
|
||||
}
|
||||
this.currentDate = currentDate
|
||||
this.calendar = this.getCalendar(currentDate[0], currentDate[1])
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './css/iconfont.css';
|
||||
.fu-flex {
|
||||
display: flex;
|
||||
}
|
||||
.fu-justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.fu-justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.fu-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
.fu-text-32 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.fu-text-333 {
|
||||
color: #333333;
|
||||
}
|
||||
.fu-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.fu-margin {
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.fu-height-72 {
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
.fu-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
// 日历选择 start
|
||||
.fu-calendar-data {
|
||||
.fu-title {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.fu-arrow {
|
||||
height: 100%;
|
||||
// padding: 0 10rpx;
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
&.fu-left {
|
||||
transform: rotate(180deg);
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
&.fu-right {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
&.single {
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 日历选择 end
|
||||
// 星期 start
|
||||
.fu-week {
|
||||
.fu-week-item {
|
||||
width: calc(100% / 7);
|
||||
}
|
||||
}
|
||||
// 星期 end
|
||||
// 日历 start
|
||||
.fu-calendar {
|
||||
.fu-calendar-item {
|
||||
width: calc(100% / 7);
|
||||
padding-bottom: calc(100% / 7);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.fu-calendar-num {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.start {
|
||||
border-radius: 16rpx 0 0 16rpx;
|
||||
}
|
||||
&.end {
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
}
|
||||
.fu-calendar-text {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
&.range {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.signin {
|
||||
position: absolute;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&.isNot {
|
||||
color: #999;
|
||||
}
|
||||
&.isFuture {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 日历 end
|
||||
</style>
|
||||
24
components/fu-calendar/lang.js
Normal file
24
components/fu-calendar/lang.js
Normal file
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
"zh" :{
|
||||
"年": "年",
|
||||
"月": "月",
|
||||
"开始": "开始",
|
||||
"结束": "结束",
|
||||
"日": "日",
|
||||
"一": "一",
|
||||
"二": "二",
|
||||
"三": "三",
|
||||
"四": "四",
|
||||
"五": "五",
|
||||
"六": "六",
|
||||
"星期日": "星期日",
|
||||
"星期一": "星期一",
|
||||
"星期二": "星期二",
|
||||
"星期三": "星期三",
|
||||
"星期四": "星期四",
|
||||
"星期五": "星期五",
|
||||
"星期六": "星期六",
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
BIN
components/fu-calendar/static/arrow-left.png
Normal file
BIN
components/fu-calendar/static/arrow-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 447 B |
BIN
components/fu-calendar/static/arrow-right.png
Normal file
BIN
components/fu-calendar/static/arrow-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 455 B |
BIN
components/fu-calendar/static/doubleArrow-left.png
Normal file
BIN
components/fu-calendar/static/doubleArrow-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 931 B |
BIN
components/fu-calendar/static/doubleArrow-right.png
Normal file
BIN
components/fu-calendar/static/doubleArrow-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 847 B |
Reference in New Issue
Block a user