校园报告

src/components/canlendar.vue

@@ -5,7 +5,8 @@
 		</div>
 		<div class="calendar-inner">
 			<div class="calendar-item" v-for="(item, index) of calendarList" :key="index"
-				:class="[item.disable ? 'disabled' : '',item.value=='2023-08-23'||item.value=='2023-08-18'||item.value=='2023-08-28'?'signdate':'',item.value===currentDay?'today':'']">
+				:class="[item.disable ? 'disabled' : '',item.signdate ? 'signdate':'',item.value===currentDay?'today':'']"
+				@click="changeToday_(item)">
 				<!-- <div v-if="item.value=='2023-08-23'||item.value=='2023-08-18'||item.value=='2023-08-28'" class="icons">
 					<span v-if="item.value=='2023-08-23'">早中</span>
 					<span v-else-if="item.value=='2023-08-18'">早中晚</span>
@@ -33,13 +34,26 @@
 				type: String,
 				default: ""
 			},
+			cateringAbnormalTypeGroupList: {
+				type: Array,
+				default: function() {
+					return [];
+				}
+			},
+			changeToday: {
+				type: Function,
+				default: function() {
+
+				}
+			}
 		},
 		data() {
 			return {
 				current: {}, // 当前时间
 				weekList: ['一', '二', '三', '四', '五', '六', '日'],
 				calendarList: [], // 用于遍历显示
-				shareDate: new Date()
+				shareDate: new Date(),
+				groupList: [],
 			}
 		},
 		computed: {
@@ -63,15 +77,19 @@
 		},
 		methods: {
 			init() {
-				console.log(this.shareDate_,)
+				console.log(this.shareDate_, )
 				this.shareDate = new Date(this.shareDate_);
 				this.current = this.currentDate;
+				this.groupList = this.cateringAbnormalTypeGroupList
 				// this.shareDate = new Date('2023-05-01')
 				console.log(this.shareDate, 'shareDate11111')
 				// 初始化当前时间
 				// this.setCurrent();
 				this.calendarCreator();
 			},
+			changeToday_(item) {
+				this.$emit('changeToday', item)
+			},
 			// 判断当前月有多少天
 			getDaysByMonth(year, month) {
 				return new Date(year, month + 1, 0).getDate();
@@ -138,6 +156,7 @@
 			calendarCreator() {
 				// 一天有多少毫秒
 				const oneDayMS = 24 * 60 * 60 * 1000;
+				console.log(this.groupList, 'groupList')
 
 				let list = [];
 				let {
@@ -158,32 +177,62 @@
 				let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
 				// 毫秒数
 				let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
-
+				// 默认每月第一天
+				let currentToday = {
+					month: this.current.month,
+					unrecordedZao: false,
+					unrecordedWu: false,
+					unrecordedWan: false
+				}
 				while (begin <= end) {
 					this.shareDate.setTime(begin);
 					let year = this.shareDate.getFullYear();
 					let curMonth = this.shareDate.getMonth();
 					let date = this.shareDate.getDate();
-					list.push({
+					let obj = {
 						year: year,
 						month: curMonth,
 						date: date,
 						disable: curMonth !== month,
-						value: this.stringify(year, curMonth, date)
-					});
+						value: this.stringify(year, curMonth, date),
+						signdate: false
+					}
+					if (curMonth == month) {
+						let f = this.groupList.filter(y => y.date == date)
+						if (f.length) {
+							obj.signdate = true
+							if(f[0].date == 1){
+								currentToday = Object.assign(currentToday, f[0])
+							}
+						}
+					}
+					list.push(obj);
 					begin += oneDayMS;
 				}
-
+				console.log(currentToday, 'currentToday')
+				this.changeToday_(currentToday)
 				this.calendarList = list;
 				console.log(list, 'calendarList')
 			}
 		},
 		watch: {
-			currentDate(val) {
-				this.current = val
+			currentDate(val, oldVal) {
+				if (val !== oldVal) {
+					this.current = val;
+					this.calendarCreator();
+				}
 			},
-			shareDate_(val) {
-				this.shareDate = new Date(val)
+			shareDate_(val, oldVal) {
+				if (val !== oldVal) {
+					this.shareDate = new Date(val)
+					this.calendarCreator();
+				}
+			},
+			cateringAbnormalTypeGroupList(val, oldVal) {
+				if (val !== oldVal) {
+					this.groupList = val
+					this.calendarCreator();
+				}
 			}
 		},
 
@@ -232,7 +281,7 @@
 		width: 88rpx;
 		height: 88rpx;
 		box-sizing: border-box;
-		padding-top: 28rpx;
+		/* padding-top: 28rpx; */
 		border-radius: 22rpx;
 		margin: 5rpx;
 		justify-content: center;
@@ -241,7 +290,7 @@
 		font-family: PingFangSC-Semibold, PingFang SC;
 		font-weight: 600;
 		color: rgba(0, 0, 0, 0.75);
-		line-height: 45rpx;
+		line-height: 88rpx;
 		flex-direction: column;
 	}
 

src/pages/ApplyConsumption/Home/Home.vue

@@ -238,7 +238,7 @@
 					return
 				}
 				this.userInfo = {
-					schoolId: data.data['schoolId'],
+					schoolId: data.data['schoolId'] || '',
 					userId: data.data['userId'],
 					userType: data.data['userType'] || ''
 				}
@@ -267,6 +267,7 @@
 				}
 				data.data['schoolConsumption'] = schoolConsumption
 				this.HomeDataInfo = data.data
+				sessionStorage.setItem('HomeDataInfo', JSON.stringify(this.HomeDataInfo))
 				sessionStorage.setItem('accountId', this.HomeDataInfo['accountId'])
 				// 查询消费会员权益项
 				this.QueryProductContractItem()

src/pages/ApplyConsumption/campusReport/campusReport.vue

 <template>
-	<view>
+	<view class="campusReport">
 		<view class="info">
 			<view class="left">
 				<img :src="ImgUrl+'user/student.png'" alt="">
 				<view class="message">
-					<span class="name">宁哲言</span>
-					<span class="classInfo">三年级 2班</span>
+					<span class="name">{{homeDataInfo['userName'] || '安小智'}}</span>
+					<span class="classInfo">{{homeDataInfo['gradeName'] + ' ' + homeDataInfo['className']}} </span>
 				</view>
 			</view>
 			<view class="right" @click="choosePicker">
@@ -55,17 +55,18 @@
 						</view>
 						<view>
 							<li>本月有
-							<text v-if="isShow"><text class="light"> {{cateringAbnormalTypeGroupList.length}}
-								</text>天</text><text v-else><text class="light"> {{campusConsumerReportInfo.notEatingCount}}
-								</text>次</text>
-							在食堂的消费出现异常，{{campusConsumerReportInfo.avgMessage}}
+								<text v-if="isShow"><text class="light"> {{cateringAbnormalTypeGroupList.length}}
+									</text>天</text><text v-else><text class="light">
+										{{campusConsumerReportInfo.notEatingCount}}
+									</text>次</text>
+								在食堂的消费出现异常，{{campusConsumerReportInfo.avgMessage}}
 							</li>
 						</view>
 					</view>
 				</view>
 
 				<!--  遮罩层  -->
-				<template v-if="isVip">
+				<template v-if="!isVip">
 					<div class="Covers">
 						<div class="Covers_head">
 							<span>
@@ -80,7 +81,7 @@
 				</template>
 			</view>
 
-			<template v-if="!isVip">
+			<template v-if="isVip">
 				<!-- 生活费额度 -->
 				<view class="living">
 					<view class="hed">
@@ -133,30 +134,39 @@
 					</view>
 					<!-- 日历 -->
 					<view class="canlendar">
-						<Canlendar :currentDate="currentDate" :shareDate_="shareDate"></Canlendar>
+						<Canlendar :currentDate="currentDate" :shareDate_="shareDate" :cateringAbnormalTypeGroupList="cateringAbnormalTypeGroupList" @changeToday="changeToday"></Canlendar>
 					</view>
 					<!-- 底部 -->
 					<view class="dining_footer">
 						<img :src="ImgUrl+'user/rectangle.png'" alt="">
 						<view class="dining_date">
-							12月26日
+							{{today.date}}
 						</view>
 						<view class="dining_info">
 							<view class="item dingbre">
 								<span>早餐</span>
-								<view class="dining_img">
+								<view class="dining_img" v-if="!today.zao">
 									<img :src="ImgUrl+'user/eat.png'" alt="">
 								</view>
+								<view class="dining_icon" v-else>
+									<span>缺</span>
+								</view>
 							</view>
 							<view class="item">
 								<span>中餐</span>
-								<view class="dining_icon">
+								<view class="dining_img" v-if="!today.wu">
+									<img :src="ImgUrl+'user/eat.png'" alt="">
+								</view>
+								<view class="dining_icon" v-else>
 									<span>缺</span>
 								</view>
 							</view>
 							<view class="item">
 								<span>晚餐</span>
-								<view class="dining_icon">
+								<view class="dining_img" v-if="!today.wan">
+									<img :src="ImgUrl+'user/eat.png'" alt="">
+								</view>
+								<view class="dining_icon" v-else>
 									<span>缺</span>
 								</view>
 							</view>
@@ -248,15 +258,30 @@
 				<view class="footer">
 					<view class="footer_left">
 						<view class="footer_left_top">到期后将无法查看完整报告</view>
-						<view class="footer_left_bottom">有效期至<span class="special">2023年12月31</span>日，剩余<span
-								class="special">8</span>天</view>
+						<view class="footer_left_bottom">有效期至<span class="special">{{vipExpiredDt}}</span>，剩余<span
+								class="special">{{homeDataInfo['vipDaysRemaining']}}</span>天</view>
 					</view>
-					<view class="footer_right">
+					<view class="footer_right" @click="openAzMenber">
 						<span>延长权益</span>
 					</view>
 				</view>
 			</template>
 		</view>
+		<van-dialog v-model="dialogShow" :showConfirmButton="false" close-on-click-overlay
+			style="width: 90%;background: linear-gradient(225deg, #0ADD80 0%, #04B871 100%);margin: 100rpx 0 0;">
+			<view class="htmlCanvasTxt">
+				<view class="htmlCanvasTxt1">
+					<text>长按下方图片分享</text>
+				</view>
+				<view class="htmlCanvasTxt2">
+					<text>您可以分享给好友，或者保存到手机</text>
+				</view>
+			</view>
+			<view class="htmlCanvasBox">
+				<view class="htmlCanvas" id="htmlCanvas" ref="imgCanvas">
+				</view>
+			</view>
+		</van-dialog>
 	</view>
 </template>
 
@@ -280,6 +305,7 @@
 		}
 		return (false);
 	}
