smartSchoolClockApp/uni_modules/jlk-week/components/jlk-week/jlk-week.vue

<template>
	<view class="weeks-outer" :style="{backgroundColor:bgcolor}">
		<view class="weeks-title" v-if="!!title" :style="titleStyles">
			{{title}}
		</view>
		<view class="weeks" :class="{'weeks-vertical':vertical}">
			<template v-for="item in weeks">
				<view :key="item.value" class="weeks-item" :style="{
						background: item.checked ? selectedColor : defaultColor,
						width: `${size}rpx`,
						height: `${size}rpx`,
						lineHeight: `${size}rpx`,
						fontSize: `${fontSize}rpx`,
						color:`${color}`,
						borderRadius: `${radius.indexOf('%') > 0 ? radius : (radius+'rpx')}`
					}" @tap="tapWeek(item)">
					{{item.text}}
					<jlk-icon name="jinzhi" color="red" size="48" class="icon-position" v-if="item.disabled"></jlk-icon>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import messages from './i18n/index.js'
	import Vue from 'vue'
	import VueI18n from 'vue-i18n'
	Vue.use(VueI18n)
	// let lang = navigator.language.toLowerCase().includes('en')?'en':'zh'
	let lang = 'zh'
	const i18n = new VueI18n({
		locale: lang === 'zh' ? 'zh-CN' : 'en-US',
		messages: messages
	})
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			titleStyles: {
				type: String,
				default: ''
			},
			value: {
				type: Array,
				default: () => {
					return []
				}
			},
			forbidden: {
				type: Array,
				default: () => {
					return []
				}
			},
			color: {
				type: String,
				default: '#FFFFFF'
			},
			bgcolor: {
				type: String,
				default: '#FFFFFF'
			},
			defaultColor: {
				type: String,
				default: '#BBBBBB'
			},
			selectedColor: {
				type: String,
				default: '#2A82E4'
			},
			size: {
				type: [String, Number],
				default: 72
			},
			fontSize: {
				type: [String, Number],
				default: 24
			},
			disabled: {
				type: Boolean,
				default: false
			},
			radius: {
				type: [String, Number],
				default: '100%'
			},
			vertical: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				weeks: [],
				selectedWeeks: [],
			}
		},
		mounted() {
			this.weeks = [{
					text: i18n.t('Week.Mon'),
					value: 1,
					checked: false,
					disabled: false
				},
				{
					text: i18n.t('Week.Tue'),
					value: 2,
					checked: false,
					disabled: false
				},
				{
					text: i18n.t('Week.Wed'),
					value: 3,
					checked: false,
					disabled: false
				},
				{
					text: i18n.t('Week.Thu'),
					value: 4,
					checked: false,
					disabled: false
				},
				{
					text: i18n.t('Week.Fri'),
					value: 5,
					checked: false,
					disabled: false
				},
				{
					text: i18n.t('Week.Sat'),
					value: 6,
					checked: false,
					disabled: false
				},
				{
					text: i18n.t('Week.Sun'),
					value: 0,
					checked: false,
					disabled: false
				}
			]

			for (let i = 0; i < this.forbidden.length; i++) {
				for (let j = 0; j < this.weeks.length; j++) {
					if (this.forbidden[i] === this.weeks[j].value) {
						this.weeks[j].disabled = true
					}
				}
			}

			this.selectedWeeks = this.value
			this.initWeek()
		},
		methods: {
			// 初始化week
			initWeek() {
				this.weeks.forEach(item => {
					this.selectedWeeks.forEach(pro => {
						if (item.value === pro) {
							item.checked = true
						}
					})
				})
			},
			//修改week样式
			tapWeek(item) {
				// 禁用插件
				if (this.disabled) return

				// 禁用某几个
				for (let i = 0; i < this.forbidden.length; i++) {
					if (this.forbidden[i] === item.value) {
						item.disabled = true
						return
					}
				}

				item.checked = !item.checked
				if (item.checked) {
					if (this.selectedWeeks.indexOf(item.value) === -1) {
						this.selectedWeeks.push(item.value)
					}
				} else {
					let index = this.selectedWeeks.indexOf(item.value)
					if (index !== -1) {
						this.selectedWeeks.splice(index, 1)
					}
				}
				this.$emit('change', this.selectedWeeks)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.weeks-outer {
		width: 100%;
		padding: 20rpx 0;
	}

	.weeks-title {
		text-align: center;
		padding: 40rpx 32rpx;
		color: #666666;
	}

	.weeks {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}

	.weeks .weeks-item {
		position: relative;
		text-align: center;
	}

	.weeks-vertical {
		flex-direction: column;
	}

	.weeks-vertical .weeks-item {
		margin: 10rpx 0;
	}

	.icon-position {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		opacity: 0.5;
	}
</style>