From 0da91cd614b4e06711062274bbf873406ede4832 Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Mon, 20 Jun 2022 10:41:47 +0800
Subject: [PATCH] =?UTF-8?q?fat:=E8=AF=84=E4=BB=B7=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/goods/comment.js                 |  10 +-
 src/store/modules/goods/comment.js       | 109 ++++++++-
 src/views/goods/comment/detail/index.vue | 269 ++++++++++++++++++++---
 3 files changed, 358 insertions(+), 30 deletions(-)

diff --git a/src/api/goods/comment.js b/src/api/goods/comment.js
index 54364dd..167dd21 100644
--- a/src/api/goods/comment.js
+++ b/src/api/goods/comment.js
@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-06-15 17:55:43
  * @LastEditors: ch
- * @LastEditTime: 2022-06-17 10:43:30
+ * @LastEditTime: 2022-06-17 18:13:27
  * @Description: file content
  */
 import request from '@/utils/request.js';
@@ -19,6 +19,14 @@ export const commentDetail = ({ id }) =>
         url: `/mall/comment/admin/comment/getCommentDetail/${id}`,
         method: 'get',
     });
+
+//获取评论列表
+export const commentAdd = (data) =>
+    request({
+        url: '/mall/comment/admin/comment',
+        method: 'post',
+        data,
+    });
 // 更新评价显示状态
 export const updateCommentShow = (data) =>
     request({
diff --git a/src/store/modules/goods/comment.js b/src/store/modules/goods/comment.js
index e24e1ae..88dee1d 100644
--- a/src/store/modules/goods/comment.js
+++ b/src/store/modules/goods/comment.js
@@ -2,7 +2,96 @@ import * as api from '@/api/goods/comment.js';
 import { ElMessage } from 'element-plus/es';
 const state = {
     list: [],
-    detail: {},
+    detail: {
+        id: 18,
+        originId: 0,
+        parentId: 0,
+        userId: 97,
+        userName: 'ocean',
+        commentContent: '用户超时未做出评价，系统默认好评',
+        isShow: false,
+        createTime: '2022-06-17 15:27:09',
+        commentType: 1,
+        userAvatar: 'https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/default-headimg.png',
+        skuName: '测试SKU',
+        productName: '测试虚拟111',
+        phone: '151****5744',
+        pictureUrl: 'https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/120x120.png',
+        commentScore: 5,
+        followComment: {
+            id: 19,
+            originId: 18,
+            parentId: 18,
+            userId: 97,
+            userName: 'ocean',
+            commentContent: '新增一条追评',
+            isShow: true,
+            createTime: '2022-06-17 17:13:32',
+            commentType: 2,
+        },
+        answerCommentList: [
+            {
+                id: 20,
+                originId: 18,
+                parentId: 18,
+                userId: 8,
+                userName: '随机昵称',
+                commentContent: '新增一条回复',
+                isShow: true,
+                createTime: '2022-06-17 17:14:02',
+                commentType: 3,
+                parentUserName: 'ocean',
+            },
+            {
+                id: 21,
+                originId: 18,
+                parentId: 18,
+                userId: 8,
+                userName: '随机昵称',
+                commentContent: '1232321',
+                isShow: true,
+                createTime: '2022-06-17 18:31:48',
+                commentType: 3,
+                parentUserName: 'ocean',
+            },
+            {
+                id: 22,
+                originId: 18,
+                parentId: 18,
+                userId: 8,
+                userName: '随机昵称',
+                commentContent: '我回复我回复我回复我回复我回复',
+                isShow: true,
+                createTime: '2022-06-17 18:32:39',
+                commentType: 3,
+                parentUserName: 'ocean',
+            },
+            {
+                id: 23,
+                originId: 18,
+                parentId: 22,
+                userId: 8,
+                userName: '随机昵称',
+                commentContent: '222222222222',
+                isShow: true,
+                createTime: '2022-06-17 18:34:30',
+                commentType: 3,
+                parentUserName: '随机昵称',
+            },
+            {
+                id: 24,
+                originId: 18,
+                parentId: 18,
+                userId: 8,
+                userName: '随机昵称',
+                commentContent: '直接评论直接评论',
+                isShow: true,
+                createTime: '2022-06-17 18:36:03',
+                commentType: 3,
+                parentUserName: 'ocean',
+            },
+        ],
+    },
     total: 0,
     opts: {
         isShow: [
@@ -37,6 +126,14 @@ const state = {
                 label: '5星',
             },
         ],
+        commentType: {
+            //  评论
+            comment: 1,
+            // 追评
+            addComment: 2,
+            // 回复
+            reply: 3,
+        },
     },
 };
 const getters = {};
@@ -84,8 +181,18 @@ const actions = {
         const res = await api.commentDetail({ id });
         if (!res) {
             ElMessage.error('获取详情失败');
+            return Promise.reject('获取详情失败');
         }
         commit('setDetail', res);
+        return Promise.resolve(res);
+    },
+    async add({ state, commit }, data) {
+        const res = await api.commentAdd(data);
+        if (!res) {
+            ElMessage.error('回复失败');
+            return Promise.reject(false);
+        }
+        return Promise.resolve(res);
     },
 };
 
diff --git a/src/views/goods/comment/detail/index.vue b/src/views/goods/comment/detail/index.vue
index ca9f7a0..6b5cfd7 100644
--- a/src/views/goods/comment/detail/index.vue
+++ b/src/views/goods/comment/detail/index.vue
@@ -17,7 +17,7 @@
                 </p>
                 <p class="rate">
                     <label>评分：</label>
-                    <el-rate :value="detailData.commentScore" disabled />
+                    <el-rate v-model="detailData.commentScore" disabled />
                 </p>
                 <p>
                     <label>日期：</label>
@@ -25,52 +25,172 @@
                 </p>
             </div>
         </div>
-        <div class="comment">
-            <div>
+        <div class="main">
+            <div class="title">
                 <b>评价内容</b>
-                <el-switch inactive-text="是否显示" />
+                <el-switch
+                    v-if="detailData.id"
+                    inactive-text="是否显示"
+                    :value="!detailData.isShow"
+                    @click="handleShowHide(detailData)"
+                />
             </div>
-            <div>
-                <p>{{ detailData.commentContent }}</p>
-                <div>
+            <div class="comment">
+                <p class="comment--ctx">{{ detailData.commentContent }}</p>
+                <div class="comment--imgs" v-if="detailData.pictureUrl">
                     <el-image
-                        style="width: 100px; height: 100px"
-                        src="https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/120x120.png"
+                        v-for="(item, idx) in detailData.pictureUrl"
+                        class="img"
+                        alt="评论"
+                        :key="idx"
+                        :src="item"
                     />
                 </div>
+                <template v-if="detailData.followComment">
+                    <b class="comment--title">
+                        用户追评
+                        <small>{{ detailData.followComment.createTime }}</small>
+                    </b>
+                    <p class="comment--ctx">{{ detailData.followComment.commentContent }}</p>
+                </template>
             </div>
-            <ul>
-                <li v-for="item in detailData.answerCommentList" :key="item.id">
-                    <div>
+            <div class="title">
+                <b>全部回复（{{ detailData.answerCommentList?.length || 0 }}条）</b>
+            </div>
+            <ul class="reply" v-if="detailData.answerCommentList?.length">
+                <li class="reply--item" v-for="item in detailData.answerCommentList" :key="item.id">
+                    <div class="reply--title">
                         {{ item.userName }}
-                        <span v-if="item.parentUserName">回复 {{ item.parentUserName }}：</span>
+                        <span v-if="item.parentId !== detailData.id">回复 {{ item.parentUserName }}：</span>
                     </div>
-                    <p>{{ item.commentContent }}</p>
-                    <div>
-                        <em>{{ item.createTime }}</em>
+                    <p class="reply--ctx">{{ item.commentContent }}</p>
+                    <div class="reply--footer">
+                        <i>{{ item.createTime }}</i>
                         <span>
-                            <em>隐藏</em>
-                            <em @click="handleReply(item)">回复</em>
+                            <em @click="handleShowHide(item)" class="show-btn">
+                                <template v-if="item.isShow">
+                                    <el-icon name="Open" />
+                                    隐藏
+                                </template>
+                                <template v-else>
+                                    <el-icon name="TurnOff" />
+                                    显示
+                                </template>
+                            </em>
+                            <em @click="handleReply(item)" class="reply-btn">
+                                <el-icon name="ChatDotSquare" />
+                                回复
+                            </em>
                         </span>
                     </div>
                 </li>
             </ul>
+            <div class="reply__emtpy" v-else>暂无内容</div>
             <div class="footer">
-                <el-input type="textarea" maxlength="500" show-word-limit></el-input>
-                <el-button>确定</el-button>
+                <textarea
+                    class="footer--textarea"
+                    ref="$textarea"
+                    maxlength="500"
+                    v-model="state.commentContent"
+                    :placeholder="commentPlaceholder"
+                    @keydown="handleClearReplay"
+                ></textarea>
+                <el-button type="primary" class="footer--confirm" :disabled="sbumitDisabled" @click="handleSubmit">
+                    提交
+                </el-button>
             </div>
         </div>
     </div>
 </template>
 <script lang="jsx" setup>
+    import dayjs from 'dayjs';
+    import { ElMessage } from 'element-plus/es';
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
 
-    const detailData = computed(() => store.state.comment.detail);
-    store.dispatch('comment/getDetail', route.params.id);
+    let detailData = ref({});
+    const state = reactive({
+        commentContent: '',
+        // 回复的对象
+        reply: {},
+        isSubmit: false,
+    });
+    //不允许提交状态
+    const sbumitDisabled = computed(() => {
+        return !state.isSubmit && !state.commentContent;
+    });
+    const commentPlaceholder = computed(() =>
+        state.reply.userName ? `回复 ${state.reply.userName}` : '请输入回复内容'
+    );
+    const $textarea = ref(null);
 
-    const handleReply = () => {};
+    const getDetail = async () => {
+        const res = await store.dispatch('comment/getDetail', route.params.id);
+        if (res) {
+            detailData.value = _.cloneDeep(store.state.comment.detail);
+            if (detailData.value.pictureUrl) {
+                detailData.value.pictureUrl = detailData.value.pictureUrl.split(',');
+            }
+        }
+    };
+    getDetail();
+    /**
+     * 点击回复设置当前回复对象，以及输入框提示
+     */
+    const handleReply = (item) => {
+        state.reply = item;
+        $textarea.value.focus();
+    };
+    /**
+     * 清空回复人
+     * 输入框没内容时再按一次退格清空回复对象
+     */
+    const handleClearReplay = (target) => {
+        if (target.key === 'Backspace' && !state.commentContent) {
+            state.reply = {};
+        }
+    };
+    /**
+     * 评价/回复记录的显示隐藏
+     */
+    const handleShowHide = async (item) => {
+        let val = !item.isShow;
+        try {
+            await store.dispatch('comment/updateShow', {
+                idList: [item.id],
+                isShow: val,
+            });
+        } catch (e) {
+            val = !val;
+        }
+        item.isShow = val;
+    };
+    /**
+     * 提交回复
+     */
+    const handleSubmit = async () => {
+        state.isSubmit = true;
+        let data = {
+            commentContent: state.commentContent,
+            commentType: 3,
+            parentId: state.reply.id || detailData.value.id,
+            originId: detailData.value.id,
+            userId: store.state.auth.userInfo.userId,
+            userType: 1,
+        };
+        // 需要返回ID或对象 去登录用户的userName不对
+        const res = await store.dispatch('comment/add', data);
+        ElMessage.success('回复成功！');
+        state.isSubmit = false;
+        state.commentContent = '';
+        detailData.value.answerCommentList.push({
+            ...res,
+            isShow: true,
+            parentUserName: state.reply.userName,
+            userName: store.state.auth.userInfo.userName,
+        });
+    };
 </script>
 <style lang="less" scoped>
     .container {
@@ -89,7 +209,7 @@
             }
             span {
                 color: #999;
-                font-size: 14px;
+                // font-size: 14px;
             }
         }
         &--ctx {
@@ -122,16 +242,109 @@
             }
         }
     }
