From 000fccef2466c87e4d7ba157fa4ead6c6ef156ea Mon Sep 17 00:00:00 2001
From: YunLei <waitshan@163.com>
Date: Mon, 27 Mar 2023 17:13:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js |   2 +-
 src/views/About.vue | 156 +++++++++++++++++++++++++++++++-------------
 static/code.txt     |  29 ++++++++
 3 files changed, 141 insertions(+), 46 deletions(-)
 create mode 100644 static/code.txt

diff --git a/src/router/index.js b/src/router/index.js
index b1eaf06..0726a85 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -71,7 +71,7 @@ const routes = [
         path: '/about',
         component: Layout,
         meta: {
-            title: "关于",
+            title: "时间格式化",
             icon: "el-icon-info"
         },
         children: [
diff --git a/src/views/About.vue b/src/views/About.vue
index ae30e38..bb5eb8f 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,57 +1,123 @@
 <!--  -->
 <template>
-    <div class="about">
-        这是关于页面
-    </div>
+  <div class="about">
+    <div v-for="item of list"
+         :key="item"
+         class="mt10">{{ item|friendlyTimeFilter }}</div>
+
+         <div class="mt10">
+            <el-button class="" type="primary" icon="el-icon-download" size="mini" @click="downloadClick">下载代码</el-button>
+         </div>
+  </div>
 </template>
 
 <script>
-    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-    //例如：import 《组件名称》 from '《组件路径》';
-    export default {
-        name: "About",
-        props: {},
-        //import引入的组件需要注入到对象中才能使用
-        components: {
-            //defaultPage ,
-        },
-        data() {
-            return {
-               
-            }
-        },
-        //监听属性 类似于data概念
-        computed: {
-            key() {
-                return this.$route.fullPath
-            }
-        },
-        //监控data中的数据变化
-        watch: {},
-        //生命周期 - 创建完成（可以访问当前this实例）
-        async created() {
-           
-        },
-        //生命周期 - 挂载完成（可以访问DOM元素）
-        async mounted() {
-            
-        },
-        //方法集合
-        methods: {
-            
-        },
-        //当前页面的filter
-        filters: {}
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import dayjs from "dayjs";
+export default {
+  name: "About",
+  props: {},
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    //defaultPage ,
+  },
+  data () {
+    return {
+      list: [],
+    }
+  },
+  //监听属性 类似于data概念
+  computed: {
+    key () {
+      return this.$route.fullPath
+    }
+  },
+  //监控data中的数据变化
+  watch: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted () {
+    this.initList();
+  },
+  //方法集合
+  methods: {
+    initList () {
+      let list = [];
+      let curr = dayjs();
+      list.push(
+        curr.subtract(10, "s").unix()
+      )
+      list.push(
+        curr.subtract(10, "m").unix()
+      )
+      list.push(
+        curr.subtract(62, "m").unix()
+      )
+      list.push(
+        curr.subtract(10, "h").unix()
+      )
+      list.push(
+        curr.subtract(10, "day").unix()
+      )
+      list.push(
+        curr.subtract(1, "year").unix()
+      )
+      this.list = list;
+    },
+    downloadClick(){
+        window.open("/code.txt")
+        // window.location.href = "/code.txt"
+    }
+  },
+  //当前页面的filter
+  filters: {
+    friendlyTimeFilter (val) {
+      if (!val) {
+        return "--";
+      }
+      let length = `${val}`.length;
+      if (length != 13 && length != 10) {
+        return "--";
+      }
+      if (length == 13) {
+        val = parseInt(val / 1000);
+      }
+      let valObj = dayjs(val * 1000);
+      let currObj = dayjs();
+      if (!valObj.isSame(currObj, "year")) {
+        return valObj.format("MMM DD,YYYY")
+      }
+      let curr = currObj.unix();
+      let diff = curr - val;
+      if (diff < 60) {
+        return "a minute ago";
+      } else if (diff < 60 * 60) {
+        return `${parseInt(diff / 60)} minutes ago`;
+      } else if (diff < 60 * 60 * 2) {
+        return `a hour ago`;
+      } else if (diff < 60 * 60 * 24) {
+        return `${parseInt(diff / (60 * 60))} hours ago`;
+      }
+      return valObj.format("MMM DD")
     }
+  }
+}
 </script>
 <!-- 单页私有css -->
 <style scoped>
-    .about {
-        padding: 30px;
-        background-color: #fff;
-        border-radius: 4px;
-        min-height: 600px;
-    }
+.about {
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  min-height: 600px;
+}
+.mt10 {
+  margin-top: 10px;
+}
 </style>
 <style>
 </style>
\ No newline at end of file
diff --git a/static/code.txt b/static/code.txt
new file mode 100644
index 0000000..b048ddc
--- /dev/null
+++ b/static/code.txt
@@ -0,0 +1,29 @@
+friendlyTimeFilter (val) {
+	if (!val) {
+		return "--";
+	}
+	let length = `${val}`.length;
+	if (length != 13 && length != 10) {
+		return "--";
+	}
+	if (length == 13) {
+		val = parseInt(val / 1000);
+	}
+	let valObj = dayjs(val * 1000);
+	let currObj = dayjs();
+	if (!valObj.isSame(currObj, "year")) {
+		return valObj.format("MMM DD,YYYY")
+	}
+	let curr = currObj.unix();
+	let diff = curr - val;
+	if (diff < 60) {
+		return "a minute ago";
+	} else if (diff < 60 * 60) {
+		return `${parseInt(diff / 60)} minutes ago`;
+	} else if (diff < 60 * 60 * 2) {
+		return `a hour ago`;
+	} else if (diff < 60 * 60 * 24) {
+		return `${parseInt(diff / (60 * 60))} hours ago`;
+	}
+	return valObj.format("MMM DD")
+}
\ No newline at end of file