Sprinkler-app/page_user/dingshi.vue

<template>
	<view>
		<u-navbar :is-back="true" title='定时管理' title-color="#000" :border-bottom="false" :background="bgc" 
			id="navbar">
		</u-navbar>
        <image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/urqUoIyCCEBykZ2oG8eO" mode=""></image>
		<view class="list">
			<view class="list_val" v-for="(item,index) in 6" :key="index">
				<view class="lt" @click="btnitem">
					<view class="one">07:00</view>
					<view class="two"> P{{index + 1}} <text></text> 5分15秒 </view>
				</view>
				<view class="rt">
					<u-switch v-model="checked" active-color="#48893B" inactive-color="#BDBCBC"></u-switch>
				</view>
			</view>
		</view> 
		
		<!-- 设置浇水时间弹窗 -->
		<view class="jiaoshui" v-if="timeflag">
			<view class="top">
				设置浇水
			</view>
			<view class="ts">
				距离下次浇水时间还有20小时41分
			</view>
			<view class="shifen" @click="show = true">
				<text>{{hour}}时</text> <text>{{minutekq}}分</text>
			</view>
			<view class="jssc">
				浇水时长
			</view>
			<view class="shifen" @click="shows = true">
				<text>{{minute}}分</text> <text>{{second}}秒</text>
			</view>
			<view class="anniu">
				<view class="qx" @click="btnqx">
					取消
				</view>
				<view class="qd" @click="btnqd">
					确定
				</view>
			</view>
		</view>
		<view class="mask" v-if="timeflag"></view>
		<!-- 定时时间 -->
		<u-picker v-model="show" mode="time" :params="paramss" @confirm="confirm"></u-picker>
		<!-- 定时时长 -->
		<u-picker v-model="shows" mode="time" :params="params" @confirm="confirms"></u-picker>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					bgc: {
						backgroundColor: "#fff",
					},
					active:1,
					flag:false,
					checked:false,
					timeflag:false,
					
					show: false,
					params: {
						year: false,
						month: false,
						day: false,
						hour: false,
						minute: true,
						second: true,
					},
					shows: false,
					paramss: {
						year: false,
						month: false,
						day: false,
						hour: true,
						minute: true,
						second: false,
					},
					minute:'--',
					second:'--',
					hour:'--',
					minutekq:'--'
				}
			},
			// 分享到好友（会话）
			onShareAppMessage: function() {
				return {
					title: '绿小能',
					path: '/pages/index/index'
				}
			},
			
			// 分享到朋友圈  
			onShareTimeline: function() {
				return {
					title: '绿小能',
					query: '',
					path: '/pages/index/index'
				}
			},
			onLoad() {
				
			},
			methods:{
				// 点击定时
				btnitem(){
					this.timeflag = true
				},
				// 取消选择定时
				btnqx(){
					this.timeflag = false
				},
				// 确定选择定时
				btnqd(){
					this.timeflag = false
				},
				// 定时浇水时间
				confirm(e){
					this.hour = e.hour
					this.minutekq = e.minute
				},
				// 定时浇水时长
				confirms(e){
					this.minute = e.minute
					this.second = e.second
				}
				
			}
		}
</script>

<style lang="less">
	/deep/ .u-title{
		margin-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		margin-bottom: 22rpx;
	}
	.jiaoshui{
		position: fixed;
		top: 366rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 678rpx;
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		z-index: 99;
		.top{
			margin-top: 42rpx;
			width: 100%;
			text-align: center;
			font-size: 44rpx;
			color: #3D3D3D;
			font-weight: 600;
		}
		.ts{
			margin-top: 30rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #808080;
			font-weight: 600;
		}
		.shifen{
			width: 512rpx;
			height: 128rpx;
			background: #F0F0F0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			line-height: 128rpx;
			padding: 0 102rpx;
			box-sizing: border-box;
			text{
				font-size: 44rpx;
				color: #3D3D3D;
				font-weight: 600;
			}
		}
		.jssc{
			font-size: 32rpx;
			color: #808080;
			font-weight: 600;
			margin-top: 58rpx;
			margin-left: 96rpx;
		}
		.anniu{
			display: flex;
			justify-content: space-between;
			margin-top: 58rpx;
			padding: 0 44rpx;
			box-sizing: border-box;
			.qx{
				width: 278rpx;
				height: 80rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #7FAD76;
				font-size: 36rpx;
				color: #7FAD76;
				font-weight: 600;
				line-height: 80rpx;
				text-align: center;
			}
			.qd{
				width: 278rpx;
				height: 80rpx;
				background: #7FAD76;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-size: 36rpx;
				color: #fff;
				font-weight: 600;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .6;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 98;
	}
	.list{
		.list_val{
			width: 678rpx;
			height: 208rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 20rpx;
			padding-top: 16rpx;
			padding-left: 42rpx;
			padding-right: 42rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			.lt{
				width: 100%;
				.one{
					font-size: 72rpx;
					color: #50565A;
					font-weight: 600;
				}
				.two{
					font-size: 32rpx;
					color: #50565A;
					margin-top: 12rpx;
					text{
						display: inline-block;
						width: 1rpx;
						height: 28rpx;
						background: #3D3D3D;
						margin-left: 26rpx;
						margin-right: 26rpx;
					}
				}
			}
			.rt{
				padding-top: 70rpx;
				box-sizing: border-box;
			}
		}
	}
	page{
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
    .bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

</style>