保存代码

src/views/About.vue

@@ -1,13 +1,44 @@
 <!--  -->
 <template>
   <div class="about">
+
+    <div class="mt10">时区时间转化：</div>
+    <el-input placeholder="请输入内容"
+              v-model="time"
+              class="input-with-select mt10">
+      <el-select v-model="select"
+                 slot="prepend"
+                 placeholder="请选择">
+        <el-option :label="item.label"
+                   :value="item.diff"
+                   v-for="item of utcList"
+                   :key="item.lable"></el-option>
+      </el-select>
+      <el-button slot="append"
+                 icon="el-icon-search"
+                 @click="showList">转化</el-button>
+    </el-input>
+    <div class="mt10">时间戳为：{{ currTime }}   {{ nowStr }}</div>
+    <div class="mt10">所有时区时间戳为：</div>
+    <div>
+      <span v-for="(item,index) of unixList"
+            :key="index"
+            class="time-item">{{ item.label }}：{{ item.unix }}</span>
+    </div>
+
+    <el-divider></el-divider>
+    <div class="mt10">时间格式化：</div>
     <div v-for="item of list"
          :key="item"
          class="mt10">{{ item|friendlyTimeFilter }}</div>
 
-         <div class="mt10">
-            <el-button class="" type="primary" icon="el-icon-view" size="mini" @click="downloadClick">查看代码</el-button>
-         </div>
+    <div class="mt10">
+      <el-button class=""
+                 type="primary"
+                 icon="el-icon-view"
+                 size="mini"
+                 @click="downloadClick">查看代码</el-button>
+    </div>
   </div>
 </template>
 
@@ -25,6 +56,12 @@ export default {
   data () {
     return {
       list: [],
+      select: 0,
+      utcList: [],
+      time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+      unixList: [],
+      currTime: "",
+      nowStr:"",
     }
   },
   //监听属性 类似于data概念
@@ -42,9 +79,57 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   async mounted () {
     this.initList();
+    this.test();
   },
   //方法集合
   methods: {
+    test () {
+      for (let i = -11; i <= 12; i++) {
+        let label = i;
+        if (i == 0) {
+          label = ""
+        } else if (i > 0) {
+          label = `+${i}`
+        }
+        this.utcList.push({
+          diff: i,
+          label: `UTC${label}`
+        })
+      }
+      let str1 = "2023-08-21T23:59:59+08:00"
+      let str2 = "2023-08-21T23:59:59-05:00"
+      let utc = "2023-08-21T23:59:59+00:00"
+
+      console.log("东八区时间：", str1, dayjs(str1).unix());
+      console.log("西五区时间：", str2, dayjs(str2).unix());
+      console.log("utc时间：", utc, dayjs(utc).unix());
+
+      this.showList();
+    },
+    showList () {
+      let list = []
+      for (let item of this.utcList) {
+        let utcStr = "";
+        if (Math.abs(item.diff) < 10) {
+          utcStr = `0${Math.abs(item.diff)}:00`;
+        } else {
+          utcStr = `${Math.abs(item.diff)}:00`;
+        }
+        utcStr = `${item.diff >= 0 ? '+' : '-'}${utcStr}`;
+        let timeStr = this.time.replace(" ", "T") + utcStr;
+        let timeObj = dayjs(timeStr);
+
+        list.push({
+          label: item.label,
+          unix: timeObj.unix(),
+        })
+        if (item.diff == this.select) {
+          this.currTime = timeObj.unix();
+          this.nowStr = timeStr;
+        }
+      }
+      this.unixList = list;
+    },
     initList () {
       let list = [];
       let curr = dayjs();
@@ -68,9 +153,9 @@ export default {
       )
       this.list = list;
     },
-    downloadClick(){
-        window.open("/static/code.txt")
-        // window.location.href = "/code.txt"
+    downloadClick () {
+      window.open("/static/code.txt")
+      // window.location.href = "/code.txt"
     }
   },
   //当前页面的filter
@@ -118,6 +203,19 @@ export default {
 .mt10 {
   margin-top: 10px;
 }
+.about /deep/ .el-select .el-input {
+  width: 130px;
+}
+.input-with-select {
+  width: 500px;
+}
+.input-with-select /deep/ .el-input-group__prepend {
+  background-color: #fff;
+}
+.time-item {
+  display: inline-block;
+  width: 300px;
+}
 </style>
 <style>
 </style>