cleanMachineUniApp/pages/Setting/cleanRule.vue

<template>
	<view class="content">
		<view class="box-title">{{ title }}</view>
		<timeSelector showType="time" @btnConfirm="btnConfirm0" @btnCancel="btnCancel0">
			<view class="box-time">
				<input type="text" class="input" :value="time0" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm1" @btnCancel="btnCancel1">
			<view class="box-time">
				<input type="text" class="input" :value="time1" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm2" @btnCancel="btnCancel2">
			<view class="box-time">
				<input type="text" class="input" :value="time2" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm3" @btnCancel="btnCancel3">
			<view class="box-time">
				<input type="text" class="input" :value="time3" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm4" @btnCancel="btnCancel4">
			<view class="box-time">
				<input type="text" class="input" :value="time4" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm5" @btnCancel="btnCancel5">
			<view class="box-time">
				<input type="text" class="input" :value="time5" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm6" @btnCancel="btnCancel6">
			<view class="box-time">
				<input type="text" class="input" :value="time6" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm7" @btnCancel="btnCancel7">
			<view class="box-time">
				<input type="text" class="input" :value="time7" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm8" @btnCancel="btnCancel8">
			<view class="box-time">
				<input type="text" class="input" :value="time8" />
			</view>
		</timeSelector>
		<timeSelector showType="time" @btnConfirm="btnConfirm9" @btnCancel="btnCancel9">
			<view class="box-time">
				<input type="text" class="input" :value="time9" />
			</view>
		</timeSelector>

		<view class="bu">
			<button type="primary" @click="submit()" class="button">
				<p class="p">提交</p>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import timeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	export default {
		components: {
			timeSelector
		},
		data() {
			return {
				title: '当前定时清洗时间',
				time0: '',
				time1: '',
				time2: '',
				time3: '',
				time4: '',
				time5: '',
				time6: '',
				time7: '',
				time8: '',
				time9: ''
			};
		},
		onLoad() {
			var rule = uni.getStorageSync("nowEquipmentRule");
			var rules = rule.split(",");
			if(rules.length>0){
				for(var i=0;i<rules.length;i++){
					switch (i) {
					    case 0:
					        this.time0=rules[i];
					        break;
					    case 1:
					        this.time1=rules[i];
					         break;
					    case 2:
					        this.time2=rules[i];
					         break;
					    case 3:
					        this.time3=rules[i];
					         break;
					    case 4:
					        this.time4=rules[i];
					         break;
					    case 5:
					        this.time5=rules[i];
					         break;
					    case 6:
					        this.time6=rules[i];
							break;
						case 7:
						    this.time7=rules[i];
						    break;
						case 8:
						    this.time8=rules[i];
						    break;
						case 9:
						    this.time9=rules[i];
						    break;
					} 
				}
			}
		},
		onShow() {
			
		},
		methods: {
			...mapActions('chart', ['updateRule']),
			btnConfirm0(e) {
				console.log('确定时间为：', e);
				this.time0 = e.key;
			},
			btnCancel0() {
				this.time0 = '';
			},

			btnConfirm1(e) {
				this.time1 = e.key;
			},
			btnCancel1() {
				this.time1 = '';
			},

			btnConfirm2(e) {
				this.time2 = e.key;
			},
			btnCancel2() {
				this.time2 = '';
			},

			btnConfirm3(e) {
				this.time3 = e.key;
			},
			btnCancel3() {
				this.time3 = '';
			},

			btnConfirm4(e) {
				this.time4 = e.key;
			},
			btnCancel4() {
				this.time4 = '';
			},

			btnConfirm5(e) {
				this.time5 = e.key;
			},
			btnCancel5() {
				this.time5 = '';
			},

			btnConfirm6(e) {
				this.time6 = e.key;
			},
			btnCancel6() {
				this.time6 = '';
			},

			btnConfirm7(e) {
				this.time7 = e.key;
			},
			btnCancel7() {
				this.time7 = '';
			},

			btnConfirm8(e) {
				this.time8 = e.key;
			},
			btnCancel8() {
				this.time8 = '';
			},

			btnConfirm9(e) {
				this.time9 = e.key;
			},
			btnCancel9() {
				this.time9 = '';
			},
			submit() {
				var rules = [];
				if (this.time0 != '') {
					rules.push(this.time0);
				}
				if (this.time1 != '') {
					rules.push(this.time1);
				}
				if (this.time2 != '') {
					rules.push(this.time2);
				}
				if (this.time3 != '') {
					rules.push(this.time3);
				}
				if (this.time4 != '') {
					rules.push(this.time4);
				}
				if (this.time5 != '') {
					rules.push(this.time5);
				}
				if (this.time6 != '') {
					rules.push(this.time6);
				}
				if (this.time7 != '') {
					rules.push(this.time7);
				}
				if (this.time8 != '') {
					rules.push(this.time8);
				}
				if (this.time9 != '') {
					rules.push(this.time9);
				}
				var rule;
				if (rules.length > 0) {
					rule = rules.join(",");
				}

				const param = {};
				var equipmentId = uni.getStorageSync("nowEquipmentId");
				if (equipmentId != '') {
					param['equipmentId'] = equipmentId;
				}
				if (rule != '') {
					param['rule'] = rule;
				}
				return this.updateRule(param)
					.then(data => {
						if (data == "SUCCESS") {
							uni.showToast({
								title: "修改成功",
								icon: 'none',
								duration: 1000
							});
						}
						if (data == "ERROR") {
							uni.showToast({
								title: "修改失败",
								icon: 'none',
								duration: 1000
							});
						}
						if (data == "") {
							uni.showToast({
								title: "修改异常",
								icon: 'none',
								duration: 1000
							});
						}
					}, _ => void uni.stopPullDownRefresh());
			},
		}
	};
</script>

<style>
	.box-title {
		margin: 24rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		padding-left: 40upx;
	}

	.box-time {
		margin: 24rpx;
		font-size: 30rpx;
		color: #3496fb;
		padding-top: 10upx;
		padding-left: 40upx;
	}

	.input {
		/* padding: 10upx 20upx 10upx 0upx; */
		padding-left: 20upx;
		padding-top: 10upx;
		background-color: #FFFFFF;
		width: 600upx;
		height: 50upx;
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}

	.bu {
		font-size: 50upx
	}

	.button {
		width: 220upx;
		height: 100upx;
	}

	.p {
		/* transform: translateY(-8upx); */
		font-size: 50upx
	}
</style>