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

<template>
	<view>
		<u-navbar title="定时" title-color="#101010">
			
			<view slot="right" @click="deleteShow=true" >
				
				<img  v-if="deleteShow==true"   src="@/assets/img/arcoDesign-select-all.svg" alt="" />
			    <img  v-else src="@/assets/img/riLine-list-settings-line.svg" alt="" />
			</view>
			
		</u-navbar>
		<view class="time-group">
			<view class="time-item"  v-for="item in 4" >
				<view class="time">
					<view class="time-slot">
						18:00
					</view>
					<view class="type">
						定时关闭 | 每天
					</view>
				</view>
				<!-- 开关 -->
				<view class="switch" v-if="!deleteShow" >
					<u-switch v-model="checked" size="40" ></u-switch>
				</view>
				<!-- 单选框 -->
				<view class="radio" v-if="deleteShow" >
					<radio icon-size="40"  ></radio>
				</view>
			</view>
		</view>
		
		<!-- 添加按钮 -->
		<view class="add"  @click="show=true"  v-if="deleteShow==false" >
			<img src="@/assets/img/riLine-add-line 1.svg" alt="" />
		</view>
		
		<!-- 新增弹窗 -->
		<view class="add-popup">
			<u-action-sheet :list="list" v-model="show" border-radius="16"  ></u-action-sheet>
		</view>
		
		<!-- 删除 -->
		<view class="delete" v-if="deleteShow" @click="deletePopup=true" >
			<view class="icon">
				<img src="@/assets/img/riLine-delete-bin-7-line 1.svg" alt="" />
			</view>
			<view class="text">
				删除
			</view>
		</view>
		
		<!-- 删除确认弹框 -->
		<u-popup v-model="deletePopup"  mode="bottom" border-radius="12" >
			<view class="popup">
				<view class="headline">
					删除定时
				</view>
				<view class="hint">
					要删除选中的定时吗？
				</view>
				<view class="btn-box">
					<view class="cancel" >
						取消
					</view>
					<view class="confirm"  >
						确认删除
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				show: false,
				popShow:false,
				deleteShow:false,
				deletePopup:false,
					list: [{
									text: '时间段定时',
									
								}, {
									text: '定时开启'
								}, {
									text: '定时关闭' 
								},{
									text:'自动关闭'
								}],
								
			}
		},
		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;
		}
	}
   
   // 添加按钮
   .add{
	   width: 128rpx;
	   height: 128rpx;
	   background-color: rgba(22,119,255,1);
	   border-radius: 999px;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   position: fixed;
	   bottom: 80rpx;
	   right: 40rpx;
	   img{
		   width: 80rpx;
		   height: 80rpx;
	   }
   }
   
   .add-popup{
	   /deep/.u-drawer{
	   	   left: 24rpx;
	   	   right: 24rpx;
	   	   bottom: 24rpx;
	   	   border-radius: 8px;
	   }
	   /deep/.u-action-sheet-item{
	   	   color: #101010;
	   }
	   
   }
  
   // 删除
   .delete{
	   position: fixed;
	   left: 0;
	   right: 0;
	   bottom: 0;
	   background-color:#fff;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   justify-content: center;
	   // padding: 20rpx 0;
	   height: 120rpx;
	   img{
		   width: 48rpx;
		   height: 48rpx;
	   }
	   .text{
		   color: rgba(51,51,51,1);
		   font-size: 20rpx;
	   }
   }
   
   // 删除确认弹框
   .popup{
   	padding: 32rpx;
   	text-align: center;
	
   	.headline{
   		color: rgba(16,16,16,1);
   		font-size: 36rpx;
   		font-weight: bold;
   	}
   	.hint{
   		color: rgba(16,16,16,1);
   		font-size: 32rpx;
   		margin-top: 40rpx;
   	}
   	.btn-box{
   		margin-top: 82rpx;
   		display: flex;
   		justify-content: space-between;
   		.cancel{
   			width: 328rpx;
   			line-height: 80rpx;
   			border-radius: 4px;
   			background-color: rgba(222,225,228,1);
   			color: rgba(51,51,51,1);
   			font-size: 32rpx;
   		}
   		.confirm{
   			width: 328rpx;
   			line-height: 80rpx;
   			border-radius: 4px;
   			background-color: rgba(255,68,68,1);
   			color: rgba(255,255,255,1);
   			font-size: 32rpx;
   		}
   	}
   }
   
</style>