Explorar el Código

feat: 移动端我收到的周日报新增时间分类

qiny hace 1 año
padre
commit
81c55b8651
Se han modificado 1 ficheros con 72 adiciones y 29 borrados
  1. 72 29
      client_h5/src/pages/myLogs/Receive/index.vue

+ 72 - 29
client_h5/src/pages/myLogs/Receive/index.vue

@@ -13,35 +13,44 @@
           :key="index"
           @click="toDetail(item)"
         >
-          <div class="title">
-            {{ item.userNickname ?? "匿名" }}的{{
-              item.reportType == "weekly" ? "周报" : "日报"
-            }}
+          <div class="time-box" v-if="isSameDay(item, index)">
+            <span class="timer">{{ timeFont(item.fillingDate) }}</span>
           </div>
-          <div v-if="item.reportType == 'weekly'">
-            <div>
-              <span class="label">开始日期:</span
+          <div class="card-box">
+            <div class="title">
+              {{ item.userNickname ?? "匿名" }}的{{
+                item.reportType == "weekly" ? "周报" : "日报"
+              }}
+            </div>
+            <div v-if="item.reportType == 'weekly'">
+              <div>
+                <span class="label">开始日期:</span
+                >{{ moment(item.reportStartDate).format("YYYY-MM-DD") }}
+              </div>
+              <div>
+                <span class="label">结束日期:</span
+                >{{ moment(item.reportEndDate).format("YYYY-MM-DD") }}
+              </div>
+            </div>
+            <div v-else>
+              <span class="label">日志日期:</span
               >{{ moment(item.reportStartDate).format("YYYY-MM-DD") }}
             </div>
-            <div>
-              <span class="label">结束日期:</span
-              >{{ moment(item.reportEndDate).format("YYYY-MM-DD") }}
+            <div class="label">
+              {{ item.reportType == "weekly" ? "本周" : "今日" }}完成工作:
             </div>
-          </div>
-          <div v-else>
-            <span class="label">日志日期:</span
-            >{{ moment(item.reportStartDate).format("YYYY-MM-DD") }}
-          </div>
-          <div class="label">
-            {{ item.reportType == "weekly" ? "本周" : "今日" }}完成工作:
-          </div>
-          <div class="van-multi-ellipsis--l2">
-            <div>{{ item.reportContent }}</div>
-          </div>
-          <div class="label">工作量分配:</div>
-          <div class="work-list">
-            <div v-for="work in item.workload" :key="work.id" class="work-item">
-              {{ `(${work.workTime}小时)${work.projectName}` }}
+            <div class="van-multi-ellipsis--l2">
+              <div>{{ item.reportContent }}</div>
+            </div>
+            <div class="label">工作量分配:</div>
+            <div class="work-list">
+              <div
+                v-for="work in item.workload"
+                :key="work.id"
+                class="work-item"
+              >
+                {{ `(${work.workTime}小时)${work.projectName}` }}
+              </div>
             </div>
           </div>
         </div>
@@ -107,6 +116,26 @@ const onRefresh = async () => {
   await onLoad();
 };
 
+// 写一个函数判断本条和上一条是否是同一天
+const isSameDay = (data: any, index: number) => {
+  if (index == 0) return true;
+  const today = moment(data.fillingDate).format("YYYY-MM-DD").toString();
+  const lastDay = moment(list.value[index - 1].fillingDate)
+    .format("YYYY-MM-DD")
+    .toString();
+  if (today == lastDay) return false;
+  return true;
+};
+
+const timeFont = (date: string) => {
+  const currentDate = moment();
+  const givenDate = moment(date);
+  if (givenDate.isSame(currentDate, "day")) {
+    return moment(date).format("HH:mm");
+  }
+  return moment(date).format("MM月DD日 HH:mm");
+};
+
 // 查看详情
 const { push } = useRouter();
 const toDetail = (detail: any) => {
@@ -128,11 +157,25 @@ const toDetail = (detail: any) => {
   height: 100%;
   background-color: #f1f2f3;
   overflow: scroll;
+  padding-top: 15px;
+
   .log-card {
-    margin: 15px;
-    background-color: #fff;
-    border-radius: 10px;
-    padding: 10px 15px;
+    .time-box {
+      text-align: center;
+      .timer {
+        display: inline-block;
+        padding: 2px 15px;
+        background-color: #fff;
+        border-radius: 20px;
+        color: #838485;
+      }
+    }
+    .card-box {
+      margin: 15px;
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 10px 15px;
+    }
     .title {
       font-size: 16px;
       font-weight: bold;