hs_control_app/pages/control/timing.vue

<template>
	<view style="padding: 10px;">
		<u--form>
			<text class="u-demo-block__title">执行周期</text>
			<u-form-item>
				<view style="padding: 10px;">
					<checkbox-group @change="checkboxChange">
						<label v-for="item in checkboxList" :key="item.value">
							<view>
								<u-row style="width: 90px;margin-bottom: 5px;">
									<u-col span="4">
										<checkbox :value="item.value" :checked="item.checked" />
									</u-col>
									<u-col span="8">
										<view>{{item.value}}</view>
									</u-col>
								</u-row>

							</view>
						</label>
					</checkbox-group>
				</view>
			</u-form-item>

			<text class="u-demo-block__title">开启/停止 时间</text>
			<view style="padding: 10px;">
				<view style="padding: 15px; border-bottom: 1px solid #d6d6d6;">
					<picker mode="time" :value="form.startTime" @change="bindTimeChangeStart">
						<text class="tit" style="font-size: 14px; color: #787878; margin-right:50upx;">开启时间</text>
						<text class="uni-input" v-if="form.startTime" style="width:320upx;">{{form.startTime}}</text>
						<text class="uni-input grey" v-else>请选择开启时间</text>
					</picker>
				</view>
				<view style="padding: 15px; border-bottom: 1px solid #d6d6d6;">
					<picker mode="time" :value="form.endTime" @change="bindTimeChangeEnd">
						<text style="font-size: 14px; color: #787878; margin-right:50upx;">停止时间</text>
						<text class="uni-input" v-if="form.endTime" style="width:520upx;">{{form.endTime}}</text>
						<text class="uni-input grey" v-else>请选择停止时间</text>
					</picker>
				</view>
			</view>
		</u--form>

		<view class="uni-list">
		</view>
		<view style="margin: 30px;">
			<u-button color="#26a495" text="提交" @click="submit()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showBirthday: false,
				time: '13:00',
				timeType: 0,
				timeValue: '',
				data: [],
				//横向排列形式数据
				checkboxList: [{
						value: '星期日',
						checked: false
					}, {
						value: '星期一',
						checked: false
					}, {
						value: '星期二',
						checked: false
					}, {
						value: '星期三',
						checked: false
					}, {
						value: '星期四',
						checked: false
					}, {
						value: '星期五',
						checked: false
					},
					{
						value: '星期六',
						checked: false
					}
				],
				form: {
					cycle: [],
					useNoId: 0,
					startTime: null,
					endTime: null
				}
			}
		},
		onLoad() {
			this.form.useNoId = uni.getStorageSync("deviceInfo").deviceUseNo
			this.getTimingInfo()
		},
		methods: {
			bindTimeChangeStart: function(e) {
				this.form.startTime = e.target.value + ":00"
			},
			bindTimeChangeEnd: function(e) {
				this.form.endTime = e.target.value + ":00"
			},
			checkboxChange: function(e) {
				var items = this.checkboxList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			openUseNo() {
				this.show = true
			},
			confirm(e) {
				//console.log('confirm', e)
				this.orgInfo = e.value[0];
				this.show = false
			},
			cancel() {
				uni.showTabBar({
					animation: true
				})
				this.show = false
			},
			submit() {
				let st = this.form.startTime
				let et = this.form.endTime
				st = st.split(":")
				et = et.split(":")
				if (st[0] === et[0]) {
					var cz = parseInt(et[1]) - parseInt(st[1])
					if(cz < 5){
						uni.showToast({
							icon:"none",
							duration: 2500,
							title: "间隔时间必须大于5分钟",
						});
						return;
					}
				}
				var cycle = []
				this.checkboxList.forEach((c, i) => {
					if (c.checked === true) {
						cycle.push(i)
					}
				})
				this.form.cycle = cycle + ''
				this.submitTiming()
			},
			async submitTiming() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/control/timing',
					method: 'put',
					data: this.form,
					isNotErrorMsg: true
				});
				if (res.code === 200) {
					var data = res.data
					uni.showToast({
						duration: 1000,
						title: "保存成功",
					});
				} else {

				}
			},
			async getTimingInfo() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/control/timing?' + "useNoId=" + this.form.useNoId,
					method: 'get',
					isNotErrorMsg: true
				});
				if (res.code === 200) {
					var data = res.data
					console.log(data)
					this.form.startTime = data.startTime
					this.form.endTime = data.endTime
					data.cycle.split(",").forEach((c, i) => {
						this.checkboxList[c].checked = true
					})
				} else {

				}
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				switch (mode) {
					case 'datetime':
						return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'))
					case 'date':
						return toast(timeFormat(time, 'yyyy-mm-dd'))
					case 'year-month':
						return toast(timeFormat(time, 'yyyy-mm'))
					case 'time':
						return toast(time)
					default:
						return ''
				}
			},

		}
	}
</script>

<style>
</style>