展示星期+日期的组件（自己封装一下）

 效果图

 

<template>
	<view>
		<view class="app">
			<view class="head">
				<view class="cander">
					<view class="week">
						<view :class="currentDay == 1 ?'fontW':'day' ">
							 {{currentDay == 1 ?'今日':'一'}}
						</view>
						<view :class="currentDay == 1 ?'bgColor':'num' ">
							{{week.Mon}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay ==2 ?'fontW':'day' ">
						 {{currentDay == 2 ?'今日':'二'}}
						</view>
						<view :class="currentDay == 2 ?'bgColor':'num' ">
							{{week.Tues}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 3 ?'fontW':'day' ">
						 {{currentDay == 3 ?'今日':'三'}}
						</view>
						<view :class="currentDay == 3 ?'bgColor':'num' ">
							{{week.Wed}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 4 ?'fontW':'day' ">
							{{currentDay == 4 ?'今日':'四'}}
						</view>
						<view :class="currentDay == 4 ?'bgColor':'num' ">
							{{week.Thur}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 5 ?'fontW':'day' ">
							{{currentDay == 5 ?'今日':'五'}}
						</view>
						<view :class="currentDay == 5 ?'bgColor':'num' ">
							{{week.Fri}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 6 ?'fontW':'day' ">
							{{currentDay == 6?'今日':'六'}}
						</view>
						<view :class="currentDay == 6 ?'bgColor':'num' ">
							{{week.Sat}}
						</view>
					</view>
					<view class="week">
						<view :class="currentDay == 7 ?'fontW':'day' ">
							{{currentDay == 7 ?'今日':'日'}}
						</view>
						<view :class="currentDay == 7 ?'bgColor':'num' ">
							{{week.Sun}}
						</view>
					</view>
				</view>
			</view>
		</view>
		  
	</view>
</template>

<script>
	var that 
	export default {
		data() {
			return {
				currentDay:0,
				week:{},
				tabbar:tabbar,
				currentList:1,
			}
		},
		onLoad() {
			that = this
		},
		onShow() {
			let date = new Date()
			let t = date.getTime()
			let d = date.getDay()
			if(d == 0){
				d = 7
			}
			that.currentDay = d
			let oneDayt = 24*60*60*1000
			console.log(t,d)
			let Mon = new Date(t -(oneDayt * (d-1))).getDate()
			let Tues = new Date(t -(oneDayt * (d-2))).getDate()
			let Wed = new Date(t -(oneDayt * (d-3))).getDate()
			let Thur = new Date(t -(oneDayt * (d-4))).getDate()
			let Fri = new Date(t -(oneDayt * (d-5))).getDate()
			let Sat = new Date(t -(oneDayt * (d-6))).getDate()
			let Sun = new Date(t -(oneDayt * (d-7))).getDate()
			that.week = {Mon ,Tues ,Wed,Thur ,Fri ,Sat ,Sun}
 
		}
	}
</script>

<style lang="scss">
	
	
	.head {
		padding: 20rpx 0;
		border: 1px solid;
		box-shadow: 0 9rpx 8rpx -2rpx rgba(0,0,0,0.2);
		.cander {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			.week {
				text-align: center;
				
				.fontW {
					font-weight: 700;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				.day {
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				.num {
					border: 1px solid;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
				}
				.bgColor {
					background-color: $main;
					border: 1px solid;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
					color: $white;
				}
			}
		}
	}
</style>