✨ feat(我的页面): 我的留言和@我的列表新增已读功能，列表显示数量为未读数量

hookehuyr
Commit fbb7214e51b9893dcf9adb8898492ed199971323 fbb7214e 1 parent 730582ce
Showing 4 changed files with 63 additions and 34 deletions
src/api/C/perf.js
src/views/me/callMe.vue
src/views/me/index.vue
src/views/me/message.vue
--- a/src/api/C/perf.js
View file @fbb7214
+++ b/src/api/C/perf.js
View file @fbb7214
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 21:16:59
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-10 11:49:04
+ * @LastEditTime: 2022-06-10 13:30:31
  * @FilePath: /tswj/src/api/C/perf.js
  * @Description: 用户相关API
  */
@@ -13,6 +13,7 @@ const Api = {
   ADD_FOLLOW: '/srv/?a=add_follow',
   ADD_COMMENT: '/srv/?a=add_comment',
   ADD_REPLY: '/srv/?a=add_reply',
+  MY_COMMENT_TIME: '/srv/?a=my_comment_time',
 }
 /**
@@ -42,3 +43,11 @@ export const addCommentAPI = (params) => fn(fetch.post(Api.ADD_COMMENT, params))
  * @returns 
  */
 export const addReplyAPI = (params) => fn(fetch.post(Api.ADD_REPLY, params));
+
+/**
+ * @description: 更新用户留言事件
+ * @summary 处理留言已读未读问题
+ * @param {String} optr_type 操作类型 my_comment ｜ atme_comment
+ * @returns 
+ */
+export const myCommentTimeAPI = (params) => fn(fetch.post(Api.MY_COMMENT_TIME, params));
--- a/src/views/me/callMe.vue
View file @fbb7214
+++ b/src/views/me/callMe.vue
View file @fbb7214
@@ -14,7 +14,7 @@
           <van-col span="4" style="text-align: center;">
             <p style="color: #333333; position: relative; text-align: right;" @click="setComment(item, 'reply')">
               回复
-              <span class="spot">·</span>
+              <span v-if="item.is_new" class="spot">·</span>
             </p>
             <p>2-25</p>
           </van-col>
@@ -53,22 +53,27 @@
 </template>
 <script setup>
-import { mainStore } from '@/store'
+// import { mainStore } from '@/store'
-// import icon_player from '@images/bofang@2x.png'
 import { no_image, icon_avatar } from '@/utils/generateIcons.js'
 import CommentBox from '@/components/CommentBox/index.vue'
 import { ref, onActivated } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
-import axios from '@/utils/axios';
+// import axios from '@/utils/axios';
 import _ from 'lodash'
 import { Toast } from 'vant';
-import { addPages, store } from '@/hooks/useKeepAlive'
+// import { addPages, store } from '@/hooks/useKeepAlive'
 import { myAtmeAPI } from '@/api/C/me'
 import { addCommentAPI, addReplyAPI } from '@/api/C/perf'
+import { myCommentTimeAPI } from '@/api/C/perf'
 const $route = useRoute();
 const $router = useRouter();
+onBeforeRouteLeave(async () => {
+  // 更新留言阅读情况
+  await myCommentTimeAPI({ optr_type: 'atme_comment' });
+})
+
 const loading = ref(false);
 const finished = ref(false);
 const commentList = ref([])
--- a/src/views/me/index.vue
View file @fbb7214
+++ b/src/views/me/index.vue
View file @fbb7214
@@ -4,7 +4,8 @@
       <div class="info">
         <van-row>
           <van-col>
-            <van-image round width="50" height="50" :src="userInfo.avatar ? userInfo.avatar : icon_avatar" style="padding-right: 1rem;" @click="handleUser('EDIT')" />
+            <van-image round width="50" height="50" :src="userInfo.avatar ? userInfo.avatar : icon_avatar"
+              style="padding-right: 1rem;" @click="handleUser('EDIT')" />
           </van-col>
           <van-col class="text-wrapper" span="18">
             <div>
@@ -35,9 +36,10 @@
           <van-col span="1" class="divide">|</van-col>
           <van-col span="5" @click="go('/me/unwatchList')">
             <p class="tap-color">未看</p>
-            <p>
+            <!-- <p>
               <van-tag round color="red">{{ userInfo.unplay_num }}</van-tag>
-            </p>
+            </p> -->
+            <p>{{ userInfo.unplay_num }}</p>
           </van-col>
         </van-row>
       </div>
@@ -45,23 +47,32 @@
     <div class="van-hairline--bottom sub-handle">
       <div>
