JiangShan-app/pagesA/scene/timing/cron/year.vue

<template>
	<view class="scene-timing-wrap">
		<view class="container-wrap">
			<view class="form-item-wrap">
				<u-radio-group v-model='radioValue' placement="column" spacing="30rpx">
					<view style="padding:20rpx 0"><u-radio :name="1" :label="1">
							{{$tt('cron.year.999034-0')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="2" :label="2">
							{{$tt('cron.year.999034-1')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="3" :label="3">
							{{$tt('cron.year.999034-2')}}
							<u--input v-model='cycle01' :min='fullYear' :max="2098" type="number"
								:customStyle="{ marginLeft: '15rpx' }" :maxlength="4" @input="checkValueCycle01" />-
							<u--input v-model='cycle02' :min="cycle01 + 1 ? cycle01 + 1 : fullYear + 1" :max="2099"
								type="number" :maxlength="4" @input="checkValueCycle02" />
						</u-radio>
					</view>
					<view style="padding:20rpx 0"> <u-radio :name="4" :label="4">
							{{$tt('cron.year.999034-3')}}
							<u--input v-model='average01' :min='fullYear' :max="2098" type="number"
								:customStyle="{ margin: '0 15rpx' }" :maxlength="4"
								@input="checkValueAverage01" />{{$tt('cron.year.999034-4')}}
							<u--input v-model='average02' :min="1" :max="2099 - average01 || fullYear"
								:customStyle="{ margin: '0 15rpx' }" type="number" :maxlength="2"
								@input="checkValueAverage02" />{{$tt('cron.year.999034-5')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="5" :label="5">
							{{$tt('cron.year.999034-6')}}
							<view style="margin-left: 15rpx;"></view>
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')" inputAlign="right"
								disabledColor="#fff" disabled :customStyle="{ marginRight: '20rpx' }">
								<!-- #ifdef APP-NVUE -->
								<u--input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')"
									inputAlign="right" disabledColor="#fff" disabled
									:customStyle="{ marginRight: '20rpx' }">
								</u--input>
								<!-- #endif -->
								<!-- #endif -->
								<template slot="suffix">
									<u-icon name="arrow-down" @click="isRepeat = true"></u-icon>
								</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="other">
			<u-popup :show="isRepeat" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="true"
				@close="isRepeat = false">
				<view class="repeat-popup-wrap">
					<view class="nav">
						<text @click="isRepeat = false">{{$tt('common.cancel')}}</text>
						<text @click="handleRepeatConfirm">{{$tt('common.confirm')}}</text>
					</view>
					<view class="radio-group-wrap" style="height: 500rpx;overflow: auto;">
						<u-checkbox-group v-model="checkboxList" :borderBottom="false" placement="column"
							iconPlacement="right">
							<view class="radio-wrap">
								<view v-for="item in Array(9).fill(0).map((_, index) => index)" :key="item"
									:value="item - 1 + fullYear" :label="item - 1 + fullYear" class="number-wrap"
									style="padding:15rpx 0">
									<u-checkbox :label="item + fullYear" :name="item + fullYear"
										iconSize="16"></u-checkbox>
								</view>
							</view>
						</u-checkbox-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import { navigateBackTo } from '@/utils/common.js';

	export default {
		data() {
			return {
				fullYear: 0,
				radioValue: 1,
				cycle01: 0,
				cycle02: 0,
				average01: 0,
				average02: 1,
				checkboxList: [],
				selectValue: '',
				checkboxList: [],
				isRepeat: false,
				repeatValue: '',
				checkNum: this.$options.propsData.check,
			}
		},
		name: 'crontab-year',
		props: ['check', 'month', 'cron'],
		methods: {
			// 单选按钮值变化时
			radioChange() {
				switch (this.radioValue) {
					case 1:
						this.$emit('update', 'year', '');
						break;
					case 2:
						this.$emit('update', 'year', '*');
						break;
					case 3:
						this.$emit('update', 'year', this.cycleTotal);
						break;
					case 4:
						this.$emit('update', 'year', this.averageTotal);
						break;
					case 5:
						this.$emit('update', 'year', this.checkboxString);
						break;
				}
			},
			// 周期两个值变化时
			cycleChange() {
				if (this.radioValue == '3') {
					this.$emit('update', 'year', this.cycleTotal);
				}
			},
			// 平均两个值变化时
			averageChange() {
				if (this.radioValue == '4') {
					this.$emit('update', 'year', this.averageTotal);
				}
			},
			// checkbox值变化时
			checkboxChange() {
				if (this.radioValue == '5') {
					this.$emit('update', 'year', this.checkboxString);
				}
			},
			handleSelectChange(selected) {
				// 处理选中值变化  
				this.checkboxList = selected;
			},
			// 时间选择
			handleRepeatConfirm() {
				this.selectValue = this.checkboxList.join(', ');
				this.isRepeat = false;
			},
			//检查输入cycle01
			checkValueCycle01(event) {
				if (event < this.fullYear) {
					this.cycle01 = this.fullYear;
				} else if (event > 2098) {
					this.cycle01 = 2098;
				} else {
					this.cycle01 = event; 
				}
			},
			//检查输入cycle02
			checkValueCycle02(event) {
				if (event < this.cycle01) {
					this.cycle02 = this.cycle01 + 1;
				} else if (event > 2099) {
					this.cycle02 = 2099;
				} else {
					this.cycle02 = event; 
				}
			},
			//检查输入average01
			checkValueAverage01(event) {
				if (event < this.fullYear) {
					this.average01 = this.fullYear;
				} else if (event > 2098) {
					this.average01 = 2098;
				} else {
					this.average01 = event;  
				}
			},
			//检查输入average02
			checkValueAverage02(event) {
				if (event < 1) {
					this.average02 = 1;
				} else if (event > (2099 - this.average01)) {
					this.average02 = 2099 - this.average01;
				} else {
					this.average02 = event;  
				}
			},
		},
		watch: {
			'radioValue': 'radioChange',
			'cycleTotal': 'cycleChange',
			'averageTotal': 'averageChange',
			'checkboxString': 'checkboxChange'
		},
		computed: {
			// 计算两个周期值
			cycleTotal: function() {
				const cycle01 = this.checkNum(this.cycle01, this.fullYear, 2098)
				const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : this.fullYear + 1, 2099)
				return cycle01 + '-' + cycle02;
			},
			// 计算平均用到的值
			averageTotal: function() {
				const average01 = this.checkNum(this.average01, this.fullYear, 2098)
				const average02 = this.checkNum(this.average02, 1, 2099 - average01 || this.fullYear)
				return average01 + '/' + average02;
			},
			// 计算勾选的checkbox值合集
			checkboxString: function() {
				let str = this.selectValue;
				return str;
			}
		},
		mounted: function() {
			// 仅获取当前年份
			this.fullYear = Number(new Date().getFullYear());
			this.cycle01 = this.fullYear;
			this.cycle02 = this.fullYear + 1;
			this.average01 = this.fullYear;
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.scene-timing-wrap {

		.container-wrap {
			.form-wrap {
				background: #fff;
				border-radius: 10rpx;
				line-height: 100rpx;

				.form-item-wrap {
					font-size: 14px;
				}
			}

			.btn-wrap {
				margin: 30rpx 26rpx;
			}
		}

		.other {
			.repeat-popup-wrap {
				padding: 30rpx;

				.nav {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					margin-bottom: 34rpx;
				}

				.radio-group-wrap {
					background-color: #fff;
					border-radius: 10rpx;

					.radio-wrap {
						padding: 32rpx;

						&:not(:last-child) {
							border-bottom: 1rpx solid #F1F2F5;
						}
					}
				}
			}
		}
	}
</style>