JiangShan-app/pagesA/scene/timing/cron/second.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" class="radio-style">
							{{$tt('cron.second.452546-0')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0">
						<u-radio :name="2" :label="2">
							{{$tt('cron.second.452546-1')}}
							<u--input v-model='cycle01' :min="1" :max="30" type="number"
								:customStyle="{ marginLeft: '15rpx',width:'100rpx;' }" :maxlength="2" @input="checkValueCycle01"/> -
							<u--input v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 2" :max="31"
								:customStyle="{ marginRight: '15rpx',width:'100rpx;' }" type="number" :maxlength="2" @input="checkValueCycle02"/>
							{{$tt('cron.second.452546-2')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="3" :label="3">
							{{$tt('cron.second.452546-3')}}
							<u--input v-model='average01' :min="1" :max="30" type="number"
								:customStyle="{ marginLeft: '15rpx',width:'100rpx;' }" :maxlength="2" @input="checkValueAverage01"/>
							{{$tt('cron.second.452546-4')}}
							<u--input v-model='average02' :min="average01 ?average01  + 1 : 2" :max="31"
								:customStyle="{ margin: '0 15rpx',width:'100rpx;' }" type="number" :maxlength="2" @input="checkValueAverage02"/>
							{{$tt('cron.second.452546-5')}}
						</u-radio>
					</view>
					<view style="padding:20rpx 0"><u-radio :name="4" :label="4">
							{{$tt('cron.second.452546-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: '15rpx' }">
								<!-- #ifdef APP-NVUE -->
								<u--input v-model="selectValue" :placeholder="$tt('cron.day.304304-11')"
									inputAlign="right" disabledColor="#fff" disabled>
								</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>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				radioValue: 1,
				radioValue1: 1,
				cycle01: 1,
				cycle02: 2,
				average01: 0,
				average02: 1,
				selectValue: '',
				checkboxList: [],
				isRepeat: false,
				repeatValue: '',
				checkNum: this.$options.propsData.check,
				// 生成 0 到 60 的数组作为选项  
				options: Array.from({ length: 61 }, (_, i) => ({
					value: i,
					text: i.toString(),
				})),
				locationList: [{
					value: 1,
					text: this.$tt('deviceDetail.autoPosition')
				}, {
					value: 2,
					text: this.$tt('deviceDetail.devicePosition')
				}, {
					value: 3,
					text: this.$tt('deviceDetail.customLocation')
				}],
			}
		},
		name: 'crontab-second',
		props: ['check', 'radioParent'],
		methods: {
			// 单选按钮值变化时
			radioChange() {
				switch (this.radioValue) {
					case 1:
						this.$emit('update', 'second', '*', 'second');
						break;
					case 2:
						this.$emit('update', 'second', this.cycleTotal);
						break;
					case 3:
						this.$emit('update', 'second', this.averageTotal);
						break;
					case 4:
						this.$emit('update', 'second', this.checkboxString);
						break;
				}
			},
			// 周期两个值变化时
			cycleChange() {
				if (this.radioValue == '2') {
					this.$emit('update', 'second', this.cycleTotal);
				}
			},
			// 时间选择
			handleRepeatConfirm() {
				this.selectValue = this.checkboxList.join(', ');
				this.isRepeat = false;
			},
			// 平均两个值变化时
			averageChange() {
				if (this.radioValue == '3') {
					this.$emit('update', 'second', this.averageTotal);
				}
			},
			// checkbox值变化时
			checkboxChange() {
				if (this.radioValue == '4') {
					this.$emit('update', 'second', this.checkboxString);
				}
			},
			handleSelectChange(selected) {
				// 处理选中值变化  
				this.checkboxList = selected;
			},
			//检查输入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',
			radioParent() {
				this.radioValue = this.radioParent;
				console.log(this.radioValue, 'this.radioValue');
			}
		},
		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>
	.container-wrap {
		.form-wrap {
			background: #fff;
			border-radius: 10rpx;

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