fix: 修复预览相关BUg

feature/comment-0620-ch
ch 2 years ago
parent dd0b6345d5
commit 4e65eeb11a

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-23 10:40:04 * @Date: 2022-06-23 10:40:04
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-23 10:48:48 * @LastEditTime: 2022-06-28 20:18:38
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -17,19 +17,18 @@
<script> <script>
export default { export default {
props : { props : {
followComment : { commentDetail : {
type : Object, type : Object,
default : () => ({}) default : () => ({})
},
commentTime : {
type : String,
default : ''
} }
}, },
computed:{ computed:{
followComment(){
return this.commentDetail.followComment || {}
},
day(){ day(){
const followTime = (new Date(this.followComment.createTime)).getTime(); const followTime = (new Date(this.followComment.createTime)).getTime();
const commentTime = (new Date(this.commentTime)).getTime(); const commentTime = (new Date(this.commentDetail.createTime)).getTime();
const day = Math.floor((followTime - commentTime) / (24 * 60 * 60 * 1000)); const day = Math.floor((followTime - commentTime) / (24 * 60 * 60 * 1000));
return day > 0 ? `${day}天后` : `当天`; return day > 0 ? `${day}天后` : `当天`;
}, },
@ -38,6 +37,22 @@ export default {
let urls = this.followComment.pictureUrl || ''; let urls = this.followComment.pictureUrl || '';
return urls ? urls.split(',') : []; return urls ? urls.split(',') : [];
} }
},
methods:{
preview(idx){
this.$store.commit('SET_COMMENT_PREVIEW', {
...this.commentDetail,
commentContent : this.followComment.commentContent,
pictureUrl : this.followComment.pictureUrl
});
this.$Router.push({
path : '/goodsCommentPreview',
query : {
idx
}
});
}
} }
} }
</script> </script>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-21 15:50:01 * @Date: 2022-06-21 15:50:01
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 11:30:06 * @LastEditTime: 2022-06-28 19:18:04
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -13,7 +13,8 @@
</view> </view>
<view class="ctx">{{ commentDetail.commentContent }}</view> <view class="ctx">{{ commentDetail.commentContent }}</view>
<view class="img" v-if="imgs.length"> <view class="img" v-if="imgs.length">
<image class="img--item" v-for="(item, idx) in imgs" :src="item" :key="idx" @click="preview(idx)" mode="aspectFit"/> <image class="img--item" mode="aspectFit"
v-for="(item, idx) in imgs" :src="item" :key="idx" @click="preview(idx)"/>
</view> </view>
</view> </view>
</template> </template>
@ -26,7 +27,8 @@ export default {
}, },
imgPreview : { imgPreview : {
type: Boolean, type: Boolean,
default : true default : true,
require : true
} }
}, },
data:{ data:{
@ -38,6 +40,7 @@ export default {
return urls ? urls.split(',') : []; return urls ? urls.split(',') : [];
} }
}, },
methods:{ methods:{
preview(idx){ preview(idx){
if(!this.imgPreview){ if(!this.imgPreview){

@ -213,13 +213,6 @@
"navigationBarTitleText": "发表评价" "navigationBarTitleText": "发表评价"
} }
}, },
{
"path": "pages/order/comment/submitFollow",
"aliasPath" : "/commentSubmitFollow",
"style": {
"navigationBarTitleText": "发表追评"
}
},
{ {
"path": "pages/order/comment/success", "path": "pages/order/comment/success",
"aliasPath" : "/commentSuccess", "aliasPath" : "/commentSuccess",

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-21 18:19:13 * @Date: 2022-06-21 18:19:13
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 16:21:32 * @LastEditTime: 2022-06-28 20:07:56
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -10,7 +10,7 @@
<view class="box"> <view class="box">
<BsCommentUserInfo :userData="detail"/> <BsCommentUserInfo :userData="detail"/>
<BsCommentInfo :commentDetail="detail"/> <BsCommentInfo :commentDetail="detail"/>
<BsCommentFollowInfo v-if="detail.followComment" :followComment="detail.followComment" :commentTime="detail.createTime"/> <BsCommentFollowInfo v-if="detail.followComment" :commentDetail="detail.followComment"/>
<BsCommentGoodsInfo class="goods-info" :goods="detail" /> <BsCommentGoodsInfo class="goods-info" :goods="detail" />
<!-- <u-icon slot="btns" name="shopping-cart" size="30" color="#FF875B"></u-icon> --> <!-- <u-icon slot="btns" name="shopping-cart" size="30" color="#FF875B"></u-icon> -->
<!-- </BsCommentGoodsInfo> --> <!-- </BsCommentGoodsInfo> -->
@ -98,7 +98,13 @@ export default {
if(!HandleApiError(error,'getDetail')){ if(!HandleApiError(error,'getDetail')){
this.detail = result; this.detail = result;
this.isLike = result.isLike || false; this.isLike = result.isLike || false;
this.detail.usefulCount = this.detail.usefulCount || 0 this.detail.usefulCount = this.detail.usefulCount || 0;
if(result.merchantComment){
this.detail.answerCommentList.unshift({
...result.merchantComment,
parentId : result.id
})
}
} }
}, },
async handleSubmit(){ async handleSubmit(){

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-21 16:51:03 * @Date: 2022-06-21 16:51:03
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 15:49:47 * @LastEditTime: 2022-06-28 20:09:06
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -20,10 +20,11 @@
</view> </view>
</view> </view>
<view class="comment" v-for="item in list" :key="item.id" > <view class="comment" v-for="item in list" :key="item.id" >
<view @click="$Router.push(`/goodsCommentDetail?id=${item.id}`)"> <view>
<BsCommentUserInfo :userData="item"/> <BsCommentUserInfo :userData="item"/>
<BsCommentInfo :commentDetail="item"/> <BsCommentInfo :commentDetail="item"/>
<BsCommentFollowInfo v-if="item.followComment" :commentTime="item.createTime" :followComment="item.followComment"/> <BsCommentFollowInfo v-if="item.followComment" :commentDetail="item"/>
<BsCommentMerchant v-if="item.merchantComment" :merchantComment="item.merchantComment"/>
</view> </view>
<BsCommentThumbup :commentDetail="item"/> <BsCommentThumbup :commentDetail="item"/>
</view> </view>
@ -42,8 +43,9 @@ import {ApiGetCommentList, ApiGetCommentCount, ApiGetCommentTabCount} from '@/co
import {HandleApiError} from '@/common/utils' import {HandleApiError} from '@/common/utils'
import BsCommentFollowInfo from '../../../components/BsCommentFollowInfo.vue'; import BsCommentFollowInfo from '../../../components/BsCommentFollowInfo.vue';
import BsCommentThumbup from '../../../components/BsCommentThumbup.vue'; import BsCommentThumbup from '../../../components/BsCommentThumbup.vue';
import BsCommentMerchant from '../../../components/BsCommentMerchant.vue';
export default { export default {
components: { BsCommentInfo, BsCommentUserInfo, BsCommentFollowInfo, BsCommentThumbup }, components: { BsCommentInfo, BsCommentUserInfo, BsCommentFollowInfo, BsCommentThumbup, BsCommentMerchant },
data (){ data (){
return { return {
list : [], list : [],

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-22 15:15:22 * @Date: 2022-06-22 15:15:22
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-23 18:29:57 * @LastEditTime: 2022-06-28 20:32:35
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -30,11 +30,11 @@
<view class="preview--ctx">{{ data.commentContent }}</view> <view class="preview--ctx">{{ data.commentContent }}</view>
</view> </view>
<view class="thumb"> <view class="thumb">
<view class="thumb--item"> <view class="thumb--item" @click="handleUseful">
<u-icon color="#fff" name="thumb-up"></u-icon> <u-icon color="#fff" :name="isLike ? 'thumb-up-fill' : 'thumb-up'"></u-icon>
<text>2</text> <text>{{data.usefulCount || 0}}</text>
</view> </view>
<view class="thumb--item" @click="$Router.push(`/goodsCommentDetail?id=${data.id}`)"> <view class="thumb--item" @click="$Router.replace(`/goodsCommentDetail?id=${data.id}`)">
<u-icon color="#fff" name="chat"></u-icon> <u-icon color="#fff" name="chat"></u-icon>
<text>{{answerCount}}</text> <text>{{answerCount}}</text>
</view> </view>
@ -45,13 +45,16 @@
<script> <script>
import BsCommentUserInfo from '@/components/BsCommentUserInfo.vue'; import BsCommentUserInfo from '@/components/BsCommentUserInfo.vue';
import BsCommentThumbup from '../../../components/BsCommentThumbup.vue'; import BsCommentThumbup from '../../../components/BsCommentThumbup.vue';
import {ApiPutCommentUseful} from '@/common/api/comment'
import { Debounce} from '@/common/utils'
export default { export default {
components: { BsCommentUserInfo,BsCommentThumbup }, components: { BsCommentUserInfo,BsCommentThumbup },
data (){ data (){
return { return {
data : this.$store.state.comment_preview, data : this.$store.state.comment_preview,
current : Number(this.$Route.query.idx) current : Number(this.$Route.query.idx),
isLike : false
} }
}, },
computed : { computed : {
@ -67,11 +70,35 @@ export default {
onShow(){ onShow(){
if(!this.data.id){ if(!this.data.id){
this.$Router.back(); this.$Router.back();
} };
this.isLike = this.data.isLike
}, },
methods:{ methods:{
handleChange(idx){ handleChange(idx){
this.current = idx.current this.current = idx.current
},
handleUseful(){
this.isLike = !this.isLike
if(this.isLike){
this.data.usefulCount++;
}else{
this.data.usefulCount--;
}
if(!this.debounce){
this.debounce = Debounce(this.updateUseFul, 500);
}
this.debounce();
},
async updateUseFul(){
if(this.isLike === this.data.isLike){
return false
}
const {error, result} = await ApiPutCommentUseful({
commentId : this.data.id,
isLike : this.isLike
});
} }
} }
} }

@ -2,13 +2,13 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-20 16:36:41 * @Date: 2022-06-20 16:36:41
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 15:25:46 * @LastEditTime: 2022-06-28 19:26:07
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="follow"> <view class="follow">
<BsCommentFollowInfo v-if="commentDetail.followComment" <BsCommentFollowInfo v-if="commentDetail.followComment"
:followComment="commentDetail.followComment" :commentTime="commentDetail.createTime"/> :commentDetail="commentDetail" />
<template v-else> <template v-else>
<UiButton type="primaryLine" @click="showInput = true" v-if="!showInput"></UiButton> <UiButton type="primaryLine" @click="showInput = true" v-if="!showInput"></UiButton>
<template v-else> <template v-else>

@ -1,156 +0,0 @@
<!--
* @Author: ch
* @Date: 2022-06-21 18:19:13
* @LastEditors: ch
* @LastEditTime: 2022-06-23 16:14:08
* @Description: file content
-->
<template>
<view>
<view class="goods-info">
<BsCommentGoodsInfo :goods="detail"/>
</view>
<view class="box">
<BsCommentUserInfo :userData="detail"/>
<BsCommentInfo :commentDetail="detail"/>
<BsCommentSubmit :commentDetail="detail" :type="COMMENT.TYPE.FOLLOW_COMMENT" @submit="handleSubmit"/>
</view>
</view>
</template>
<script>
import BsCommentGoodsInfo from '../../../components/BsCommentGoodsInfo.vue'
import BsCommentInfo from '../../../components/BsCommentInfo.vue'
import BsCommentUserInfo from '../../../components/BsCommentUserInfo.vue'
import UiButton from '../../../components/UiButton.vue'
import {ApiGetCommentDetail, ApiPostComment} from '@/common/api/comment'
import {HandleApiError} from '@/common/utils'
import COMMENT from '@/common/dicts/comment'
import BsCommentSubmit from '../../../components/BsCommentSubmit.vue'
export default {
components: { BsCommentGoodsInfo, BsCommentInfo, UiButton, BsCommentUserInfo, BsCommentSubmit },
data(){
return {
COMMENT,
isShowAnswer : false,
answer : null,
commentId : this.$Route.query.id,
detail : {},
commentContent : ''
}
},
computed:{
placeholder(){
return this.answer ? `回复:${this.answer.userName}` : '说点什么吧?'
},
answerCount(){
return this.detail.answerCommentList ? this.detail.answerCommentList.length : 0
}
},
mounted(){
this.getDetail();
},
methods:{
async getDetail(){
const {error, result} = await ApiGetCommentDetail({
commentId : this.commentId
});
if(!HandleApiError(error,'getDetail')){
this.detail = result;
}
},
async handleSubmit(){
this.$Router.replace('/commentSuccess');
},
}
}
</script>
<style lang="scss">
page{
background: $color-grey1;
padding-bottom: 140rpx;
}
</style>
<style lang="scss" scoped>
.goods-info{
padding: 40rpx 40rpx 0;
}
.box{
background: $color-grey0;
padding: 40rpx;
margin-top: 20rpx;
}
.reply-title{
height: 70rpx;
line-height: 70rpx;
margin-bottom:1rpx;
margin-top: 20rpx;
background: #fff;
padding: 0 40rpx;
}
.reply{
background: #fff;
padding: 0 40rpx;
overflow: hidden;
&--item{
border-bottom: 1px solid $color-grey1;
padding-top: 40rpx;
}
&--title{
display: flex;
justify-content: space-between;
text{
color: #999;
}
}
&--ctx{
margin: 26rpx 0;
line-height: 36rpx;
}
}
.footer{
height: 124rpx;
position: fixed;
bottom: var(--window-bottom);
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: center;
background: #fff;
border-top: 1px solid #f8f8f8;
}
.reply-comment--bg{
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.reply-comment{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background: #fff;
height: 124rpx;
padding: 24rpx 40rpx;
border-top: 1px solid #f8f8f8;
&--box{
display: flex;
background: #F5F5F5;
border-radius: 38rpx;
}
&--input{
flex: 1;
padding:0 20rpx 0 40rpx;
height: 76rpx;
line-height: 76rpx;
}
}
</style>
Loading…
Cancel
Save