jp-housekeep-manage/pages/timing/timeSlotTiming.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>
		<!-- 重复类型 -->
		<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>
	
	</view>
</template>

<script>
	 
	 import ujpPicker from '@/components/u-picker.vue'
   
	 export default {
		 components: {
		 	ujpPicker
		 },
		data() {
			
			return {
				typeShow:true,
				pickerShow :false,
				typeShow:false,
				customPopup: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{
		 padding: 32rpx;
		 .item{
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
			 height: 96rpx;
			 line-height: 96rpx;
		 }
		 .item-title{
			 color: rgb(16,16,16);
			 font-size: 32rpx;
		 }
		 .item-title-checked{
			 color: rgba(22,119,255,1);
		 }
	 }
 }
 
 
 
 // 自定义重复
 .custom{
	 padding: 32rpx;
	 .headline{
	 		 color: rgba(16,16,16,1);
	 		 font-size: 36rpx;
	 		 margin-bottom: 32rpx;
	 		 font-weight: bold;
	 		 text-align: center;
			 }
			 .radio-group{
				 .radio-item{
					 display: flex;
					 align-items: center;
					 justify-content: space-between;
					 height: 96rpx;
					 line-height: 96rpx;
					 .item-title{
						 color: rgba(16,16,16,1);
						 font-size: 32rpx;
					 }
				 }
				 
			 
	 }
	 .btn-group{
	 				 display: flex;
	 				 align-items: center;
	 				 justify-content: space-between;
					 .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 ;
 }



</style>