✨ feat(我的页面@我的功能页): API接口请求方式优化

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-18 22:16:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-08 12:21:53
+ * @LastEditTime: 2022-06-10 11:29:45
  * @FilePath: /tswj/src/api/C/me.js
  * @Description: 我的页面接口操作
  */
@@ -15,6 +15,7 @@ const Api = {
   MY_LIKE: '/srv/?a=my_like',
   MY_FAVOR: '/srv/?a=my_favor',
   MY_COMMENT: '/srv/?a=my_comment',
+  MY_ATME: '/srv/?a=my_atme',
   DEL_COMMENT: '/srv/?a=del_comment',
 }
 
@@ -67,3 +68,11 @@ export const myCommentAPI = (params) => fn(fetch.get(Api.MY_COMMENT, params));
  * @returns 
  */
 export const delCommentAPI = (params) => fn(fetch.post(Api.DEL_COMMENT, params));
+
+/**
+ * @description: /@/我的列表
+ * @param {string} limit
+ * @param {string} offset
+ * @returns 
+ */
+export const myAtmeAPI = (params) => fn(fetch.get(Api.MY_ATME, params));

+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-26 21:16:59
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-10 11:49:04
+ * @FilePath: /tswj/src/api/C/perf.js
+ * @Description: 用户相关API
+ */
 import { fn, fetch } from '@/api/fn';
 
 const Api = {
   PERF_INFO: '/srv/?a=perf_info',
   ADD_FOLLOW: '/srv/?a=add_follow',
+  ADD_COMMENT: '/srv/?a=add_comment',
+  ADD_REPLY: '/srv/?a=add_reply',
 }
 
 /**
@@ -18,3 +28,17 @@ export const perfInfoAPI = (params) => fn(fetch.post(Api.PERF_INFO, params));
  * @returns 
  */
 export const addFollowAPI = (params) => fn(fetch.post(Api.ADD_FOLLOW, params));
+
+/**
+ * @description: 用户新增评论操作
+ * @param {String} prod_id 作品ID
+ * @returns 
+ */
+export const addCommentAPI = (params) => fn(fetch.post(Api.ADD_COMMENT, params));
+
+/**
+ * @description: 用户新增回复操作
+ * @param {String} comment_id 评论ID
+ * @returns 
+ */
+export const addReplyAPI = (params) => fn(fetch.post(Api.ADD_REPLY, params));

@@ -12,7 +12,10 @@
             <p>{{ item.kg_name }}</p>
           </van-col>
           <van-col span="4" style="text-align: center;">
-            <p style="color: #333333;" @click="setComment(item, 'reply')">回复</p>
+            <p style="color: #333333; position: relative; text-align: right;" @click="setComment(item, 'reply')">
+              回复
+              <span class="spot">·</span>
+            </p>
             <p>2-25</p>
           </van-col>
         </van-row>
@@ -27,8 +30,7 @@
       <div style="padding: 1rem; background-color: #F7F7F7;" @click="onClick(item)">
         <van-row>
           <van-col span="8" style="position: relative;">
-            <van-image width="8rem" height="5rem" fit="cover" :src="item.cover"
-              style="vertical-align: text-bottom;">
+            <van-image width="8rem" height="5rem" fit="cover" :src="item.cover" style="vertical-align: text-bottom;">
               <template #error>加载失败</template>
             </van-image>
             <!-- <div style="position: absolute; top: 2rem; left: 3rem;">
@@ -52,81 +54,57 @@
 
 <script setup>
 import { mainStore } from '@/store'
-
 // import icon_player from '@images/bofang@2x.png'
-import no_image from '@images/que-shuju@2x.png'
+import { no_image, icon_avatar } from '@/utils/generateIcons.js'
 import CommentBox from '@/components/CommentBox/index.vue'
-import icon_avatar from '@images/que-touxiang@2x.png'
-
 import { ref, onActivated } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import _ from 'lodash'
 import { Toast } from 'vant';
 import { addPages, store } from '@/hooks/useKeepAlive'
