@gmcb/uv-ui 0.2.26

package/components/uv-calendars/calendar-body.vue

@@ -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 '../../libs/mixin/mpMixin.js';
+		import mixin from '../../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>

package/components/uv-calendars/calendar-item.vue

@@ -0,0 +1,248 @@
+<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" 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 '../../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>
+	@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(.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;
+	}
+</style>