crm-app-vue3/uni_modules/chenmushan-week-calendar/components/chenmushan-week-calendar/chenmushan-week-calendar.vue

<template>
	<view class="cal">
		<view class="cal-top">
			<!-- <view class="prev" @click="changeWeek('prev')" v-if="prevActive">上一周</view> -->
			<text class="date" ref="t1">{{ nowSelectDateString }}</text>
			<view class="cal_top_right" v-if="liveData">
				<image :src="handleWeatherIcon(liveData.weather)" alt="" class="cal_images" />
				<view class="weather_wrap">
					<text class="top">
						{{liveData.city}}
					</text>
					<text class="bottom">
						{{liveData.weather}}/{{liveData.temperature}}℃
					</text>
				</view>
			</view>
			<view class="cal_top_right" v-else>
				<image src="/static/home/weather/icon-yingtian.png" alt="" class="cal_images" />
				<view class="weather_wrap">
					<text class="top">
						广州市
					</text>
					<text class="bottom">
						晴天/22℃
					</text>
				</view>
			</view>
			<!-- <view class="next" @click="changeWeek('next')" v-if="prevActive">下一周</view> -->
		</view>

		<view class="cal-content">
			<view class="cal-ul cal-weeks">
				<view v-for="(item, i) of baseData.weekTitles" :key="i" :id="baseData.selectedDate.week == item ? 'calWeeksSelected' : ''" class='cal-li'>
					<text class="weekText">{{item}}</text>
				</view>
			</view>
			<view class="activeWeek" :style="{left : this.activeLeft}" v-if="showActiveWeek">
				<text class="activeWeekText">{{baseData.selectedDate.week}}</text>
			</view>
			<swiper :current="current" ref="calSwiper" class="cal-swiper" :duration="200" circular
				@animationfinish="swiperFisnish" disable-touch>
				<swiper-item v-for="(days, i) of weeks" :key="i">
					<view class="cal-ul cal-days">
						<view class="cal-li" v-for="(item, j) of days" :key="j" @click="changeSelected(item)">
							<view class="cal-day-li">
								<!-- :style="{ color: item.ym == baseData.selectedDate.ym ? '#333' : '#999' }" -->
								<text
									:class="[item.timeSpan == baseData.selectedDate.timeSpan ? 'cal-day-li-selected' : '','day_text']">{{ item.d }}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	/**
	 * weekCalendar 周日历选择组件
	 * @description 日历选择某一天的组件
	 * @bug 因是使用swiper组件开发快速滑动多屏 无法触发 @animationfinish 导致展示异常
	 * @property {Number} defaultDate 默认时间时间戳
	 * @event {Function} changeDate 当前选中日期发生改变
	 * @example <chenmushan-week-calendar @changeDate="changeDate"></chenmushan-week-calendar>
	 */
	import Amap from '@/js_sdk/Lyn4ever-gaodeRoutePlanning/lyn4ever-gaode.js';
	export default {
		props: {
			defaultDate: {
				type: Number,
				default: 0
			},
			prevActive: {
				type: Boolean,
				default: true
			},
			nextActive: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				showActiveWeek : false,
				weeks: [],
				propDate: null,
				current: 0,
				baseData: {
					weekTitles: ['日', '一', '二', '三', '四', '五', '六'],
					current: 0,
					selectedDate: {
						d: null, // 在当前月份中的天
						ym: '', // 年月拼接
						timeSpan: 0, // 时间戳
						week: ''
					}
				},
				activeLeft : 0,
				
				liveData : null, // 当前天气
			};
		},
		mounted() {
			this.propDate = this.defaultDate == 0 ? new Date() : new Date(this.defaultDate);
			this.initData();
			this.handleActiveWeek();
		},
		methods: {
			handleWeatherIcon(weather){
				let src = "";
				switch (weather) {
				    case "多云":
						src = "/static/home/weather/icon-duoyun.png";
				        break;
					case "雷雨":
						src = "/static/home/weather/icon-leiyu.png";
					    break;
					case "阴天":
						src = "/static/home/weather/icon-yingtian.png";
					    break;
					case "晴":
						src = "/static/home/weather/icon-qingtian.png";
					    break;
					case "阵雨":
						src = "/static/home/weather/icon-zhenyu.png";
					    break;
				    default:
						src = "/static/home/weather/icon-yingtian.png";
				        break;
				}
				return src;
			},
			getWeather(){
				Amap.getWeather(data=>{
					const { liveData } = data;
					this.liveData = liveData;
				})
			},
			initData() {
				let lastSat = new Date(this.propDate);
				this.$set(this.baseData, 'selectedDate', {
					d: lastSat.getDate(),
					ym: `${lastSat.getFullYear()}${lastSat.getMonth() + 1}`,
					timeSpan: +lastSat,
					m: new Date(lastSat),
					week: this.baseData.weekTitles[new Date(lastSat).getDay()]
				});

				// 寻找到距离当前日期最近的周六
				while (lastSat.getDay() != 6) lastSat.setDate(lastSat.getDate() + 1);

				this.$set(this.weeks, 0, this.getWeekDaysByLastSat(lastSat));
				// this.$set(this.weeks, 1, this.getWeekDaysByWeeks(this.weeks[0], true));
				// this.$set(this.weeks, 2, this.getWeekDaysByWeeks(this.weeks[0], false));
				this.current = 0;
			},
			swiperFisnish(e) {
				let current = e.detail.current;
				this.changeWeeks(current > this.baseData.current, current);
				this.$set(this.baseData, 'upCurrIndex', current);
			},
			changeWeeks(direction, current) {
				let nextIndex = current + 1 > 2 ? 0 : current + 1;
				let prevIndex = current - 1 < 0 ? 2 : current - 1;
				this.$set(this.weeks, nextIndex, this.getWeekDaysByWeeks(this.weeks[current], true));
				this.$set(this.weeks, prevIndex, this.getWeekDaysByWeeks(this.weeks[current], false));
			},
			// 修改周时间
			changeWeek(type) {
				let current = this.current;
				let nextIndex = current + 1 > 2 ? 0 : current + 1;
				let prevIndex = current - 1 < 0 ? 2 : current - 1;
				if (type == 'prev') {
					this.current = prevIndex;
				} else {
					this.current = nextIndex;
				}
			},
			// 通过周六数据获取一周的数据
			getWeekDaysByLastSat(lastSat) {
				lastSat = new Date(lastSat);
				let reuslt = [];

				for (var i = 0; i < 7; i++) {
					reuslt.push({
						d: lastSat.getDate(),
						ym: `${lastSat.getFullYear()}${lastSat.getMonth() + 1}`,
						timeSpan: +lastSat,
						m: new Date(lastSat)
					});

					lastSat.setDate(lastSat.getDate() - 1);
				}

				return reuslt.reverse();
			},
			// 通过一周的数据获取本周的上周或下周
			getWeekDaysByWeeks(weeks, direction) {
				// 下周
				if (direction) {
					let nextLastSat = new Date(weeks[weeks.length - 1].timeSpan);
					nextLastSat.setDate(nextLastSat.getDate() + 7);
					return this.getWeekDaysByLastSat(nextLastSat);
				}
				// 上周
				else {
					let prevLstSat = new Date(weeks[0].timeSpan);
					prevLstSat.setDate(prevLstSat.getDate() - 1);
					return this.getWeekDaysByLastSat(prevLstSat);
				}
			},
			// 修改当前选中
			changeSelected(item) {
				if (this.baseData.selectedDate.timeSpan != item.timeSpan) {
					this.$set(this.baseData, 'selectedDate', {
						...item,
						m: new Date(item.timeSpan),
						week: this.baseData.weekTitles[new Date(item.timeSpan).getDay()]
					});

					this.$emit('changeDate', this.baseData.selectedDate);
				}
			},
			handleActiveWeek(){
				this.showActiveWeek = false;
				this.$nextTick(()=>{
					let el = uni.createSelectorQuery().in(this).select('#calWeeksSelected');
					el.boundingClientRect(data=>{
						this.activeLeft = data.left + 'px';
					}).exec();
				});
				this.showActiveWeek = true;
			}
		},
		computed: {
			nowSelectDateString() {
				let m = this.baseData.selectedDate.m;
				return m ? `${m.getFullYear()}-${m.getMonth() + 1}-${m.getDate()}` : '';
			}
		},
		watch: {
			defaultDate: {
				handler(newVal, oldVal) {
					this.propDate = this.defaultDate == 0 ? new Date() : new Date(this.defaultDate);
					this.initData();
				},
				immediate: true
			},
			// 监听对象中某一个属性
			'baseData.selectedDate.week'(week) {
				 this.handleActiveWeek();
			}
		},
		created(){
			this.getWeather();
		},
	};
