✨ feat(作品详情页): 新增留言模块相应功能

@@ -27,7 +27,7 @@ const $router = useRouter();
     /* 全局修改主色调 */
     /* 全局修改主色调 */
     // --van-blue: #F9D95C;
     // --van-blue: #F9D95C;
     
     
-    background-color: #FAFAFA;
+    // background-color: #FAFAFA;
     p {
     p {
       margin: 0;
       margin: 0;
       padding: 0;
       padding: 0;

+<template>
+  <van-popup
+    v-model:show="show"
+    :close-on-click-overlay="false"
+    position="bottom"
+    :style="{ height: '100%' }"
+  >
+    <div class="van-hairline--bottom">
+      <van-row>
+        <van-col span="4">
+        </van-col>
+        <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
+          <span v-if="type === 'comment'">留言</span>
+          <span v-else>回复</span>
+        </van-col>
+        <van-col span="4" @click="closeBtn">
+          <div style="padding: 1rem;">
+            <van-icon :name="icon_y" size="1.25rem" />
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+    <div style="background-color: #F7F7F7; font-size: 0.9rem;">
+      <p style="color: #777777; padding: 1rem;">您的留言评论将会展示在页面中，请谨慎发表留言评论</p>
+      <van-row>
+        <van-col span="16">
+          <p v-if="type === 'comment'" style="padding: 1rem; padding-top: 0;">请写下你友善的留言：</p>
+          <p v-else style="padding: 1rem; padding-top: 0;">回复<span style="color: #0B3A72;">@是妮妮吖～：</span></p>
+        </van-col>
+        <van-col span="8">
+          <div class="button-primary-comment" @click="submitComment">发送</div>
+        </van-col>
+      </van-row>
+    </div>
+    <div>
+      <van-cell-group inset>
+        <van-field
+          v-model="message"
+          rows="2"
+          autosize
+          label=""
+          type="textarea"
+          maxlength="200"
+          :placeholder="type === 'comment' ? '请输入留言内容' : '请输入回复内容'"
+          show-word-limit
+        />
+      </van-cell-group>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import icon_x from '@images/x.png'
+import icon_y from '@images/y.png'
+import MyButton from '@/components/MyButton/index.vue'
+
+import { ref, reactive, onMounted } from 'vue'
+// const props = defineProps({
+//   showPopup: Boolean
+// })
+
+const message = ref('')
+
+  onMounted(() => {
+  })
+</script>
+
+<script>
+export default {
+  props: ['showPopup', 'type'],
+  data () {
+    return {
+      show: false
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    showPopup (value, pre) {
+      if (value) {
+        this.show = value;
+      }
+    }
+  },
+  methods: {
+    onClose () {
+      this.show = false;
+    },
+    refreshBtn () {},
+    closeBtn () {
+      this.$emit('on-close', false)
+      this.show = false;
+    },
+    submitComment () {
+      this.$emit('on-close', false)
+      this.show = false;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.comment-wrapper {
+  color: #999999;
+  padding: 1rem;
+  line-height: 1.75;
+
+  .reply-wrapper {
+    background: #F7F7F7;
+    border-radius: 10px;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    color: #0B3A72;
+
+    .content {
+      color: #222222;
+    }
+  }
+}
+
+.button-primary-comment {
+  width: 5rem;
+  height: auto;
+  text-align: center;
+  padding: 0.2rem;
+  // margin: 0.25rem;
+  font-size: 0.9rem;
+  background: #F9D95C;
+  border-radius: 24px;
+  border: 1px solid #F9D95C;
+  color: #713610;
+  font-weight: bold;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+}
+</style>
\ No newline at end of file

+<template>
+  <van-popup
+    v-model:show="show"
+    :close-on-click-overlay="false"
+    round
+    position="bottom"
+    :style="{ height: '70%' }"
+  >
+    <div class="van-hairline--bottom">
+      <van-row>
+        <van-col span="4" @click="refreshBtn">
+          <div style="padding: 1rem; text-align: center;">
+            <van-icon :name="icon_x" size="1.25rem" />
+          </div>
+        </van-col>
+        <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
+          <span>12条回复</span>
+        </van-col>
+        <van-col span="4" @click="closeBtn">
+          <div style="padding: 1rem;">
+            <van-icon :name="icon_y" size="1.25rem" />
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+    <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-col>
+        <van-col span="16">
+          <p>是妮妮吖～</p>
+          <p>杨浦民办科技幼稚园</p>
+        </van-col>
+        <van-col span="4" style="text-align: center;">
+          <p style="color: #333333;">回复</p>
+          <p>2-25</p>
+        </van-col>
+      </van-row>
+      <van-row>
+        <van-col offset="4">
+          <span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
+        </van-col>
+      </van-row>
+    </div>
+    <div class="comment-wrapper" style="background-color: #F7F7F7;">
+      <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-col>
+        <van-col span="16">
+          <p>是妮妮吖～</p>
+          <p>杨浦民办科技幼稚园</p>
+        </van-col>
+        <van-col span="4" style="text-align: center;">
+          <p style="color: #333333;">回复</p>
+          <p>2-25</p>
+        </van-col>
+      </van-row>
+      <van-row>
+        <van-col offset="4">
+          <span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
+        </van-col>
+      </van-row>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import icon_x from '@images/x.png'
+import icon_y from '@images/y.png'
+
+import { ref, reactive, onMounted } from 'vue'
+// const props = defineProps({
+//   showPopup: Boolean
+// })
+
+  onMounted(() => {
+  })
+</script>
+
+<script>
+export default {
+  props: ['showPopup'],
+  data () {
+    return {
+      show: false
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    showPopup (value, pre) {
+      if (value) {
+        this.show = value;
+      }
+    }
+  },
+  methods: {
+    onClose () {
+      this.show = false;
+    },
+    refreshBtn () {},
+    closeBtn () {
+      this.$emit('on-close', false)
+      this.show = false;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.comment-wrapper {
+  color: #999999;
+  padding: 1rem;
+  line-height: 1.75;
+
+  .reply-wrapper {
+    background: #F7F7F7;
+    border-radius: 10px;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    color: #0B3A72;
+
+    .content {
+      color: #222222;
+    }
+  }
+}
+</style>
\ No newline at end of file

@@ -45,7 +45,13 @@ export default [{
   meta: {
   meta: {
     title: '作品'
     title: '作品'
   },
   },
-  children: []
+  children: [
+    {
+      path: 'comment',
+      name: '评论详情',
+      component: () => import('./views/client/videoDetailComment.vue')
+    }
+  ]
 }, {
 }, {
   path: '/image',
   path: '/image',
   name: 'html转图片',
   name: 'html转图片',

 <template>
 <template>
   <div class="video-detail-page">
   <div class="video-detail-page">
-    <div style="padding: 1rem;">
-      <div>
-        <van-image
-          round
-          width="2rem"
-          height="2rem"
-          src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-        />
-        <span style="color: #222222;">瑟日古娜</span>
-      </div>
+    <div class="detail-header">
+      <van-row>
+        <van-col span="4">
+          <van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        </van-col>
+        <van-col style="line-height: 3rem;">
+          <div class="name-info">瑟日古娜</div>
+        </van-col>
+      </van-row>
+      <div class="other-info">呼和浩特市新城区蒙古族幼儿园 ｜ 蒙语</div>
     </div>
     </div>
+
+    <div class="video-player">
+      <video-detail :item="data_video"></video-detail>
+    </div>
+
+    <div class="video-main">
+      <van-row>
+        <van-col span="24" style="padding-top: 0.2rem;">
+          <van-tabs sticky v-model:active="active" @click-tab="onClickTab" color="#F9D95C" background="#F7F7F7" title-active-color="#222222" title-inactive-color="#777777">
+            <van-tab title="简介" :title-style="tabClass">
+              <div class="intro"> 瑟日古娜小朋友是一名来自呼和浩特市新城区蒙古族幼儿园，六岁的蒙古族小姑娘，小姑娘用纯正的蒙古族语言生动形象的演绎了逃家小兔的活泼机灵，以及兔子妈妈的深情。 </div>
+            </van-tab>
+            <van-tab :title="'留言 ' + commentSum" :title-style="tabClass" to="/client/videoDetail/comment">
+              <router-view></router-view>
+            </van-tab>
+          </van-tabs>
+        </van-col>
+      </van-row>
+    </div>
+    
+    
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import VideoDetail from '@/components/VideoDetail/index.vue'
 import { ref, reactive, onMounted } from 'vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
@@ -23,9 +45,51 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
-  onMounted(() => {
-    
-  })
+const data_video = reactive({
+  "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,
+  "collected": false
+})
+
+const active = ref(1); // index 0 为简介，1 为留言
+const onClickTab = ({ title }) => {
+  console.warn(title);
+};
+
+const tabClass = {
+  fontSize: '1rem'
+}
+
+const commentSum = ref(18)
+
+
+onMounted(() => {
+
+})
 </script>
 </script>
 
 
 <script>
 <script>
@@ -33,12 +97,12 @@ import mixin from 'common/mixin';
 
 
 export default {
 export default {
   mixins: [mixin.init],
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
     return {
 
 
     }
     }
   },
   },
-  mounted () {
+  mounted() {
 
 
   },
   },
   methods: {
   methods: {
@@ -49,6 +113,25 @@ export default {
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
 .video-detail-page {
 .video-detail-page {
-
+  background-color: #FFFFFF;
+  .detail-header {
+    padding: 1rem;
+    .name-info {
+      color: #222222; 
+      font-size: 1.15rem;
+    }
+    .other-info {
+      color: #999999;
+    }
+  }
+  .video-player {
+    height: auto;
+  }
+  .video-main {
+    height: auto;
+    .intro {
+      padding: 1rem; color: #333333;
+    }
+  }
 }
 }
 </style>
 </style>
\ No newline at end of file

+<template>
+  <div class="">
+    <!-- 回复条数大于20才加载 后端需要给我总条数 -->
+    <template v-if="sum >= 20">
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <div v-for="item in list" :key="item" :title="item">
+          {{ item }}
+        </div>
+      </van-list>
+    </template>
+    <template v-else>
+      <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-col>
+          <van-col span="16">
+            <p>是妮妮吖～</p>
+            <p>杨浦民办科技幼稚园</p>
+          </van-col>
+          <van-col span="4" style="text-align: center;">
+            <p @click="setComment('11', 'reply')" style="color: #333333;">回复</p>
+            <p>2-25</p>
+          </van-col>
+        </van-row>
+        <van-row>
+          <van-col offset="4">
+            <span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
+          </van-col>
+        </van-row>
+        <van-row>
+          <van-col offset="4">
+            <div class="reply-wrapper">
+              <p><span>瑟日古娜（作者）：</span><span class="content">谢谢您的表扬，我会继续加油的！</span></p>
+              <p><span>阿布日达 </span>回复<span> @瑟日古娜（作者）：</span><span class="content">厉害的呀，棒！！</span></p>
+              <p @click="getMore()">共12条回复 ></p>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+    </template>
+    <div style="height: 5rem;"></div>
+    <div class="reply-btn" @click="setComment('222', 'comment')">
+      <div class="text">写下你友善的留言</div>
+    </div>
+  </div>
+  <comment-list :showPopup="showCommentListPopup" @on-close="closeCommentList"></comment-list>
+  <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box>
+</template>
+
+<script setup>
+import CommentList from '@/components/CommentList/index.vue'
+import CommentBox from '@/components/CommentBox/index.vue'
+
+import { ref, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import axios from '@/utils/axios';
+import $ from 'jquery'
+import { Toast } from 'vant';
+const $route = useRoute();
+const $router = useRouter();
+
+const list = ref([]);
+const sum = ref(0);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 10; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 100) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
+// 回复消息列表模块
+const showCommentListPopup = ref(false);
+const getMore = (v) => { // 查看更多回复
+  showCommentListPopup.value = true;
+}
+const closeCommentList = (v) => { // 查看更多回复
+  showCommentListPopup.value = v;
+}
+// 回复评论控件
+const showCommentBoxPopup = ref(false);
+const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
+const setComment = (v, type) => { // 回复/评论
+  showCommentBoxPopup.value = true;
+  commentType.value = type;
+}
+const closeCommentBox = (v) => { // 查看更多回复
+  showCommentBoxPopup.value = v;
+}
+
+
+onMounted(() => {
+  sum.value = 10; // 获取评论总条数，判断是否加载控件
+})
+</script>
+
+<script>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.comment-wrapper {
+  color: #999999;
+  padding: 1rem;
+  line-height: 1.75;
+
+  .reply-wrapper {
+    background: #F7F7F7;
+    border-radius: 10px;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    color: #0B3A72;
+
+    .content {
+      color: #222222;
+    }
+  }
+}
+
+.reply-btn {
+  position: fixed;
+  bottom: 1rem;
+  left: 0;
+  right: 0;
+
+  .text {
+    text-align: center;
+    padding: 0.5rem;
+    margin: 0.8rem;
+    font-size: 0.85rem;
+    border-radius: 24px;
+    border: 1px solid F7F7F7;
+    color: #B7B7B7;
+    background-color: #FFFFFF;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
+  }
+}
+</style>
\ No newline at end of file