zhujindu 8 місяців тому
батько
коміт
811bc3fd3e
5 змінених файлів з 80 додано та 4 видалено
  1. BIN
      src/assets/shareLeft.png
  2. BIN
      src/assets/shareRight.png
  3. 42 3
      src/components/share.vue
  4. 2 0
      src/main.js
  5. 36 1
      src/utils/index.js

BIN
src/assets/shareLeft.png


BIN
src/assets/shareRight.png


+ 42 - 3
src/components/share.vue

@@ -1,6 +1,21 @@
 <template>
   <div class="share">
-    <div class="header"></div>
+    <div class="header">
+      <div class="left-icon">
+        <img :src="require('@/assets/shareLeft.png')" />
+      </div>
+      <div class="right-icon">
+        <img :src="require('@/assets/shareRight.png')" />
+      </div>
+    </div>
+    <div class="title">
+      <div class="name">{{ reportTarget.nickName }}的日报</div>
+      <div class="date">
+        {{
+          reportTarget.commitTime ? formatChineseDate(reportTarget.commitTime.split(' ')[0]) : ''
+        }}
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -17,8 +32,15 @@ export default {
   data() {
     return {};
   },
-  mounted() {},
-  methods: {},
+  mounted() {
+    console.log(this.reportTarget);
+  },
+  methods: {
+    splitTime(date) {
+      let time = date.split(' ');
+      return time[0].replice('-', '/');
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -30,5 +52,22 @@ export default {
   position: absolute;
   top: 0;
   z-index: 9;
+  padding: vw(45);
+  .header {
+    display: flex;
+    justify-content: space-between;
+    .left-icon {
+      width: vw(114);
+      height: vw(71);
+    }
+    .right-icon {
+      width: vw(230);
+      height: vw(78);
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>

+ 2 - 0
src/main.js

@@ -16,6 +16,7 @@ import {
   weeklyTimeDivision,
   gcj02BD,
   verifyStoreType,
+  formatChineseDate,
 } from '@/utils/index';
 import { toastLoading } from '@/utils/commonVant';
 import '@vant/touch-emulator';
@@ -59,6 +60,7 @@ Vue.prototype.wx = wx;
 Vue.prototype.parseTimeParagraph = parseTimeParagraph;
 Vue.prototype.Micrometer = Micrometer;
 Vue.prototype.verifyStoreType = verifyStoreType;
+Vue.prototype.formatChineseDate = formatChineseDate;
 Vue.prototype.Toast = Toast;
 Vue.prototype.notify = Notify;
 var clipboard = new ClipboardJS('.btn');

+ 36 - 1
src/utils/index.js

@@ -1,4 +1,4 @@
-import store from '../store';
+const store = require('../store');
 
 // 日期格式化
 export function parseTime(time, pattern) {
@@ -50,6 +50,41 @@ export function parseTime(time, pattern) {
   }
 }
 // 千分号
+// 中文日期格式(年-月-日)
+export function formatChineseDate(time) {
+  // 统一处理日期格式
+  const formatDate = (dateObj) => {
+    const year = dateObj.getFullYear();
+    const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
+    const day = dateObj.getDate().toString().padStart(2, '0');
+    return `${year}年${month}月${day}日`;
+  };
+
+  // 处理字符串格式(支持多种分隔符)
+  if (typeof time === 'string') {
+    // 清理日期字符串中的时间部分(如果有)
+    const dateString = time.split(' ')[0];
+    // 匹配 yyyy-mm-dd 或 yyyy/m/d 等格式
+    if (/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/.test(dateString)) {
+      const separator = dateString.includes('-') ? '-' : '/';
+      const [year, month, day] = dateString.split(separator);
+      return formatDate(new Date(year, month - 1, day));
+    }
+  }
+
+  // 处理时间戳和Date对象
+  try {
+    const date = new Date(time);
+    if (!isNaN(date)) {
+      return formatDate(date);
+    }
+  } catch (e) {
+    console.error('Invalid date format:', time);
+  }
+
+  return '无效日期格式';
+}
+
 export function Micrometer(num) {
   if (num != null) {
     let numt = (num || 0).toString().split('.');