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

<template>
	<view>
		<u-navbar :title="title" title-color="#101010">

			<view slot="right" v-if="timerSwitchList.length"
			 
			 @click="deleteShow=!deleteShow">

				<img v-if="deleteShow==true" src="@/assets/img/arcoDesign-select-all.svg" alt="" /> 
				<span v-else style="color: red;" >删除</span>
				<!-- <img  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" :key="i" >
					<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>
							<template v-if="item.switchStatus==0&&item.status">
								<span style="margin-left: 8rpx;">| {{gethtml(item.startTime)}}停电</span>
							</template>
							<template v-if="item.switchStatus==1&&item.status">
								<span style="margin-left: 8rpx;">| {{gethtml(item.startTime)}}供电</span>
							</template>
						</view>
						<view class="type" v-if="item.switchStatus==2&&item.status">
							<view>{{gethtml(item.startTime)}}供电</view>
							<view>{{gethtml(item.endTime)}}停电</view>
						</view>
						<view class="type" v-if="item.switchStatus==3&&item.status">
							<view>{{gethtml(item.startTime)}}开启“智能停电”</view>
							<view>{{gethtml(item.endTime)}}关闭“智能停电”</view>
						</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'
	import {
		hourDistanceArr,
		parseUnixTime,
		newDate
	} from '@/apis/utils/index.js'
	export default {
		data() {
			return {
				checked: false,
				show: false,
				popShow: false,
				deleteShow: false,
				deletePopup: false,
				weeklist: [
					'', '周一', '周二', '周三', '周四', '周五', '周六', '周日'
				],
				list: [{
						text: '智能停电',
						value: 3,
					},
					{
						text: '供电时间',
						value: 0,
					}, {
						text: '定时供电',
						value: 1,
					}, {
						text: '定时停电',
						value: 2,
					}
				],
				timerSwitchList: [],
				getMeterTimerListReady: false,
				deleteIds: "",
				title: "",

			}
		},
		onLoad(op) {
			if (op.id) {
				this.title = op.title;
				this.meterId = op.id;
				this.getMeterTimerList()
			}
		},
		onShow() {
			if (this.meterId) {
				this.getMeterTimerList()
			}

		},
		methods: {
			gethtml(item) {
				var str = parseUnixTime(new Date().getTime(), '{y}-{m}-{d}');
				var time1 = new Date();
				var time2 = newDate(str + ' ' + item + ':00');
				var sz = []
				if (time1 > time2) {
					time2.setDate(time2.getDate() + 1)
					sz = hourDistanceArr(time1, time2)
				} else {

					sz = hourDistanceArr(time1, time2)
				}
				console.log(sz[0])
				return (sz[0] ? sz[0] + '小时' : '') + (sz[1] ? sz[1] + '分钟后' : '0分钟后')

			},
			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 => {
					node.status=!key
					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 k=this.list[index].value
				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;
	}
	::v-deep.u-back-wrap{
		background-color: #fff;
	}
	::v-deep.u-slot-right {
		padding-right: 32rpx;
		padding-left: 16rpx;
		line-height: 30px;
		background-color: #fff;
		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 {
		::v-deep.u-drawer {
			left: 24rpx;
			right: 24rpx;
			bottom: 24rpx;
			border-radius: 8px;
		}

		::v-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>