✨ feat(@我的页面): API联调

 <template>
-  <div class="">
+  <div v-for="(item, key) in commentList" :key="key">
     <div class="comment-wrapper">
       <van-row style="font-size: 0.9rem;">
         <van-col span="4">
-          <van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+          <van-image round width="3rem" height="3rem" :src="item.avatar" />
         </van-col>
         <van-col span="16">
-          <p>娜娜～</p>
-          <p>杨浦民办科技幼稚园</p>
+          <p>{{ item.name }}</p>
+          <p>{{ item.kg_name }}</p>
         </van-col>
         <van-col span="4" style="text-align: center;">
-          <p style="color: #333333;">回复</p>
+          <p @click="setComment(item, 'reply')" style="color: #333333;">回复</p>
           <p>2-25</p>
         </van-col>
       </van-row>
       <van-row>
         <van-col>
-          <span style="color: #222222;">留言<span style="color: #0B3A72;">@王忆慈</span>：感谢您的爱心捐赠，把这么优秀的书带给山区的小朋友！</span>
+          <span style="color: #222222;">{{ item.c_action }}<span style="color: #0B3A72;">@{{ item.c_name }}</span>：{{ item.note }}</span>
         </van-col>
       </van-row>
     </div>
@@ -24,61 +24,172 @@
     <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" lazy-load src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng67db765f866ac7aba573f734855380b0c1270fb19b8c5ce7fec681289eeae7d9" style="vertical-align: text-bottom;" >
+          <van-image width="8rem" height="5rem" lazy-load :src="item.cover" style="vertical-align: text-bottom;">
             <template v-slot:error>加载失败</template>
           </van-image>
-          <div style="position: absolute; top: 2rem; left: 3rem;">
+          <!-- <div style="position: absolute; top: 2rem; left: 3rem;">
             <van-image width="2rem" height="2rem" :src="icon_player" style="vertical-align: text-bottom;" > </van-image>
-          </div>
+          </div> -->
         </van-col>
         <van-col span="14" style="line-height: 2; margin-left: 1rem;">
-          <p style="font-size: 1.15rem;">@王忆慈</p>
-          <p style="color: #999999;">逃家小兔绘本｜汉语</p>
+          <p style="font-size: 1.15rem;">{{ item.perf_name }}</p>
+          <p style="color: #999999;">{{ item.book_name }} ｜ {{ item.localism_type }}</p>
         </van-col>
       </van-row>
     </div>
   </div>
+
+  <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
+  <!-- 写评论时，如果没有实名认证提示弹框 -->
+  <notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose">
+    <div style="color: #333333;">
+      <p>您还没有实名认证</p>
+      <p>请前往个人中心进行实名认证</p>
+    </div>
+  </notice-overlay>
 </template>
 
 <script setup>
-import icon_player from '@images/bofang@2x.png'
+// import icon_player from '@images/bofang@2x.png'
+import CommentBox from '@/components/CommentBox/index.vue'
+import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
 
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
-import $ from 'jquery'
+import _ from 'lodash'
 import { Toast } from 'vant';
+
+// 获取是否实名认证
+import { idCard } from '@/composables/useValidIdCard.js'
+const validIdCard = idCard();
+
 const $route = useRoute();
 const $router = useRouter();
 
