From 3e7a16c6a4143dc5ee0fd8c8307d6c534d37df4b Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Tue, 14 Jun 2022 20:10:14 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E7=94=9F=E4=BA=A7?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.prod | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.prod b/.env.prod
index 4df8ab0..481e0db 100644
--- a/.env.prod
+++ b/.env.prod
@@ -1,4 +1,4 @@
 VITE_BASE_URL=https://you-gateway.mashibing.com
 VITE_SOCKET_URL=wss://you-gateway.mashibing.com/ws
 VITE_REQUEST_TIMEOUT=20000
-VITE_BROWSER_URL = https://k8s-shop-pc.mashibing.cn
+VITE_BROWSER_URL =https://you-gateway.mashibing.com

From 474b960fba57bec9aecc5a998953a8df4f2a5e2a Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Tue, 14 Jun 2022 20:46:08 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E7=94=9F=E4=BA=A7?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.prod | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.prod b/.env.prod
index 481e0db..c991404 100644
--- a/.env.prod
+++ b/.env.prod
@@ -1,4 +1,4 @@
 VITE_BASE_URL=https://you-gateway.mashibing.com
 VITE_SOCKET_URL=wss://you-gateway.mashibing.com/ws
 VITE_REQUEST_TIMEOUT=20000
-VITE_BROWSER_URL =https://you-gateway.mashibing.com
+VITE_BROWSER_URL = https://you.mashibing.cn/goods/detail/

From b7dae865df566c57a0e0733357f6b5dc07d4deb3 Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Tue, 14 Jun 2022 20:51:13 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E7=94=9F=E4=BA=A7?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.prod | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.prod b/.env.prod
index c991404..811cd1a 100644
--- a/.env.prod
+++ b/.env.prod
@@ -1,4 +1,4 @@
 VITE_BASE_URL=https://you-gateway.mashibing.com
 VITE_SOCKET_URL=wss://you-gateway.mashibing.com/ws
 VITE_REQUEST_TIMEOUT=20000
-VITE_BROWSER_URL = https://you.mashibing.cn/goods/detail/
+VITE_BROWSER_URL = https://you.mashibing.com

From 25c9818b286383fb12ee4342939521062e877c18 Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Fri, 17 Jun 2022 16:49:39 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=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                 |  28 +++
 src/store/modules/goods/comment.js       |  97 +++++++++
 src/views/goods/comment/detail/index.vue | 137 ++++++++++++
 src/views/goods/comment/list/index.vue   | 258 +++++++++++++++++++++++
 vite.config.js                           |   4 +-
 5 files changed, 522 insertions(+), 2 deletions(-)
 create mode 100644 src/api/goods/comment.js
 create mode 100644 src/store/modules/goods/comment.js
 create mode 100644 src/views/goods/comment/detail/index.vue
 create mode 100644 src/views/goods/comment/list/index.vue

