tongli_WeChat/subPackages/eventCalendar/eventCalendar.vue

<template>
	<view class="bg">
		<span class="iconfont topLeft" @click="goBack">&#xe660;</span>
		
		<view class="calendar">
			<view class="calendar-top flex-between">
				<view @click="preNextDate(0)">
					<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/left.png" class="iconfont" />
					{{ monthShow ? '上一月' : '上一周' }}
				</view>
				<view>{{year}}年<span>{{month}}</span>月</view>
				<view @click="preNextDate(1)">
					{{ monthShow ? '下一月' : '下一周' }}
					<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/right.png" class="iconfont" />
				</view>
			</view>
			<view class="calendar-bottom">
				<view class="week-item" v-for="(item,index) in weekList" :key="index">
					{{item}}
				</view>
				
				<view v-for="(item, index) in everyDay" :key="item.day" class="day-box flex-center" :class="(nowDay > item.date) ? 'grayDate' : ''" v-if="monthShow">
					<view class="day-item" :class="selectDay == item.date ? 'daySelect' : ''" @click="changeDate(item.date)">
						{{ nowDay== item.date ? '今日' : item.day }}
						<view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag"></view>
					</view>
				</view>
				
				<view v-for="(item, index) in weekDates" :key="index" class="day-box flex-center" :class="(nowDay > getNowTime(item)) ? 'grayDate' : ''" v-if="!monthShow">
					<view class="day-item" :class="selectDay == getNowTime(item) ? 'daySelect' : ''" @click="changeDate(getNowTime(item))">
						{{ nowDay == getNowTime(item) ? '今日' : getNowTime(item).slice(-2) }}
						<view class="day-point" v-if="(item && selectDay != getNowTime(item)) && item.flag"></view>
					</view>
				</view>
				
				<view class="" style="width: 100%;height: 50rpx;padding: 20rpx;" @click="changeWeekMonth">
					<img :src="monthShow ? 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/top.png' : 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/bottom.png'" class="iconfont" />
				</view>
			</view>
		</view>
		
		<!-- 活动列表 -->
		<view class="box">
			<view class="search-box">
				<img src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" class="search-img" />
				<input type="text" placeholder="搜索" v-model="keywords" @confirm="getList()"/>
			</view>
			
			<view class="type-box flex-between">
				<view :class="['type-item',{'type-active': index == typeIndex}]" v-for="(item,index) in typeList" :key="index" @click="typeIndex = index;getList()">
					{{item.title}}
				</view>
			</view>
			
			<view class="item" v-for="(item,index) in list" :key="index">
				<image :src="showImg(item.image)" mode="aspectFill" class="item-img"></image>
				<view class="content flex-column">
					<view class="title text-overflowRows">{{item.title}}</view>
					<view class="tag text-overflow" v-if="item.keyword">{{item.keyword}}</view>
					<view class="subtitle text-overflow" v-if="item.address">地址：{{item.address}}</view>
					<view class="subtitle text-overflow" v-if="item.start_time && item.end_time">时间：{{item.start_time}} - {{item.end_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
				monthShow: false,
				year: 0,
				month: 0,
				day: 0,
				week: '',
				nowDay: '',
				selectDay: '',
				everyDay: [],
				weekDates: [],
				list: [],
				keywords: '',
				typeList: [
					{
						title: '全部',
						id: ''
					},
					{
						title: '景区活动',
						id: '13'
					},
					{
						title: '演出',
						id: '14'
					},
					{
						title: '展览',
						id: '15'
					},
					{
						title: '其他',
						id: '16'
					}
				],
				typeIndex: 0
			}
		},
		onLoad() {
			this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4));
			this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7));
			this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10));
			this.nowDay = this.getNowTime(new Date())
			this.selectDay = this.getNowTime(new Date())
			// if(uni.getSystemInfoSync().platform == 'ios'){
			// 	this.getEveryDay(this.year + '/' + this.month + '/' + this.day);
			// }else{
			// 	this.getEveryDay(this.year + '-' + this.month);
			// }
			this.getWeekDates(new Date())
			
			this.getList()
		},
		methods: {
			// 列表
			getList() {
				this.Post({
					date: this.selectDay,
					offset: 0,
					limit: 100,
					type_id: this.typeList[this.typeIndex].id,
					title: this.keywords
				},'/api/activity/getActivityCalendar').then(res => {
					this.list = res.data
				})
			},
			// 将日期格式/改为-
			formatDate(dateStr) {
				if (dateStr) {
					return dateStr.replace(/^\D*(\d{4})\D*(\d{2})\D*(\d{2})\D*$/, '$1-$2-$3').replace(/^(\d{4})-(\d{0,2})-(\d{0,2})$/, (match, p1, p2, p3) => {return `${p1}-${String(p2).padStart(2, '0')}-${String(p3).padStart(2, '0')}`;})
				}
				return
			},
			// 获取当前日期是否有活动
			getActivityCalendarCount() {
				let start = ''
				let end = ''
				if (!this.monthShow) {
					start = this.getNowTime(this.weekDates[0])
					end = this.getNowTime(this.weekDates[6])
				} else{
					start = this.everyDay[0].date
					end = this.everyDay.slice(-1)[0].date
				}
				
				this.Post({
					begin_date: start,
					end_date: end,
				},'/api/activity/getActDateCount').then(res => {
					if (!this.monthShow) { //按周展示
						this.weekDates.forEach(day=> {
							const date = this.formatDate(this.getNowTime(day))
							day.flag = 0
							res.data.forEach(item=> {
								if (date == item) {
									day.flag = 1
								}
							})
						})
					} else{ //按月展示
						this.everyDay.forEach(day=> {
							day.flag = 0
							res.data.forEach(item=> {
								if (this.formatDate(day.date) == item) {
									day.flag = 1
								} 
							})
						})
					}
				})
			},
			// 获取当前日期
			getNowTime(time, type) {
				var date = time,
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				if (type == 1) {
					if(uni.getSystemInfoSync().platform == 'ios'){
						var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
					}else{
						var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
					}
				} else {
					var timer = year + '/' + month + '/' + day;
				}
				
				return timer;
			},
			// 遍历月份日期
			getEveryDay(data) {
				let date = new Date(data);
				let month = date.getMonth();
				//设置月份
				date.setMonth(month + 1);
				//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
				date.setDate(0);
				let dayArry = [];
				let day = date.getDate(); //获取当前月最后一天是几号
				for (let i = 1; i <= day; i++) {
					date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
					dayArry.push({ day: i, week: this.getWeekday(date.getDay()), date: this.getNowTime(date), flag: 0 }); //选中月份的每一天和当天是星期几
				}
				
				this.everyDay = dayArry;
				console.log(this.everyDay)
				this.getActivityCalendarCount();
				this.resetDay();
			},
			getWeekday(day) {
				return ['日', '一', '二', '三', '四', '五', '六'][day];
			},
			//重置日期与顶部周期相对应
			resetDay() {
				let arr = this.weekList;
				let w = this.everyDay[0].week;
				arr.forEach((v, index) => {
					if (v == w) {
						let id = index;
						if (id != 0) {
							for (let i = 0; i < id; i++) {
								this.everyDay.unshift({ day: '', week: '' });
							}
						}
					}
				});
			},
			// 获取周
			getWeekDates(day){
				const currentDayOfWeek = day.getDay(); // 获取今天是星期几( 0 = 周日,...6 = 周六
				const startDate = new Date(day);
				startDate.setDate(day.getDate() - currentDayOfWeek);
				const weekDates = [];
				for (let i = 0; i < 7; i++) {
					const date = new Date(startDate);
					date.setDate(startDate.getDate() + i);
					weekDates.push(date)
				}
				this.weekDates = weekDates
				
				if(this.weekDates.length > 0) this.getActivityCalendarCount();
			},
			// 切换上一周月、下一周月
			preNextDate(e){
				if(this.monthShow){
					if(e){
						// 下一月
						this.month += 1;
						if (this.month > 12) {
							this.year += 1;
							this.month = 1;
						}
						if(uni.getSystemInfoSync().platform == 'ios'){
							this.getEveryDay(this.year + '/' + this.month + '/' + 1);
						}else{
							this.getEveryDay(this.year + '-' + this.month);
						}
					}else{
						// 上一月
						this.month -= 1;
						if (this.month == 0) {
							this.year -= 1;
							this.month = 12;
						}
						if(uni.getSystemInfoSync().platform == 'ios'){
							this.getEveryDay(this.year + '/' + this.month + '/' + 1);
						}else{
							this.getEveryDay(this.year + '-' + this.month);
						}
					}
				}else{
					if(e){
						// 下一周
						this.getNextWeekDates()
					}else{
						// 上一周
						this.getPreviousWeekDates()
					}
				}
				this.getActivityCalendarCount()
			},
			getPreviousWeekDates() {
				const today = this.weekDates[0]
				const previousWeekStartDate = new Date(today);
				previousWeekStartDate.setDate(today.getDate() - 7); // 上周的开始日期
			
				const previousWeekDates = [];
				for (let i = 0; i < 7; i++) {
					const date = new Date(previousWeekStartDate);
					date.setDate(previousWeekStartDate.getDate() + i);
					previousWeekDates.push(date);
				}
			
				this.weekDates = previousWeekDates;
				this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4));
				this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7));
			},
			getNextWeekDates() {
				const today = this.weekDates[0]
				const nextWeekStartDate = new Date(today);
				nextWeekStartDate.setDate(today.getDate() + 7); // 下周的开始日期
			
				const nextWeekDates = [];
				for (let i = 0; i < 7; i++) {
					const date = new Date(nextWeekStartDate);
					date.setDate(nextWeekStartDate.getDate() + i);
					nextWeekDates.push(date);
				}
			
				this.weekDates = nextWeekDates;
				this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4));
				this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7));
			},
			// 更换周/月
			changeWeekMonth() {
				this.monthShow = !this.monthShow
			 
				this.month = Number(this.selectDay.slice(5, 7));
			 
				if(this.monthShow) {
					this.year = Number(this.selectDay.slice(0, 4))
					if(uni.getSystemInfoSync().platform == 'ios'){
						this.getEveryDay(this.year + '/' + this.month + '/' + 1);
					}else{
						this.getEveryDay(this.year + '/' + this.month);
					}
				} else {
					this.getWeekDates(new Date(this.selectDay))
				}
			},
			// 选中日期
			changeDate(item){
				if(this.nowDay <= item ){
			
					this.year = Number(item.slice(0, 4));
					this.month = Number(item.slice(5, 7));
					this.day = Number(item.slice(8, 10));
					this.selectDay = item
					this.pageNo = 0
					this.list = []
					this.getList()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		overflow-x: hidden;
		background: url('https://static.ticket.sz-trip.com/yandu/images/eventCalendar/topBg.png') no-repeat;
		background-size: 100%;
		background-color: #F7F7F7;
		padding-bottom: 100rpx;
	}
	
	.topLeft {
		position: absolute;
		left: 26rpx;
		top: 101rpx;
		font-size: 40rpx;
		z-index: 2;
	}
	
	.topBg {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.calendar{
		padding: 0 26rpx;
		margin-top: 170rpx;
		
		.calendar-top{
			height: 109rpx;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			
			view:nth-child(2){
				font-size: 31rpx;
				font-weight: bold;
				
				span {
					font-size: 40rpx;
				}
			}
			
			.iconfont{
				width: 20rpx;
				height: 20rpx;
				vertical-align: inherit;
			}
		}
		
		.calendar-bottom{
			display: flex;
			flex-wrap: wrap;
			padding: 33rpx 0 40rpx;
			width: 697rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
			
			.week-item{
				width: 14%;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			
			.day-box{
				width: 14%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.day-item{
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					
					.day-point{
						width: 5rpx;
						height: 5rpx;
						background: #FF3615;
						border-radius: 50%;
						margin: 5rpx auto 0;
					}
				}
				
				.daySelect{
					width: 80rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: linear-gradient(90deg, #9EE4FE, #7FD491);
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					border-radius: 50%;
				}
			}
			
			.grayDate{
				.day-item{
					color: #999999;
					
					.day-point{
						background: #CCCCCC;
					}
				}
			}
			
			.iconfont{
				width: 20rpx;
				height: 20rpx;
				// position: absolute;
				// left: 50%;
				// right: 0;
				// margin-left: -18rpx;
				// bottom: 36rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
	
	.box {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin: 26.67rpx auto 0;
		padding: 27rpx 13rpx;
		
		.search-box {
			width: 670rpx;
			height: 53rpx;
			background: #F7F7F7;
			border-radius: 13rpx;
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			
			.search-img {
				width: 26.67rpx;
				height: 26.67rpx;
			}
			
			input {
				margin-left: 11rpx;
				width: 610rpx;
				line-height: 53rpx;
				font-weight: 400;
				font-size: 25rpx;
				color: #000;
			}
		}
		
		.type-box {
			height: 134rpx;
			
			.type-item {
				line-height: 54rpx;
				border-radius: 13rpx;
				border: 1rpx solid #999999;
				padding: 0 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}
			.type-active {
				background: linear-gradient(90deg, #9EE4FE, #7FD491);
				font-weight: bold;
				color: #000000;
				border: none;
			}
		}
		
		.item {
			display: flex;
			margin-bottom: 20rpx;
			
			.item-img {
				width: 187rpx;
				height: 236rpx;
				border-radius: 13rpx;
			}
			
			.content {
				width: 447rpx;
				height: 236rpx;
				padding: 15rpx 0;
				margin-left: 15rpx;
				justify-content: space-between;
				
				.title {
					width: 447rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}
				
				.tag {
					padding: 0 10rpx;
					width: fit-content;
					max-width: 400rpx;
					line-height: 36rpx;
					border-radius: 7rpx;
					border: 1rpx solid #71B580;
					font-weight: 500;
					font-size: 24rpx;
					color: #71B580;
				}
				
				.subtitle {
					width: 447rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}
	}
</style>