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