siyu_app/pages_watch/index/equipment/clockalarm.vue

<template>
	<view>
		<uni-nav-bar fixed :border="false" backgroundColor="#fff" :title="title" :statusBar="true" left-icon="left" @clickLeft="$navBack()" @clickRight="handleAdd">
			<!--  #ifndef MP-WEIXIN -->
				<template v-slot:right>
					<uni-icons type="plusempty" size="20"></uni-icons>
				</template>
			<!-- #endif -->
		</uni-nav-bar>
		<scroll-view scroll-y="true" :style="{height: `calc(100vh - ${statusBarHeight} - 88rpx)`}">
			<view class="container-body">
				<myEmpty text="暂无闹钟" v-show="$isEmpty(clockalarmInfo) || clockalarmInfo.length == 0"></myEmpty>
				<view class="list">
					<uni-swipe-action-item v-for="(item,idx) in clockalarmInfo" :key="idx" :right-options="options" @click="onClick(idx)">
						<view class="list-item border-line">
							<view class="list-item-left" @click.stop="editClockalarm(item,idx)">
								<view class="item-time">{{item.hour}}:{{item.minute}}</view>
								<view class="item-repeat">{{repeatTxT(item)}}</view>
							</view>
							<mySwitch :value="item.status"  @change="onSwitchChange($event,item,idx)"></mySwitch>
						</view>
					</uni-swipe-action-item>
				</view>
			</view>
			<!-- #ifndef APP-PLUS || H5 -->
			<view class="footer-add" @click="handleAdd">新增</view>
			<!-- #endif -->
		</scroll-view>
	</view>
</template>

<script>
	import myEmpty from "/pages_watch/components/myEmpty/myEmpty.vue";
	import mySwitch from "/pages_watch/components/mySwitch/mySwitch.vue";
	import {getSetUpInfoByDeviceId,setClockalarm} from "@/api/pages_watch/index.js";
	export default {
		components: {
			myEmpty,
			mySwitch
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				deviceId: "",
				title: "",
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				clockalarmInfo: [],
			}
		},
		computed: {
			repeatTxT() {
				return (item)=>{
					if(item.repeat == false) {
						return '不重复'
					} else{
						let list = []
						const weekDays = {
						  monday: '周一',
						  tuesday: '周二',
						  wednesday: '周三',
						  thursday: '周四',
						  friday: '周五',
						  saturday: '周六',
						  sunday: '周日'
						};
						
						Object.keys(weekDays).forEach((day) => {
						  if (item[day]) {
						    list.push(weekDays[day]);
						  }
						});
						return list.join(',')
					}
				}
			}
		},
		onLoad(option) {
			this.title = option.title || ''
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		onShow() {
			this.deviceId = uni.getStorageSync("deviceId") || ""
			if (this.$isLogin()) {
				if (this.deviceId) {
					this.getSetUpInfo()
				} else {
					console.log("set.vue ---- deviceId is undefined")
					// uni.showToast({
					// 	title: "deviceId不存在",
					// 	icon: "none"
					// })
				}
			} else {
				this.$showLoginPage()
			}
		},
		methods: {
			getSetUpInfo() {
				getSetUpInfoByDeviceId({
					deviceId: this.deviceId
				}).then(res => {
					if (res.code == 200 && res.data) {
						this.clockalarmInfo = res.data.alarmClock.alarmClockObjectVos || []
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			handleAdd() {
				if(this.clockalarmInfo&&this.clockalarmInfo.length>4) {
					uni.showToast({
						title: "最多设置5个闹钟",
						icon: "none"
					})
					return
				}
				// 最多设置5个闹钟
				uni.navigateTo({
					url: "/pages_watch/index/equipment/set?title=添加闹钟"
				})
			},
			onClick(index) {
				this.clockalarmInfo.splice(index,1)
				this.setClockalarm()
			},
			onSwitchChange(e,item,index) {
				item.status = e
				this.setClockalarm("status",index)
			},
			setClockalarm(type,index) {
				const param = {
					deviceid: uni.getStorageSync("deviceId"),
					alarmclock: this.clockalarmInfo
				}
				setClockalarm(param).then(res => {
					if (res.code != 200) {
						if(type=="status") {
							this.clockalarmInfo[index].status = !this.clockalarmInfo[index].status
						}
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			editClockalarm(item,idx) {
				uni.navigateTo({
					url: "/pages_watch/index/equipment/set?title=添加闹钟&isEdit=true&index="+idx
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer-add {
		width: 622rpx;
		height: 88rpx;
		margin: 24rpx auto;
		border-radius: 88rpx;
		border: 2rpx solid #ECECEC;
		background: #FFFFFF;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FF7700;
		line-height: 88rpx;
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(var(--window-bottom) + 24rpx);
	}
	.list {
		background-color: #fff;
		&-item  {
			padding: 24rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333;
			&-left {
				flex: 1;
			}
			.item-time {
				font-family: DIN, DIN;
				font-weight: 500;
				font-size: 60rpx;
			}
			.item-repeat {
				margin-top: 10rpx;
				color: #999;
			}
		}
	}
</style>