Merge branch 'feature/comment-0615-ch' into msb_test

src/views/goods/comment/detail/index.vue

@@ -2,26 +2,26 @@
     <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>
+                <el-avatar :size="50" :src="state.detailData.userAvatar" />
+                <p>{{ state.detailData.userName }}</p>
+                <span>{{ state.detailData.phone }}</span>
             </div>
             <div class="sidebar--ctx">
                 <p class="goods">
                     <label>商品：</label>
-                    <span>{{ detailData.productName }}</span>
+                    <span>{{ state.detailData.productName }}</span>
                 </p>
                 <p>
                     <label>规格：</label>
-                    <span>{{ detailData.skuName }}</span>
+                    <span>{{ state.detailData.skuName }}</span>
                 </p>
                 <p class="rate">
                     <label>评分：</label>
-                    <el-rate v-model="detailData.commentScore" disabled />
+                    <el-rate v-model="state.detailData.commentScore" disabled />
                 </p>
                 <p>
                     <label>日期：</label>
-                    <span>{{ detailData.createTime }}</span>
+                    <span>{{ state.detailData.createTime }}</span>
                 </p>
             </div>
         </div>
@@ -29,48 +29,48 @@
             <div class="title">
                 <b>评价内容</b>
                 <el-switch
-                    v-if="detailData.id"
+                    v-if="state.detailData.id"
                     inactive-text="是否显示"
-                    :value="detailData.isShow"
-                    @click="handleShowHide(detailData)"
+                    :value="state.detailData.isShow"
+                    @click="handleShowHide(state.detailData)"
                 />
             </div>
             <div class="comment">
-                <p class="comment--ctx">{{ detailData.commentContent }}</p>
-                <div class="comment--imgs" v-if="detailData.pictureUrl">
+                <p class="comment--ctx">{{ state.detailData.commentContent }}</p>
+                <div class="comment--imgs" v-if="state.detailData.pictureUrl">
                     <el-image
-                        v-for="(item, idx) in detailData.pictureUrl"
+                        v-for="(item, idx) in state.detailData.pictureUrl"
                         class="img"
                         alt="评论"
                         :key="idx"
                         :src="item"
                     />
                 </div>
-                <template v-if="detailData.followComment">
+                <template v-if="state.detailData.followComment">
                     <b class="comment--title">
                         用户追评
-                        <small>{{ detailData.followComment.createTime }}</small>
+                        <small>{{ state.detailData.followComment.createTime }}</small>
                     </b>
-                    <p class="comment--ctx">{{ detailData.followComment.commentContent }}</p>
+                    <p class="comment--ctx">{{ state.detailData.followComment.commentContent }}</p>
                 </template>
             </div>
-            <template v-if="detailData.merchantComment">
+            <template v-if="state.detailData.merchantComment">
                 <div class="title">
-                    <b>商家（{{ detailData.merchantComment.userName }}） 回复：</b>
-                    <span>{{ detailData.merchantComment.createTime }}</span>
+                    <b>商家（{{ state.detailData.merchantComment.userName }}） 回复：</b>
+                    <span>{{ state.detailData.merchantComment.createTime }}</span>
                 </div>
-                <p class="reply--ctx">{{ detailData.merchantComment.commentContent }}</p>
+                <p class="reply--ctx">{{ state.detailData.merchantComment.commentContent }}</p>
                 <br />
             </template>
 
             <div class="title">
-                <b>全部回复（{{ detailData.answerCommentList?.length || 0 }}条）</b>
+                <b>全部回复（{{ state.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">
+            <ul class="reply" v-if="state.detailData.answerCommentList?.length">
+                <li class="reply--item" v-for="item in state.detailData.answerCommentList" :key="item.id">
                     <div class="reply--title">
                         {{ item.userName }}
-                        <span v-if="item.parentId !== detailData.id">回复 {{ item.parentUserName }}：</span>
+                        <span v-if="item.parentId !== state.detailData.id">回复 {{ item.parentUserName }}：</span>
                     </div>
                     <p class="reply--ctx">{{ item.commentContent }}</p>
                     <div class="reply--footer">
@@ -95,7 +95,7 @@
                 </li>
             </ul>
             <div class="reply__emtpy" v-else>暂无内容</div>
-            <div class="footer" v-if="!detailData.merchantComment">
+            <div class="footer" v-if="!state.detailData.merchantComment">
                 <textarea
                     class="footer--textarea"
                     ref="$textarea"
@@ -118,12 +118,12 @@
     const router = useRouter();
     const route = useRoute();
 
-    let detailData = ref({});
     const state = reactive({
         commentContent: '',
         // 回复的对象
         reply: {},
         isSubmit: false,
+        detailData: ref({}),
     });
     //不允许提交状态
     const sbumitDisabled = computed(() => {
@@ -135,12 +135,12 @@
     const $textarea = ref(null);
 
     const getDetail = async () => {
-        detailData.value = {};
+        state.detailData = {};
         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(',');
+            state.detailData = _.cloneDeep(store.state.comment.detail);
+            if (state.detailData.pictureUrl) {
+                state.detailData.pictureUrl = state.detailData.pictureUrl.split(',');
             }
         }
     };
@@ -184,15 +184,15 @@
         state.isSubmit = true;
         let data = {
             commentContent: state.commentContent,
-            parentId: detailData.value.id,
-            originId: detailData.value.id,
+            parentId: state.detailData.id,
+            originId: state.detailData.id,
         };
         // 需要返回ID或对象 去登录用户的userName不对
         const res = await store.dispatch('comment/add', data);
         ElMessage.success('回复成功！');
         state.isSubmit = false;
         state.commentContent = '';
-        detailData.value.answerCommentList.push({
+        state.detailData.answerCommentList.push({
             ...res,
             isShow: true,
         });