chore: 消息页面调整

src/api/index.js

@@ -254,3 +254,13 @@ export function updateActivityStatus(id, data) {
 export function getMessageList(params) {
   return httpRequest.get('/api/alumni/v1/student/messages', { params })
 }
+
+// 获取消息详情
+export function getMessage(id) {
+  return httpRequest.get(`/api/alumni/v1/student/messages/detail/${id}`)
+}
+
+// 获取消息详情
+export function readMessage(id) {
+  return httpRequest.post(`/api/alumni/v1/student/messages/read/${id}`)
+}

src/components/ActivityItem.vue

@@ -9,11 +9,11 @@
       <img :src="data.activity_image" />
     </div>
     <div class="activity-item-main">
-      <div class="activity-item-title line-clamp">{{ data.activity_name }}</div>
+      <div class="activity-item-title">{{ data.activity_name }}</div>
       <div class="activity-item-content">
         <p class="activity-item-content__city">{{ data.activity_city }}</p>
         <p class="activity-item-content__ft">
-          <span>{{ data.activity_time }}</span>
+          <span>{{ data.activity_time | dateFormat }}</span>
           <span>{{ data.stu_nums }}人报名</span>
         </p>
       </div>
@@ -22,6 +22,8 @@
 </template>
 
 <script>
+import dayjs from 'dayjs'
+
 export default {
   name: 'ActivityItem',
   props: {
@@ -37,6 +39,11 @@ export default {
       return this.currentIndex <= 3 ? `top${this.currentIndex}` : ''
     }
   },
+  filters: {
+    dateFormat(value) {
+      return dayjs(value).format('YYYY-MM-DD')
+    }
+  },
   methods: {
     onClick() {
       this.$router.push({ name: 'activityItem', params: { id: this.data.id } })
@@ -72,16 +79,15 @@ export default {
 .activity-item-title {
   font-size: 14px;
   color: #222;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .activity-item-content {
   p {
     color: #999;
-    margin-top: 5px;
   }
 }
-p.activity-item-content__city {
-  margin-top: 12px;
-}
 .activity-item-content__ft {
   display: flex;
   justify-content: space-between;

src/components/GroupItem.vue

@@ -82,9 +82,10 @@ export default {
 }
 .group-item-content__city {
   margin: 0 10px;
-  max-width: 60px;
-  overflow: hidden;
+  max-width: 70px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .group-item-content__hot {
   background: url('~@/assets/img/icon_hot.png') no-repeat left center;

src/components/MessageItem.vue

 <template>
-  <div class="message-item">
+  <div class="message-item" @click="onClick">
     <div class="message-item-pic" :class="`message-item-pic-${type}`"></div>
     <div class="message-item-content">
       <div class="message-item-content-hd">
         <div class="message-item-content__title">{{ data.title }}</div>
-        <div class="message-item-content__time">{{ data.time }}</div>
-      </div>
-      <div class="message-item-content-bd">
-        <p>紫荆官方发布了一条新消息，点击查看</p>
+        <div class="message-item-content__time">{{ data.created_time }}</div>
       </div>
+      <div class="message-item-content-bd" v-html="data.contents"></div>
     </div>
   </div>
 </template>
 <script>
 export default {
   name: 'MessageItem',
-  props: { type: String, data: Object }
+  props: { type: String, data: Object },
+  methods: {
+    onClick() {
+      this.$router.push({ name: 'messageItem', params: { id: this.data.id } })
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .message-item {
   display: flex;
+  align-items: center;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid #f1f1f1;
@@ -29,6 +33,7 @@ export default {
 .message-item-pic {
   width: 40px;
   height: 40px;
+  background-size: contain;
 }
 .message-item-pic-1 {
   background-image: url('~@/assets/img/message_group_icon.png');
@@ -39,8 +44,29 @@ export default {
 .message-item-pic-3 {
   background-image: url('~@/assets/img/message_settings_icon.png');
 }
-.meesage-item-content {
+.message-item-content {
   flex: 1;
   margin-left: 10px;
 }
+.message-item-content-hd {
+  display: flex;
+  justify-content: space-between;
+}
+.message-item-content__title {
+  font-size: 14px;
+  color: #222;
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.message-item-content__time {
+  font-size: 14px;
+  color: #999;
+}
+.message-item-content-bd {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #999;
+}
 </style>

src/views/message/Index.vue

 <template>
   <div class="main">
     <card title="我的消息">
-      <div class="message-card" @click="onClick(3)">
+      <div class="message-card" @click="onClick('3')">
         <div class="message-card-pic">
           <img src="~@/assets/img/message_settings_icon.png" />
         </div>
@@ -10,7 +10,7 @@
           <p>紫荆官方发布了一条新消息，点击查看</p>
         </div>
       </div>
-      <div class="message-card" @click="onClick(1)">
+      <div class="message-card" @click="onClick('1')">
         <div class="message-card-pic">
           <img src="~@/assets/img/message_group_icon.png" />
         </div>
@@ -19,7 +19,7 @@
           <p>您创建的组织有新的人员加入请求</p>
         </div>
       </div>
-      <div class="message-card" @click="onClick(2)">
+      <div class="message-card" @click="onClick('2')">
         <div class="message-card-pic">
           <img src="~@/assets/img/message_activity_icon.png" />
         </div>

src/views/message/Item.vue

 <template>
   <div class="main">
-    <card :title="title"></card>
+    <card :title="title" class="message-card">
+      <h1 class="message-title">{{ detail.title }}</h1>
+      <div class="message-content" v-html="detail.contents"></div>
+    </card>
+    <input
+      type="button"
+      class="submit-button"
+      value="我知道了"
+      @click="onRead"
+    />
   </div>
 </template>
 
 <script>
 import Card from '@/components/Card'
+import * as api from '@/api'
 export default {
   name: 'Message',
   components: { Card },
   data() {
-    return {}
+    return {
+      detail: {}
+    }
   },
   computed: {
     type() {
@@ -19,7 +31,43 @@ export default {
     title() {
       const typeMap = { 1: '组织消息', 2: '活动消息', 3: '系统消息' }
       return typeMap[this.type]
+    },
+    pid() {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    // 获取消息详情
+    getDetail() {
+      api.getMessage(this.pid).then(response => {
+        this.detail = response
+      })
+    },
+    // 确认读消息
+    onRead() {
+      api.readMessage(this.pid).then(() => {
+        this.$router.go(-1)
+      })
     }
+  },
+  beforeMount() {
+    this.getDetail()
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.message-card {
+  min-height: calc(100vh - 60px);
+}
+.message-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+.message-content {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #333;
+}
+</style>