diff --git a/src/api/goods/comment.js b/src/api/goods/comment.js
new file mode 100644
index 0000000..54364dd
--- /dev/null
+++ b/src/api/goods/comment.js
@@ -0,0 +1,28 @@
+/*
+ * @Author: ch
+ * @Date: 2022-06-15 17:55:43
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-17 10:43:30
+ * @Description: file content
+ */
+import request from '@/utils/request.js';
+//获取评论列表
+export const commentList = (params) =>
+    request({
+        url: '/mall/comment/admin/comment',
+        method: 'get',
+        params,
+    });
+// 获取评价详情
+export const commentDetail = ({ id }) =>
+    request({
+        url: `/mall/comment/admin/comment/getCommentDetail/${id}`,
+        method: 'get',
+    });
+// 更新评价显示状态
+export const updateCommentShow = (data) =>
+    request({
+        url: '/mall/comment/admin/comment',
+        method: 'put',
+        data,
+    });
diff --git a/src/store/modules/goods/comment.js b/src/store/modules/goods/comment.js
new file mode 100644
index 0000000..e24e1ae
--- /dev/null
+++ b/src/store/modules/goods/comment.js
@@ -0,0 +1,97 @@
+import * as api from '@/api/goods/comment.js';
+import { ElMessage } from 'element-plus/es';
+const state = {
+    list: [],
+    detail: {},
+    total: 0,
+    opts: {
+        isShow: [
+            {
+                value: true,
+                label: '显示',
+            },
+            {
+                value: false,
+                label: '隐藏',
+            },
+        ],
+        score: [
+            {
+                value: 1,
+                label: '1星',
+            },
+            {
+                value: 2,
+                label: '2星',
+            },
+            {
+                value: 3,
+                label: '3星',
+            },
+            {
+                value: 4,
+                label: '4星',
+            },
+            {
+                value: 5,
+                label: '5星',
+            },
+        ],
+    },
+};
+const getters = {};
+const mutations = {
+    setList: (state, data) => (state.list = data),
+    setTotal: (state, data) => (state.total = data),
+    setDetail: (state, data) => (state.detail = data),
+};
+const actions = {
+    async search({ state, commit, rootGetters }, params) {
+        let data = { ...params };
+        let pagingCode = params.pagingCode;
+        if (data.dateRange?.length) {
+            data.commentTimeBegin = data.dateRange[0];
+            data.commentTimeEnd = data.dateRange[1];
+        }
+        delete data.dateRange;
+        delete data.pagingCode;
+        const res = await api.commentList({
+            ...rootGetters['local/page'](pagingCode),
+            ...data,
+        });
+        if (!res) {
+            ElMessage.error('评价列表查询失败');
+        }
+        res;
+        commit(
+            'setList',
+            res?.records.map((i) => ({
+                ...i,
+                scoreName: state.opts.score.find((item) => item.value == i.commentScore)?.label,
+            })) || []
+        );
+        commit('setTotal', res?.total || 0);
+    },
+    async updateShow({ state }, params) {
+        const res = await api.updateCommentShow(params);
+        if (!res) {
+            ElMessage.error('状态更新失败！');
+            return Promise.reject('更新失败');
+        }
+        return Promise.resolve(res);
+    },
+    async getDetail({ state, commit }, id) {
+        const res = await api.commentDetail({ id });
+        if (!res) {
+            ElMessage.error('获取详情失败');
+        }
+        commit('setDetail', res);
+    },
+};
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};
diff --git a/src/views/goods/comment/detail/index.vue b/src/views/goods/comment/detail/index.vue
new file mode 100644
index 0000000..ca9f7a0
--- /dev/null
+++ b/src/views/goods/comment/detail/index.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="container">
+        <div class="sidebar">
+            <div class="sidebar--header">
+                <el-avatar :size="50" :src="detailData.userAvatar" />
+                <p>{{ detailData.userName }}</p>
+                <span>{{ detailData.phone }}</span>
+            </div>
+            <div class="sidebar--ctx">
+                <p class="goods">
+                    <label>商品：</label>
+                    <span>{{ detailData.productName }}</span>
+                </p>
+                <p>
+                    <label>规格：</label>
+                    <span>{{ detailData.skuName }}</span>
+                </p>
+                <p class="rate">
+                    <label>评分：</label>
+                    <el-rate :value="detailData.commentScore" disabled />
+                </p>
+                <p>
+                    <label>日期：</label>
+                    <span>{{ detailData.createTime }}</span>
+                </p>
+            </div>
+        </div>
+        <div class="comment">
+            <div>
+                <b>评价内容</b>
+                <el-switch inactive-text="是否显示" />
+            </div>
+            <div>
+                <p>{{ detailData.commentContent }}</p>
+                <div>
+                    <el-image
+                        style="width: 100px; height: 100px"
+                        src="https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/120x120.png"
+                    />
+                </div>
+            </div>
+            <ul>
+                <li v-for="item in detailData.answerCommentList" :key="item.id">
+                    <div>
+                        {{ item.userName }}
+                        <span v-if="item.parentUserName">回复 {{ item.parentUserName }}：</span>
+                    </div>
+                    <p>{{ item.commentContent }}</p>
+                    <div>
+                        <em>{{ item.createTime }}</em>
+                        <span>
+                            <em>隐藏</em>
+                            <em @click="handleReply(item)">回复</em>
+                        </span>
+                    </div>
+                </li>
+            </ul>
+            <div class="footer">
+                <el-input type="textarea" maxlength="500" show-word-limit></el-input>
+                <el-button>确定</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="jsx" setup>
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+
+    const detailData = computed(() => store.state.comment.detail);
+    store.dispatch('comment/getDetail', route.params.id);
+
+    const handleReply = () => {};
+</script>
+<style lang="less" scoped>
+    .container {
+        padding: 0 !important;
+        display: flex;
+    }
+    .sidebar {
+        width: 240px;
+        height: 100%;
+        border-right: 1px solid #ebeef5;
+        &--header {
+            text-align: center;
+            margin: 20px 0;
+            p {
+                margin: 10px 0;
+            }
+            span {
+                color: #999;
+                font-size: 14px;
+            }
+        }
+        &--ctx {
+            margin: 20px 30px;
+            p {
+                // margin: 10px 0;
+                min-height: 32px;
+                line-height: 32px;
+                font-size: 14px;
+                color: #999;
+                label {
+                    margin-right: 5px;
+                }
+                span {
+                    line-height: 24px;
+                }
+            }
+        }
+        .goods {
+            line-height: 24px;
+            span {
+                color: #333;
+            }
+        }
+        .rate {
+            display: flex;
+            align-items: center;
+            :deep(.el-rate__item) {
+                display: flex;
+            }
+        }
+    }
+    .comment {
+        flex: 1;
+        position: relative;
+        .footer {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 20px;
+            text-align: right;
+        }
+    }
+</style>
diff --git a/src/views/goods/comment/list/index.vue b/src/views/goods/comment/list/index.vue
new file mode 100644
index 0000000..ff40212
--- /dev/null
+++ b/src/views/goods/comment/list/index.vue
@@ -0,0 +1,258 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-15 17:29:32
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-16 21:24:49
+ * @Description: file content
+-->
+<template>
+    <table-list
+        v-loading="loading"
+        :operation="['search']"
+        :code="pagingCode"
+        :config="config"
+        :data="list"
+        :total="total"
+        @search="handleSearch"
+        :reset="handleReset"
+    >
+        <template #search>
+            <el-form inline>
+                <el-form-item label="商品名称" prop="name">
+                    <el-input v-model="state.condition.goodsName" />
+                </el-form-item>
+                <el-form-item label="用户昵称" prop="name">
+                    <el-input v-model="state.condition.nickName" />
+                </el-form-item>
+                <el-form-item label="手机号" prop="name">
+                    <el-input v-model="state.condition.phone" />
+                </el-form-item>
+                <el-form-item label="评分" prop="name">
+                    <el-select v-model="state.condition.scoreList" multiple collapse-tags collapse-tags-tooltip>
+                        <el-option
+                            v-for="(item, idx) in opts.score"
+                            :key="idx"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否显示" prop="name">
+                    <el-select v-model="state.condition.isShow">
+                        <el-option
+                            v-for="(item, idx) in opts.isShow"
+                            :key="idx"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="评价时间" prop="dateRange">
+                    <el-date-picker
+                        v-model="state.condition.dateRange"
+                        :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+                        type="datetimerange"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                    />
+                </el-form-item>
+            </el-form>
+        </template>
+
+        <template #operation="{ selection }">
+            <div class="batch-show-hide" v-if="selection.length">
+                <el-select v-model="allShowHideVal">
+                    <el-option
+                        v-for="(item, idx) in opts.isShow"
+                        :key="idx"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+                <el-button type="primary" @click="handleAllShowHide(selection)">确定</el-button>
+            </div>
+        </template>
+    </table-list>
+</template>
+<script setup lang="jsx">
+    import ElButton from '@/components/extra/ElButton.vue';
+    import ElSwitch from '@/components/extra/ElSwitch.vue';
+    const router = useRouter();
+    const store = useStore();
+    const loading = ref(false);
+    // 页面字典表数据
+    const opts = computed(() => store.state.comment.opts);
+    // 表格数据
+    const list = computed(() => _.cloneDeep(store.state.comment.list));
+    const total = computed(() => store.state.comment.total);
+    // 分页code需要使用此code到全局sotre取分页参数
+    const _pagingCode = 'CommentManagement';
+    // 表格查询参数
+    const _condition = {
+        productName: '',
+        nickName: '',
+        phone: '',
+        scoreList: [],
+        isShow: '',
+        dateRange: '',
+    };
+    const state = reactive({
+        condition: { ..._condition },
+    });
+    // 批量操作的值
+    const allShowHideVal = ref(true);
+
+    store.dispatch('comment/search', { pagingCode: _pagingCode });
+    onActivated(() => handleSearch);
+
+    /**
+     * 搜索
+     */
+    const handleSearch = async () => {
+        loading.value = true;
+        await store.dispatch('comment/search', { ...state.condition, pagingCode: _pagingCode });
+        loading.value = false;
+    };
+    /**
+     * 重置
+     */
+    const handleReset = () => {
+        state.condition = { ..._condition };
+    };
+    /**
+     * 单行操作显示隐藏
+     *
+     */
+    const handleShowHide = async (row) => {
+        loading.value = true;
+        try {
+            await store.dispatch('comment/updateShow', {
+                idList: [row.id],
+                isShow: row.isShow,
+            });
+        } catch (e) {
+            row.isShow = !row.isShow;
+        }
+        loading.value = false;
+    };
+    /**
+     * 批量操作显示隐藏
+     */
+    const handleAllShowHide = async (selection) => {
+        loading.value = true;
+        let val = allShowHideVal.value;
+        try {
+            await store.dispatch('comment/updateShow', {
+                idList: selection.map((i) => i.id),
+                isShow: val,
+            });
+        } catch (e) {
+            val = !val;
+        }
+        loading.value = false;
+        selection.forEach((item) => {
+            item.isShow = val;
+        });
+    };
+    const handleDetail = (id) => {
+        router.push({
+            name: 'CommentDetail',
+            params: {
+                id: id,
+            },
+        });
+    };
+
+    const config = reactive({
+        columns: [
+            {
+                type: 'selection',
+                fixed: 'left',
+                width: 60,
+            },
+            {
+                label: '商品名称',
+                width: 180,
+                align: 'left',
+                slots: {
+                    default: ({ row }) => <div class="row-ellipsis">{row.productName}</div>,
+                },
+            },
+            {
+                label: '评价内容',
+                align: 'left',
+                slots: {
+                    default: ({ row }) => (
+                        <div class="row-ellipsis ctx-link" onClick={() => handleDetail(row.id)}>
+                            {row.commentContent}
+                        </div>
+                    ),
+                },
+            },
+            {
+                label: '评分',
+                prop: 'scoreName',
+                width: 70,
+            },
+            {
+                label: '用户',
+                width: 120,
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <p class="row-ellipsis">{row.userName}</p>
+                            <p>{row.phone}</p>
+                        </div>
+                    ),
+                },
+            },
+            {
+                label: '评价时间',
+                prop: 'time',
+                width: 120,
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <p>{row.createTime.split(' ')[0]}</p>
+                            <p>{row.createTime.split(' ')[1]}</p>
+                        </div>
+                    ),
+                },
+            },
+            {
+                label: '显示',
+                width: 80,
+                slots: {
+                    default: ({ row }) => <ElSwitch v-model={row.isShow} onChange={() => handleShowHide(row)} />,
+                },
+            },
+            {
+                label: '操作',
+                width: 70,
+                slots: {
+                    default: ({ row }) => (
+                        <ElButton type="text" onClick={() => handleDetail(row.id)}>
+                            查看
+                        </ElButton>
+                    ),
+                },
+            },
+        ],
+    });
+</script>
+<style lang="less" scoped>
+    .batch-show-hide {
+        margin-left: 20px;
+    }
+    :deep(.row-ellipsis) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    :deep(.ctx-link) {
+        cursor: pointer;
+        &:hover {
+            color: var(--el-color-primary);
+        }
+    }
+</style>
diff --git a/vite.config.js b/vite.config.js
index 5291516..d7cc896 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,9 +24,9 @@ export default (configEnv) => {
                     // target: 'http://192.168.10.5:4500', // 高玉
                     // target: 'http://192.168.10.87:8090', // 罗战
                     // target: 'http://192.168.10.93:8090', // 周渺
-                    // target: 'http://192.168.10.124:8090', // 舒梦娇
+                    target: 'http://192.168.10.106:8090', // 舒梦娇
                     // target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
-                    target: 'https://you-gateway.mashibing.com', // 生产环境
+                    // target: 'https://you-gateway.mashibing.com', // 生产环境
                     changeOrigin: true,
                     rewrite: (path) => path.replace(/^\/api/, ''),
                 },

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 5/5] =?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>