</script>

<style lang="scss" scoped>
	.cal {
		width: 750rpx;
		// margin: 0 auto;
		overflow: hidden;
		margin: 20rpx 0;
	}

	.cal-content {
		padding: 30rpx 0;
		// margin-left: -30rpx;
		width: 750rpx;
		position: relative;
	}

	// .calWeeksSelected{
	// 	position: relative;
	// 	.weekText{
	// 		z-index: 11;
	// 	}
	.activeWeek {
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 107.14285714285714rpx;
		padding-top: 10rpx;
		height: 140rpx;
		border-radius: 6rpx;
		background: #fff;
		box-shadow: 0px 4px 20px 0px rgba(13, 29, 54, 0.10);
		border-radius: 20rpx;
		.activeWeekText{
			font-size: 34rpx;
			text-align: center;
			color: #B3B3C6;
		}
	}

	// }
	.cal-top {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		.date {
			font-size: 34rpx;
			color: #666666;
			font-weight: bold;
			// pointer-events: none;
		}

		.cal_top_right {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.cal_images {
				width: 68rpx;
				height: 68rpx;
			}

			.weather_wrap {

				.bottom,
				.top {
					color: #666666;
					font-size: 28rpx;
				}

				margin-left: 30rpx;
			}
		}
	}

	.cal-swiper {
		margin-top: 20rpx;
		height: 100rpx;
	}

	.cal-ul {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.cal-li {
			flex: 1;
			text-align: center;
		}
	}

	.cal-weeks {
		.weekText {
			font-size: 34rpx;
			text-align: center;
			color: #B3B3C6;
		}
	}

	.cal-days {
		.cal-li {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
	}

	.cal-day-li {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 63rpx;
		height: 63rpx;

		.day_text {
			font-size: 34rpx;
			color: #333;
		}
	}

	.cal-day-li-selected {
		// background-color: #3ea3ff;
		// border-radius: 50%;
		color: #3ea3ff !important;
		font-weight: bold;
	}
</style>