增加时间周组件

business/wx-login.vue

@@ -13,7 +13,7 @@
 				<fs-checkbox-group v-model="checkboxArray" checkedColorType="primary">
 				  <fs-checkbox value="1">
 						<view class="sub">
-							同意<text @click="read('/modules/common/about/agreement')">《用户服务协议》</text>和<text @click="read('/modules/common/about/policy')">《隐私政策》</text>
+							同意<text @click.stop="handleRoute('/modules/common/about/agreement')">《用户服务协议》</text>和<text @click.stop="handleRoute('/modules/common/about/policy')">《隐私政策》</text>
 						</view>
 				  </fs-checkbox>
 				</fs-checkbox-group>
@@ -83,7 +83,7 @@ const login = data => {
 	})
 }
 
-const read = url => {
+const handleRoute = url => {
 	uni.navigateTo({
 		url
 	})

components/fs-mask/fs-mask.vue

@@ -32,5 +32,6 @@ const handleMask = () => {
 	bottom: var(--window-bottom);
 	left: 0;
 	background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(10rpx);
 }
 </style>

components/fs-scroll-list/fs-scroll-list.vue

@@ -38,7 +38,7 @@ const props = defineProps({
 	},
 	indicatorWidth: {
 		type: String,
-		default: '50px'
+		default: '30px'
 	},
 	indicatorBarWidth: {
 		type: String,
@@ -66,7 +66,6 @@ onMounted(() => {
 	}).exec()
 })
 
-
 const indicatorLeftWidth = computed(() => {
 	return parseInt(props.indicatorWidth) - parseInt(props.indicatorBarWidth)
 })
@@ -112,6 +111,7 @@ const handleToLower = () => emits('right')
 		background-color: v-bind(indicatorActiveColor);
 		height: 8rpx;
 		width: v-bind(indicatorBarWidth);
+		border-radius: 50px;
 	}
 }
 </style>

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

@@ -0,0 +1,132 @@
+<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 <= 8 - curDay; 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>