+import { myAtmeAPI } from '@/api/C/me'
+import { addCommentAPI, addReplyAPI } from '@/api/C/perf'
 
 const $route = useRoute();
 const $router = useRouter();
 
-// @我的接口联调
 const loading = ref(false);
 const finished = ref(false);
 const commentList = ref([])
 let limit = ref(10);
 let offset = ref(0)
-
 // 因为不能让空图标提前出来的写法
 const finishedTextStatus = ref(false);
 const emptyStatus = ref(false);
-
-const onLoad = () => {
-  axios.get('/srv/?a=my_atme', {
-    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);
-      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 {
-        emptyStatus.value = false;
-      }
-    } else {
-      console.warn(res);
-      if (!res.data.show) return false;
-      Toast({
-        icon: 'close',
-        message: res.data.msg
-      });
-    }
-  })
-  .catch(err => {
-    console.error(err); 
+//
+const onLoad = async () => {
+  const { data } = await myAtmeAPI({ 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]; // 评论姓名
   })
+  commentList.value = [...commentList.value, ...data];
+  offset.value = commentList.value.length;
+  loading.value = false;
+  // 数据全部加载完成
+  if (!data.length) {
+    // 加载状态结束
+    finished.value = true;
+  }
+  if (!commentList.value.length) {
+    finishedTextStatus.value = false;
+    emptyStatus.value = true;
+  } else {
+    emptyStatus.value = false;
+  }
 }
-// 立即执行一次
-// onLoad();
 
 /******** 留言框相关操作 START *******/
 // 回复评论控件
 const showCommentBoxPopup = ref(false);
-const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
+const commentType = ref(''); // 类型 comment 为评论 / 类型 reply 为回复
 
 /**
  * 回复/评论 功能
@@ -135,6 +113,7 @@ const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为
  */
 const commentId = ref('')
 const replayUser = ref('')
+// 打开评论弹框组件
 const setComment = (v, type) => {
   showCommentBoxPopup.value = true;
   commentType.value = type;
@@ -143,45 +122,31 @@ const setComment = (v, type) => {
 }
 
 /**
- * 提交留言回调
+ * 留言/回复 回调
  * @param {*} note 留言内容
+ * @param {*} prod_id 作品ID
+ * @param {*} comment_id 评论ID
  */
-const submitCommentBox = (note) => {
-  let url = '';
-  let data = {}
-  // 判断是留言还是回复 动态调整接口名称
+const submitCommentBox = async (note) => {
+  let params = { note };
   if (commentType.value === 'comment') {
-    url = 'add_comment';
-    data = {
-      prod_id: $route.query.prod_id,
-      note
-    }
-  } else {
-    url = 'add_reply';
-    data = {
-      comment_id: commentId.value,
-      note
+    params.prod_id = $route.query.prod_id;
+    const { msg } = await addCommentAPI(params);
+    if (msg === 'OK') {
+      Toast.success('发布成功')
+      // 刷新列表
+      location.reload()
     }
   }
-  axios.post(`/srv/?a=${url}`, data)
-  .then(res => {
-    showCommentBoxPopup.value = false;
-    if (res.data.code === 1) {
+  if (commentType.value === 'reply') {
+    params.comment_id = commentId.value;
+    const { msg } = await addReplyAPI(params);
+    if (msg === 'OK') {
       Toast.success('发布成功')
       // 刷新列表
       location.reload()
-    } else {
-      console.warn(res);
-      if (!res.data.show) return false;
-      Toast({
-        icon: 'close',
-        message: res.data.msg
-      });
     }
-  })
-  .catch(err => {
-    console.error(err); 
-  })
+  }
 }
 
 const closeCommentBox = (v) => { // 关闭留言框
@@ -234,7 +199,7 @@ export default {
   color: #999999;
   padding: 1rem;
   line-height: 1.75;
-
+  position: relative;
   .reply-wrapper {
     background: #F7F7F7;
     border-radius: 10px;
@@ -246,5 +211,12 @@ export default {
       color: #222222;
     }
   }
+  .spot {
+    color: red;
+    font-size: 2rem;
+    position: absolute;
+    right: -0.5rem;
+    top: -1.75rem;
+  }
 }
 </style>