main
parent
54f34af5cf
commit
768211a864
|
|
@ -6,9 +6,9 @@ export default {
|
|||
if (userStore.isLogin) {
|
||||
userStore.fetchUserInfo()
|
||||
}else{
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index',
|
||||
})
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/login/index',
|
||||
// })
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
if (userStore.isLogin) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,376 @@
|
|||
<template>
|
||||
<view class="uv-calendar-body">
|
||||
<view class="uv-calendar__header">
|
||||
<view class="uv-calendar__header-btn-box" @click.stop="pre">
|
||||
<view class="uv-calendar__header-btn uv-calendar--left"></view>
|
||||
</view>
|
||||
<picker mode="date" :value="getDate" fields="month" @change="bindDateChange">
|
||||
<text class="uv-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
|
||||
</picker>
|
||||
<view class="uv-calendar__header-btn-box" @click.stop="next">
|
||||
<view class="uv-calendar__header-btn uv-calendar--right"></view>
|
||||
</view>
|
||||
<text class="uv-calendar__backtoday" @click="backToday">{{todayText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__box">
|
||||
<view v-if="showMonth" class="uv-calendar__box-bg">
|
||||
<text class="uv-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks uv-calendar__weeks-week">
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{SUNText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{monText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{TUEText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{WEDText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{THUText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{FRIText}}</text>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks-day">
|
||||
<text class="uv-calendar__weeks-day-text">{{SATText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uv-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||
<view class="uv-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||
<calendar-item class="uv-calendar-item--hook" :weeks="weeks" :rangeInfoText="rangeInfoText(weeks)" :multiple="multiple" :range="range" :calendar="calendar" :selected="selected" :lunar="lunar" :color="color" @change="choiceDate"></calendar-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@climblee/uv-ui/libs/mixin/mpMixin.js';
|
||||
import mixin from '@climblee/uv-ui/libs/mixin/mixin.js';
|
||||
|
||||
import CalendarItem from './calendar-item.vue';
|
||||
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n';
|
||||
import i18nMessages from './i18n/index.js';
|
||||
const { t } = initVueI18n(i18nMessages);
|
||||
export default {
|
||||
mixins: [mpMixin, mixin],
|
||||
components: {
|
||||
CalendarItem
|
||||
},
|
||||
props: {
|
||||
date: {
|
||||
type: [String,Array],
|
||||
default: ''
|
||||
},
|
||||
nowDate: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
weeks: {
|
||||
type: [Array, Object],
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getDate() {
|
||||
return Array.isArray(this.date) ? this.date[0] : this.date;
|
||||
},
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
todayText() {
|
||||
return t("uv-calender.today")
|
||||
},
|
||||
monText() {
|
||||
return t("uv-calender.MON")
|
||||
},
|
||||
TUEText() {
|
||||
return t("uv-calender.TUE")
|
||||
},
|
||||
WEDText() {
|
||||
return t("uv-calender.WED")
|
||||
},
|
||||
THUText() {
|
||||
return t("uv-calender.THU")
|
||||
},
|
||||
FRIText() {
|
||||
return t("uv-calender.FRI")
|
||||
},
|
||||
SATText() {
|
||||
return t("uv-calender.SAT")
|
||||
},
|
||||
SUNText() {
|
||||
return t("uv-calender.SUN")
|
||||
},
|
||||
rangeInfoText(weeks) {
|
||||
return weeks=> {
|
||||
if(this.allowSameDay && weeks.beforeRange && weeks.afterRange && weeks.dateEqual) {
|
||||
return this.setInfo(weeks,`${this.startText}/${this.endText}`);
|
||||
}
|
||||
if(weeks.beforeRange) {
|
||||
return this.setInfo(weeks,this.startText);
|
||||
}
|
||||
if(weeks.afterRange) {
|
||||
return this.setInfo(weeks,this.endText);
|
||||
}
|
||||
if(weeks.extraInfo?.info_old == ' ') {
|
||||
weeks.extraInfo.info = null;
|
||||
}else if(weeks.extraInfo?.info_old) {
|
||||
weeks.extraInfo.info = weeks.extraInfo.info_old;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setInfo(weeks,text) {
|
||||
this.setInfoOld(weeks);
|
||||
if(weeks.extraInfo) {
|
||||
weeks.extraInfo.info = text;
|
||||
}else {
|
||||
weeks.extraInfo = {
|
||||
info: text
|
||||
}
|
||||
}
|
||||
},
|
||||
setInfoOld(weeks) {
|
||||
if(weeks.extraInfo) {
|
||||
weeks.extraInfo.info_old = weeks.extraInfo.info ? weeks.extraInfo.info_old || weeks.extraInfo.info : ' ';
|
||||
}
|
||||
},
|
||||
bindDateChange(e) {
|
||||
this.$emit('bindDateChange', e);
|
||||
},
|
||||
backToday() {
|
||||
this.$emit('backToday');
|
||||
},
|
||||
pre() {
|
||||
this.$emit('pre');
|
||||
},
|
||||
next() {
|
||||
this.$emit('next');
|
||||
},
|
||||
choiceDate(e) {
|
||||
this.$emit('choiceDate', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
$uv-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
|
||||
$uv-border-color: #EDEDED !default;
|
||||
$uv-text-color: #333;
|
||||
$uv-bg-color-hover: #f1f1f1;
|
||||
$uv-font-size-base: 14px;
|
||||
$uv-text-color-placeholder: #808080;
|
||||
$uv-color-subtitle: #555555;
|
||||
$uv-text-color-grey: #999;
|
||||
.uv-calendar {
|
||||
@include flex(column);
|
||||
}
|
||||
.uv-calendar__mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $uv-bg-color-mask;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar--mask-show {
|
||||
opacity: 1
|
||||
}
|
||||
.uv-calendar--fixed {
|
||||
position: fixed;
|
||||
/* #ifdef APP-NVUE */
|
||||
bottom: 0;
|
||||
/* #endif */
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460px);
|
||||
/* #ifndef APP-NVUE */
|
||||
bottom: calc(var(--window-bottom));
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar--ani-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.uv-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
.uv-calendar__header {
|
||||
position: relative;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-bottom-color: $uv-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.uv-calendar--fixed-top {
|
||||
@include flex;
|
||||
justify-content: space-between;
|
||||
border-top-color: $uv-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.uv-calendar--fixed-width {
|
||||
width: 50px;
|
||||
}
|
||||
.uv-calendar__backtoday {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25rpx;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
color: $uv-text-color;
|
||||
background-color: $uv-bg-color-hover;
|
||||
}
|
||||
.uv-calendar__header-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: $uv-font-size-base;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar__header-btn-box {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.uv-calendar__header-btn {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-left-color: $uv-text-color-placeholder;
|
||||
border-left-style: solid;
|
||||
border-left-width: 2px;
|
||||
border-top-color: $uv-color-subtitle;
|
||||
border-top-style: solid;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
.uv-calendar--left {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.uv-calendar--right {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
.uv-calendar__weeks {
|
||||
position: relative;
|
||||
@include flex;
|
||||
}
|
||||
.uv-calendar__weeks-week {
|
||||
padding: 0 0 2rpx;
|
||||
}
|
||||
.uv-calendar__weeks-item {
|
||||
flex: 1;
|
||||
}
|
||||
.uv-calendar__weeks-day {
|
||||
flex: 1;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-bottom-color: #F5F5F5;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.uv-calendar__weeks-day-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
.uv-calendar__box {
|
||||
position: relative;
|
||||
}
|
||||
.uv-calendar__box-bg {
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.uv-calendar__box-bg-text {
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
color: $uv-text-color-grey;
|
||||
opacity: 0.1;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 1;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
<template>
|
||||
<view
|
||||
class="uv-calendar-item__weeks-box"
|
||||
:class="{
|
||||
'uv-calendar-item--disable':
|
||||
weeks.disable || (weeks.extraInfo && weeks.extraInfo.disable),
|
||||
'uv-calendar-item--isDay':
|
||||
calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':
|
||||
calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked': weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked': weeks.afterRange,
|
||||
'uv-calendar-item--multiple': weeks.multiple,
|
||||
}"
|
||||
:style="[itemBoxStyle]"
|
||||
@click="choiceDate(weeks)"
|
||||
>
|
||||
<view class="uv-calendar-item__weeks-box-item">
|
||||
<text
|
||||
v-if="selected && weeks.extraInfo && weeks.extraInfo.badge"
|
||||
:style="{ background: weeks.extraInfo.badgeBg }"
|
||||
class="uv-calendar-item__weeks-box-circle"
|
||||
></text>
|
||||
<text
|
||||
class="uv-calendar-item__weeks-top-text"
|
||||
v-if="weeks.extraInfo && weeks.extraInfo.topinfo"
|
||||
:style="[infoStyle('top')]"
|
||||
>{{ weeks.extraInfo && weeks.extraInfo.topinfo }}</text
|
||||
>
|
||||
<text
|
||||
class="uv-calendar-item__weeks-box-text"
|
||||
:class="{
|
||||
'uv-calendar-item--isDay-text': weeks.isDay,
|
||||
'uv-calendar-item--isDay':
|
||||
calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':
|
||||
calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked': weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked': weeks.afterRange,
|
||||
'uv-calendar-item--multiple': weeks.multiple,
|
||||
'uv-calendar-item--disable':
|
||||
weeks.disable || (weeks.extraInfo && weeks.extraInfo.disable),
|
||||
}"
|
||||
:style="[itemBoxStyle]"
|
||||
>{{ weeks.date }}</text
|
||||
>
|
||||
<!-- <text
|
||||
v-if="!lunar && !weeks.extraInfo && weeks.isDay"
|
||||
class="uv-calendar-item__weeks-lunar-text"
|
||||
:class="{
|
||||
'uv-calendar-item--isDay-text': weeks.isDay,
|
||||
'uv-calendar-item--isDay':
|
||||
calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':
|
||||
calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked': weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked': weeks.afterRange,
|
||||
'uv-calendar-item--multiple': weeks.multiple,
|
||||
}"
|
||||
:style="[itemBoxStyle]"
|
||||
>{{ todayText }}</text
|
||||
> -->
|
||||
<!-- <text
|
||||
v-if="lunar && !weeks.extraInfo"
|
||||
class="uv-calendar-item__weeks-lunar-text"
|
||||
:class="{
|
||||
'uv-calendar-item--isDay-text': weeks.isDay,
|
||||
'uv-calendar-item--isDay':
|
||||
calendar.fullDate === weeks.fullDate && weeks.isDay && !multiple,
|
||||
'uv-calendar-item--checked':
|
||||
calendar.fullDate === weeks.fullDate && !weeks.isDay && !multiple,
|
||||
'uv-calendar-item--before-checked': weeks.beforeRange,
|
||||
'uv-calendar-item--range': weeks.range,
|
||||
'uv-calendar-item--after-checked': weeks.afterRange,
|
||||
'uv-calendar-item--multiple': weeks.multiple,
|
||||
'uv-calendar-item--disable':
|
||||
weeks.disable || (weeks.extraInfo && weeks.extraInfo.disable),
|
||||
}"
|
||||
:style="[itemBoxStyle]"
|
||||
>{{
|
||||
weeks.isDay
|
||||
? todayText
|
||||
: weeks.lunar.IDayCn === '初一'
|
||||
? weeks.lunar.IMonthCn
|
||||
: weeks.lunar.IDayCn
|
||||
}}</text
|
||||
> -->
|
||||
<!-- <text
|
||||
v-if="weeks.extraInfo && weeks.extraInfo.info"
|
||||
class="uv-calendar-item__weeks-lunar-text"
|
||||
:class="{
|
||||
'uv-calendar-item__weeks-lunar-text--equal': weeks.dateEqual,
|
||||
}"
|
||||
:style="[infoStyle('bottom')]"
|
||||
>{{ weeks.extraInfo.info }}</text
|
||||
> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { colorGradient } from '@climblee/uv-ui/libs/function/colorGradient.js'
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const { t } = initVueI18n(i18nMessages)
|
||||
export default {
|
||||
emits: ['change'],
|
||||
props: {
|
||||
weeks: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
},
|
||||
},
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff',
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
todayText() {
|
||||
return t('uv-calender.today')
|
||||
},
|
||||
itemBoxStyle() {
|
||||
const style = {}
|
||||
if (this.multiple) {
|
||||
// 多选状态
|
||||
if (this.weeks.multiple) {
|
||||
style.backgroundColor = this.color
|
||||
style.color = '#fff'
|
||||
} else if (this.weeks.isDay) {
|
||||
style.color = this.color
|
||||
}
|
||||
} else if (this.range) {
|
||||
// 范围选择
|
||||
if (this.weeks.beforeRange || this.weeks.afterRange) {
|
||||
style.backgroundColor = this.color
|
||||
} else if (this.weeks.range) {
|
||||
style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
|
||||
style.color = this.color
|
||||
style.opacity = 0.8
|
||||
style.borderRadius = 0
|
||||
}
|
||||
} else {
|
||||
if (this.weeks.isDay) {
|
||||
style.color = this.color
|
||||
}
|
||||
if (this.calendar.fullDate === this.weeks.fullDate) {
|
||||
style.backgroundColor = this.color
|
||||
style.color = '#fff'
|
||||
}
|
||||
}
|
||||
return style
|
||||
},
|
||||
infoStyle(val) {
|
||||
return (val) => {
|
||||
const style = {}
|
||||
if (!this.weeks.multiple) {
|
||||
if (val == 'top') {
|
||||
style.color = this.weeks.extraInfo.topinfoColor
|
||||
? this.weeks.extraInfo.topinfoColor
|
||||
: '#606266'
|
||||
} else if (val == 'bottom') {
|
||||
style.color = this.weeks.extraInfo.infoColor
|
||||
? this.weeks.extraInfo.infoColor
|
||||
: '#f56c6c'
|
||||
}
|
||||
if (this.weeks.range) {
|
||||
style.color = this.color
|
||||
}
|
||||
if (
|
||||
this.calendar.fullDate === this.weeks.fullDate ||
|
||||
this.weeks.beforeRange ||
|
||||
this.weeks.afterRange
|
||||
) {
|
||||
style.color = this.multiple ? style.color : '#fff'
|
||||
}
|
||||
} else {
|
||||
style.color = '#fff'
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
choiceDate(weeks) {
|
||||
if (this.weeks.extraInfo && this.weeks.extraInfo.disable) return
|
||||
this.$emit('change', weeks)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uv-calendar-item__weeks-box {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.uv-calendar__weeks-item {
|
||||
// display: flex !important;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
}
|
||||
.uv-calendar-item--checked {
|
||||
// width: 60rpx;
|
||||
// height: 60rpx;
|
||||
.uv-calendar-item__weeks-box-item {
|
||||
.uv-calendar-item__weeks-box-text {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
@apply flex-center rounded-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
.uv-calendar-item--isDay {
|
||||
.uv-calendar-item__weeks-box-item {
|
||||
.uv-calendar-item__weeks-box-text {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
@apply flex-center rounded-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
$uv-font-size-base: 14px;
|
||||
$uv-text-color: #333;
|
||||
$uv-font-size-sm: 24rpx;
|
||||
$uv-error: #f56c6c !default;
|
||||
$uv-opacity-disabled: 0.3;
|
||||
$uv-text-color-disable: #c0c0c0;
|
||||
$uv-primary: #3c9cff !default;
|
||||
$info-height: 32rpx;
|
||||
.uv-calendar-item__weeks-box {
|
||||
flex: 1;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.uv-calendar-item__weeks-top-text {
|
||||
height: $info-height;
|
||||
line-height: $info-height;
|
||||
font-size: $uv-font-size-sm;
|
||||
}
|
||||
.uv-calendar-item__weeks-box-text {
|
||||
font-size: $uv-font-size-base;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar-item__weeks-lunar-text {
|
||||
height: $info-height;
|
||||
line-height: $info-height;
|
||||
font-size: $uv-font-size-sm;
|
||||
color: $uv-text-color;
|
||||
}
|
||||
.uv-calendar-item__weeks-lunar-text--equal {
|
||||
/* #ifdef H5 */
|
||||
white-space: nowrap;
|
||||
transform: scale(0.8);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
font-size: 20rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.uv-calendar-item__weeks-box-item {
|
||||
position: relative;
|
||||
@include flex(column);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 106rpx;
|
||||
height: 56px;
|
||||
}
|
||||
.uv-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $uv-error;
|
||||
}
|
||||
.uv-calendar-item--disable {
|
||||
background-color: rgba(249, 249, 249, $uv-opacity-disabled);
|
||||
color: $uv-text-color-disable;
|
||||
}
|
||||
.uv-calendar-item--isDay-text {
|
||||
color: $uv-primary;
|
||||
}
|
||||
.uv-calendar-item--isDay {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--checked {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .uv-calendar-item--range {
|
||||
// background-color: $uv-primary;
|
||||
// color: #fff;
|
||||
// }
|
||||
.uv-calendar-item--before-checked {
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--after-checked {
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item--multiple {
|
||||
background-color: $uv-primary;
|
||||
color: #fff;
|
||||
}
|
||||
.uv-calendar-item__weeks-box-circle {
|
||||
left: 50%;
|
||||
bottom: 0 !important;
|
||||
top:unset;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,546 @@
|
|||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @charset UTF-8
|
||||
* @github https://github.com/jjonline/calendar.js
|
||||
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||
* @Time 2014-7-21
|
||||
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
|
||||
* @Version 1.0.3
|
||||
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var calendar = {
|
||||
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
|
||||
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
|
||||
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
|
||||
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
|
||||
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
|
||||
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
|
||||
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
|
||||
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
|
||||
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
|
||||
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
|
||||
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
|
||||
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
|
||||
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
|
||||
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
|
||||
/** Add By JJonline@JJonline.Cn**/
|
||||
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
|
||||
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
|
||||
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
|
||||
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
|
||||
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
|
||||
0x0d520], // 2100
|
||||
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
|
||||
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
|
||||
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
|
||||
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
|
||||
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
|
||||
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays: function (y) {
|
||||
var i; var sum = 348
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
|
||||
return (sum + this.leapDays(y))
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth: function (y) { // 闰字编码 \u95f0
|
||||
return (this.lunarInfo[y - 1900] & 0xf)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays: function (y) {
|
||||
if (this.leapMonth(y)) {
|
||||
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
|
||||
}
|
||||
return (0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
|
||||
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var ms = m - 1
|
||||
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
|
||||
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
|
||||
} else {
|
||||
return (this.solarMonth[ms])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear: function (lYear) {
|
||||
var ganKey = (lYear - 3) % 10
|
||||
var zhiKey = (lYear - 3) % 12
|
||||
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
|
||||
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
|
||||
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
|
||||
},
|
||||
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro: function (cMonth, cDay) {
|
||||
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
|
||||
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
|
||||
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi: function (offset) {
|
||||
return this.Gan[offset % 10] + this.Zhi[offset % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm: function (y, n) {
|
||||
if (y < 1900 || y > 2100) { return -1 }
|
||||
if (n < 1 || n > 24) { return -1 }
|
||||
var _table = this.sTermInfo[y - 1900]
|
||||
var _info = [
|
||||
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||
]
|
||||
var _calday = [
|
||||
_info[0].substr(0, 1),
|
||||
_info[0].substr(1, 2),
|
||||
_info[0].substr(3, 1),
|
||||
_info[0].substr(4, 2),
|
||||
|
||||
_info[1].substr(0, 1),
|
||||
_info[1].substr(1, 2),
|
||||
_info[1].substr(3, 1),
|
||||
_info[1].substr(4, 2),
|
||||
|
||||
_info[2].substr(0, 1),
|
||||
_info[2].substr(1, 2),
|
||||
_info[2].substr(3, 1),
|
||||
_info[2].substr(4, 2),
|
||||
|
||||
_info[3].substr(0, 1),
|
||||
_info[3].substr(1, 2),
|
||||
_info[3].substr(3, 1),
|
||||
_info[3].substr(4, 2),
|
||||
|
||||
_info[4].substr(0, 1),
|
||||
_info[4].substr(1, 2),
|
||||
_info[4].substr(3, 1),
|
||||
_info[4].substr(4, 2),
|
||||
|
||||
_info[5].substr(0, 1),
|
||||
_info[5].substr(1, 2),
|
||||
_info[5].substr(3, 1),
|
||||
_info[5].substr(4, 2)
|
||||
]
|
||||
return parseInt(_calday[n - 1])
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth: function (m) { // 月 => \u6708
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var s = this.nStr3[m - 1]
|
||||
s += '\u6708'// 加上月字
|
||||
return s
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay: function (d) { // 日 => \u65e5
|
||||
var s
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341'; break
|
||||
case 20:
|
||||
s = '\u4e8c\u5341'; break
|
||||
break
|
||||
case 30:
|
||||
s = '\u4e09\u5341'; break
|
||||
break
|
||||
default :
|
||||
s = this.nStr2[Math.floor(d / 10)]
|
||||
s += this.nStr1[d % 10]
|
||||
}
|
||||
return (s)
|
||||
},
|
||||
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function (y) {
|
||||
return this.Animals[(y - 4) % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
|
||||
// 年份限定、上限
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1// undefined转换为数字变为NaN
|
||||
}
|
||||
// 公历传参最下限
|
||||
if (y == 1900 && m == 1 && d < 31) {
|
||||
return -1
|
||||
}
|
||||
// 未传参 获得当天
|
||||
if (!y) {
|
||||
var objDate = new Date()
|
||||
} else {
|
||||
var objDate = new Date(y, parseInt(m) - 1, d)
|
||||
}
|
||||
var i; var leap = 0; var temp = 0
|
||||
// 修正ymd参数
|
||||
var y = objDate.getFullYear()
|
||||
var m = objDate.getMonth() + 1
|
||||
var d = objDate.getDate()
|
||||
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
|
||||
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||
temp = this.lYearDays(i)
|
||||
offset -= temp
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; i--
|
||||
}
|
||||
|
||||
// 是否今天
|
||||
var isTodayObj = new Date()
|
||||
var isToday = false
|
||||
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||
isToday = true
|
||||
}
|
||||
// 星期几
|
||||
var nWeek = objDate.getDay()
|
||||
var cWeek = this.nStr1[nWeek]
|
||||
// 数字表示周几顺应天朝周一开始的惯例
|
||||
if (nWeek == 0) {
|
||||
nWeek = 7
|
||||
}
|
||||
// 农历年
|
||||
var year = i
|
||||
var leap = this.leapMonth(i) // 闰哪个月
|
||||
var isLeap = false
|
||||
|
||||
// 效验闰月
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
// 闰月
|
||||
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||
--i
|
||||
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
|
||||
} else {
|
||||
temp = this.monthDays(year, i)// 计算农历普通月天数
|
||||
}
|
||||
// 解除闰月
|
||||
if (isLeap == true && i == (leap + 1)) { isLeap = false }
|
||||
offset -= temp
|
||||
}
|
||||
// 闰月导致数组下标重叠取反
|
||||
if (offset == 0 && leap > 0 && i == leap + 1) {
|
||||
if (isLeap) {
|
||||
isLeap = false
|
||||
} else {
|
||||
isLeap = true; --i
|
||||
}
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; --i
|
||||
}
|
||||
// 农历月
|
||||
var month = i
|
||||
// 农历日
|
||||
var day = offset + 1
|
||||
// 天干地支处理
|
||||
var sm = m - 1
|
||||
var gzY = this.toGanZhiYear(year)
|
||||
|
||||
// 当月的两个节气
|
||||
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
|
||||
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
|
||||
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
|
||||
|
||||
// 依据12节气修正干支月
|
||||
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
|
||||
if (d >= firstNode) {
|
||||
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
|
||||
}
|
||||
|
||||
// 传入的日期的节气与否
|
||||
var isTerm = false
|
||||
var Term = null
|
||||
if (firstNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 2]
|
||||
}
|
||||
if (secondNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 1]
|
||||
}
|
||||
// 日柱 当月一日与 1900/1/1 相差天数
|
||||
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
|
||||
var gzD = this.toGanZhi(dayCyclical + d - 1)
|
||||
// 该日期所属的星座
|
||||
var astro = this.toAstro(m, d)
|
||||
|
||||
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
|
||||
var isLeapMonth = !!isLeapMonth
|
||||
var leapOffset = 0
|
||||
var leapMonth = this.leapMonth(y)
|
||||
var leapDay = this.leapDays(y)
|
||||
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
|
||||
var day = this.monthDays(y, m)
|
||||
var _day = day
|
||||
// bugFix 2016-9-25
|
||||
// if month is leap, _day use leapDays method
|
||||
if (isLeapMonth) {
|
||||
_day = this.leapDays(y, m)
|
||||
}
|
||||
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
|
||||
|
||||
// 计算农历的时间差
|
||||
var offset = 0
|
||||
for (var i = 1900; i < y; i++) {
|
||||
offset += this.lYearDays(i)
|
||||
}
|
||||
var leap = 0; var isAdd = false
|
||||
for (var i = 1; i < m; i++) {
|
||||
leap = this.leapMonth(y)
|
||||
if (!isAdd) { // 处理闰月
|
||||
if (leap <= i && leap > 0) {
|
||||
offset += this.leapDays(y); isAdd = true
|
||||
}
|
||||
}
|
||||
offset += this.monthDays(y, i)
|
||||
}
|
||||
// 转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if (isLeapMonth) { offset += day }
|
||||
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
|
||||
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
|
||||
var cY = calObj.getUTCFullYear()
|
||||
var cM = calObj.getUTCMonth() + 1
|
||||
var cD = calObj.getUTCDate()
|
||||
|
||||
return this.solar2lunar(cY, cM, cD)
|
||||
}
|
||||
}
|
||||
|
||||
export default calendar
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"uv-calender.ok": "ok",
|
||||
"uv-calender.cancel": "cancel",
|
||||
"uv-calender.today": "today",
|
||||
"uv-calender.MON": "MON",
|
||||
"uv-calender.TUE": "TUE",
|
||||
"uv-calender.WED": "WED",
|
||||
"uv-calender.THU": "THU",
|
||||
"uv-calender.FRI": "FRI",
|
||||
"uv-calender.SAT": "SAT",
|
||||
"uv-calender.SUN": "SUN"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"uv-calender.ok": "确定",
|
||||
"uv-calender.cancel": "取消",
|
||||
"uv-calender.today": "今日",
|
||||
"uv-calender.SUN": "日",
|
||||
"uv-calender.MON": "一",
|
||||
"uv-calender.TUE": "二",
|
||||
"uv-calender.WED": "三",
|
||||
"uv-calender.THU": "四",
|
||||
"uv-calender.FRI": "五",
|
||||
"uv-calender.SAT": "六"
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"uv-calender.ok": "確定",
|
||||
"uv-calender.cancel": "取消",
|
||||
"uv-calender.today": "今日",
|
||||
"uv-calender.SUN": "日",
|
||||
"uv-calender.MON": "一",
|
||||
"uv-calender.TUE": "二",
|
||||
"uv-calender.WED": "三",
|
||||
"uv-calender.THU": "四",
|
||||
"uv-calender.FRI": "五",
|
||||
"uv-calender.SAT": "六"
|
||||
}
|
||||
|
|
@ -0,0 +1,435 @@
|
|||
import CALENDAR from './calendar.js'
|
||||
class Calendar {
|
||||
constructor({
|
||||
date,
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
multiple,
|
||||
allowSameDay
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDate(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 范围开始
|
||||
this.startDate = startDate
|
||||
// 范围结束
|
||||
this.endDate = endDate
|
||||
this.range = range
|
||||
this.multiple = multiple
|
||||
this.allowSameDay = allowSameDay
|
||||
// 多选状态
|
||||
this.cleanRangeStatus()
|
||||
// 范围状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
// this._getWeek(this.date.fullDate)
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date, status) {
|
||||
if (this.range && status == 'init') {
|
||||
this.cleanRangeStatus();
|
||||
if (Array.isArray(date)) {
|
||||
this.rangeStatus.before = date[0];
|
||||
this.rangeStatus.after = date.length > 1 ? date[date.length - 1] : '';
|
||||
if (this.rangeStatus.after && this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after)
|
||||
}
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this.rangeStatus.before = this.selectDate.fullDate;
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
} else if (this.multiple && status == 'init') {
|
||||
this.cleanMultipleStatus();
|
||||
if (Array.isArray(date)) {
|
||||
this.multipleStatus.data = date;
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this.multipleStatus.data = [this.selectDate.fullDate];
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(date)) {
|
||||
this.selectDate = this.getDate(date[0])
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
} else {
|
||||
this.selectDate = this.getDate(date)
|
||||
this._getWeek(this.selectDate.fullDate)
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanRangeStatus() {
|
||||
this.rangeStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 重置开始日期
|
||||
*/
|
||||
resetSatrtDate(startDate) {
|
||||
// 范围开始
|
||||
this.startDate = startDate
|
||||
}
|
||||
/**
|
||||
* 重置结束日期
|
||||
*/
|
||||
resetEndDate(endDate) {
|
||||
// 范围结束
|
||||
this.endDate = endDate
|
||||
}
|
||||
/**
|
||||
* 获取任意时间
|
||||
*/
|
||||
getDate(date, AddDayCount = 0, str = 'day') {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
if (typeof date !== 'object') {
|
||||
date = date.replace(/-/g, '/')
|
||||
}
|
||||
const dd = new Date(date)
|
||||
switch (str) {
|
||||
case 'day':
|
||||
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
case 'month':
|
||||
if (dd.getDate() === 31 && AddDayCount > 0) {
|
||||
dd.setDate(dd.getDate() + AddDayCount)
|
||||
} else {
|
||||
const preMonth = dd.getMonth()
|
||||
dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
|
||||
const nextMonth = dd.getMonth()
|
||||
// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||
if (AddDayCount < 0 && preMonth !== 0 && nextMonth - preMonth > AddDayCount) {
|
||||
dd.setMonth(nextMonth + (nextMonth - preMonth + AddDayCount))
|
||||
}
|
||||
// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||
if (AddDayCount > 0 && nextMonth - preMonth > AddDayCount) {
|
||||
dd.setMonth(nextMonth - (nextMonth - preMonth - AddDayCount))
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'year':
|
||||
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
}
|
||||
const y = dd.getFullYear()
|
||||
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
||||
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||||
return {
|
||||
fullDate: y + '-' + m + '-' + d,
|
||||
year: y,
|
||||
month: m,
|
||||
date: d,
|
||||
day: dd.getDay()
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取上月剩余天数
|
||||
*/
|
||||
_getLastMonthDays(firstDay, full) {
|
||||
let dateArr = []
|
||||
for (let i = firstDay; i > 0; i--) {
|
||||
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
|
||||
dateArr.push({
|
||||
date: beforeDate,
|
||||
month: full.month - 1,
|
||||
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取本月天数
|
||||
*/
|
||||
_currentMonthDys(dateData, full) {
|
||||
let dateArr = []
|
||||
let fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= dateData; i++) {
|
||||
let nowDate = full.year + '-' + (full.month < 10 ? full.month : full.month) + '-' + (i < 10 ? '0' + i : i)
|
||||
// 是否今天
|
||||
let isDay = fullDate === nowDate
|
||||
// 获取打点信息
|
||||
let info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(nowDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
|
||||
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
|
||||
disableBefore = this.dateCompare(this.startDate, nowDate)
|
||||
}
|
||||
if (this.endDate) {
|
||||
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
|
||||
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
|
||||
disableAfter = this.dateCompare(nowDate, this.endDate)
|
||||
}
|
||||
let ranges = this.rangeStatus.data
|
||||
let checked = false
|
||||
let rangesStatus = -1
|
||||
if (this.range) {
|
||||
if (ranges) {
|
||||
rangesStatus = ranges.findIndex((item) => {
|
||||
return this.dateEqual(item, nowDate)
|
||||
})
|
||||
}
|
||||
if (rangesStatus !== -1) {
|
||||
checked = true
|
||||
}
|
||||
}
|
||||
let multiples = this.multipleStatus.data
|
||||
let checked_multiple = false
|
||||
let multiplesStatus = -1
|
||||
if (this.multiple) {
|
||||
if (multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, nowDate)
|
||||
})
|
||||
}
|
||||
if (multiplesStatus !== -1) {
|
||||
checked_multiple = true
|
||||
}
|
||||
}
|
||||
let data = {
|
||||
fullDate: nowDate,
|
||||
year: full.year,
|
||||
date: i,
|
||||
range: this.range ? checked : false,
|
||||
multiple: this.multiple ? checked_multiple : false,
|
||||
beforeRange: this.dateEqual(this.rangeStatus.before, nowDate),
|
||||
afterRange: this.dateEqual(this.rangeStatus.after, nowDate),
|
||||
dateEqual: this.range && checked && this.dateEqual(this.rangeStatus.before, this.rangeStatus.after),
|
||||
month: full.month,
|
||||
lunar: this.getlunar(full.year, full.month, i),
|
||||
disable: !(disableBefore && disableAfter),
|
||||
isDay
|
||||
}
|
||||
if (info) {
|
||||
data.extraInfo = info
|
||||
}
|
||||
dateArr.push(data)
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取下月天数
|
||||
*/
|
||||
_getNextMonthDays(surplus, full) {
|
||||
let dateArr = []
|
||||
for (let i = 1; i < surplus + 1; i++) {
|
||||
dateArr.push({
|
||||
date: i,
|
||||
month: Number(full.month) + 1,
|
||||
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
} else if (Array.isArray(date)) {
|
||||
date = date[0]
|
||||
}
|
||||
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
|
||||
return dateInfo
|
||||
}
|
||||
/**
|
||||
* 比较时间大小
|
||||
*/
|
||||
dateCompare(startDate, endDate) {
|
||||
// 计算截止时间
|
||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||
if (startDate <= endDate) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
// 计算截止时间
|
||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||
if (before.getTime() - after.getTime() === 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 比较after时间是否大于before时间
|
||||
*/
|
||||
dateAfterLgBefore(before, after) {
|
||||
// 计算截止时间
|
||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||
if (after.getTime() - before.getTime() > 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
/**
|
||||
* 计算阴历日期显示
|
||||
*/
|
||||
getlunar(year, month, date) {
|
||||
return CALENDAR.solar2lunar(year, month, date)
|
||||
}
|
||||
/**
|
||||
* 设置打点
|
||||
*/
|
||||
setSelectInfo(data, value) {
|
||||
this.selected = value
|
||||
this._getWeek(data)
|
||||
}
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.multiple) return
|
||||
let multiples = this.multipleStatus.data;
|
||||
const findIndex = multiples.findIndex(item => this.dateEqual(fullDate, item));
|
||||
if (findIndex < 0) {
|
||||
this.multipleStatus.data = this.multipleStatus.data.concat([fullDate]);
|
||||
} else {
|
||||
this.multipleStatus.data.splice(findIndex, 1);
|
||||
}
|
||||
this._getWeek(fullDate)
|
||||
}
|
||||
/**
|
||||
* 获取范围状态
|
||||
*/
|
||||
setRange(fullDate) {
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.rangeStatus
|
||||
if (!this.range) return
|
||||
if (before && after) {
|
||||
this.cleanRangeStatus();
|
||||
this.rangeStatus.before = fullDate
|
||||
} else {
|
||||
if (!before) {
|
||||
this.rangeStatus.before = fullDate
|
||||
} else {
|
||||
if (this.allowSameDay && this.dateEqual(before, fullDate)) {
|
||||
this.rangeStatus.after = fullDate
|
||||
} else if (!this.dateAfterLgBefore(this.rangeStatus.before, fullDate)) {
|
||||
this.cleanRangeStatus();
|
||||
this.rangeStatus.before = fullDate
|
||||
this._getWeek(fullDate)
|
||||
return;
|
||||
}
|
||||
this.rangeStatus.after = fullDate
|
||||
if (this.dateCompare(this.rangeStatus.before, this.rangeStatus.after)) {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.before, this.rangeStatus.after);
|
||||
} else {
|
||||
this.rangeStatus.data = this.geDateAll(this.rangeStatus.after, this.rangeStatus.before);
|
||||
}
|
||||
}
|
||||
}
|
||||
this._getWeek(fullDate)
|
||||
}
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
_getWeek(dateData) {
|
||||
const {
|
||||
year,
|
||||
month
|
||||
} = this.getDate(dateData)
|
||||
let firstDay = new Date(year, month - 1, 1).getDay()
|
||||
let currentDay = new Date(year, month, 0).getDate()
|
||||
let dates = {
|
||||
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
|
||||
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
|
||||
nextMonthDays: [], // 下个月开始几天
|
||||
weeks: []
|
||||
}
|
||||
let canlender = []
|
||||
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
|
||||
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
|
||||
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
||||
let weeks = {}
|
||||
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
||||
for (let i = 0; i < canlender.length; i++) {
|
||||
if (i % 7 === 0) {
|
||||
weeks[parseInt(i / 7)] = new Array(7)
|
||||
}
|
||||
weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
||||
}
|
||||
this.canlender = canlender
|
||||
this.weeks = weeks
|
||||
}
|
||||
//静态方法
|
||||
// static init(date) {
|
||||
// if (!this.instance) {
|
||||
// this.instance = new Calendar(date);
|
||||
// }
|
||||
// return this.instance;
|
||||
// }
|
||||
}
|
||||
export default Calendar
|
||||
|
|
@ -0,0 +1,452 @@
|
|||
<template>
|
||||
<view class="uv-calendar">
|
||||
<view class="uv-calendar__content" v-if="insert">
|
||||
<calendar-body
|
||||
:date="date"
|
||||
:nowDate="nowDate"
|
||||
:weeks="weeks"
|
||||
:calendar="calendar"
|
||||
:selected="selected"
|
||||
:lunar="lunar"
|
||||
:showMonth="showMonth"
|
||||
:color="color"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:range="range"
|
||||
:multiple="multiple"
|
||||
:allowSameDay="allowSameDay"
|
||||
@bindDateChange="bindDateChange"
|
||||
@pre="pre"
|
||||
@next="next"
|
||||
@backToday="backToday"
|
||||
@choiceDate="choiceDate"
|
||||
></calendar-body>
|
||||
</view>
|
||||
<uv-popup ref="popup" mode="bottom" v-else :round="round" z-index="998" :close-on-click-overlay="closeOnClickOverlay" @maskClick="maskClick">
|
||||
<view style="min-height: 100px;">
|
||||
<uv-toolbar
|
||||
:show="true"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="getConfirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="close"
|
||||
@confirm="confirm"></uv-toolbar>
|
||||
<view class="line"></view>
|
||||
<calendar-body
|
||||
:nowDate="nowDate"
|
||||
:weeks="weeks"
|
||||
:calendar="calendar"
|
||||
:selected="selected"
|
||||
:lunar="lunar"
|
||||
:showMonth="showMonth"
|
||||
:color="color"
|
||||
:startText="startText"
|
||||
:endText="endText"
|
||||
:range="range"
|
||||
:multiple="multiple"
|
||||
:allowSameDay="allowSameDay"
|
||||
@bindDateChange="bindDateChange"
|
||||
@pre="pre"
|
||||
@next="next"
|
||||
@backToday="backToday"
|
||||
@choiceDate="choiceDate"
|
||||
></calendar-body>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=uv-calendar
|
||||
* @property {String} date 自定义当前时间，默认为今天
|
||||
* @property {Boolean} lunar 显示农历
|
||||
* @property {String} startDate 日期选择范围-开始日期
|
||||
* @property {String} endDate 日期选择范围-结束日期
|
||||
* @property {String} mode = [不传 | multiple | range ] 多个日期 | 选择日期范围 默认单日期
|
||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||
* @value true 弹窗模式
|
||||
* @value false 插入模式
|
||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||
* @property {String} cancelColor 取消按钮颜色
|
||||
* @property {String} confirmColor 确认按钮颜色，默认#3c9cff
|
||||
* @property {String} title 头部工具条中间的标题文字
|
||||
* @property {String} color 主题色，默认#3c9cff
|
||||
* @property {Number} round :insert="false"时的圆角
|
||||
* @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭
|
||||
* @property {String} startText range为true时，第一个日期底部的提示文字
|
||||
* @property {String} endText range为true时，最后一个日期底部的提示文字
|
||||
* @property {String} readonly 是否为只读状态，只读状态下禁止选择日期，默认false
|
||||
*
|
||||
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||
* @event {Function} monthSwitch 切换月份时触发
|
||||
*
|
||||
* @example <uv-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||
*/
|
||||
import mpMixin from '@climblee/uv-ui/libs/mixin/mpMixin.js';
|
||||
import mixin from '@climblee/uv-ui/libs/mixin/mixin.js';
|
||||
import Calendar from './util.js';
|
||||
import calendarBody from './calendar-body.vue';
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n';
|
||||
import i18nMessages from './i18n/index.js';
|
||||
const { t } = initVueI18n(i18nMessages);
|
||||
export default {
|
||||
components: {
|
||||
calendarBody
|
||||
},
|
||||
mixins: [mpMixin, mixin],
|
||||
emits: ['close', 'confirm', 'change', 'monthSwitch'],
|
||||
props: {
|
||||
// 取消按钮颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 确认按钮颜色，range模式下未选全显示灰色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 主题色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 默认显示日期
|
||||
date: {
|
||||
type: [String,Array],
|
||||
default: ''
|
||||
},
|
||||
// 打点等设置
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否显示农历
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 可选择的起始日期
|
||||
startDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 可选择的结束日期
|
||||
endDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// multiple - 选择多日期 range - 选择日期范围
|
||||
mode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否插入模式
|
||||
insert: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示月份为背景
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹窗模式是否清空上次选择内容
|
||||
clearDate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹窗圆角
|
||||
round: {
|
||||
type: [Number,String],
|
||||
default: 8
|
||||
},
|
||||
// 点击遮罩是否关闭弹窗
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// range为true时，第一个日期底部的提示文字
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// range为true时，最后一个日期底部的提示文字
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||
allowSameDay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.calendars
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
weeks: [],
|
||||
calendar: {},
|
||||
nowDate: '',
|
||||
allowConfirm: false,
|
||||
multiple: false,
|
||||
range: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
confirmText() {
|
||||
return t("uv-calender.ok")
|
||||
},
|
||||
cancelText() {
|
||||
return t("uv-calender.cancel")
|
||||
},
|
||||
getConfirmColor() {
|
||||
if(this.range || this.multiple || this.readonly) {
|
||||
return this.allowConfirm? this.confirmColor: '#999'
|
||||
}else {
|
||||
return this.confirmColor;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
date(newVal) {
|
||||
this.init(newVal)
|
||||
},
|
||||
startDate(val) {
|
||||
this.cale.resetSatrtDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
endDate(val) {
|
||||
this.cale.resetEndDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
selected(newVal) {
|
||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||
this.weeks = this.cale.weeks
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setMode();
|
||||
this.cale = new Calendar({
|
||||
selected: this.selected,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
range: this.range,
|
||||
multiple: this.multiple,
|
||||
allowSameDay: this.allowSameDay
|
||||
})
|
||||
this.init(this.date)
|
||||
},
|
||||
methods: {
|
||||
setMode() {
|
||||
switch (this.mode){
|
||||
case 'range':
|
||||
this.range = true;
|
||||
break;
|
||||
case 'multiple':
|
||||
this.multiple = true;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
async open() {
|
||||
if (this.clearDate && !this.insert) {
|
||||
this.cale.cleanRangeStatus()
|
||||
this.init(this.date)
|
||||
}
|
||||
if(!this.insert){
|
||||
this.$refs.popup.open();
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close();
|
||||
this.$emit('close');
|
||||
},
|
||||
confirm() {
|
||||
if(this.readonly) {
|
||||
return;
|
||||
} else if(this.range && !this.cale.rangeStatus.after) {
|
||||
return;
|
||||
} else if(this.multiple && this.cale.multipleStatus.data.length == 0){
|
||||
return;
|
||||
}
|
||||
this.setEmit('confirm');
|
||||
this.close()
|
||||
},
|
||||
maskClick() {
|
||||
if(this.closeOnClickOverlay) {
|
||||
this.$emit('close');
|
||||
}
|
||||
},
|
||||
bindDateChange(e) {
|
||||
const value = e.detail.value + '-1'
|
||||
this.setDate(value)
|
||||
|
||||
const { year, month } = this.cale.getDate(value)
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化日期显示
|
||||
* @param {Object} date
|
||||
*/
|
||||
init(date) {
|
||||
if(this.range) {
|
||||
// 重置范围选择状态
|
||||
this.cale.cleanRangeStatus();
|
||||
}else if(this.multiple){
|
||||
// 重置多选状态
|
||||
this.cale.cleanMultipleStatus();
|
||||
}
|
||||
this.cale.setDate(date,'init')
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.calendar = this.cale.getInfo(date)
|
||||
this.changeConfirmStatus();
|
||||
},
|
||||
/**
|
||||
* 变化触发
|
||||
*/
|
||||
change() {
|
||||
this.changeConfirmStatus();
|
||||
if (!this.insert) return
|
||||
this.setEmit('change')
|
||||
},
|
||||
changeConfirmStatus() {
|
||||
if(this.readonly) {
|
||||
this.allowConfirm = false;
|
||||
} else if (this.range) {
|
||||
this.allowConfirm = this.cale.rangeStatus.after ? true : false;
|
||||
} else if(this.multiple) {
|
||||
this.allowConfirm = this.cale.multipleStatus.data.length > 0 ? true : false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 选择月份触发
|
||||
*/
|
||||
monthSwitch() {
|
||||
let {
|
||||
year,
|
||||
month
|
||||
} = this.nowDate
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month: Number(month)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 派发事件
|
||||
* @param {Object} name
|
||||
*/
|
||||
setEmit(name) {
|
||||
let {
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fullDate,
|
||||
lunar,
|
||||
extraInfo
|
||||
} = this.calendar
|
||||
this.$emit(name, {
|
||||
range: this.cale.rangeStatus,
|
||||
multiple: this.cale.multipleStatus,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fulldate: fullDate,
|
||||
lunar,
|
||||
extraInfo: extraInfo || {}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 选择天触发
|
||||
* @param {Object} weeks
|
||||
*/
|
||||
choiceDate(weeks) {
|
||||
if (weeks.disable || this.readonly) return
|
||||
this.calendar = weeks
|
||||
// 设置范围选择
|
||||
this.cale.setRange(this.calendar.fullDate)
|
||||
// 设置多选
|
||||
this.cale.setMultiple(this.calendar.fullDate);
|
||||
this.weeks = this.cale.weeks
|
||||
this.change()
|
||||
},
|
||||
/**
|
||||
* 回到今天
|
||||
*/
|
||||
backToday() {
|
||||
const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
|
||||
const date = this.cale.getDate(new Date())
|
||||
const todayYearMonth = `${date.year}-${date.month}`
|
||||
this.init(date.fullDate)
|
||||
if (nowYearMonth !== todayYearMonth) {
|
||||
this.monthSwitch()
|
||||
}
|
||||
this.change()
|
||||
},
|
||||
/**
|
||||
* 上个月
|
||||
*/
|
||||
pre() {
|
||||
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
||||
this.setDate(preDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 下个月
|
||||
*/
|
||||
next() {
|
||||
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
||||
this.setDate(nextDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
this.cale.setDate(date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
$uv-border-color: #EDEDED !default;
|
||||
.uv-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
.line {
|
||||
width: 750rpx;
|
||||
height: 1px;
|
||||
border-bottom-color: $uv-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -50,6 +50,18 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "消息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/clockout/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "考勤打卡"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/clockout/logs",
|
||||
"style": {
|
||||
"navigationBarTitleText": "考勤记录"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<view class="px-base">
|
||||
<CuNavbar title="考勤打卡">
|
||||
<template #right>
|
||||
<view @click="goPage('/pages/clockout/logs')" class="text-24rpx text-white">打卡记录</view>
|
||||
</template>
|
||||
</CuNavbar>
|
||||
<view class="card-shadow px-base mt-base">
|
||||
<uv-form
|
||||
labelPosition="left"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
labelWidth="160rpx"
|
||||
errorType="toast"
|
||||
>
|
||||
<uv-form-item @click="openPicker" prop="sign">
|
||||
<uv-input
|
||||
:border="`none`"
|
||||
readonly
|
||||
v-model="form.sign_time"
|
||||
></uv-input>
|
||||
<template v-slot:right>
|
||||
<uv-icon name="arrow-right"></uv-icon>
|
||||
</template>
|
||||
</uv-form-item>
|
||||
<uv-line color="#f5f5f5"></uv-line>
|
||||
<uv-form-item label="外勤" prop="type">
|
||||
<view class="flex flex-1 justify-end">
|
||||
<uv-switch
|
||||
size="20"
|
||||
:activeValue="2"
|
||||
:inactiveValue="1"
|
||||
v-model="form.type"
|
||||
></uv-switch>
|
||||
</view>
|
||||
</uv-form-item>
|
||||
<uv-line color="#f5f5f5"></uv-line>
|
||||
<uv-form-item v-if="form.type == 2" label="事由" prop="remarks">
|
||||
<uv-input
|
||||
v-model="form.remarks"
|
||||
count
|
||||
inputAlign="right"
|
||||
placeholder="请输入外勤事由"
|
||||
:border="`none`"
|
||||
:maxlength="200"
|
||||
></uv-input>
|
||||
</uv-form-item>
|
||||
</uv-form>
|
||||
|
||||
<view class="h-40vh flex-center flex-col">
|
||||
<view
|
||||
:disabled="!detail.enable"
|
||||
@click="clockIn"
|
||||
class="w-220rpx h-220rpx rounded-full overflow-hidden card-shadow1 flex-center btn"
|
||||
>
|
||||
<view class="text-white text-center">
|
||||
<view class="text-40rpx">打卡</view>
|
||||
<view class="mt-1">{{ timeFormat(newTime, 'hh:mm:ss') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx text-center flex-center flex-col">
|
||||
<view v-if="isGPS === false" class="text-primary text-26rpx"
|
||||
>定位失败，请检查手机定位权限是否开启</view
|
||||
>
|
||||
|
||||
<view class="text-hex-999 text-26rpx">{{ detail.description }}</view>
|
||||
<view
|
||||
@click="getLoca"
|
||||
class="flex items-center mt-10rpx text-hex-9397df text-28rpx"
|
||||
>
|
||||
<uv-icon size="28rpx" color="#9397df" name="map-fill"></uv-icon>
|
||||
<view>重新获取定位</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uv-picker
|
||||
ref="timePicker"
|
||||
:columns="timeList"
|
||||
keyName="name"
|
||||
@confirm="timeConfirm"
|
||||
></uv-picker>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import CuNavbar from '@/components/cu-navbar/index'
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { http } from '@/utils/request'
|
||||
import { timeFormat } from '@climblee/uv-ui/libs/function'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
const loading = ref(false)
|
||||
const isGPS = ref(true)
|
||||
const timePicker = ref(null)
|
||||
const timeList = ref([
|
||||
[
|
||||
{
|
||||
name: '上班打卡',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: '下班打卡',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
])
|
||||
const position = ref({})
|
||||
const newTime = ref('')
|
||||
const detail = ref({})
|
||||
const form = reactive({
|
||||
time: 1,
|
||||
type: 1,
|
||||
remarks: '',
|
||||
sign_time: '',
|
||||
})
|
||||
const rules = ref({})
|
||||
|
||||
const timeConfirm = ({ value }) => {
|
||||
form.time = value[0].value
|
||||
form.sign_time = value[0].name
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getLoca()
|
||||
setInterval(() => {
|
||||
newTime.value = new Date()
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
const getLoca = async () => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
fail: (err) => {
|
||||
isGPS.value = false
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '定位失败，请检查手机定位权限是否开启',
|
||||
})
|
||||
},
|
||||
success: (res) => {
|
||||
isGPS.value = true
|
||||
},
|
||||
complete: async ({ latitude, longitude }) => {
|
||||
position.value = {
|
||||
lat: latitude,
|
||||
lng: longitude,
|
||||
}
|
||||
initLo()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const initLo = async () => {
|
||||
const resdata = await http.get('/hr/sign/info', position.value)
|
||||
detail.value = resdata
|
||||
form.type = resdata.type
|
||||
form.sign_time = timeList.value[0].find((e) => e.value == resdata.time)?.name
|
||||
}
|
||||
|
||||
const openPicker = () => {
|
||||
timePicker.value.open()
|
||||
}
|
||||
|
||||
const clockIn = async () => {
|
||||
if (form.type == 2 && !form.remarks) {
|
||||
return uni.showToast({ title: '请填写外勤事由', icon: 'none' })
|
||||
}
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
await http.post('/hr/sign', {
|
||||
time: form.time,
|
||||
type: form.type,
|
||||
remarks: form.remarks,
|
||||
position: position.value,
|
||||
})
|
||||
form.remarks = ''
|
||||
uni.showToast({ title: '打卡成功', icon: 'none' })
|
||||
// uni.navigateTo({ url: '/pages/clockout/logs' })
|
||||
} catch (error) {
|
||||
} finally {
|
||||
initLo()
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
const goPage = (url) => {
|
||||
uni.navigateTo({ url: url })
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-shadow1 {
|
||||
background: #3678f7;
|
||||
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn {
|
||||
&[disabled='true'] {
|
||||
@apply opacity-70 pointer-events-none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<view>
|
||||
<CuNavbar title="打卡记录"></CuNavbar>
|
||||
<view class="card-shadow">
|
||||
<cu-calendars
|
||||
insert
|
||||
@monthSwitch="onChange"
|
||||
:selected="selected"
|
||||
@change="onChangeDay"
|
||||
:endDate="timeFormat(new Date())"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="current?.sign_status"
|
||||
class="px-90rpx mt-20rpx card-shadow bg-white rounded-19rpx p-base mx-base"
|
||||
>
|
||||
<uv-steps current="0" dot direction="column">
|
||||
<uv-steps-item title="上班打卡">
|
||||
<template #desc>
|
||||
<view class="text-24rpx text-hex-999">{{
|
||||
current.first_time
|
||||
}}</view>
|
||||
<view class="flex" v-if="!current.first_time">
|
||||
<uv-tags plain size="mini" text="缺卡" type="error"></uv-tags>
|
||||
</view>
|
||||
</template>
|
||||
</uv-steps-item>
|
||||
<uv-steps-item title="下班打卡">
|
||||
<template #desc>
|
||||
<view class="text-24rpx text-hex-999">{{ current.last_time }}</view>
|
||||
<view class="flex" v-if="!current.last_time">
|
||||
<uv-tags plain size="mini" text="缺卡" type="error"></uv-tags>
|
||||
</view>
|
||||
</template>
|
||||
</uv-steps-item>
|
||||
</uv-steps>
|
||||
<view
|
||||
@click="goC"
|
||||
class="flex text-24rpx mt-10rpx"
|
||||
v-if="current?.sign_status == 2"
|
||||
>
|
||||
<view class="text-hex-3c9cff">补卡申请></view>
|
||||
<view>补卡申请</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { http } from '@/utils/request'
|
||||
import CuNavbar from '@/components/cu-navbar/index'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
|
||||
import CuCalendars from '@/components/cu-calendars/uv-calendars'
|
||||
const selected = ref([])
|
||||
onLoad(() => {
|
||||
getData()
|
||||
})
|
||||
const current = ref(null)
|
||||
|
||||
const getData = async (date) => {
|
||||
const res = await http.get('/hr/sign', {
|
||||
params: {
|
||||
time: date,
|
||||
},
|
||||
})
|
||||
if (!current.value)
|
||||
current.value = res.find((e) => e.date == timeFormat(new Date()))
|
||||
const arr = res.reduce((a, b) => {
|
||||
a.push({
|
||||
date: b.date,
|
||||
badge: b.sign_status == 1 || b.sign_status == 2 || b.sign_status == 3,
|
||||
badgeBg:
|
||||
b.sign_status == 1
|
||||
? '#3c9cff'
|
||||
: b.sign_status == 2 || b.sign_status == 3
|
||||
? '#949494'
|
||||
: '',
|
||||
data: b,
|
||||
})
|
||||
return a
|
||||
}, [])
|
||||
selected.value = arr
|
||||
}
|
||||
|
||||
const onChange = ({ year, month }) => {
|
||||
getData(`${year}-${month}`)
|
||||
}
|
||||
|
||||
const onChangeDay = (e) => {
|
||||
current.value = e.extraInfo?.data
|
||||
}
|
||||
|
||||
const goC = () => {
|
||||
// /pages/make-card/create
|
||||
let type
|
||||
if(!current.value.last_time) type = 1
|
||||
if(!current.value.first_time) type = 2
|
||||
uni.navigateTo({
|
||||
url: `/pages/make-card/create?date=${current.value.date}&type=${type}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,9 +1,15 @@
|
|||
<template>
|
||||
<view>
|
||||
<CuNavbar title="补卡申请">
|
||||
</CuNavbar>
|
||||
<CuNavbar title="补卡申请"> </CuNavbar>
|
||||
<view class="card-shadow px-base">
|
||||
<uv-form labelPosition="left" :model="form" :rules="rules" ref="formRef" errorType="toast" labelWidth="250rpx">
|
||||
<uv-form
|
||||
labelPosition="left"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
errorType="toast"
|
||||
labelWidth="250rpx"
|
||||
>
|
||||
<uv-form-item required label="补卡时间" prop="date">
|
||||
<uv-input
|
||||
placeholder="请选择日期"
|
||||
|
|
@ -16,10 +22,14 @@
|
|||
</uv-input>
|
||||
</uv-form-item>
|
||||
<uv-line color="#f5f5f5"></uv-line>
|
||||
<uv-form-item required label="补卡类型" prop="sign_time">
|
||||
<uv-form-item
|
||||
required
|
||||
label="补卡类型"
|
||||
@click="openPicker"
|
||||
prop="sign_time"
|
||||
>
|
||||
<uv-input
|
||||
placeholder="请选择"
|
||||
@click="openPicker"
|
||||
readonly
|
||||
inputAlign="right"
|
||||
:border="`none`"
|
||||
|
|
@ -28,8 +38,19 @@
|
|||
</uv-input>
|
||||
</uv-form-item>
|
||||
<uv-line color="#f5f5f5"></uv-line>
|
||||
<uv-form-item required label="补卡理由" prop="reason" labelPosition="top">
|
||||
<uv-textarea v-model="form.reason" count placeholder="请输入" :border="`none`" :maxlength="200"></uv-textarea>
|
||||
<uv-form-item
|
||||
required
|
||||
label="补卡理由"
|
||||
prop="reason"
|
||||
labelPosition="top"
|
||||
>
|
||||
<uv-textarea
|
||||
v-model="form.reason"
|
||||
count
|
||||
placeholder="请输入"
|
||||
:border="`none`"
|
||||
:maxlength="200"
|
||||
></uv-textarea>
|
||||
</uv-form-item>
|
||||
<uv-line color="#f5f5f5"></uv-line>
|
||||
<uv-form-item label="外勤" prop="isOutSide">
|
||||
|
|
@ -37,7 +58,13 @@
|
|||
<uv-switch size="20" v-model="form.isOutSide"></uv-switch>
|
||||
</view>
|
||||
</uv-form-item>
|
||||
<uv-form-item v-if="form.isOutSide" required label="外勤事由" prop="outside_remarks" labelPosition="top">
|
||||
<uv-form-item
|
||||
v-if="form.isOutSide"
|
||||
required
|
||||
label="外勤事由"
|
||||
prop="outside_remarks"
|
||||
labelPosition="top"
|
||||
>
|
||||
<uv-textarea
|
||||
v-model="form.outside_remarks"
|
||||
count
|
||||
|
|
@ -51,7 +78,11 @@
|
|||
<view class="mt-20rpx px-base">
|
||||
<uv-button type="primary" @click="submit">提交</uv-button>
|
||||
</view>
|
||||
<uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
|
||||
<uv-picker
|
||||
ref="pickerRef"
|
||||
:columns="columns"
|
||||
@confirm="confirmPicker"
|
||||
></uv-picker>
|
||||
<uv-datetime-picker
|
||||
v-model="value"
|
||||
placeholder="请选择日期"
|
||||
|
|
@ -61,16 +92,22 @@
|
|||
@confirm="confirmDatePicker"
|
||||
>
|
||||
</uv-datetime-picker>
|
||||
<uv-modal ref="modalRef" title="提示" content="确定提交吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
|
||||
<uv-modal
|
||||
ref="modalRef"
|
||||
title="提示"
|
||||
content="确定提交吗?"
|
||||
@confirm="onSubmit"
|
||||
:showCancelButton="true"
|
||||
></uv-modal>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import CuNavbar from "@/components/cu-navbar/index"
|
||||
import { ref, reactive, computed } from "vue"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import { http } from "@/utils/request"
|
||||
import { timeFormat } from "@climblee/uv-ui/libs/function/index"
|
||||
const columns = [["上班补卡", "下班补卡"]]
|
||||
import CuNavbar from '@/components/cu-navbar/index'
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { http } from '@/utils/request'
|
||||
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
|
||||
const columns = [['上班补卡', '下班补卡']]
|
||||
const formRef = ref(null)
|
||||
const datetimePicker = ref(null)
|
||||
const pickerRef = ref(null)
|
||||
|
|
@ -79,11 +116,11 @@ const value = ref(Number(new Date()))
|
|||
const id = ref(0)
|
||||
const loading = ref(false)
|
||||
const form = reactive({
|
||||
date: "",
|
||||
sign_time: "",
|
||||
reason: "",
|
||||
outside_remarks: "",
|
||||
isOutSide: false
|
||||
date: '',
|
||||
sign_time: '',
|
||||
reason: '',
|
||||
outside_remarks: '',
|
||||
isOutSide: false,
|
||||
})
|
||||
const openPicker = () => {
|
||||
pickerRef.value.open()
|
||||
|
|
@ -91,71 +128,74 @@ const openPicker = () => {
|
|||
const openDatePicker = () => {
|
||||
datetimePicker.value.open()
|
||||
}
|
||||
const confirmDatePicker = e => {
|
||||
form.date = timeFormat(e.value, "yyyy-mm-dd hh:MM")
|
||||
const confirmDatePicker = (e) => {
|
||||
form.date = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
|
||||
}
|
||||
const confirmPicker = e => {
|
||||
const confirmPicker = (e) => {
|
||||
form.sign_time = e.value[0]
|
||||
}
|
||||
const rules = reactive({
|
||||
date: [{ required: true, message: "请选择时间" }],
|
||||
sign_time: [{ required: true, message: "请选择类型" }],
|
||||
reason: [{ required: true, message: "请输入补卡理由" }],
|
||||
outside_remarks: [{ required: true, message: "请输入补卡理由" }]
|
||||
date: [{ required: true, message: '请选择时间' }],
|
||||
sign_time: [{ required: true, message: '请选择类型' }],
|
||||
reason: [{ required: true, message: '请输入补卡理由' }],
|
||||
outside_remarks: [{ required: true, message: '请输入补卡理由' }],
|
||||
})
|
||||
onLoad(options => {
|
||||
onLoad((options) => {
|
||||
id.value = options.id
|
||||
if (id.value) {
|
||||
http
|
||||
.request({
|
||||
url: `/hr/sign-repairs/${options.id}`,
|
||||
method: "GET",
|
||||
method: 'GET',
|
||||
header: {
|
||||
Accept: "application/json"
|
||||
}
|
||||
Accept: 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
.then((res) => {
|
||||
value.value = res.date * 1000
|
||||
form.date = timeFormat(res.date, "yyyy-mm-dd hh:MM")
|
||||
form.date = timeFormat(res.date, 'yyyy-mm-dd hh:MM')
|
||||
form.reason = res.reason
|
||||
form.isOutSide = res.sign_type == 1 ? false : true
|
||||
form.outside_remarks = res.outside_remarks
|
||||
form.sign_time = res.sign_time == 1 ? "上班补卡" : "下班补卡"
|
||||
form.sign_time = res.sign_time == 1 ? '上班补卡' : '下班补卡'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const submit = () => {
|
||||
formRef.value.validate().then(res => {
|
||||
modalRef.value.open()
|
||||
}).catch(error => {})
|
||||
formRef.value
|
||||
.validate()
|
||||
.then((res) => {
|
||||
modalRef.value.open()
|
||||
})
|
||||
.catch((error) => {})
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
let url = id.value ? `/hr/sign-repairs/${id.value}` : "/hr/sign-repairs"
|
||||
let method = id.value ? "PUT" : "POST"
|
||||
let url = id.value ? `/hr/sign-repairs/${id.value}` : '/hr/sign-repairs'
|
||||
let method = id.value ? 'PUT' : 'POST'
|
||||
await http.request({
|
||||
url: url,
|
||||
method: method,
|
||||
header: {
|
||||
Accept: "application/json"
|
||||
Accept: 'application/json',
|
||||
},
|
||||
data: {
|
||||
date: form.date,
|
||||
sign_time: form.sign_time == "上班补卡" ? 1 : 2,
|
||||
sign_time: form.sign_time == '上班补卡' ? 1 : 2,
|
||||
reason: form.reason,
|
||||
outside_remarks: form.outside_remarks,
|
||||
sign_type: form.isOutSide ? 2 : 1
|
||||
}
|
||||
sign_type: form.isOutSide ? 2 : 1,
|
||||
},
|
||||
})
|
||||
uni.showToast({
|
||||
title: "提交成功",
|
||||
icon: "none"
|
||||
title: '提交成功',
|
||||
icon: 'none',
|
||||
})
|
||||
uni.$emit("make-card:update")
|
||||
uni.$emit('make-card:update')
|
||||
formRef.value.resetFields()
|
||||
uni.navigateBack()
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
</CuNavbar>
|
||||
<view class="px-base mt-30rpx">
|
||||
<view class="card-shadow bg-white rounded-19rpx p-base">
|
||||
<view class="card-shadow bg-white rounded-19rpx p-base relative">
|
||||
<view class="flex">
|
||||
<view class="w-120rpx h-120rpx rounded-full overflow-hidden">
|
||||
<image class="w-full h-full" :src="userInfo?.avatar"></image>
|
||||
|
|
@ -33,6 +33,11 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="absolute right-base top-base">
|
||||
<view class="flex items-center" @click="goPath('/pages/clockout/index')">
|
||||
<image class="w-40rpx h-40rpx" src="@/static/images/rl.svg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="px-base space-y-15rpx mt-30rpx">
|
||||
|
|
|
|||
|
|
@ -40,10 +40,6 @@ onLoad(()=>{
|
|||
})
|
||||
|
||||
const onRefresh = () => {
|
||||
// params.value = {
|
||||
// city_code: 11,
|
||||
// store_id: 12,
|
||||
// }
|
||||
mescrollItem.value.getMescroll().resetUpScroll()
|
||||
}
|
||||
const goPage = (url) => {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
import CuNavbar from '@/components/cu-navbar/index'
|
||||
import BaseData from '../audits/base-data.vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import commone from './commone.vue'
|
||||
// import commone from './commone.vue'
|
||||
import { ref } from 'vue'
|
||||
import { http } from '@/utils/request'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714304876853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4298" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M948.030409 156.104323a150.613416 150.613416 0 0 0-138.919951-92.117192l-40.098072 0.028899a31.926735 31.926735 0 1 0 0.0289 63.849858h40.123359a86.178343 86.178343 0 0 1 61.368112 25.467695C886.91878 169.784629 895.884854 191.614598 895.884854 214.820906v105.270082L128.003161 320.062089l-0.119211-0.032512V214.820906a86.95863 86.95863 0 0 1 86.868319-86.879157L255.760676 128.241582h0.231196a31.970084 31.970084 0 0 0 0.220359-63.940169l-41.142067-0.285383h-0.220359A150.85545 150.85545 0 0 0 63.940169 214.820906v594.300389A150.638703 150.638703 0 0 0 214.85703 959.825022h594.28594A150.385832 150.385832 0 0 0 959.825022 809.121295V214.820906a149.825904 149.825904 0 0 0-11.794613-58.716583z m-77.522939 714.39231a86.102482 86.102482 0 0 1-61.3645 25.388221H214.85703a86.369802 86.369802 0 0 1-61.483711-25.391834c-16.41131-16.407698-25.492981-38.16903-25.492981-61.375337V384.002258h0.115598l767.888918 0.028899v425.090138a86.106094 86.106094 0 0 1-25.377384 61.371725z" fill="#8a8a8a" p-id="4299"></path><path d="M415.972342 159.969633a31.970084 31.970084 0 0 0 31.970085-31.970085V64.00158a31.970084 31.970084 0 0 0-63.940169 0v63.997968a31.970084 31.970084 0 0 0 31.970084 31.970085zM608.154093 159.969633a31.970084 31.970084 0 0 0 31.970085-31.970085V64.00158a31.970084 31.970084 0 0 0-63.940169 0v63.997968a31.970084 31.970084 0 0 0 31.970084 31.970085zM640.124178 447.942427h-256.12192a31.970084 31.970084 0 0 0 0 63.940169h195.837539c-9.865571 15.815258-20.952146 34.697476-32.071233 55.830243-19.445759 36.966088-34.979246 73.260261-46.170582 107.867427-14.312483 44.270439-21.569873 86.080807-21.569873 124.267899a31.970084 31.970084 0 1 0 63.940169 0c0-31.334295 6.141146-66.324379 18.278941-104.005729 9.977556-31.001951 23.972145-63.759547 41.586397-97.366067 30.413123-58.019382 61.368112-98.727956 61.664333-99.114487A31.970084 31.970084 0 0 0 640.124178 447.942427z" fill="#8a8a8a" p-id="4300"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue