jp-housekeep-manage/pages/timing/autoOff.vue

<template>
	<view>
		<u-navbar title="自动关闭" title-color="#101010">

			<view slot="right" @click="deleteShow=true">
				<img src="@/assets/img/riLine-check-line 1.svg" alt="" />
			</view>

		</u-navbar>

		<view class="time-group">
			<view class="time-item" @click="typeShow=true">
				<view class="time">
					<view class="time-slot">
						重复
					</view>
					<view class="type">
						执行一次
					</view>
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>

			<view class="time-item" @click="pickerShow=true">
				<view class="time">
					<view class="time-slot">
						定时开启
					</view>
					<view class="type">
						未设置
					</view>
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>

			<view class="time-item" @click="pickerShow=true">
				<view class="time">
					<view class="time-slot">
						定时关闭
					</view>
					<view class="type">
						未设置
					</view>
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>

			<view class="time-item" @click="thresholdsPopup=true" >
				<view class="time">
					<view class="time-slot">
						最大功率阈值
					</view>
					<view class="type">
						5kW
					</view>
				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
				</view>

			</view>
		</view>
		<!-- 重复类型 -->
		<view class="repeatType" v-if="typeShow">

			<u-popup v-model="typeShow" mode="bottom">
				<view>
					<view class="headline">
						重复类型
					</view>
					<view class="type-group">
						<view class="item">
							<view class="item-title item-title-checked">
								执行一次
							</view>
							<view class="item-icon">
								<img src="@/assets/img/riLine-check-line.svg" alt="" />
							</view>
						</view>
						<view class="item">
							<view class="item-title">
								每天
							</view>
							<view class="item-icon">
								<img src="" alt="" />
							</view>
						</view>
						<view class="item" @click="customPopup=true">
							<view class="item-title">
								自定义
							</view>
							<view class="item-icon">
								<img src="" alt="" />
							</view>
						</view>
					</view>
				</view>
			</u-popup>

		</view>

		<!-- 关闭时间 -->
		<ujpPicker mode="time" v-model="pickerShow" :params="params"></ujpPicker>
		<!-- 自定义重复 -->

		<u-popup v-model="customPopup" mode="bottom">
			<view class="custom">
				<view class="headline">
					自定义重复
				</view>
				<view class="radio-group">
					<view class="radio-item">
						<view class="item-title">
							周一
						</view>
						<view class="item-value">
							<label class="radio">
								<radio value="" /><text></text>
							</label>
						</view>
					</view>
					<view class="radio-item">
						<view class="item-title">
							周二
						</view>
						<view class="item-value">
							<label class="radio">
								<radio value="" /><text></text>
							</label>
						</view>
					</view>
					<view class="radio-item">
						<view class="item-title">
							周三
						</view>
						<view class="item-value">
							<label class="radio">
								<radio value="" /><text></text>
							</label>
						</view>
					</view>
					<view class="radio-item">
						<view class="item-title">
							周四
						</view>
						<view class="item-value">
							<label class="radio">
								<radio value="" /><text></text>
							</label>
						</view>
					</view>
					<view class="radio-item">
						<view class="item-title">
							周五
						</view>
						<view class="item-value">
							<label class="radio">
								<radio value="" /><text></text>
							</label>
						</view>
					</view>
					<view class="radio-item">
						<view class="item-title">
							周六
						</view>
						<view class="item-value">
							<label class="radio">
								<radio value="" /><text></text>
							</label>
						</view>
					</view>
					<view class="radio-item">
						<view class="item-title">
							周日
						</view>
						<view class="item-value">
							<label class="radio">
								<radio value="" /><text></text>
							</label>
						</view>
					</view>
				</view>

				<view class="btn-group">
					<view class="btn cancel">
						取消
					</view>
					<view class="btn confirm">
						确认
					</view>
				</view>


			</view>
		</u-popup>
		<!-- 最大功率阈值 -->
		<u-popup v-model="thresholdsPopup" mode="bottom">
			<view class="thresholds">
				<view class="headline">
					最大功率阈值(kW)
				</view>
				<view class="input">
				  <input type="text" value="" placeholder="填写触发自动关闭的功率数值" />
				</view>
				<view class="btn-group">
					<view class="btn cancel">
						取消
					</view>
					<view class="btn confirm">
						确认
					</view>
				</view>
				
			</view>
			
			
		</u-popup>
	</view>
</template>

<script>
	import ujpPicker from '@/components/u-picker.vue'

	export default {
		components: {
			ujpPicker
		},
		data() {

			return {
				typeShow: true,
				pickerShow: false,
				typeShow: false,
				customPopup: false,
				thresholdsPopup: false,

				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
				},


			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-slot-right {
		margin-right: 32rpx;

		img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.time-group {
		background-color: #fff;

		.time-item {

			padding: 24rpx 0;
			margin: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(221, 221, 221, 1);

			.time {
				.time-slot {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}

				.type {
					color: rgba(119, 119, 119, 1);
				}
			}
		}

		.time-item:last-of-type {
			border: none;
		}
	}


	// 重复类型
	.repeatType {
		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			margin-top: 32rpx;
			font-weight: bold;
			text-align: center;
		}

		.type-group {
			margin-top: 24rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 1px solid rgba(245,245,245,1);
				padding: 0 32rpx;
			}
			.time-item:last-of-type{
				border: none;
			}

			.item-title {
				color: rgb(16, 16, 16);
				font-size: 32rpx;
			}

			.item-title-checked {
				color: rgba(22, 119, 255, 1);
			}
		}
	}



	// 自定义重复
	.custom,
	.thresholds {
		padding: 32rpx 0;

		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			margin-bottom: 32rpx;
			font-weight: bold;
			text-align: center;
		}

		.radio-group {
			.radio-item {
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 1px solid rgba(245,245,245,1);

				.item-title {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}
			}


		}

		.btn-group {
			display: flex;
			align-items: center;
			justify-content: space-between;
            padding: 0 32rpx;
			.btn {
				width: 328rpx;
				height: 80rpx;
				line-height: 80rpx;

				font-size: 32rpx;
				border-radius: 4px;
				text-align: center;
				margin-top: 24rpx;
			}

			.cancel {
				background-color: rgba(222, 225, 228, 1);
				color: rgba(51, 51, 51, 1);
			}

			.confirm {
				background-color: rgba(22, 119, 255, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}




	/deep/.u-drawer-content-visible {
		border-radius: 12px 12px 0 0;
	}
	/deep/uni-input{
		background-color: rgba(241,242,245,1);
		color: rgba(119,119,119,1);
		font-size: 36rpx;
		height: 80rpx;
		padding-left: 16rpx;
	}
</style>