+	import html2cancas from "html2canvas"
 	import Canlendar from '@/components/canlendar.vue'
 	// 时间处理模块
 	import moment from 'moment'
@@ -291,6 +317,7 @@
 		name: 'campusReport',
 		data() {
 			return {
+				dialogShow: false,
 				shareDate: "",
 				currentDate: {
 					year: '',
@@ -319,6 +346,14 @@
 				userDealReportListAndSumObj: {
 					list: []
 				}, //订单流水用户分餐明细及汇总统计
+				today: {
+					date: "",
+					zao: false,
+					wu: false,
+					wan: false,
+				},
+				homeDataInfo: {},
+				vipExpiredDt: "",  // 有效期
 			}
 		},
 		components: {
@@ -346,14 +381,23 @@
 		},
 		created() {
 			this.dataRangeArr = this.repastDateTimeFormat()
-		},
-		async mounted() {
-			console.log(this.dataRangeArr, 'dataRangeArr')
 			this.currentDate.month = moment(this.dataRangeArr[this.dataRangeIndex].startDate).month()
 			this.currentDate.year = moment(this.dataRangeArr[this.dataRangeIndex].startDate).year()
 			this.currentDate.date = moment(this.dataRangeArr[this.dataRangeIndex].startDate).date()
 			this.shareDate = moment(this.dataRangeArr[this.dataRangeIndex].startDate).format('YYYY-MM-DD 00:00:00')
-			console.log(this.currentDate, 'currentDate1111111111111', this.shareDate)
+			this.today.date = (this.currentDate.month + 1) + '月1日'
+			
+			console.log(this.currentDate, 'currentDate1111111111111', this.shareDate,'this.homeDataInfo', this.homeDataInfo)
+		},
+		async mounted() {
+			console.log(this.dataRangeArr, 'dataRangeArr')
+			this.homeDataInfo = JSON.parse(sessionStorage.getItem('HomeDataInfo'))
+			if(this.homeDataInfo.vipStatus === 1) {
+				this.isVip = true;
+				this.vipExpiredDt = moment(this.homeDataInfo.vipExpiredDt).format('YYYY年MM月DD日')
+				console.log(this.vipExpiredDt, 'this.vipExpiredDt')
+			}
+			console.log(this.isVip, 'isVip')
 			this.columns = this.dataRangeArr.map(x => x.month)
 			console.log(this.columns, 'columns')
 			await this.getCampusConsumerReport()
@@ -362,17 +406,60 @@
 			// await this.getUserDealReportListAndSum()
 		},
 		methods: {
+			shareHandler: function() {
+				let htmlCanvasImg = document.getElementsByClassName("htmlCanvasImg")[0];
+				if (htmlCanvasImg) {
+					htmlCanvasImg.parentNode.removeChild(htmlCanvasImg);
+				}
+				this.toImage();
+				this.dialogShow = true;
+			},
+			toImage: function() {
+				this.$nextTick(() => {
+					html2cancas(document.getElementsByClassName("campusReport")[0], {
+						useCORS: true,
+						// 解决截图不完整问题
+						scale: 1,
+						height: document.getElementsByClassName("campusReport")[0].scrollHeight,
+						windowHeight: document.getElementsByClassName("campusReport")[0].scrollHeight
+					}).then((canvas) => {
+						let htmlCanvas = document.getElementById('htmlCanvas');
+						let url = canvas.toDataURL('image/png');
+						this.imgUrl = url;
+						let img = document.createElement("img");
+						img.setAttribute('src', this.imgUrl);
+						img.setAttribute('class', 'htmlCanvasImg');
+						img.style.width = '83vw';
+						img.style.borderRadius = '15px';
+						htmlCanvas.appendChild(img);
+					})
+				})
+			},
+			// 切换日期
+			changeToday(today){
+				this.today.date = (today.month + 1) + '月' + today.date + '日'
+				if(Reflect.has(today, 'unrecordedZao')){
+					this.today.zao = today.unrecordedZao
+				}
+				if(Reflect.has(today, 'unrecordedWu')){
+					this.today.wu = today.unrecordedWu
+				}
+				if(Reflect.has(today, 'unrecordedWan')){
+					this.today.wan = today.unrecordedWan
+				}
+			},
 			dateRangeChange(e) {
 				console.log(e)
 			},
 			async confrimDate(date) {
 				console.log(date, 'date')
 				const self = this;
+				let obj = this.dataRangeArr.filter((x, idx) => (x.month == date) && (self.dataRangeIndex = idx))
 				this.currentDate.month = moment(this.dataRangeArr[this.dataRangeIndex].startDate).month()
 				this.currentDate.year = moment(this.dataRangeArr[this.dataRangeIndex].startDate).year()
 				this.currentDate.date = moment(this.dataRangeArr[this.dataRangeIndex].startDate).date()
 				this.shareDate = moment(this.dataRangeArr[this.dataRangeIndex].startDate).format('YYYY-MM-DD 00:00:00')
-				let obj = this.dataRangeArr.filter((x, idx) => (x.month == date) && (self.dataRangeIndex = idx))
+				console.log(this.currentDate, 'currentDate222222222222222', this.shareDate)
 				console.log(obj, 'obj', this.dataRangeIndex)
 				await this.getCampusConsumerReport()
 				await this.initPieCharts()
@@ -396,8 +483,9 @@
 			async getCampusConsumerReport() {
 				const this_ = this;
 				let params = {
-					userId: '2882955', //getQueryParams('userId'),
-					schoolId: '90118', //getQueryParams('schoolId'),
+					userId: getQueryParams('userId'),  //'2882955',
+					schoolId: getQueryParams('schoolId'), //'90118', 
+					userType: getQueryParams('userType'),
 					startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
 						.dataRangeArr[this_.dataRangeIndex].startDate : "",
 					endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
@@ -439,8 +527,9 @@
 				let params = {
 					abnormalType: 1,
 					cateringTypes: '1,2,3',
-					userId: '4145529', //getQueryParams('userId'),
-					schoolId: '90118', //getQueryParams('schoolId'),
+					userId: getQueryParams('userId'), //'4145529', //
+					schoolId: getQueryParams('schoolId'), // '197', //
+					userType: getQueryParams('userType'), // 1, 
 					startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
 						.dataRangeArr[this_.dataRangeIndex].startDate : "",
 					endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
@@ -462,8 +551,13 @@
 						})
 						return
 					}
-					this.cateringAbnormalTypeGroupList = data.data;
-					console.log(data, '用户消费未就餐信息')
+					let res = data.data;
+					console.log(res, 'res')
+					if(res.length){
+						res = res.map(x => { x.date = moment(x.statisticalDate).date(); return x})
+					}
+					this.cateringAbnormalTypeGroupList = res;
+					console.log(res, '用户消费未就餐信息')
 				} catch (e) {
 					console.warn(e)
 					//TODO handle the exception
@@ -474,14 +568,20 @@
 				}
 				return
 			},
+			// 跳转云平台权益中心
+			async openAzMenber() {
+				jWeixin.miniProgram.navigateTo({
+					url: '/pages/nationalCenterForLesbianRights/index'
+				})
+			},
 			// 查询订单流水用户分餐明细及汇总统计
 			async getUserDealReportListAndSum() {
 				const this_ = this;
 				let params = {
 					accountId: 61,
-					userId: '2882955', //getQueryParams('userId'),
-					schoolId: '90118', //getQueryParams('schoolId'),
-					userType: 1,
+					userId: getQueryParams('userId'), //'2882955', //getQueryParams('userId'),
+					schoolId: getQueryParams('schoolId'), // '90118', //getQueryParams('schoolId'),
+					userType: getQueryParams('userType'), //1,
 					startDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_
 						.dataRangeArr[this_.dataRangeIndex].startDate : "",
 					endDate: this_.dataRangeArr[this_.dataRangeIndex] ? this_.dataRangeArr[
@@ -935,6 +1035,7 @@
 		color: rgba(0, 0, 0, 0.85);
 		line-height: 43rpx;
 		text-align: center;
+		white-space: nowrap;
 	}
 
 	.dining_info {