pet-front-order/uni_modules/uv-calendars/components/uv-calendars/calendar-body.vue

<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 '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
	import mixin from '@/uni_modules/uv-ui-tools/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>