✨ feat(我的留言): 列表，删除留言API联调

hookehuyr
Commit 85cce96170ce36f14d8a1f667aa5517a1967c0f7 85cce961 1 parent 50bfdfb1
Showing 1 changed file with 109 additions and 54 deletions
src/views/me/message.vue
--- a/src/views/me/message.vue
View file @85cce96
+++ b/src/views/me/message.vue
View file @85cce96
 <template>
-  <div class="">
+  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+    <div v-for="(item, key) in commentList" :key="key" class="comment">
       <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">
+          <van-col span="15">
-          <p>娜娜～</p>
+            <p>{{ item.name }}</p>
-          <p>杨浦民办科技幼稚园</p>
+            <p>{{ item.kg_name }}</p>
           </van-col>
-        <van-col span="4" style="text-align: center;">
+          <van-col span="5" style="text-align: right;">
-          <p style="color: #333333;">删除</p>
+            <p @click="deleteComment(item)" style="color: #333333;">删除</p>
-          <p>2-25</p>
+            <p>{{ item.comment_time }}</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>
-    <div style="padding: 1rem; background-color: #F7F7F7;" @click="onClick(item)">
+      <div class="raw-ref" @click="onClick(item)">
         <van-row>
-        <van-col span="8" style="position: relative;">
+          <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="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng67db765f866ac7aba573f734855380b0c1270fb19b8c5ce7fec681289eeae7d9"
+              style="vertical-align: text-bottom;">
               <template v-slot:error>加载失败</template>
             </van-image>
             <div style="position: absolute; top: 2rem; left: 3rem;">
-            <van-image width="2rem" height="2rem" :src="icon_player" style="vertical-align: text-bottom;" > </van-image>
+              <van-image width="2rem" height="2rem" :src="icon_player" style="vertical-align: text-bottom;"> </van-image>
             </div>
           </van-col>
-        <van-col span="14" style="line-height: 2; margin-left: 1rem;">
+          <van-col span="14" class="text">
-          <p style="font-size: 1.15rem;">@王忆慈</p>
+            <p style="font-size: 1.15rem;">{{ item.perf_name }}</p>
-          <p style="color: #999999;">逃家小兔绘本｜汉语</p>
+            <p style="color: #999999;">{{ item.book_name }} ｜ {{ item.localism_type }}</p>
           </van-col>
         </van-row>
       </div>
     </div>
+  </van-list>
 </template>
 <script setup>
@@ -46,53 +50,93 @@ import icon_player from '@images/bofang@2x.png'
 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 { Toast, Dialog } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
-const item = ref({
+// 我的留言接口联调
-  "case_id": "424589807164071936",
+const loading = ref(false);
-  "code": "N06",
+const finished = ref(false);
-  "title": "复旦管理学奖励基金会",
+const commentList = ref([])
-  "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作为一个扎根于中国管理学领域发展的公益组织，基金会在各级领导的亲切关怀下不断发展。获奖人所提出管理思想、管理理论和实践的创新、各项公益活动等，对于上海乃至全国各地的社会治理、公共管理与企业管理都发挥了重要的作用。在每年的颁奖典礼上，历任上海市领导均受邀出席并致辞。当今世界正面临百年未有的大变局，发展中国特色的管理学、并让中国特色管理学发挥更大的影响力，这比任何时候都更加迫切。在未来的公益发展事业中，基金会将继续助力中国特色管理学的探索和创新，为增强上海自主创新能力，提高城市国际竞争力，做出新的重大的贡献！",
+let limit = ref(10);
-  "cover": {
+let offset = ref(0)
-    "name": "N06.jpg",
+
-    "url": "http://gyzs.onwall.cn/2021gyzs/N06.jpg",
+const onLoad = () => {
-    "uid": 1564543218846,
+  axios.get('/srv/?a=my_comment', {
-    "status": "success"
+    params: {
-  },
+      limit: limit.value, 
-  "video": {
+      offset: offset.value
-    "name": "N06.mp4",
+    }
-    "url": "http://gyzs.onwall.cn/2021gyzs/N06.mp4",
+  })
-    "uid": 1564543218846,
+  .then(res => {
-    "status": "success"
+    if (res.data.code === 1) {
-  },
+      _.each(res.data.data, item => {
-  "status": "ENABLE",
+        let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
-  "public_vote": 3406,
+        item.c_action = arr[0]; // 评论动作
-  "score": 0,
+        item.c_name = arr[1]; // 评论姓名
-  "award": null,
+      })
-  "optr_date": "2021-12-31T15:50:00.547Z",
+      commentList.value = _.concat(commentList.value, res.data.data);
-  "corp": {
+      offset.value = commentList.value.length;
-    "name": "复旦管理学奖励基金会"
+      loading.value = false;
-  },
+      // 数据全部加载完成
-  "voted": false,
+      if (!res.data.data.length) {
-  "liked": false
+        // 加载状态结束
-})
+        finished.value = true;
+      }
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+}
-const onClick = (item) => {
+const onClick = (item) => { // 跳转作品详情页
-  // 调整书籍详情页
   $router.push({
-    path: '/client/bookDetail',
+    path: '/client/videoDetail',
     query: {
-      id: item.id
+      prod_id: item.prod_id
     }
   });
 }
-  onMounted(() => {
+const deleteComment = (item) => { // 删除评论
-    
+  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);
+          Toast({
+            icon: 'close',
+            message: res.data.msg
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err); 
+      });
     })
+    .catch(() => {
+      // on cancel
+    });
+}
 </script>
 <script>
@@ -100,12 +144,12 @@ import mixin from 'common/mixin';
 export default {
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
     }
   },
-  mounted () {
+  mounted() {
   },
   methods: {
@@ -132,4 +176,15 @@ export default {
     }
   }
 }
+.raw-ref {
+  padding: 1rem; 
+  background-color: #F7F7F7;
+  .image {
+    position: relative;
+  }
+  .text {
+    line-height: 2; 
+    margin-left: 1rem;
+  }
+}
 </style>
\ No newline at end of file