封装时间差页面

components/page/timeDifference.vue

+<template>
+  <div class="time-view">{{ date }}</div>
+</template>
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  props: {
+    timeValue: {
+      type: [String, Object],
+      default: "",
+    },
+    // mode: {
+    //   type: [String, Object],
+    //   default: "",
+    // },
+  },
+  computed: {
+    date() {
+      var date1 = new Date(this.timeValue.startDate).getTime(); //开始时间，时间戳
+      var date2 = new Date(this.timeValue.endDate).getTime(); //结束时间，时间戳
+      var date3 = 0;
+      date3 = date2 - date1;
+
+      var timeSpanStr;
+      if (date3 <= 1000 * 60 * 1) {
+        timeSpanStr = "刚刚";
+      } else if (1000 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60) {
+        timeSpanStr = Math.round(date3 / (1000 * 60)) + "分钟";
+      } else if (1000 * 60 * 60 * 1 < date3 && date3 <= 1000 * 60 * 60 * 24) {
+        timeSpanStr = Math.round(date3 / (1000 * 60 * 60)) + "小时";
+      } else if (
+        1000 * 60 * 60 * 24 <
+        date3
+        // && date3 <= 1000 * 60 * 60 * 24 * 30
+      ) {
+        timeSpanStr = Math.round(date3 / (1000 * 60 * 60 * 24)) + "天";
+      }
+      return timeSpanStr;
+
+      // var result = "";
+      // var minute = 1000 * 60;
+      // var hour = minute * 60;
+      // var day = hour * 24;
+      // var month = day * 30;
+      // if (date3 < 0) return;
+      // var monthC = date3 / month;
+      // var weekC = date3 / (7 * day);
+      // var dayC = date3 / day;
+      // var hourC = date3 / hour;
+      // var minC = date3 / minute;
+      // if (monthC >= 1) {
+      //   result = "" + parseInt(monthC) + "月";
+      // } else if (weekC >= 1) {
+      //   result = "" + parseInt(weekC) + "周";
+      // } else if (dayC >= 1) {
+      //   result = "" + parseInt(dayC) + "天";
+      // } else if (hourC >= 1) {
+      //   result = "" + parseInt(hourC) + "小时";
+      // } else if (minC >= 1) {
+      //   result = "" + parseInt(minC) + "分钟";
+      // } else {
+      //   result = "刚刚";
+      // }
+      // return result;
+    },
+  },
+  mounted() {},
+  methods: {},
+  watch: {},
+};
+</script>
+<style lang="less">
+</style>

pages/project/project/add.vue

@@ -89,6 +89,7 @@
               v-model="entity.endDate"
             ></DatePicker> </FormItem
         ></Col>
+        <!-- <TimeDifference :timeValue="timeValue"></TimeDifference>  -->
         <Col :span="12"
           ><FormItem :label="l('type')" prop="type">
             <Dictionary
@@ -137,6 +138,10 @@ export default {
   name: "Add",
   data() {
     return {
+      timeValue: {
+        startDate: "",
+        endDate: "",
+      },
       imgName: "",
       avatorPath: "",
       entity: {
@@ -240,6 +245,16 @@ export default {
       this.entity.picture = imgPathsArr[0].filePath;
       this.avatorPath = fileUrlDown + imgPathsArr[0].filePath;
     },
+    // "entity.startDate"(v) {
+    //   if (v) {
+    //     this.timeValue.startDate = v;
+    //   }
+    // },
+    // "entity.endDate"(v) {
+    //   if (v) {
+    //     this.timeValue.endDate = v;
+    //   }
+    // },
   },
 };
 </script>

plugins/iview.js

@@ -72,6 +72,7 @@ import InputCode from '@/components/page/inputCode.vue'
 import Pictrue from '@/components/page/pictrue.vue'
 import WordTree from '@/components/page/wordTree.vue'
 import Actions from '@/components/page/actions.vue'
+import TimeDifference from '@/components/page/timeDifference.vue'
 
 
 
@@ -149,7 +150,7 @@ Vue.component("InputCode",InputCode)
 Vue.component("Pictrue",Pictrue)
 Vue.component("WordTree",WordTree)
 Vue.component("Actions",Actions)
-
+Vue.component("TimeDifference",TimeDifference)