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

<template>
	<view>
		<u-navbar title="定时" title-color="#101010">
			
			<view slot="right" @click="deleteShow=!deleteShow" >
				
				<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">
			<checkbox-group @change="checkboxChange" >
			<view class="time-item"  v-for="(item,i) in timerSwitchList"
			 
			 >
				<view class="time" @click="clicksheetInfo(item)" >
					<view class="time-slot">
						{{item.startTime}}{{item.switchStatus==2||item.switchStatus==3?'-'+(showjp2time(item.startTime,item.endTime)?'次日':'')+item.endTime:''}}
					</view>
					<view class="type">
						{{item.switchStatusN}} | {{item.type==1?'执行一次':''}}
						<template v-if="item.type!=1">
							<template v-if="item.weekdays=='1,2,3,4,5,6,7'">
								每天
							</template>
							<template v-else >
								<template v-for="(item,i) in item.weekdays.split(',')">
									
										<span :key="i">
											{{weeklist[item]}}
										</span>
										<span class="weeklistclassSpan" :key="i+'a'" >
											,
										</span>
								
									
								</template>
							</template>
						</template> 
						<template v-if="item.switchStatus==3">
							 <span style="margin-left: 8rpx;">| {{item.maxPower}}kW</span>
						</template>
					</view>
				</view>
				<!-- 开关 -->
				<view class="switch" v-if="!deleteShow" >
					<u-switch @change="switchBtn(item,$event)" 
					 
					 v-model="item.status" size="40" ></u-switch>
				</view>
				<!-- 单选框 -->
				<view class="radio" v-if="deleteShow" >
					
					<checkbox
					:value="item.id" ></checkbox>
							
				</view>
			</view>
			</checkbox-group  >
		</view>
		<u-divider :isnone="timerSwitchList.length==0"  nonetext="无记录"
			border-color="#CFD2D5">已经到底了</u-divider>
			
		<!-- 添加按钮 -->
		<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"  @click="clicksheet" v-model="show" border-radius="16"  ></u-action-sheet>
		</view>
		
		<!-- 删除 -->
		<view class="delete" v-if="deleteShow" @click="deletePopupQuery" >
			<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" @click="deletePopup=false" >
						取消
					</view>
					<view class="confirm"  @click="deletePopupApi"  >
						确认删除
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/meterTimer.js'
	
	export default {
		data() {
			return {
				checked:false,
				show: false,
				popShow:false,
				deleteShow:false,
				deletePopup:false,
				weeklist:[
					'','周一','周二','周三','周四','周五','周六','周日'
				],
				list: [{
									text: '时间段定时',
									
								}, {
									text: '定时送电'
								}, {
									text: '定时停电' 
								},{
									text:'智能停电'
								}],
				timerSwitchList:[],
				getMeterTimerListReady:false,
				deleteIds:"",
								
			}
		},
		onLoad(op) {
			if(op.id){
				
				this.meterId=op.id;
				this.getMeterTimerList()
			}
		},
		onShow() {
			if(this.meterId){
				this.getMeterTimerList()
			}
			
		},
		methods: {
			switchBtn(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.changeStatus({
					id:node.id,
					//enabled:key
				}).then((res) => {
					uni.hideLoading();
					node.status=res.data.status
					
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			showjp2time(time1,time2){
				if(time1&&time2){
					var num1=parseInt(time1.replace(":",''))
					var num2=parseInt(time2.replace(":",''))
					return num1>=num2
				}else{
					return false
				}
				
			},
			deletePopupQuery(){
				if(this.deleteIds!=''){
					this.deletePopup=true
				}else{
					uni.showToast({
						title: "请至少勾选一项",
						icon: "none"
					})
				}
				
			},
			deletePopupApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deleteSwitch({
					ids:this.deleteIds
				}).then((response) => {
					uni.hideLoading();
					this.deletePopup=false
					this.deleteShow=false
					this.deleteIds=""
					this.getMeterTimerList()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			checkboxChange(e){
				var sz=e.detail.value;
				 this.deleteIds=sz.join()
				
			},
			clicksheetInfo(item){
				if(!this.deleteShow){
					var url=`/pages/timing/autoOff?id=${item.id}`
					uni.navigateTo({
						url:url
					})
				}
				
			},
			clicksheet(index){
				var url=`/pages/timing/autoOff?meterId=${this.meterId}&type=${index}`
				uni.navigateTo({
					url:url
				})
			},
			getMeterTimerList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.meterTimerList({
					meterId:this.meterId
				}).then((response) => {
					uni.hideLoading();
					this.getMeterTimerListReady=true
					this.timerSwitchList=response.data.timerSwitchList;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weeklistclassSpan:last-child{
		display: none;
	}
	/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{
				 width: 100%;
				.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{
	   z-index: 99;
	   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>