'我的消息‘

src/views/myMessage/index.vue

@@ -31,15 +31,15 @@
             <h2 class="message-title">{{item.title}}</h2>
             <div class="message-details">
               <span class="sender">发件人：{{item.senderName}}</span>
-              <span class="read-status" style="margin-right: 40px">是否已读：{{ item.isRead ? '已读' : '未读' }}</span>
+              <span class="read-status" style="margin-right: 40px">状态：{{ item.isRead ? '已读' : '未读' }}</span>
               <span class="read-status">已读人数：{{item.readUserNum}} / {{item.userNum}}</span>
             </div>
             <div class="message-time">发送时间：{{item.sendTime}}</div>
           </div>
           <!-- 删除按钮，默认不显示，hover时显示 -->
-          <div v-if="!item.isRead" style="margin-right: 10px">
+<!--          <div v-if="!item.isRead" style="margin-right: 10px">-->
-            <el-button v-if="hoveringOver === item.id"  @click="readMessage(item.id)" type="warning" round>点击已读</el-button>
+<!--            <el-button v-if="hoveringOver === item.id"  @click="readMessage(item.id)" type="warning" round>点击已读</el-button>-->
-          </div>
+<!--          </div>-->
           <el-button v-if="hoveringOver === item.id"  @click="deleteMessage(item.id)" type="danger" round>删除</el-button>
         </div>
         <el-divider/>
@@ -194,6 +194,10 @@ const sendContent = ()=>{
 // 消息事件点击
 const handleClick = (item)=> {
   // console.log(item)
+  //查看消息切换已读状态
+  if(!item.isRead){
+    readMessage(item.id)
+  }
   //带查询参数
   router.push({ path: '/messageContentList', query: item })
 }
@@ -291,6 +295,6 @@ li{
 }
 
 .message-list-item:hover{
-  background-image: linear-gradient(60deg,powderblue,darkgrey,snow);
+  background-image: linear-gradient(60deg,snow,darkgrey,snow);
 }
 </style>