✨ feat(我的留言): TS改写测试

hookehuyr
Commit df62b013905b5a4977ca595dda85824d5502f170 df62b013 1 parent 9a250110
Showing 4 changed files with 118 additions and 93 deletions
src/api/C/me.js
src/router/methods/videoDetail.ts
src/views/me/message.vue
tsconfig.json
--- a/src/api/C/me.js
View file @df62b01
+++ b/src/api/C/me.js
View file @df62b01
+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-18 22:16:10
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-08 12:21:53
+ * @FilePath: /tswj/src/api/C/me.js
+ * @Description: 我的页面接口操作
+ */
 import { fn, fetch } from '@/api/fn';
 const Api = {
@@ -6,6 +14,8 @@ const Api = {
   MY_PERFORMER: '/srv/?a=my_performer',
   MY_LIKE: '/srv/?a=my_like',
   MY_FAVOR: '/srv/?a=my_favor',
+  MY_COMMENT: '/srv/?a=my_comment',
+  DEL_COMMENT: '/srv/?a=del_comment',
 }
 /**
@@ -42,3 +52,18 @@ export const myLikeAPI = (params) => fn(fetch.get(Api.MY_LIKE, params));
  * @returns 
  */
 export const myFavorAPI = (params) => fn(fetch.get(Api.MY_FAVOR, params));
+
+/**
+ * @description: 用户评论列表
+ * @param {string} limit
+ * @param {string} offset
+ * @returns 
+ */
+export const myCommentAPI = (params) => fn(fetch.get(Api.MY_COMMENT, params));
+
+/**
+ * @description: 删除用户评论
+ * @param {string} comment_id 评论ID
+ * @returns 
+ */
+export const delCommentAPI = (params) => fn(fetch.post(Api.DEL_COMMENT, params));
--- a/src/router/methods/videoDetail.ts 0 → 100644
View file @df62b01
+++ b/src/router/methods/videoDetail.ts 0 → 100644
View file @df62b01
+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-06-07 18:03:50
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-07 20:17:14
+ * @FilePath: /tswj/src/router/methods/goToVideoDetail.ts
+ * @Description:
+ */
+// import { useRouter } from 'vue-router';
+import $router from '@/router';
+
+/**
+ * 路由跳转视频详情页
+ * @param prodId 作品ID
+ * @param perfId 表演者ID
+ * @param bookId 书籍ID
+ * @param type 特殊标识，判断入口 为keepAlive使用
+ */
+const fn = (prodId: string, perfId: string, bookId: string, type?: string): void => {
+  $router.push({
+    path: '/client/videoDetail',
+    query: {
+      prod_id: prodId,
+      perf_id: perfId,
+      book_id: bookId,
+      type,
+    },
+  });
+};
+
+export default fn;
--- a/src/views/me/message.vue
View file @df62b01
+++ b/src/views/me/message.vue
View file @df62b01
@@ -13,19 +13,20 @@
             <p>{{ item.kg_name }}</p>
           </van-col>
           <van-col span="5" style="text-align: right;">
-            <p style="color: #333333;" @click="deleteComment(item)">删除</p>
+            <p style="color: #333333;" @click="deleteComment(item.id)">删除</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 }}</span>
+            item.note
+            }}</span>
           </van-col>
         </van-row>
       </div>
-      <div class="raw-ref" @click="onClick(item)">
+      <div class="raw-ref" @click="goToVideoDetail(item.prod_id, item.perf_id, item.book_id)">
         <van-row>
           <van-col span="8" class="image">
             <van-image width="8rem" height="5rem" fit="cover" lazy-load :src="item.cover"
@@ -47,27 +48,48 @@
   <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无留言" />
 </template>
-<script setup>
+<script lang="ts" setup>
-import { mainStore } from '@/store'
+// import { mainStore } from '@/store'
-import icon_player from '@images/bofang@2x.png'
+// 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, reactive, onMounted, onActivated } from 'vue'
+import { ref, onActivated } from 'vue'
-import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
+// import { useRouter } from 'vue-router'
-import axios from '@/utils/axios';
+// import axios from '@/utils/axios';
 import _ from 'lodash'
 import { Toast, Dialog } from 'vant';
-import { addPages, store } from '@/hooks/useKeepAlive'
+// import { addPages } from '@/hooks/useKeepAlive'
-const $route = useRoute();
+import goToVideoDetail from '@/router/methods/videoDetail'
-const $router = useRouter();
+
+import { myCommentAPI, delCommentAPI } from '@/api/C/me.js'
+
+// const $route = useRoute();
+// const $router = useRouter();
 // 我的留言接口联调
 const loading = ref(false);
 const finished = ref(false);