-    .comment {
+    .main {
         flex: 1;
-        position: relative;
+        // position: relative;
+        padding: 20px 30px;
+        height: 100%;
+        overflow: auto;
+        .title {
+            border-bottom: 1px solid #eee;
+            padding: 10px 0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .comment {
+            margin: 30px 0;
+            &--ctx {
+                margin: 10px 0;
+                // text-indent: 28px;
+            }
+            &--title {
+                font-weight: normal;
+                color: var(--el-color-danger);
+                display: block;
+                margin: 30px 0 20px;
+            }
+            &--imgs {
+                margin-top: 20px;
+                .img {
+                    border: 1px solid #eee;
+                    margin-right: 10px;
+                }
+            }
+        }
+        .reply {
+            border-bottom: 1px solid #eee;
+            padding-bottom: 130px;
+            color: #666;
+            &__emtpy {
+                color: #999;
+                text-align: center;
+                height: 100px;
+                line-height: 100px;
+            }
+            &--item {
+                border-bottom: 1px solid #eee;
+                margin-top: 20px;
+            }
+            &--title {
+                color: #999;
+                margin: 5px 0;
+            }
+            &--ctx {
+                line-height: 24px;
+                margin: 10px 0;
+            }
+            &--footer {
+                margin: 5px 0;
+                display: flex;
+                justify-content: space-between;
+                span {
+                    display: flex;
+                    align-items: center;
+                }
+                em,
+                i {
+                    color: #999;
+                    font-style: normal;
+                    font-size: 14px;
+                }
+                em {
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    margin-left: 20px;
+                }
+            }
+        }
         .footer {
             position: absolute;
             bottom: 0;
-            left: 0;
+            left: 240px;
             right: 0;
-            padding: 20px;
+            padding: 20px 30px;
             text-align: right;
+            background: #fff;
+            border-top: 1px solid #eee;
+            display: flex;
+            align-items: center;
+            &--textarea {
+                flex: 1;
+                padding: 10px;
+                height: 60px;
+                resize: none;
+                border: 1px solid #eee;
+                &:focus {
+                    border: 1px solid var(--el-color-primary);
+                    outline: none !important;
+                }
+            }
+            &--confirm {
+                height: 60px;
+                border-radius: 0;
+            }
         }
     }
 </style>