fs-uni-template/components/fs-week-bar/fs-week-bar.vue

<template>
	<view class="fs-week-bar">
		<view class="fs-week-arrow" @click="handleChange('left')">
			<fs-icon type="icon-d-down" rotate="90" size="28rpx" :color="textColor"></fs-icon>
		</view>
		<view class="fs-week-list">
			<view 
				class="fs-week-item" 
				:class="{'fs-week-item-active': state.activeDate === item.fullDate}" 
				v-for="(item, index) in state.week" 
				:key="index"
				@click="handleClick(item)"
			>
				<view class="fs-week-item-hd">周{{item.day}}</view>
				<view class="fs-week-item-bd">{{item.date}}</view>
			</view>
		</view>
		<view class="fs-week-arrow" @click="handleChange('right')">
			<fs-icon type="icon-d-down" rotate="-90" size="28rpx" :color="textColor"></fs-icon>
		</view>
	</view>
</template>

<script>
export default {
	name: "fs-week-bar"
}
</script>
<script setup>
import { ref, reactive, watch, nextTick } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
	bgColor: {
		type: String,
		default: '#fff'
	},
	textColor: {
		type: String,
		default: '#666666'
	},
	activeColor: {
		type: String,
		default: '#165DFF'
	},
	activeDate: {
		type: String,
		default: dayjs().format('YYYY-MM-DD')
	}
})
const emits = defineEmits(['change', 'click'])

const state = reactive({
	week: [],
	radix: 0,
	activeDate: '',
	curDay: '',
	curDate: ''
})

const dayMap = {
	1: '一',
	2: '二',
	3: '三',
	4: '四',
	5: '五',
	6: '六',
	7: '日',
}
const initWeek = () => {
	state.week = []
	for (let i = 1; i < state.curDay; i++) {
		const diffDay = state.curDay - i
		const date = dayjs(state.curDate).subtract(diffDay, 'day').add(7 * state.radix, 'day')
		state.week.push({
			day: dayMap[i],
			date: date.format('MM-DD'),
			fullDate: date.format('YYYY-MM-DD'),
		})
	}
	for (let i = state.curDay; i <= 7; i++) {
		const diffDay = i - state.curDay
		const date = dayjs(state.curDate).add(diffDay, 'day').add(7 * state.radix, 'day')
		state.week.push({
			day: dayMap[i],
			date: date.format('MM-DD'),
			fullDate: date.format('YYYY-MM-DD'),
		})
	}
}
const stopWatch = watch(() => props.activeDate, val => {
	const date = val || undefined
	
	state.activeDate = dayjs(date).format('YYYY-MM-DD')
	state.curDate = dayjs(date).format('YYYY-MM-DD')
	state.curDay = dayjs(date).day() || 7
	
	// state.radix = Math.floor((dayjs(date).diff(dayjs(), 'day') + state.curDay) / 7)
	initWeek()
}, { immediate: true })

const handleChange = type => {
	type === 'left' ? state.radix-- : state.radix++
}
watch(() => state.radix, (val) => {
	initWeek()
	emits('change', state.week)
})

const handleClick= item => {
	stopWatch()
	state.activeDate = item.fullDate
	emits('click', item.fullDate)
}
</script>

<style lang="scss" scoped>
.fs-week{
	&-bar{
		display: flex;
		align-items: center;
		background-color: v-bind(bgColor);
		padding: 20rpx 0;
	}
	
	&-arrow{
		padding: 0 10rpx;
	}
	
	&-list{
		display: flex;
		flex: 1;
	}
	&-item{
		text-align: center;
		flex: 1;
		color: v-bind(textColor);
		
		&-active{
			color: v-bind(activeColor);
		}
		
		&-hd{
			font-size: 15px;
			font-weight: bold;
		}
		&-bd{
			font-size: 13px;
		}
	}
}
</style>