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

<template>
	<view class="scene-timing-wrap">
		<view class="container-wrap">
			<view class="form-item-wrap">
				<u-radio-group v-model='radioValue' placement="column">
					<view style="padding:20rpx 0"><u-radio :name="1" :label="1">
							{{$tt('cron.min.411657-0')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="2" :label="2">
							{{$tt('cron.min.411657-1')}}
							<u--input v-model='cycle01' :min="0" :max="58" type="number"
								:customStyle="{ marginLeft: '15rpx' }" :maxlength="2" @input="checkValueCycle01" /> -
							<u--input v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59"
								:customStyle="{ marginRight: '15rpx' }" type="number" :maxlength="2"
								@input="checkValueCycle02" />
							{{$tt('cron.min.411657-2')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="3" :label="3">
							{{$tt('cron.min.411657-3')}}
							<u--input v-model='average01' :min="0" :max="58" type="number"
								:customStyle="{ margin: '0 15rpx' }" :maxlength="2" @input="checkValueAverage01" />
							{{$tt('cron.min.411657-4')}}
							<u--input v-model='average02' :min="1" :max="59 - average01 || 0" type="number"
								:customStyle="{ margin: '0 15rpx' }" :maxlength="2" @input="checkValueAverage02"/>
							{{$tt('cron.min.411657-5')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="4" :label="4">
							{{$tt('cron.min.411657-6')}}
							<view style="margin-right: 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="num in Array(60).fill(0).map((_, index) => index)" :key="num"
									class="number-wrap" style="padding:15rpx 0">
									<u-checkbox :label="num.toString()" :name="num" iconSize="16"></u-checkbox>
								</view>
							</view>
						</u-checkbox-group>
						</u-checkbox-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				radioValue: 1,
				cycle01: 1,
				cycle02: 2,
				average01: 0,
				average02: 1,
				checkboxList: [],
				isRepeat: false,
				selectValue: '',
				checkNum: this.$options.propsData.check,
			}
		},
		name: 'crontab-min',
		props: ['check', 'cron'],
		methods: {
			// 单选按钮值变化时
			radioChange() {
				switch (this.radioValue) {
					case 1:
						this.$emit('update', 'min', '*', 'min');
						break;
					case 2:
						this.$emit('update', 'min', this.cycleTotal, 'min');
						break;
					case 3:
						this.$emit('update', 'min', this.averageTotal, 'min');
						break;
					case 4:
						this.$emit('update', 'min', this.checkboxString, 'min');
						break;
				}
			},
			// 周期两个值变化时
			cycleChange() {
				if (this.radioValue == '2') {
					this.$emit('update', 'min', this.cycleTotal, 'min');
				}
			},
			// 时间选择
			handleRepeatConfirm() {
				this.selectValue = this.checkboxList.join(', ');
				this.isRepeat = false;
			},
			// 平均两个值变化时
			averageChange() {
				if (this.radioValue == '3') {
					this.$emit('update', 'min', this.averageTotal, 'min');
				}
			},
			// checkbox值变化时
			checkboxChange() {
				if (this.radioValue == '4') {
					this.$emit('update', 'min', this.checkboxString, 'min');
				}
			},
			//检查输入cycle01
			checkValueCycle01(event) {
				if (event < 0) {
					this.cycle01 = 0;
				} else if (event > 58) {
					this.cycle01 = 58;
				} else {
					this.cycle01 = event;   
				}
			},
			//检查输入cycle02
			checkValueCycle02(event) {
				if (event < this.cycle01) {
					this.cycle02 = this.cycle01 + 1;
				} else if (event > 59) {
					this.cycle02 = 59;
				} else {
					this.cycle02 = event;   
				}
			},
			//检查输入average01
			checkValueAverage01(event) {
				if (event < 0) {
					this.average01 = 0;
				} else if (event > 58) {
					this.average01 = 58;
				} else {
					this.average01 = event;   
				}
			},
			//检查输入average02
			checkValueAverage02(event) {
				if (event < 1) {
					this.average02 = 1;
				} else if (event > 59) {
					this.average02 = 59;
				} else {
					this.average02 = event;   
				}
			},
		},
		watch: {
			'radioValue': 'radioChange',
			'cycleTotal': 'cycleChange',
			'averageTotal': 'averageChange',
			'checkboxString': 'checkboxChange',
		},
		computed: {
			// 计算两个周期值
			cycleTotal: function() {
				const cycle01 = this.checkNum(this.cycle01, 0, 58)
				const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
				return cycle01 + '-' + cycle02;
			},
			// 计算平均用到的值
			averageTotal: function() {
				const average01 = this.checkNum(this.average01, 0, 58)
				const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
				return average01 + '/' + average02;
			},
			// 计算勾选的checkbox值合集
			checkboxString: function() {
				let str = this.selectValue;
				return str == '' ? '*' : str;
			}
		}
	}
</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;

				.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>