weekbar增加激活日期回显

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

@@ -27,7 +27,7 @@ export default {
 }
 </script>
 <script setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, nextTick } from 'vue'
 import dayjs from 'dayjs'
 
 const props = defineProps({
@@ -42,6 +42,10 @@ const props = defineProps({
 	activeColor: {
 		type: String,
 		default: '#165DFF'
+	},
+	activeDate: {
+		type: String,
+		default: dayjs().format('YYYY-MM-DD')
 	}
 })
 const emits = defineEmits(['change', 'click'])
@@ -49,9 +53,11 @@ const emits = defineEmits(['change', 'click'])
 const state = reactive({
 	week: [],
 	radix: 0,
-	activeDate: dayjs().format('YYYY-MM-DD')
+	activeDate: '',
+	curDay: '',
+	curDate: ''
 })
-const curDay = dayjs().day()
+
 const dayMap = {
 	1: '一',
 	2: '二',
@@ -63,18 +69,18 @@ const dayMap = {
 }
 const initWeek = () => {
 	state.week = []
-	for (let i = 1; i < curDay; i++) {
-		const diffDay = curDay - i
-		const date = dayjs().subtract(diffDay, 'day').add(7 * state.radix, 'day')
+	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 = curDay; i <= 7; i++) {
-		const diffDay = i - curDay
-		const date = dayjs().add(diffDay, 'day').add(7 * state.radix, 'day')
+	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'),
@@ -82,17 +88,29 @@ const initWeek = () => {
 		})
 	}
 }
+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)
-}, { immediate: true })
+})
 
 const handleClick= item => {
+	stopWatch()
 	state.activeDate = item.fullDate
-	emits('click', state.activeDate)
+	emits('click', item.fullDate)
 }
 </script>