291 lines
7.9 KiB
Vue
291 lines
7.9 KiB
Vue
<template>
|
|
<view
|
|
ref="$weeksBox"
|
|
class="wu-calendar-item__weeks-box"
|
|
:style="[
|
|
calendarItemStyle,
|
|
weekItemStyle,
|
|
{
|
|
borderTopLeftRadius: weeks.beforeRange ? '12rpx' : '',
|
|
borderBottomLeftRadius: weeks.beforeRange ? '12rpx' : '',
|
|
borderTopRightRadius: weeks.afterRange ? '12rpx' : '',
|
|
borderBottomRightRadius: weeks.afterRange ? '12rpx' : ''
|
|
}
|
|
]"
|
|
@click="choiceDate(weeks)"
|
|
>
|
|
<view class="wu-calendar-item__weeks-box-item" :style="[actMultipleStyle, { width: itemWidth, height: itemHeight + 'px' }]">
|
|
<!-- 自定义打点上方信息 -->
|
|
<text
|
|
v-if="weeks.extraInfo && weeks.extraInfo.topInfo"
|
|
class="wu-calendar-item__weeks-lunar-text"
|
|
:style="[{ color: weeks.extraInfo.topInfoColor || '#e43d33' }, calendarItemStyle, actMultipleStyle]"
|
|
>
|
|
{{ weeks.extraInfo.topInfo }}
|
|
</text>
|
|
<!-- 徽标 -->
|
|
<text v-if="selected && weeks.extraInfo && weeks.extraInfo.badge" class="wu-calendar-item__weeks-box-circle" :style="[badgeStyle]"></text>
|
|
<!-- 日期文字 -->
|
|
<text class="wu-calendar-item__weeks-box-text" :style="[calendarItemStyle, actMultipleStyle]">{{ weeks.date }}</text>
|
|
<!-- 今日的文字 -->
|
|
<text
|
|
v-if="!lunar && !weeks.extraInfo && weeks.isDay && !weeks.beforeRange && !weeks.afterRange"
|
|
class="wu-calendar-item__weeks-lunar-text"
|
|
:style="[calendarItemStyle, actMultipleStyle]"
|
|
>
|
|
{{ todayText }}
|
|
</text>
|
|
<!-- 农历文字 -->
|
|
<text
|
|
v-if="lunar && !weeks.extraInfo && !weeks.beforeRange && !weeks.afterRange"
|
|
class="wu-calendar-item__weeks-lunar-text"
|
|
:style="[calendarItemStyle, actMultipleStyle]"
|
|
>
|
|
{{ dayText }}
|
|
</text>
|
|
<!-- 选中的文字展示 -->
|
|
<text v-if="!weeks.extraInfo && (weeks.beforeRange || weeks.afterRange)" class="wu-calendar-item__weeks-lunar-text" :style="[calendarItemStyle, actMultipleStyle]">
|
|
{{ multipleText }}
|
|
</text>
|
|
<!-- 自定义打点下方信息 -->
|
|
<text
|
|
v-if="weeks.extraInfo && weeks.extraInfo.info"
|
|
class="wu-calendar-item__weeks-lunar-text"
|
|
:style="[{ color: weeks.extraInfo.infoColor || '#e43d33' }, calendarItemStyle, actMultipleStyle]"
|
|
>
|
|
{{ weeks.extraInfo.info }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mpMixin from '@/uni_modules/wu-ui-tools/libs/mixin/mpMixin.js';
|
|
import mixin from '@/uni_modules/wu-ui-tools/libs/mixin/mixin.js';
|
|
import props from './props.js';
|
|
|
|
import { initVueI18n } from '@dcloudio/uni-i18n';
|
|
import i18nMessages from '../i18n/index.js';
|
|
import { nextTick } from 'vue';
|
|
const { t } = initVueI18n(i18nMessages);
|
|
|
|
export default {
|
|
emits: ['change'],
|
|
mixins: [mpMixin, mixin, props],
|
|
computed: {
|
|
todayText() {
|
|
return t('wu-calender.today');
|
|
},
|
|
// 每项日历样式
|
|
calendarItemStyle() {
|
|
let style = {};
|
|
let color = this.$w.Color.gradient(this.color, this.$w.Color.isLight(this.color) ? '#000' : '#fff', 100)[6];
|
|
// 有顺序别乱动
|
|
// 选中的日期范围内的样式
|
|
if (this.weeks.rangeMultiple) {
|
|
style = {
|
|
backgroundColor: this.$w.Color.gradient(this.color, '#fff', 100)[80],
|
|
color
|
|
};
|
|
}
|
|
// 今天的日期样式
|
|
if (this.weeks.isDay && this.todayDefaultStyle) {
|
|
style.color = color;
|
|
}
|
|
// 禁用的日期样式
|
|
if (this.weeks.disable) {
|
|
style = {
|
|
backgroundColor: 'rgba(249, 249, 249, 0.3)',
|
|
color: '#c0c0c0'
|
|
};
|
|
}
|
|
return style;
|
|
},
|
|
// 选中的日期样式
|
|
actMultipleStyle() {
|
|
if (
|
|
(this.weeks.beforeRange || this.weeks.afterRange || this.weeks.multiples || (this.calendar.fullDate === this.weeks.fullDate && this.weeks.mode === 'single')) &&
|
|
!this.weeks.disable
|
|
) {
|
|
// #ifdef APP-NVUE
|
|
if (this.itemWidth == '100%') return {};
|
|
return {
|
|
backgroundColor: this.color,
|
|
color: '#fff',
|
|
borderRadius: '12rpx'
|
|
};
|
|
// #endif
|
|
// #ifndef APP-NVUE
|
|
return {
|
|
backgroundColor: this.color,
|
|
color: '#fff',
|
|
borderRadius: '12rpx'
|
|
};
|
|
// #endif
|
|
}
|
|
},
|
|
// 徽标样式
|
|
badgeStyle() {
|
|
let style = {
|
|
backgroundColor: this.weeks.disable ? '#c0c0c0' : '#e43d33',
|
|
width: '16rpx',
|
|
height: '16rpx'
|
|
};
|
|
if (this.weeks.extraInfo) {
|
|
if (this.weeks.extraInfo.badgeColor) {
|
|
// 如果当前是选中日期的徽标且徽标颜色与主题色一致 为了保证 徽标颜色可以被看见 再选中时将其设置为 #fff
|
|
if (
|
|
(this.weeks.beforeRange ||
|
|
this.weeks.afterRange ||
|
|
this.weeks.multiples ||
|
|
(this.calendar.fullDate === this.weeks.fullDate && this.weeks.mode === 'single')) &&
|
|
!this.weeks.disable &&
|
|
this.$w.Color.convertFormat(this.weeks.extraInfo.badgeColor) == this.$w.Color.convertFormat(this.color)
|
|
) {
|
|
style.backgroundColor = this.actBadgeColor;
|
|
} else {
|
|
style.backgroundColor = this.weeks.extraInfo.badgeColor;
|
|
}
|
|
}
|
|
if (this.weeks.extraInfo.badgeSize) {
|
|
style.width = this.weeks.extraInfo.badgeSize;
|
|
style.height = this.weeks.extraInfo.badgeSize;
|
|
}
|
|
|
|
if (!this.weeks.extraInfo.badgePosition) {
|
|
style.right = '10rpx';
|
|
style.top = '10rpx';
|
|
} else if (this.weeks.extraInfo.badgePosition == 'top-left') {
|
|
style.top = '10rpx';
|
|
style.left = '10rpx';
|
|
} else if (this.weeks.extraInfo.badgePosition == 'top-center') {
|
|
style.top = '10rpx';
|
|
style.left = 'center';
|
|
} else if (this.weeks.extraInfo.badgePosition == 'top-right') {
|
|
style.top = '10rpx';
|
|
style.right = '10rpx';
|
|
} else if (this.weeks.extraInfo.badgePosition == 'bottom-left') {
|
|
style.bottom = '10rpx';
|
|
style.left = '10rpx';
|
|
} else if (this.weeks.extraInfo.badgePosition == 'bottom-center') {
|
|
style.bottom = '10rpx';
|
|
style.left = 'center';
|
|
} else if (this.weeks.extraInfo.badgePosition == 'bottom-right') {
|
|
style.bottom = '10rpx';
|
|
style.right = '10rpx';
|
|
}
|
|
}
|
|
|
|
return style;
|
|
},
|
|
// 日期文字
|
|
dayText() {
|
|
let text = '';
|
|
if (this.weeks.isDay) {
|
|
text = this.todayText;
|
|
} else if (this.weeks.lunar.festival) {
|
|
text = this.weeks.lunar.festival;
|
|
} else if (this.weeks.lunar.isTerm) {
|
|
text = this.weeks.lunar.Term;
|
|
} else if (this.weeks.lunar.IDayCn === '初一') {
|
|
text = this.weeks.lunar.IMonthCn;
|
|
} else {
|
|
text = this.weeks.lunar.IDayCn;
|
|
}
|
|
return text;
|
|
},
|
|
// 选中的文字
|
|
multipleText() {
|
|
let text = '';
|
|
if (this.weeks.afterRange) {
|
|
text = this.endText;
|
|
} else if (this.weeks.beforeRange) {
|
|
text = this.startText;
|
|
}
|
|
return text;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
itemWidth: '100%'
|
|
};
|
|
},
|
|
methods: {
|
|
choiceDate(weeks) {
|
|
this.$emit('change', weeks);
|
|
}
|
|
},
|
|
mounted() {
|
|
// #ifdef APP-NVUE
|
|
setTimeout(() => {
|
|
const dom = uni.requireNativePlugin('dom');
|
|
dom.getComponentRect(this.$refs.$weeksBox, (res) => {
|
|
this.itemWidth = res.size.width + 'px';
|
|
});
|
|
}, 10);
|
|
// #endif
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/uni_modules/wu-ui-tools/theme.scss';
|
|
$wu-font-size-base: 28rpx;
|
|
$wu-text-color: #333;
|
|
$wu-font-size-sm: 24rpx;
|
|
$wu-color-error: #e43d33;
|
|
$wu-opacity-disabled: 0.3;
|
|
$wu-text-color-disable: #c0c0c0;
|
|
|
|
.wu-calendar-item__weeks-box {
|
|
flex: 1;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 0.5px;
|
|
}
|
|
|
|
.wu-calendar-item__weeks-box-text {
|
|
font-size: $wu-font-size-base;
|
|
color: $wu-text-color;
|
|
}
|
|
|
|
.wu-calendar-item__weeks-lunar-text {
|
|
font-size: $wu-font-size-sm;
|
|
color: $wu-text-color;
|
|
}
|
|
|
|
.wu-calendar-item__weeks-box-item {
|
|
flex: 1;
|
|
position: relative;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.wu-calendar-item__weeks-box-circle {
|
|
position: absolute;
|
|
border-radius: 16rpx;
|
|
background-color: $wu-color-error;
|
|
}
|
|
|
|
.wu-calendar-item--disable {
|
|
background-color: rgba(249, 249, 249, $wu-opacity-disabled);
|
|
color: $wu-text-color-disable;
|
|
}
|
|
|
|
.wu-calendar-item--extra {
|
|
color: $wu-color-error;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.wu-calendar-item--checked {
|
|
color: #fff;
|
|
}
|
|
</style> |