first commit

app.ux

@@ -0,0 +1,9 @@
+<script>
+/**
+ * 应用级别的配置，供所有页面公用
+ */
+
+export default {
+  onCreate() {}
+}
+</script>

assets/styles/header-new.css

@@ -0,0 +1,15 @@
+.header {
+    position: absolute;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 25px;
+    margin: 5px;
+}
+
+.header-time {
+    font-size: 15px;
+}

assets/styles/mixins.scss

@@ -0,0 +1,5 @@
+@mixin flex-box-mixins($direction: row, $justify: center, $align-items: center) {
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align-items;
+}

assets/styles/style.scss

@@ -0,0 +1,2 @@
+@import './variables.scss';
+@import './mixins.scss';

assets/styles/variables.scss

@@ -0,0 +1,9 @@
+$brand: #09ba07;
+
+$white: #ffffff;
+$black: #000000;
+$grey: #9393aa;
+$red: #fa0101;
+$green: #ffff00;
+
+$size-factor: 5px;

manifest.json

@@ -0,0 +1,48 @@
+{
+  "package": "top.chorblack.countdown",
+  "name": "countdown",
+  "versionName": "1.0.0",
+  "versionCode": 1,
+  "appCategory": [
+    "other"
+  ],
+  "icon": "/assets/images/logo.png",
+  "features": [
+    {
+      "name": "blueos.app.appmanager.router"
+    },
+    { "name": "blueos.storage.storage" },
+    { "name": "blueos.window.prompt" },
+    { "name": "blueos.hardware.vibrator.vibrator" }
+  ],
+  "deviceTypeList": [
+    "watch",
+    "watch-square"
+  ],
+  "config": {
+    "designWidth": 192
+  },
+  "router": {
+    "entry": "pages/index",
+    "pages": {
+      "pages/index": {
+        "component": "index"
+      },
+      "pages/list": {
+        "component": "index"
+      },
+      "pages/edit": {
+        "component": "index"
+      },
+      "pages/input": {
+        "component": "index"
+      },
+      "pages/inputdate": {
+        "component": "index"
+      }
+    }
+  },
+  "display": {
+    "backgroundColor": "#000000"
+  }
+}

pages/edit/index.ux

