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 } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
	bgColor: {
		type: String,
		default: '#fff'
	},
	textColor: {
		type: String,
		default: '#666666'
	},
	activeColor: {
		type: String,
		default: '#165DFF'
	}
})
const emits = defineEmits(['change', 'click'])

const state = reactive({
	week: [],
	radix: 0,
	activeDate: dayjs().format('YYYY-MM-DD')
})
const curDay = dayjs().day()
const dayMap = {
	1: '一',
	2: '二',
	3: '三',
	4: '四',
	5: '五',
	6: '六',
	7: '日',
}
const initWeek = () => {
	state.week = []
	for (let i = 1; i < curDay; i++) {
		const diffDay = curDay - i + 7 * state.radix
		state.week.push({
			day: dayMap[i],
			date: dayjs().subtract(diffDay, 'day').format('MM-DD'),
			fullDate: dayjs().subtract(diffDay, 'day').format('YYYY-MM-DD'),
		})
	}
	for (let i = curDay; i <= 7; i++) {
		const diffDay = i - curDay + 7 * state.radix
		state.week.push({
			day: dayMap[i],
			date: dayjs().add(diffDay, 'day').format('MM-DD'),
			fullDate: dayjs().add(diffDay, 'day').format('YYYY-MM-DD'),
		})
	}
}
const handleChange = type => {
	type === 'left' ? state.radix-- : state.radix++
}
watch(() => state.radix, (val) => {
	initWeek()
	emits('change', state.week)
}, { immediate: true })

const handleClick= item => {
	state.activeDate = item.fullDate
	emits('click', state.activeDate)
}
</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>