uni_mattress/sleep/pages/weekReport/weekReport.vue

<template>
	<view class="report-container">
		<cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">周报告</view></cu-custom>
		
		<view class="month-report-header self-center items-center">
			<view class="flex-row header-date self-center">
				<image class="image_1"
					src="../../static/report/reportIconLeft.png"
				/>
				<text @click="openWeek" class="text_1">2023年第22周(05-29至06-04)</text>
				<image class="image_2"
					src="../../static/report/reportIconRight.png"
				/>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
		    <!-- value值不传默认是当前周 -->
		    <ccq-week-picker :value="value" @change="getWeeks"></ccq-week-picker>
		</uni-popup>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="睡眠习惯" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="睡眠效率" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="安稳度" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="心脏系统" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
		<view class="month-report flex-col">
			<view class="block-month-report flex-col">
				<view class="header-block-report">
					<uni-section title="呼吸系统" type="line"></uni-section>
				</view>
				<view class="chart-block-report">
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	// 引入得到周信息函数
	import weekjs from '../../components/ccq-week-picker/week.js';
	
	export default {
		data() {
			return {
				today:dayjs().format('YYYY-MM-DD'),
				yearMonthWeek: '',
				week: '',
				value: ''
			};
		},
		onReady: function() {
			
		},
		methods: {
			// 默认选择当前周
			weekInit(){
			    let y = dayjs().year();
			    let m = dayjs().month();
			    let res =  weekjs.getWeeksByMonth(y, m+1,this.today,1); 
			    this.setResultInfo(res);
			},
			getWeeks(res) {
			    if (res) { 
			        this.setResultInfo(res);
			    }
			    this.$refs['popup'].close()
			},
			// 设置结果集
			setResultInfo(i){
			    console.log(i);
			    let info = i.week;
			    this.yearMonthWeek = `${info.year}年${info.month}月${info.text} `;
			    this.week = info;
			    this.value = info.val;
			},
			openWeek() {
			    this.$refs['popup'].open()
			}            
		}
	}
</script>

<style lang="scss">
.report-container {
	background-color: #000000;
	padding-bottom: 2rem;
	
	.month-report {
		margin-top: 1rem;
		
		.block-month-report {
			margin: 0 1.25rem;
			opacity: 0.8;
			background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
			border-radius: 0.5rem;
			height: 7.81rem;
			
			.header-block-report {
				
			}
			.chart-block-report {
				
			}
		}
	}
	.month-report-header {
		padding: 0.5rem 1.2rem;
		background-color: #7e5a9d4d;
		border-radius: 1rem;
		-webkit-backdrop-filter: blur(0.31rem);
		backdrop-filter: blur(0.31rem);
		height: 2rem;
		width: fit-content;
		margin: 0 auto;
		text-align: center;
		margin-top: 1rem;
		
		.header-date {
			// display: inline-block;
		}
		.text_1 {
			color: #ffffff;
			padding: 0 0.3rem;
		}
		.image_1 {
			width: 0.63rem;
			height: 0.94rem;
		}
		.image_2 {
			width: 0.63rem;
			height: 0.94rem;
		}
	}
}	
</style>