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

+/*
+ * @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));

+/*
+ * @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;

@@ -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>
-import { mainStore } from '@/store'
+<script lang="ts" setup>
+// 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 { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
-import axios from '@/utils/axios';
+import { ref, onActivated } from 'vue'
+// import { useRouter } from 'vue-router'
+// 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();
-const $router = useRouter();
+import goToVideoDetail from '@/router/methods/videoDetail'
+
+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,85 +97,48 @@ let offset = ref(0)
 const finishedTextStatus = ref(false);
 const emptyStatus = ref(false);
 
-const onLoad = () => {
-  axios.get('/srv/?a=my_comment', {
-    params: {
-      limit: limit.value, 
-      offset: offset.value
-    }
-  })
-  .then(res => {
-    if (res.data.code === 1) {
-      _.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 = _.uniqBy(commentList.value, 'id');
-      offset.value = commentList.value.length;
-      loading.value = false;
-      // 数据全部加载完成
-      if (!res.data.data.length) {
-        // 加载状态结束
-        finished.value = true;
-      }
-      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 onLoad = async () => {
+  const { data } = await myCommentAPI({ limit: limit.value, offset: offset.value });
+  //
+  // _.each(data, item => {
+  //   let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
+  //   item.c_action = arr[0]; // 评论动作
+  //   item.c_name = arr[1]; // 评论姓名
+  // })
+  data.forEach((item: { target_name: string | null | undefined; c_action: string; c_name: string; }) => {
+    let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
+    item.c_action = arr[0]; // 评论动作
+    item.c_name = arr[1]; // 评论姓名
   });
+  commentList.value = [...commentList.value, ...data];
+  // commentList.value = _.uniqBy(commentList.value, 'id');
+  offset.value = commentList.value.length;
+  loading.value = false;
+  // 数据全部加载完成
+  if (!data.length) {
+    // 加载状态结束
+    finished.value = true;
+  }
+  // 隐藏loading标识，空列表图标
+  if (!commentList.value.length) {
+    finishedTextStatus.value = false;
+    emptyStatus.value = true;
+  }
 }
 
-const deleteComment = (item) => { // 删除评论
+const deleteComment = (id: string) => { // 删除评论
   Dialog.confirm({
     title: '温馨提示',
     message: '是否确认删除该评论？',
     confirmButtonColor: '#713610'
   })
-    .then(() => {
-      axios.post('/srv/?a=del_comment', {
-        comment_id: item.id
-      })
-      .then(res => {
-        if (res.data.code === 1) {
-          // 移除当前选中评论，避免刷新页面
-          _.remove(commentList.value, comment => comment.id === item.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); 
-      });
+    .then(async () => {
+      const result = await delCommentAPI({ comment_id: id });
+      if (result) {
+        // 移除当前选中评论，避免刷新页面
+        _.remove(commentList.value, comment => comment.id === id);
+        Toast.success('删除成功');
+      }
     })
     .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,14 +174,17 @@ export default {
     }
   }
 }
+
 .raw-ref {
-  padding: 1rem; 
+  padding: 1rem;
   background-color: #F7F7F7;
+
   .image {
     position: relative;
   }
+
   .text {
-    line-height: 2; 
+    line-height: 2;
     margin-left: 1rem;
   }
 }

@@ -43,7 +43,8 @@
     "node_modules",
     "dist"
   ],
-  // "vueCompilerOptions": {
-  //   "experimentalSuppressInvalidJsxElementTypeErrors": true
-  // }
+  "vueCompilerOptions": {
+    "target": 2,
+    "experimentalSuppressInvalidJsxElementTypeErrors": true
+  }
 }