shenzeeUniApp/packageA/pages/remote/alarmClockList.vue

<template>
	<view>
		<view class="head">
			<view class="left-top">
				<p class="left-top-p">{{$t('alarmClock.title')}}</p>
			</view>
			<view class="right-top">
				<p class="right-top-p" @click="addAlarmClockItem()">+</p>
			</view>
		</view>
		<view class="body">
			<uni-collapse :accordion="true">
				<uni-list>
					<view v-for="(alarmClock,index) in alarmClockList" :key="index">
						<uni-list-item :title="alarmClock.hour+'--'+alarmClock.name" :note="alarmClock.week+'---'+alarmClock.type"
							:rightText="alarmClock.status" clickable @click="onClick(alarmClock.id)" />
					</view>
				</uni-list>
			</uni-collapse>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import uniList from '../../uni_modules/uni-list/components/uni-list/uni-list.vue';
	import uniListItem from '../../uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';
	import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	// import {
	// 	dateUtils
	// } from '@/common/util.js';
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem,
			uniIcons
		},
		data() {
			return {
				globalUser: null,
				alarmClockList: [],
			}
		},
		onShow() {
			var token = uni.getStorageSync("token");
			if (token.length > 1) {
				this.getAlarmClockList();
			} else {
				uni.reLaunch({
					url: '../../../pages/Login/Login',
				});
			}
		},
		methods: {
			getAlarmClockList() {
				var token = uni.getStorageSync("token");
				var adminId = uni.getStorageSync("globalUser").id;
				uni.request({
					url: this.serverurl + '/TAlarmClock/list',
					data: {
						"adminId": adminId
					},
					header: {
						'token': token
					},
					method: "GET",
					success: (res) => {
						if (res.data.code) {
							var alarmClockList = [];
							var alarmClocks = res.data.data;
							// console.log("list");

							for (var i = 0; i < alarmClocks.length; i++) {
								var alarmClock = alarmClocks[i];
								var status = alarmClock.status;
								if (status == '0') {
									// 已关闭
									alarmClock.status = this.$t('alarmClock.status1')
								}
								if (status == '1') {
									// 已qiyong
									alarmClock.status = this.$t('alarmClock.status2')
								}
								var week = alarmClock.week;
								if (week != null || week != '') {
									var zhou = '';
									var w = week.split(",").sort();
									for (var j = 0; j < w.length; j++) {
										var t = w[j];
										switch (t) {
											case "1":
												zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.yi')+","
												break;
											case "2":
												zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.er')+","
												break;
											case "3":
												zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.san')+","
												break;
											case "4":
												zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.si')+","
												break;
											case "5":
												zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.wu')+","
												break;
											case "6":
												zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.liu')+","
												break;
											case "7":
												zhou = zhou + this.$t('alarmClock.zhou')+this.$t('alarmClock.qi')+","
												break;
											default:

										}
									}
									alarmClock.week = zhou;
									var type = alarmClock.type;
									switch (type) { //0：炉头开启，1：炉头关闭，2：开始休眠，3：结束休眠
										case "0":
											type = this.$t('alarmClock.kailutou')
											break;
										case "1":
											type = this.$t('alarmClock.guanlutou')
											break;
										case "2":
											type = this.$t('alarmClock.kaixiumian')
											break;
										case "3":
											type = this.$t('alarmClock.guanxiumian')
											break;
										default:

									}
									alarmClock.type = type;
								}
								alarmClockList.push(alarmClock);
							}
							this.alarmClockList = alarmClockList;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}


					},
				});
			},
			onClick(id) {
				// console.log("id==" + id);
				uni.setStorageSync("clock", id);
				uni.navigateTo({
					url: 'alarmClockItem'
				});
			},
			addAlarmClockItem() {
				// console.log("addAlarmClockItem");
				uni.setStorageSync("clock", "add");
				uni.navigateTo({
					url: 'alarmClockItem'
				});
			}
		}
	}
</script>

<style>
	.head {
		height: 100upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background: #F8F8F8;
	}

	.left-top {
		height: 100upx;
		width: 50%;
		text-align: left;
	}

	.left-top-p {
		height: 100upx;
		padding-left: 8upx;
		color: #363D44;
		font-size: 25px;
		font-family: "PingFang-SC-Bold";
	}

	.right-top {
		height: 100upx;
		width: 50%;
		text-align: right;
		/* 垂直居中 */
		/* position: relative;
            top: 50%; /*偏移*/
		/* transform: translateY(-50%); */
	}

	.right-top-p {
		height: 100upx;
		padding-right: 12upx;
		color: #3496FB;
		font-size: 35px;
		font-family: "PingFang-SC-Bold";
		/* 垂直居中 */
		position: relative;
		top: 25%;
		/*偏移*/
		transform: translateY(-50%);
	}

	.body {
		background: #F8F8F8;
	}
</style>