first commit

pages/index/index.ux

@@ -0,0 +1,204 @@
+<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>