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>
/**
 * 时间周组件
 * @description 时间周组件
 * @property {String} bgColor 背景颜色
 * @property {String} textColor	文字颜色
 * @property {String} activeColor 激活颜色
 * @property {String} activeDate	激活日期
 * @event {Function} change 左右箭头切换事件
 */
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>