-        <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject4" @on-click="go('/me/verifyUser', { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">实名认证</my-button>
+        <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject4"
+          @on-click="go('/me/verifyUser', { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">
+          实名认证
+        </my-button>
         <my-button v-else type="custom" :custom-style="styleObject5">已认证</my-button>
       </div>
       <div>
-        <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject7" @on-click="handleUser('ADD')">新增儿童</my-button>
+        <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject7"
+          @on-click="handleUser('ADD')">
+          新增儿童
+        </my-button>
         <my-button v-else type="custom" :custom-style="styleObject6" @on-click="showNotice = true">新增儿童</my-button>
       </div>
     </div>
     <template v-for="(item, key) in itemList" :key="key">
-      <div class="van-hairline--bottom item-list" @click="go(item.to, { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">
+      <div class="van-hairline--bottom item-list"
+        @click="go(item.to, { kg_id: userInfo.kg_id, kg_name: userInfo.kg_name })">
         <van-row>
           <van-col span="12">{{ item.name }}</van-col>
           <van-col span="12" style="text-align: right; color: #777777;">
-            <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span>
+            <span v-if="item.tag">
+              <van-tag v-if="item.sum" round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;
+            </span>
             <span v-else>
-              <van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;
+              {{ item.sum }}&nbsp;&nbsp;
             </span>
             <van-icon name="arrow" />
           </van-col>
--- a/src/views/me/message.vue
View file @fbb7214
+++ b/src/views/me/message.vue
View file @fbb7214
@@ -13,15 +13,18 @@
             <p>{{ item.kg_name }}</p>
           </van-col>
           <van-col span="5" style="text-align: right;">
-            <p style="color: #333333;" @click="deleteComment(item.id)">删除</p>
+            <p style="color: #333333; position: relative;" @click="deleteComment(item.id)">
+              删除
+              <span v-if="item.is_new" class="spot">·</span>
+            </p>
             <p>{{ item.comment_time }}</p>
           </van-col>
         </van-row>
         <van-row>
           <van-col>
             <span style="color: #222222;">{{ item.c_action }}<span style="color: #0B3A72;">@{{ item.c_name }}</span>：{{
-            item.note
+              item.note
-            }}</span>
+              }}</span>
           </van-col>
         </van-row>
       </div>
@@ -29,8 +32,7 @@
       <div class="raw-ref" @click="goToVideoDetail(item)">
         <van-row>
           <van-col span="8" class="image">
-            <van-image width="8rem" height="5rem" fit="cover" :src="item.cover"
+            <van-image width="8rem" height="5rem" fit="cover" :src="item.cover" style="vertical-align: text-bottom;">
-              style="vertical-align: text-bottom;">
               <template #error>加载失败</template>
             </van-image>
             <!-- <div style="position: absolute; top: 2rem; left: 3rem;">
@@ -50,24 +52,20 @@
 <script lang="ts" setup>
 // import { mainStore } from '@/store'
-
+import { no_image, icon_avatar } from '@/utils/generateIcons.js'
-// import icon_player from '@images/bofang@2x.png'
-import no_image from '@images/que-shuju@2x.png'
-import icon_avatar from '@images/que-touxiang@2x.png'
-
 import { ref, onActivated } from 'vue'
-// import { useRouter } from 'vue-router'
+import { onBeforeRouteLeave } from 'vue-router'
-// import axios from '@/utils/axios';
 import _ from 'lodash'
 import { Toast, Dialog } from 'vant';
 // import { addPages } from '@/hooks/useKeepAlive'
-
 import goToVideoDetail from '@/router/methods/videoDetail'
+import { myCommentAPI, delCommentAPI } from '@/api/C/me'
+import { myCommentTimeAPI } from '@/api/C/perf'
-import { myCommentAPI, delCommentAPI } from '@/api/C/me.js'
+onBeforeRouteLeave(async () => {
-
+  // 更新留言阅读情况
-// const $route = useRoute();
+  await myCommentTimeAPI({ optr_type: 'my_comment' });
-// const $router = useRouter();
+})
 // 我的留言接口联调
 const loading = ref(false);
@@ -88,6 +86,7 @@ interface commentListType {
   perf_name: string;
   book_name: string;
   localism_type: string;
+  is_new: number;
 }
 const commentList = ref<commentListType[]>([])
 let limit = ref(10);
@@ -96,7 +95,6 @@ let offset = ref(0)
 // 因为不能让空图标提前出来的写法
 const finishedTextStatus = ref(false);
 const emptyStatus = ref(false);
-
 const onLoad = async () => {
   const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
   //
@@ -166,7 +164,6 @@ onActivated(() => { // keepAlive 重置后执行回调
   color: #999999;
   padding: 1rem;
   line-height: 1.75;
-
   .reply-wrapper {
     background: #F7F7F7;
     border-radius: 10px;
@@ -178,6 +175,13 @@ onActivated(() => { // keepAlive 重置后执行回调
       color: #222222;
     }
   }
+  .spot {
+    color: red;
+    font-size: 2rem;
+    position: absolute;
+    right: -0.5rem;
+    top: -1.75rem;
+  }
 }
 .raw-ref {