-const item = ref({
-  "case_id": "424589807164071936",
-  "code": "N06",
-  "title": "复旦管理学奖励基金会",
-  "detail": "我国自古就有优秀的管理思想和实践，但中国现代管理科学则是在改革开放之后才逐步发展起来的。为进一步推动我国现代管理科学发展，原中共中央政治局常委、国务院副总理李岚清同志于2005年发起成立了复旦管理学奖励基金会，这也是中国人自己设立的管理学界第一个奖励基金会。\r\n“要真正解决好中国的管理问题，最终还是要依靠中国人自己。”这句话道出了“管理”必须根植于一个国家的社会组织和民族文化。管理科学，是兴国之道，也是一个国家软实力的重要组成部分。\r\n十六年来，基金会各项管理逐步完善，2020年首次参加社会组织等级评估即被授予“5A级社会组织”荣誉称号；FTI透明指数排名连获最优等级。基金会的评奖工作，及其开展的一系列公益项目，获得了来自各界人士的一致认可；同时借助媒体之力，不断拓宽公众对中国管理学的认识边界，受益人数不断增加。如今，基金会已逐渐发展成为中国管理学界最具影响力、最具公信力的基金会。\r\n作为一个“奖励性”的基金会，我们希望打造中国管理学界的“诺贝尔奖”。基金会目前设立了“复旦管理学杰出贡献奖”“复旦管理学终身成就奖”“复旦企业管理杰出贡献奖”三大奖项，已成为我国管理学界享有崇高声誉、具有广泛影响力的重要奖项。截至2020年，已评选出57位获奖人，他们中不乏成思危、苏东水等矢志推动中国特色的管理学及其研究走向世界的杰出专家学者，亦有张瑞敏、任正非等对中国管理学不断实践、探索的优秀民族企业家。\r\n评奖之外，基金会还积极开展了丰富多样的公益活动。自2013年起，面向我国高等学府，面向青年师生，面向中西部地区举办了“校园公益”系列讲座活动，辐射师生5000余人。\r\n联合我国管理学一级学会，举办了一系列具有国际影响力的管理学学术盛会。其中，“中国管理学年会”是中国管理学领域规模最大、层次最高的综合性学术会议。另外，基金会通过支持“中国管理学青年论坛”，为有潜力的优秀青年架起了跨学科、跨层次的学习交流平台，旨在培养中国管理学的中青年力量。\r\n为加强学术界和实业界的合作，基金会充分发挥“桥梁·引领·赋能”作用，做到将“管理学带出去”，“管理领进来”，邀请获奖人、专家学者与企业家共话“管理”。\r\n基金会还与复旦大学东方管理研究院、第一财经合作开展了“中国杰出企业家管理思想访谈录”项目，已通过42集电视专题片、6部《改变世界》、14本研究丛书等形式对外发布，另有10多个优秀案例走进了高校课堂，收益人数达10亿多人。\r\n基金会积极响应习近平总书记“把论文写在祖国大地上”的号召，与《管理学报》合作，举办专题学术研讨会，开辟“中国企业家管理思想”专栏；与知名企业合作开展“海尔生态雨林计划”等专项研究。\r\n2020年新冠疫情的突发，对全国各地的公共卫生治理都是前所未有的考验。为总结出应对疫情的科学、高效的经验，提供疫情应对经验给相关部门，基金会资助了“新冠疫情防控防治的中国特色管理理论与方法”系列专著及案例研究。于基金会而言，这件事意义非常。\r\n作为一个扎根于中国管理学领域发展的公益组织，基金会在各级领导的亲切关怀下不断发展。获奖人所提出管理思想、管理理论和实践的创新、各项公益活动等，对于上海乃至全国各地的社会治理、公共管理与企业管理都发挥了重要的作用。在每年的颁奖典礼上，历任上海市领导均受邀出席并致辞。当今世界正面临百年未有的大变局，发展中国特色的管理学、并让中国特色管理学发挥更大的影响力，这比任何时候都更加迫切。在未来的公益发展事业中，基金会将继续助力中国特色管理学的探索和创新，为增强上海自主创新能力，提高城市国际竞争力，做出新的重大的贡献！",
-  "cover": {
-    "name": "N06.jpg",
-    "url": "http://gyzs.onwall.cn/2021gyzs/N06.jpg",
-    "uid": 1564543218846,
-    "status": "success"
-  },
-  "video": {
-    "name": "N06.mp4",
-    "url": "http://gyzs.onwall.cn/2021gyzs/N06.mp4",
-    "uid": 1564543218846,
-    "status": "success"
-  },
-  "status": "ENABLE",
-  "public_vote": 3406,
-  "score": 0,
-  "award": null,
-  "optr_date": "2021-12-31T15:50:00.547Z",
-  "corp": {
-    "name": "复旦管理学奖励基金会"
-  },
-  "voted": false,
-  "liked": false
-})
+// TODO: @我的接口联调
+const loading = ref(false);
+const finished = ref(false);
+const commentList = ref([])
+let limit = ref(10);
+let offset = ref(0)
+
+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;
+      }
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+}
+
+onLoad()
+
+const showNotice = ref(false)
+const onClose = () => { // 关闭提示框回调
+  showNotice.value = false;
+}
+// 跳转个人中心
+const onSubmit = () => {
+  $router.push({
+    path: '/me/index'
+  });
+}
+
+/******** 留言框相关操作 START *******/
+// 回复评论控件
+const showCommentBoxPopup = ref(false);
+const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
+
+/**
+ * 回复/评论 功能
+ * @param {*} v 单行评论数据
+ * @param {*} type 类型 comment 为评论/类型 reply 为回复
+ */
+const commentId = ref('')
+const replayUser = ref('')
+const setComment = (v, type) => {
+  if (validIdCard.can_use.value) {
+    showCommentBoxPopup.value = true;
+    commentType.value = type;
+    replayUser.value = v.name;
+    commentId.value = v.id;
+  } else {
+    showNotice.value = true;
+  }
+}
+
+/**
+ * 提交留言回调
+ * @param {*} note 留言内容
+ */
+const submitCommentBox = (note) => {
+  let url = '';
+  let data = {}
+  // 判断是留言还是回复 动态调整接口名称
+  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
+    }
+  }
+  axios.post(`/srv/?a=${url}`, data)
+  .then(res => {
+    if (res.data.code === 1) {
+      showCommentBoxPopup.value = false;
+      Toast.success('发布成功')
+      // 刷新列表
+      location.reload()
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+}
+
+const closeCommentBox = (v) => { // 关闭留言框
+  showCommentBoxPopup.value = v;
+}
+/******** 留言框相关操作 START *******/
 
 const onClick = (item) => {
   // 调整书籍详情页

@@ -25,14 +25,12 @@
       <div class="raw-ref" @click="onClick(item)">
         <van-row>
           <van-col span="8" class="image">
-            <van-image width="8rem" height="5rem" lazy-load
-              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng67db765f866ac7aba573f734855380b0c1270fb19b8c5ce7fec681289eeae7d9"
-              style="vertical-align: text-bottom;">
+            <van-image width="8rem" height="5rem" lazy-load :src="item.cover" style="vertical-align: text-bottom;">
               <template v-slot:error>加载失败</template>
             </van-image>
-            <div style="position: absolute; top: 2rem; left: 3rem;">
+            <!-- <div style="position: absolute; top: 2rem; left: 3rem;">
               <van-image width="2rem" height="2rem" :src="icon_player" style="vertical-align: text-bottom;"> </van-image>
-            </div>
+            </div> -->
           </van-col>
           <van-col span="14" class="text">
             <p style="font-size: 1.15rem;">{{ item.perf_name }}</p>