fix 评论功能细节调整

@@ -25,7 +25,7 @@
       <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>
+          <p v-else style="padding: 1rem; padding-top: 0;">回复<span style="color: #0B3A72;">@{{ replayUser }}：</span></p>
         </van-col>
         <van-col span="8">
           <div class="button-primary-comment" @click="submitComment">发送</div>
@@ -66,7 +66,7 @@ import { ref, reactive, onMounted } from 'vue'
 
 <script>
 export default {
-  props: ['showPopup', 'type'],
+  props: ['showPopup', 'type', 'replayUser'],
   data () {
     return {
       show: false,

 <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="onReload">
-          <div style="padding: 1rem; text-align: center;">
-            <van-icon :name="icon_x" size="1.25rem" />
+    <div style="position: relative;">
+      <div class="van-hairline--bottom" style="position: fixed; width: 100%; background-color: white; border-radius: 10px; z-index: 999;">
+        <van-row>
+          <van-col span="4" @click="onReload">
+            <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>{{ data.total }}条回复</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="height: 4rem;"></div>
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
+        <template v-for="(item, key) in replyList" :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="item.avatar" />
+              </van-col>
+              <van-col span="14">
+                <p>{{ item.name }}</p>
+                <p>{{ item.kg_name }}</p>
+              </van-col>
+              <van-col span="6" style="text-align: right;">
+                <p @click="setComment(item, 'reply')" style="color: #333333;">回复</p>
+                <p>{{ item.comment_time }}</p>
+              </van-col>
+            </van-row>
+            <van-row>
+              <van-col offset="4">
+                <span style="color: #222222;">{{ item.note }}</span>
+              </van-col>
+            </van-row>
           </div>
-        </van-col>
-        <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
-          <span>{{ data.total }}条回复</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>
+        </template>
+      </van-list>
     </div>
-    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
-      <template v-for="(item, key) in replyList" :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="item.avatar" />
-            </van-col>
-            <van-col span="14">
-              <p>{{ item.name }}</p>
-              <p>{{ item.kg_name }}</p>
-            </van-col>
-            <van-col span="6" style="text-align: right;">
-              <p style="color: #333333;">回复</p>
-              <p>{{ item.comment_time }}</p>
-            </van-col>
-          </van-row>
-          <van-row>
-            <van-col offset="4">
-              <span style="color: #222222;">{{ item.note }}</span>
-            </van-col>
-          </van-row>
-        </div>
-      </template>
-    </van-list>
-    <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box>
+    <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
   </van-popup>
 
 
@@ -58,42 +61,138 @@ import _ from 'lodash'
 import { Toast } from 'vant';
 
 import { ref, reactive, onMounted } from 'vue'
-// const props = defineProps({
-//   showPopup: Boolean
-// })
+// 获取是否实名认证
+import { idCard } from '@/composables/useValidIdCard.js'
+const validIdCard = idCard();
+
+const props = defineProps({
+  showPopup: Boolean,
+  data: Object
+})
 
+/******** 留言框相关操作 START *******/
 // 回复评论控件
 const showCommentBoxPopup = ref(false);
 const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
-const flag = true; // 后台接口判断是否上传过作品
-// 实际调试时，点击回复需要判断是否上传过作品
-const setComment = (v, type) => { // 回复/评论
-  if (flag) {
+
+/**
+ * 回复/评论 功能
+ * @param {*} v 单行评论数据
+ * @param {*} type 类型 comment 为评论/类型 reply 为回复
+ */
+const commentId = ref('')
+const replayUser = ref('')
+const setComment = (v, type) => { // 
+  if (validIdCard.can_use) {
     showCommentBoxPopup.value = true;
     commentType.value = type;
+    replayUser.value = v.name;
+    commentId.value = props.data.id;
   } else {
     showNotice.value = true;
   }
 }
-const closeCommentBox = (v) => { // 查看更多回复
+
+/**
+ * 提交留言回调
+ * @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('发布成功')
+      onReload()
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
+}
+
+const closeCommentBox = (v) => { // 关闭留言框
   showCommentBoxPopup.value = v;
 }
+/******** 留言框相关操作 START *******/
 
 onMounted(() => {
 })
+
+const show = ref(false);
+const replyList = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const limit = ref(10)
+const offset = ref(0)
+
+const onLoad = () => {
+  // 异步更新数据
+  axios.get('/srv/?a=reply_list', {
+    params: {
+      comment_id: props.data.id,
+      limit: limit.value,
+      offset: offset.value
+    }
+  })
+    .then(res => {
+      if (res.data.code === 1) {
+        replyList.value = _.concat(replyList.value, res.data.data.replylist);
+        offset.value = replyList.value.length;
+        loading.value = false;
+        // 数据全部加载完成
+        if (!res.data.data.replylist.length) {
+          // 加载状态结束
+          finished.value = true;
+        }
+      } else {
+        console.warn(res);
+        Toast({
+          icon: 'close',
+          message: res.data.msg
+        });
+      }
+    })
+    .catch(err => {
+      console.error(err);
+    })
+}
+const onReload = () => {
+  replyList.value = [];
+  offset.value = 0;
+  onLoad();
+}
+const onClose = () => {
+  show.value = false;
+}
 </script>
 
 <script>
 export default {
-  props: ['showPopup', 'data'],
   data() {
     return {
-      show: false,
-      replyList: [],
-      loading: false,
-      finished: false,
-      limit: 10,
-      offset: 0,
     }
   },
   mounted() {
@@ -107,45 +206,6 @@ export default {
     }
   },
   methods: {
-    onLoad () {
-      // 异步更新数据
-      axios.get('/srv/?a=reply_list', {
-        params: {
-          comment_id: this.data.id,
-          limit: this.limit,
-          offset: this.offset
-        }
-      })
-        .then(res => {
-          if (res.data.code === 1) {
-            this.replyList = _.concat(this.replyList, res.data.data.replylist);
-            this.offset = this.replyList.length;
-            this.loading = false;
-            // 数据全部加载完成
-            if (!res.data.data.replylist.length) {
-              // 加载状态结束
-              this.finished = true;
-            }
-          } else {
-            console.warn(res);
-            Toast({
-              icon: 'close',
-              message: res.data.msg
-            });
-          }
-        })
-        .catch(err => {
-          console.error(err);
-        })
-    },
-    onReload () {
-      this.replyList = [];
-      this.offset = 0;
-      this.onLoad();
-    },
-    onClose() {
-      this.show = false;
-    },
     closeBtn() {
       this.$emit('on-close', false)
       this.show = false;

@@ -2,12 +2,15 @@ import { createApp } from 'vue';
 import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog } from 'vant';
 import router from './router';
 import App from './App.vue';
-import axios from './utils/axios';
+// import axios from './utils/axios';
+import axios from '@/utils/axios';
 import { createPinia } from 'pinia';
 
 const pinia = createPinia();
 const app = createApp(App);
 
+app.config.globalProperties.$http = axios; // 关键语句
+
 app.use(pinia);
 app.use(router);
 app.use(Button);
@@ -39,6 +42,4 @@ app.use(Dialog);
 
 app.use(ConfigProvider);
 
-app.config.globalProperties.$http = axios; // 关键语句
-
 app.mount('#app');

@@ -28,7 +28,7 @@
                     <p v-if="reply.reply_to"><span>{{ reply.name }}</span>&nbsp;回复&nbsp;<span>@{{ reply.reply_to }}：</span><span class="content">{{ reply.note }}</span></p>
                     <p v-else><span>{{ reply.name }}：</span><span class="content">{{ reply.note }}</span></p>
                   </template>
-                  <p v-if="item.total !== reply_limit" @click="getMore(item)">共{{ item.total }}条回复 ></p>
+                  <p v-if="item.total >= reply_limit" @click="getReplyList(item)">共{{ item.total }}条回复 ></p>
                 </div>
             </van-col>
           </van-row>
@@ -41,7 +41,7 @@
     </div>
   </div>
   <comment-list :showPopup="showCommentListPopup" :data="commentData" @on-close="closeCommentList"></comment-list>
-  <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
+  <comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @on-close="closeCommentBox"></comment-box>
 
   <!-- 写评论时，如果没有上传作品提示弹框 -->
   <van-overlay :show="showNotice" z-index="1000">
@@ -90,13 +90,12 @@ const $route = useRoute();
 const $router = useRouter();
 
 
-// 查询留言接口数据
+/******** 留言列表相关操作 START *******/
 const loading = ref(false);
 const finished = ref(false);
 const limit = ref(5)
 const offset = ref(0)
 const reply_limit = ref(3)
-
 const commentList = ref([])
 
 const onLoad = () => {
@@ -133,8 +132,6 @@ const onLoad = () => {
 };
 
 const onReload = () => {
-  // TODO: 初始化列表数据，会使得列表滚到最上面
-  // 处理方法只能是插入相应的一条数据，这样就需要后台新增完成后，返回完整数据
   commentList.value = [];
   offset.value = 0;
   onLoad();
@@ -160,21 +157,8 @@ const onReload = () => {
     console.error(err); 
   })
 }
+/******** 留言框列表相关操作 END *******/
 
-// 回复消息列表模块
-const showCommentListPopup = ref(false);
-const commentData = ref('')
-// 查看更多回复
-const getMore = (v) => {
-  showCommentListPopup.value = true;
-  commentData.value = v;
-}
-const closeCommentList = (v) => { // 查看更多回复
-  showCommentListPopup.value = v;
-}
-// 回复评论控件
-const showCommentBoxPopup = ref(false);
-const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
 const showNotice = ref(false)
 const closeNotice = () => { // 关闭提示框回调
   showNotice.value = false;
@@ -183,16 +167,25 @@ const closeNotice = () => { // 关闭提示框回调
   });
 }
 
+
+/******** 留言框相关操作 START *******/
+// 回复评论控件
+const showCommentBoxPopup = ref(false);
+const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
+
 /**
  * 回复/评论 功能
  * @param {*} v 单行评论数据
  * @param {*} type 类型 comment 为评论/类型 reply 为回复
  */
 const commentId = ref('')
+const replayUser = ref('')
+// TODO: 本人的评论还是应该把回复按钮屏蔽掉，后台要给个字段判断一下，comment_list/reply_list两个接口都要调整
 const setComment = (v, type) => { // 
   if (validIdCard.can_use) {
     showCommentBoxPopup.value = true;
     commentType.value = type;
+    replayUser.value = v.name;
     commentId.value = v.id;
   } else {
     showNotice.value = true;
@@ -226,7 +219,33 @@ const submitCommentBox = (note) => {
       showCommentBoxPopup.value = false;
       Toast.success('发布成功')
       // 刷新列表
-      // onReload();
+      if (commentType.value === 'comment') {
+        // 留言可以刷新列表
+        onReload();
+      } else {
+        // TODO: 初始化列表数据，会使得列表滚到最上面
+        // 处理方法只能是插入相应的一条数据，这样就需要后台新增完成后，返回完整数据
+        // 后端需要返回一个完整结构，我临时写进去
+        let temp = {
+          "id": 314178,
+          "prod_id": 314058,
+          "pid": 314171,
+          "reply_to": "王申羽",
+          "name": "王申羽",
+          "avatar": "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf033a3cc00e4bb414ad696adbaf90a05f496c00e7210e889cd4ff3e4ea10ef24",
+          "kg_name": "杨浦科技幼儿园",
+          "note": "这是一条回复",
+          "created_by": 314051,
+          "comment_time": "5-4 07:03"
+        }
+
+        _.each(commentList.value, comment => {
+          if (comment.id === commentId.value) {
+            comment.reply_list.push(temp)
+            comment.total = comment.total + 1
+          }
+        })
+      }
       // 不能刷新，只能插入
     } else {
       console.warn(res);
@@ -244,6 +263,21 @@ const submitCommentBox = (note) => {
 const closeCommentBox = (v) => { // 关闭留言框
   showCommentBoxPopup.value = v;
 }
+/******** 留言框相关操作 START *******/
+
+
+/******** 查看回复列表操作 START *******/
+const showCommentListPopup = ref(false);
+const commentData = ref({})
+// 查看更多回复
+const getReplyList = (v) => {
+  showCommentListPopup.value = true;
+  commentData.value = v;
+}
+const closeCommentList = (v) => { // 查看更多回复
+  showCommentListPopup.value = v;
+}
+/******** 查看回复列表操作 END *******/
 
 onMounted(() => {
   onLoad();