@@ -0,0 +1,265 @@
+<template>
+  <div class="new-page">
+    <div class="header">
+      <text class="header-time">{{extend == "true" ? "新建" : "编辑"}}倒数日</text>
+    </div>
+    <div class="gap"></div>
+    <div class="line">
+      <text>事件名称</text>
+      <input type="text" value="{{event_name}}" onchange="textChange" class="input-text"/>
+    </div>
+    <div class="line">
+      <text>目标日</text>
+      <div class="input-line" @click="editDate"><text>{{date}}</text></div>
+    </div>
+    <div class="gap"></div>
+    <div class="line">
+      <text>在首页显示</text>
+      <switch checked={{on_index}} @change="changeDisplayOnIndex"></switch>
+    </div>
+    <div class="bottom-buttons">
+      <input type="button" class="save-button" @click="saveEvent" value="保存"></input>
+      <input if="{{this.extend != 'true'}}" type="button" class="save-button" @click="deleteEvent" value="删除"></input>
+    </div>
+  </div>
+</template>
+
+<script>
+import router from '@blueos.app.appmanager.router';
+import storage from '@blueos.storage.storage';
+import prompt from '@blueos.window.prompt';
+
+export default {
+  data: {
+    event_name: "",
+    date: "",
+    on_index: true,
+    callback_uri: "/pages/index",
+    date_callback: "",
+    input_callback: "",
+    event_id: "0",
+    extend: "true"
+  },
+  textChange({ value }) {
+      this.event_name = value
+    },
+	routeBack() {
+    router.replace({
+      uri: this.callback_uri
+    })
+  },
+
+  onReady() {
+    const isInputCallback = !(this.input_callback == "")
+    const isDateCallback = !(this.date_callback == "")
+    if (!isInputCallback && !isDateCallback) {
+      // 没有 callback
+      if (this.date == "") {
+        const _date = new Date()
+        this.date = _date.getFullYear() + "-" + (_date.getMonth() + 1) + "-" + _date.getDate()
+      }
+      return
+    } else if (isInputCallback) {
+      console.log("Input callback")
+      const callback = JSON.parse(this.input_callback)
+      const _cache = JSON.parse(callback.input_cache_data)
+      this.event_id = _cache.event_id
+      this.callback_uri = _cache.callback_uri
+      this.extend = _cache.extend
+
+      this.event_name = callback.input_text
+      this.date = _cache.date
+      this.on_index = _cache.on_index
+    } else if (isDateCallback) {
+      console.log("Date callback")
+      const callback = JSON.parse(this.date_callback)
+      const _cache = JSON.parse(callback.input_cache_data)
+      this.event_id = _cache.event_id
+      this.callback_uri = _cache.callback_uri
+      this.extend = _cache.extend
+      
+      this.event_name = _cache.event_name
+      this.date = callback.date
+      this.on_index = _cache.on_index
+    }
+  },
+
+  editEventName() {
+    router.push({
+      uri: "/pages/input",
+      params: {
+        "input_cache_data": JSON.stringify({
+          "event_id": this.event_id,
+          "extend": this.extend,
+          "callback_uri": this.callback_uri,
+          "date": this.date,
+          "on_index": this.on_index
+        }),
+        "input_text": this.event_name,
+        "callback_uri": "/pages/edit"
+      }
+    })
+  },
+
+  editDate() {
+    router.push({
+      uri: "/pages/inputdate",
+      params: {
+        "input_cache_data": JSON.stringify({
+          "event_id": this.event_id,
+          "extend": this.extend,
+          "callback_uri": this.callback_uri,
+          "event_name": this.event_name,
+          "on_index": this.on_index
+        }),
+        "date": this.date,
+        "callback_uri": "/pages/edit"
+      }
+    })
+  },
+  
+  changeDisplayOnIndex(evt) {
+    this.on_index = evt.checked
+  },
+
+  saveEvent() {
+    if (this.event_name == "") {
+      prompt.showToast({message: "事件名称不能为空"})
+      return
+    }
+
+    storage.get({
+      key: "events",
+      default: "[]",
+      success: data => {
+        let events = JSON.parse(data)
+        const _event = {
+          name: this.event_name,
+          date: this.date,
+          on_index: this.on_index
+        }
+        if (this.extend == "true") {
+          events.push(_event)
+        } else {
+          events[Number(this.event_id)] = _event
+        }
+        storage.set({
+          key: "events",
+          value: JSON.stringify(events),
+          success: (_) => {
+            router.replace({
+              uri: this.callback_uri,
+            })
+            prompt.showToast({message: "事件保存成功！"})
+          },
+          fail: (_, code) =>{
+            prompt.showToast({message: "数据保存失败，可能是设备可用空间不足，错误码: " + code})
+          }
+        })
+      }
+    })
+  },
+  
+  deleteEvent() {
+    storage.get({
+      key: "events",
+      default: "[]",
+      success: data => {
+        let events = JSON.parse(data)
+        events.splice(Number(this.event_id), 1)
+        storage.set({
+          key: "events",
+          value: JSON.stringify(events),
+          success: (_) => {
+            router.replace({
+              uri: this.callback_uri,
+            })
+            prompt.showToast({message: "事件删除成功！"})
+
+          },
+          fail: (_, code) =>{
+            prompt.showToast({message: "数据保存失败，可能是设备可用空间不足，错误码: " + code})
+          }
+        })
+      }
+    })
+  }
+};
+</script>
+
+<style>
+@import "../../assets/styles/header-new.css";
+
+.new-page {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: white;
+}
+
+.gap {
+  height: 12px
+}
+
+.line {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.line text {
+  font-size: 15px;
+}
+
+switch {
+  margin-top: 2px;
+  margin-left: 7px;
+  width: 65px;
+  height: 24px;
+  track-color: gray;
+}
+
+.save-button {
+  width: 78px;
+  height: 30px;
+  background-color: black;
+  border: 3px;
+  border-color: gray;
+  color: white;
+  font-size: 15px;
+  margin-top: 10px;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.input-line {
+  height: 30px;
+  width: 180px;
+  border: 1px;
+  border-color: white;
+  border-radius: 10px;
+}
+
+.input-line text {
+  margin: 2px;
+  margin-left: 4px;
+}
+
+.bottom-buttons {
+  display: flex;
+  flex-direction: row;
+}
+.input-text {
+  width: 100%;
+  height: 20px;
+  border: 1px solid #000;
+  border-radius: 10px;
+  padding-left: 20px;
+}
+.picker {
+  width: 480px;
+  height: 480px;
+  background-color: white;
+}
+</style>

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>

pages/inputdate/index.ux

@@ -0,0 +1,79 @@
+<template>
+  <div class="input-date-page">
+    <div class="header">
+      <text class="header-time">编辑日期</text>
+    </div>
+  <div>
+<picker class="picker" type="date" onchange="pickHandler"></picker>
+  </div>
+    
+    <input type="button" class="save-button" @click="saveDate" value="保存"></input>
+  </div>
+</template>
+
+<script>
+import router from '@blueos.app.appmanager.router';
+
+export default {
+  data: {
+    year: "1970",
+    month: "1",
+    day: "1",
+  },
+  pickHandler(evt) {
+    console.log(`picker year:${evt.year}, month:${evt.month}, day:${evt.day}`)
+  },
+  onReady() {
+  },
+  saveDate() {
+    router.replace({
+      uri: this.callback_uri,
+      params: {
+        "date_callback": JSON.stringify({
+          "input_cache_data": this.input_cache_data,
+          "date": `${this.year}-${this.month}-${this.day}`
+        })
+      }
+    })
+  }
+}
+</script>
+
+<style>
+@import '../../assets/styles/header-new.css';
+.picker {
+  width: 192px;
+  height: 100px;
+}
+.input-date-page {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+}
+
+.line {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.mmdd {
+  display: flex;
+  flex-direction: row;
+}
+
+.save-button {
+  width: 100px;
+  height: 25px;
+  background-color: black;
+  border: 3px;
+  border-color: gray;
+  color: white;
+  font-size: 20px;
+  margin-top: 10px;
+}
+.header-time {
+  color: white;
+}
+</style>

pages/list/index.ux

@@ -0,0 +1,27 @@
+<template>
+  <div class="wrapper">
+    <text class="title">{{ text }}</text>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    text: '你好，世界'
+  }
+}
+</script>
+
+<style lang="scss">
+@import './../../assets/styles/style.scss';
+
+.wrapper {
+  @include flex-box-mixins(column, center, center);
+  margin: 0 10 * $size-factor;
+  .title {
+    font-size: 8 * $size-factor;
+    text-align: center;
+    color: $black;
+  }
+}
+</style>