-const commentList = ref([])
+interface commentListType {
+  id: string;
+  avatar: string;
+  name: string;
+  kg_name: string;
+  comment_time: string;
+  note: string;
+  c_action: string;
+  c_name: string;
+  cover: string;
+  prod_id: string;
+  perf_id: string;
+  book_id: string;
+  perf_name: string;
+  book_name: string;
+  localism_type: string;
+}
+const commentList = ref<commentListType[]>([])
 let limit = ref(10);
 let offset = ref(0)
@@ -75,86 +97,49 @@ let offset = ref(0)
 const finishedTextStatus = ref(false);
 const emptyStatus = ref(false);
-const onLoad = () => {
+const onLoad = async () => {
-  axios.get('/srv/?a=my_comment', {
+  const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
-    params: {
+  //
-      limit: limit.value, 
+  // _.each(data, item => {
-      offset: offset.value
+  //   let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
-    }
+  //   item.c_action = arr[0]; // 评论动作
-  })
+  //   item.c_name = arr[1]; // 评论姓名
-  .then(res => {
+  // })
-    if (res.data.code === 1) {
+  data.forEach((item: { target_name: string | null | undefined; c_action: string; c_name: string; }) => {
-      _.each(res.data.data, item => {
     let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
     item.c_action = arr[0]; // 评论动作
     item.c_name = arr[1]; // 评论姓名
-      })
+  });
-      commentList.value = _.concat(commentList.value, res.data.data);
+  commentList.value = [...commentList.value, ...data];
-      commentList.value = _.uniqBy(commentList.value, 'id');
+  // commentList.value = _.uniqBy(commentList.value, 'id');
   offset.value = commentList.value.length;
   loading.value = false;
   // 数据全部加载完成
-      if (!res.data.data.length) {
+  if (!data.length) {
     // 加载状态结束
     finished.value = true;
   }
+  // 隐藏loading标识，空列表图标
   if (!commentList.value.length) {
     finishedTextStatus.value = false;
     emptyStatus.value = true;
   }
-    } else {
-      console.warn(res);
-      if (!res.data.show) return false;
-      Toast({
-        icon: 'close',
-        message: res.data.msg
-      });
-    }
-  })
-  .catch(err => {
-    console.error(err); 
-  })
-}
-
-const onClick = (item) => { // 跳转作品详情页
-  $router.push({
-    path: '/client/videoDetail',
-    query: {
-      prod_id: item.prod_id,
-      perf_id: item.perf_id,
-      book_id: item.book_id
-    }
-  });
 }
-const deleteComment = (item) => { // 删除评论
+const deleteComment = (id: string) => { // 删除评论
   Dialog.confirm({
     title: '温馨提示',
     message: '是否确认删除该评论？',
     confirmButtonColor: '#713610'
   })
-    .then(() => {
+    .then(async () => {
-      axios.post('/srv/?a=del_comment', {
+      const result = await delCommentAPI({ comment_id: id });
-        comment_id: item.id
+      if (result) {
-      })
-      .then(res => {
-        if (res.data.code === 1) {
         // 移除当前选中评论，避免刷新页面
-          _.remove(commentList.value, comment => comment.id === item.id);
+        _.remove(commentList.value, comment => comment.id === id);
         Toast.success('删除成功');
-        } else {
-          console.warn(res);
-          if (!res.data.show) return false;
-          Toast({
-            icon: 'close',
-            message: res.data.msg
-          });
       }
     })
-      .catch(err => {
-        console.error(err); 
-      });
-    })
     .catch(() => {
       // on cancel
     });
@@ -163,7 +148,7 @@ const deleteComment = (item) => { // 删除评论
 /****************** keepAlive 模块 *******************/
 // TAG: keepAlive 缓存页面
-addPages()
+// addPages()
 onActivated(() => { // keepAlive 重置后执行回调
 });
@@ -171,26 +156,6 @@ onActivated(() => { // keepAlive 重置后执行回调
 /*********************************************************/
 </script>
-<script>
-import mixin from 'common/mixin';
-
-export default {
-  name: 'message',
-  mixins: [mixin.init],
-  data() {
-    return {
-
-    }
-  },
-  mounted() {
-
-  },
-  methods: {
-
-  }
-}
-</script>
-
 <style lang="less" scoped>
 .comment-wrapper {
   color: #999999;
@@ -209,12 +174,15 @@ export default {
     }
   }
 }
+
 .raw-ref {
   padding: 1rem;
   background-color: #F7F7F7;
+
   .image {
     position: relative;
   }
+
   .text {
     line-height: 2;
     margin-left: 1rem;
--- a/tsconfig.json
View file @df62b01
+++ b/tsconfig.json
View file @df62b01
@@ -43,7 +43,8 @@
     "node_modules",
     "dist"
   ],
-  // "vueCompilerOptions": {
+  "vueCompilerOptions": {
-  //   "experimentalSuppressInvalidJsxElementTypeErrors": true
+    "target": 2,
-  // }
+    "experimentalSuppressInvalidJsxElementTypeErrors": true
+  }
 }