countdown/pages/index/index.ux

<template>
  <div class="index-page">
    <div class="header">
      <text class="header-time">{{ time }}</text>
    </div>

    <swiper indicator="false" class="countdown-swiper">
      <div for="{{events}}">
        <div class="countdown-page" style="background-color: {{$item.already ? '#f78803' : '#3184d0'}}">
          <div class="countdown-event-bg">
            <text class="countdown-event">{{ $item.name }}</text>
          </div>
          <div class="countdown-days-bg2"></div>
          <div class="countdown-days-bg">
            <text class="countdown-days">{{ $item.days }}</text>
          </div>
        </div>
      </div>
    </swiper>

    <input type="button" class="more-button" value="{{is_no_event ? '添加事件' : '更多事件'}}" @click="routeMore()" />
  </div>
</template>

<script>
import router from '@blueos.app.appmanager.router';
import app from '@blueos.app.context';
import storage from '@blueos.storage.storage';
import prompt from '@blueos.window.prompt';

const dateDiff = (date1) =>
	Math.floor(
		(new Date().getTime() - new Date(date1).getTime()) / (1000 * 60 * 60 * 24)
	);


export default {
	data: {
		time: "07:21",
		events: [{ name: "暂无倒数日事件", days: "无", already: false }],
		is_no_event: false,
	},

	exitApp: () => app.terminate(),

	onReady() {
		// 清除缓存
		router.clear();

		// 写入页面顶部时间
		const date = new Date();
		const hour = date.getHours().toString().padStart(2, "0");
		const minute = date.getMinutes().toString().padStart(2, "0");
		this.time = hour + ":" + minute;

		// 首次使用提示
		storage.get({
			key: "tipRead",
			default: "0",
			success: (data) => {
				if (data == "0") {
					storage.set({
						key: "tipRead",
						value: "1",
						success: (_) =>
							prompt.showToast({
								message:
									"欢迎使用云沐制作的倒数日！",
								duration: 7000,
							}),
					});
				}
			},
		});

		// 获取数据
		storage.get({
			key: "events",
			default: "[]",
			success: (data) => {
				const events = JSON.parse(data);
				if (events.length == 0) {
					this.is_no_event = true;
					return;
				}
				this.events = events
					.filter((event) => event.on_index == true)
					.map((event) => {
						let days,
              name = event.name,
							already = true;
						const diff = dateDiff(event.date);
            
						if (diff > 0) {
							name += "已经";
							days = String(diff);
						} else if (diff == 0) {
							days = "今天";
						} else {
							name += "还有";
							days = String(-diff);
							already = false;
						}
						return {
							name,
							days,
							already,
						};
					});
			},
		});
	},

	routeMore() {
		if (this.is_no_event) {
			router.push({
				uri: "/pages/edit",
				params: {
					extend: "true",
					callback_uri: "/pages/index",
				},
			});
		} else {
			router.push({ uri: "/pages/list" });
		}
	},
};
</script>
<style>
@import "../../assets/styles/header-new.css";

.index-page {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
}

.countdown-swiper {
	width: 135px;
	height: 135px;
	margin-top: 10px;
}

.countdown-page {
	display: flex;
	flex-direction: column;
	width: 135px;
	height: 135px;
	border-radius: 20px;
	align-items: center;
}

.countdown-event {
	font-size: 15px;
	text-align: center;
	width: 120px;
	/*text-overflow: ellipsis;*/
	position: relative;
	top: -4px;
}

.countdown-event-bg {
	top: 4px;
	height: 50px;
}

.countdown-days-bg {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 110px;
	background-color: #dedede;
	color: black;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
}

.countdown-days-bg2 {
	position: absolute;
	background-color: #dedede;
	width: 100%;
	height: 25px;
	top: 40px;
}

.countdown-days {
	text-align: center;
	font-size: 45px;
	font-weight: bold;
}
.more-button {
	background-color: #3184d0;
	font-size: 12px;
	margin-top: 15px;
	height: 30px;
	width: 100px;
	color: white;
}
.header-time{
  color: white;
}
</style>