Skip to content

S
singleStore
Commit fe3ee7f9 authored by June's avatar June
Browse files
Options

feat:商品评价

parent 3f3dae48
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 137 deletions
components/comments/media-view.vue
View file @ fe3ee7f9
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
> >
<video <video
v-if="e.type === 'video'" v-if="e.type === 'video'"
id="commentVideo"
class="item r-8" class="item r-8"
:key="i" :key="i"
:style="itemSize" :style="itemSize"
...@@ -62,10 +63,18 @@ ...@@ -62,10 +63,18 @@
}, },
media: { media: {
type: Array, type: Array,
default: () => [] required: true
},
controls: {
type: Boolean,
default: false
} }
}, },
mounted() {
this.videoContext = uni.createVideoContext('commentVideo', this) || null
},
computed: { computed: {
itemSize() { itemSize() {
const size = this.size const size = this.size
...@@ -75,7 +84,7 @@ ...@@ -75,7 +84,7 @@
methods: { methods: {
handlePreview(idx) { handlePreview(idx) {
console.log(idx) this.videoContext && this.videoContext.pause()
uni.previewMedia({ uni.previewMedia({
sources: this.media, sources: this.media,
current: idx, current: idx,
...@@ -93,6 +102,7 @@ ...@@ -93,6 +102,7 @@
font-size: 28rpx; font-size: 28rpx;
.item { .item {
margin-right: 30rpx; margin-right: 30rpx;
background-color: $mainBg;
} }
} }
</style> </style>
pages/category/index.vue
View file @ fe3ee7f9
...@@ -373,7 +373,6 @@ export default { ...@@ -373,7 +373,6 @@ export default {
.cart-icon { .cart-icon {
width: 34rpx; width: 34rpx;
height: 32rpx; height: 32rpx;
padding: 0 20rpx;
} }
} }
} }
......
pages/goods/comment-list.vue
View file @ fe3ee7f9
...@@ -22,15 +22,24 @@ ...@@ -22,15 +22,24 @@
<media-view :media="item.media" /> <media-view :media="item.media" />
<view <template v-if="item.reply.length > 0">
v-if="item.reply.length > 0" <view
class="reply mt-2" v-for="(replyItem, idx) in item.reply"
v-for="(replyItem, index) in item.reply" :key="idx"
:key="index" >
> <view
<view class="mb-2 font-32 font-bold">商家回复：</view> class="reply mt-2"
<view>{{replyItem.content}}</view> >
</view> <view class="mb-2 font-32 font-bold">商家回复：</view>
<view>{{replyItem.content}}</view>
</view>
<view class="mt-2">
<media-view :media="replyItem.media" />
</view>
</view>
</template>
<view class="descColor font-24 mt-2">{{item.goods_attr}}</view> <view class="descColor font-24 mt-2">{{item.goods_attr}}</view>
</navigator> </navigator>
...@@ -81,11 +90,12 @@ ...@@ -81,11 +90,12 @@
const { detail, skuData } = data const { detail, skuData } = data
this.detail = detail this.detail = detail
this.skuData = skuData this.skuData = skuData
console.log()
this.getData()
}) })
this.getData()
}, },
beforeCreate() { beforeDestroy() {
this.eventChannel.off('acceptDataFromOpenerPage') this.eventChannel.off('acceptDataFromOpenerPage')
}, },
......
pages/goods/detail.vue
View file @ fe3ee7f9
...@@ -105,24 +105,35 @@ ...@@ -105,24 +105,35 @@
</view> </view>
<!-- 评论 --> <!-- 评论 -->
<view class="w-100 comment-wrap mb-2" v-if="firstComment"> <view class="w-100 comment-wrap mb-2">
<view class="mb-4 flex j-between a-center"> <view class="mb-4 flex j-between a-center">
<view class="font-bold">商品评论</view> <view class="font-bold">商品评论</view>
<view class="font-24 primaryColor flex j-end a-center" @click="handleComment"> <view
v-if="firstComment"
class="font-24 primaryColor flex j-end a-center"
@click="handleComment"
>
<text>查看更多</text> <text>查看更多</text>
<i class="ml-2"></i> <i class="ml-1"></i>
</view> </view>
</view> </view>
<view class="mb-2"> <navigator
<user :user="firstComment.user" /> hover-class="none"
</view> :url="'/subPages/comments/detail?id=' + firstComment.id"
<view class="mb-2"> v-if="firstComment"
<words :content="firstComment.content" /> >
</view> <view class="mb-2">
<media-view :media="firstComment.media" /> <user :user="firstComment.user" />
<view class="font-24 descColor overtext-1 mt-2">{{firstComment.goods_attr}}</view> </view>
<view class="mb-2">
<words :content="firstComment.content" />
</view>
<media-view :media="firstComment.media" />
<view class="font-24 descColor overtext-1 mt-2">{{firstComment.goods_attr}}</view>
</navigator>
<view v-else class="text-center font-28 descColor">暂无用户评论...</view>
</view> </view>
<!-- 详情 --> <!-- 详情 -->
<view class="detail-wrap" v-if="detail.goods_desc && detail.goods_desc !== '<p><br></p>'"> <view class="detail-wrap" v-if="detail.goods_desc && detail.goods_desc !== '<p><br></p>'">
<view class="font-28 font-bold text-center py-3" style="background-color: #fff;">商品详情</view> <view class="font-28 font-bold text-center py-3" style="background-color: #fff;">商品详情</view>
......
pages/home/index.vue
View file @ fe3ee7f9
...@@ -117,7 +117,9 @@ ...@@ -117,7 +117,9 @@
@purchase="purchase" @purchase="purchase"
/> />
</template> </template>
</block>
<block v-else>
<!-- 综合商品 --> <!-- 综合商品 -->
<template v-if="searchList.length > 0"> <template v-if="searchList.length > 0">
<view class="w-100"> <view class="w-100">
...@@ -126,43 +128,45 @@ ...@@ -126,43 +128,45 @@
v-for="(item, index) in searchList" v-for="(item, index) in searchList"
:key="index" :key="index"
> >
<navigator <template
class="list-item mb-3 ml-3" v-for="(search, searchidx) in item"
hover-class="none"
v-for="good in item"
:key="good.goods_id"
:url="'/pages/goods/detail?goods_id=' + good.goods_id"
> >
<image <navigator
lazy-load class="list-item mb-3 ml-3"
class="goods_cover w-100" hover-class="none"
:src="baseUrl + '/' + good.goods_thumb" v-for="good in item"
mode="aspectFit" :key="good.goods_id"
/> :url="'/pages/goods/detail?goods_id=' + good.goods_id"
<view class="goods-info flex flex-column j-between"> >
<view class="title font-28 my-1">{{good.goods_name}}</view> <image
<view class="flex j-between a-center mt-1 mb-2"> lazy-load
<price class="goods_cover w-100"
:is_inquiry="good.is_inquiry" :src="baseUrl + '/' + good.goods_thumb"
:price="good.shop_price" mode="aspectFit"
/> />
<image <view class="goods-info flex flex-column j-between">
class="cart-btn" <view class="title font-28 my-1">{{good.goods_name}}</view>
@click.stop="handlePop(good)" <view class="flex j-between a-center mt-1 mb-2">
src="/static/images/common/icon-cart.png" <price
mode="aspectFit" :is_inquiry="good.is_inquiry"
/> :price="good.shop_price"
/>
<image
class="cart-btn"
@click.stop="handlePop(good)"
src="/static/images/common/icon-cart.png"
mode="aspectFit"
/>
</view>
</view> </view>
</view> </navigator>
</navigator> </template>
</block> </block>
</view> </view>
</view> </view>
</template> </template>
</block>
<block v-else>
<empty-view <empty-view
v-else
iconSrc="/static/images/common/noGoods.png" iconSrc="/static/images/common/noGoods.png"
text="店铺尚未上架商品" text="店铺尚未上架商品"
/> />
...@@ -241,15 +245,15 @@ export default { ...@@ -241,15 +245,15 @@ export default {
} }
}, },
mounted() { // mounted() {
const storeInfo = this.storeInfo // const storeInfo = this.storeInfo
if(storeInfo.shop_name) { // if(storeInfo.shop_name) {
// 获取店铺信息 // // 获取店铺信息
// uni.setNavigationBarTitle({ // // uni.setNavigationBarTitle({
// title: storeInfo.shop_name // // title: storeInfo.shop_name
// }) // // })
} // }
}, // },
// 下拉刷新 // 下拉刷新
onPullDownRefresh() { onPullDownRefresh() {
...@@ -428,7 +432,7 @@ export default { ...@@ -428,7 +432,7 @@ export default {
.goods-info { .goods-info {
@include borderBox(0, 20rpx); @include borderBox(0, 20rpx);
height: 180rpx; height: 180rpx;
background-color: red;
.title { .title {
@include text-ellipsis(2) @include text-ellipsis(2)
} }
......
styles/layout.css
View file @ fe3ee7f9
...@@ -40,43 +40,36 @@ image { ...@@ -40,43 +40,36 @@ image {
.flex-5{ flex: 5; } .flex-5{ flex: 5; }
/* -- 内外边距 -- */ /* -- 内外边距 -- */
.m-0 { margin: 0; }
.m-1 { margin: 10rpx; } .m-1 { margin: 10rpx; }
.m-2 { margin: 20rpx; } .m-2 { margin: 20rpx; }
.m-3 { margin: 30rpx; } .m-3 { margin: 30rpx; }
.m-4 { margin: 40rpx; } .m-4 { margin: 40rpx; }
.m-5 { margin: 50rpx; } .m-5 { margin: 50rpx; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10rpx; } .mt-1 { margin-top: 10rpx; }
.mt-2 { margin-top: 20rpx; } .mt-2 { margin-top: 20rpx; }
.mt-3 { margin-top: 30rpx; } .mt-3 { margin-top: 30rpx; }
.mt-4 { margin-top: 40rpx; } .mt-4 { margin-top: 40rpx; }
.mt-5 { margin-top: 50rpx; } .mt-5 { margin-top: 50rpx; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10rpx; } .mb-1 { margin-bottom: 10rpx; }
.mb-2 { margin-bottom: 20rpx; } .mb-2 { margin-bottom: 20rpx; }
.mb-3 { margin-bottom: 30rpx; } .mb-3 { margin-bottom: 30rpx; }
.mb-4 { margin-bottom: 40rpx; } .mb-4 { margin-bottom: 40rpx; }
.mb-5 { margin-bottom: 50rpx; } .mb-5 { margin-bottom: 50rpx; }
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 10rpx; } .ml-1 { margin-left: 10rpx; }
.ml-2 { margin-left: 20rpx; } .ml-2 { margin-left: 20rpx; }
.ml-3 { margin-left: 30rpx; } .ml-3 { margin-left: 30rpx; }
.ml-4 { margin-left: 40rpx; } .ml-4 { margin-left: 40rpx; }
.ml-5 { margin-left: 50rpx; } .ml-5 { margin-left: 50rpx; }
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 10rpx; } .mr-1 { margin-right: 10rpx; }
.mr-2 { margin-right: 20rpx; } .mr-2 { margin-right: 20rpx; }
.mr-3 { margin-right: 30rpx; } .mr-3 { margin-right: 30rpx; }
.mr-4 { margin-right: 40rpx; } .mr-4 { margin-right: 40rpx; }
.mr-5 { margin-right: 50rpx; } .mr-5 { margin-right: 50rpx; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; } .my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; } .my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; } .my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; } .my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; } .my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 10rpx; margin-right: 10rpx; } .mx-1 { margin-left: 10rpx; margin-right: 10rpx; }
.mx-2 { margin-left: 20rpx; margin-right: 20rpx; } .mx-2 { margin-left: 20rpx; margin-right: 20rpx; }
.mx-3 { margin-left: 30rpx; margin-right: 30rpx; } .mx-3 { margin-left: 30rpx; margin-right: 30rpx; }
......
subPages/comments/center.vue
View file @ fe3ee7f9
...@@ -28,18 +28,19 @@ ...@@ -28,18 +28,19 @@
<view <view
v-for="(temp, tidx) in unCommentList" v-for="(temp, tidx) in unCommentList"
:key="tidx" :key="tidx"
@click="handleComment"
> >
<view <view
class="list-item w-100 p-2 r-8" class="list-item w-100 p-2 r-8"
v-for="(unComment, i) in temp" v-for="(unComment, i) in temp"
:key="i" :key="i"
> >
<view class="font-32 font-bold mb-2">{{unComment.shop_name}}</view> <!-- 专属无多店铺 -->
<!-- <view class="font-32 font-bold mb-2">{{unComment.shop_name}}</view> -->
<view <view
class="w-100 flex j-start a-center" class="goodsItem w-100 flex j-start a-center"
v-for="(goods, goods_idx) in unComment.goods" v-for="(goods, goods_idx) in unComment.goods"
:key="goods_idx" :key="goods_idx"
@click="nav('goods', goods.goods_id)"
> >
<image <image
class="cover mr-2 r-8" class="cover mr-2 r-8"
...@@ -48,12 +49,12 @@ ...@@ -48,12 +49,12 @@
/> />
<view class="info flex-1 flex j-between a-start flex-column"> <view class="info flex-1 flex j-between a-start flex-column">
<view class="title font-bold">{{goods.goods_name}}</view> <view class="title font-bold">{{goods.goods_name}}</view>
<rate <!-- <rate
readonly readonly
size="0" size="0"
margin="2" margin="2"
value="0" value="0"
/> /> -->
<view class="w-100 flex j-between a-center"> <view class="w-100 flex j-between a-center">
<view class="descColor font-24">{{goods.goods_attr}}</view> <view class="descColor font-24">{{goods.goods_attr}}</view>
<view <view
...@@ -61,6 +62,7 @@ ...@@ -61,6 +62,7 @@
:data-listidx="tidx" :data-listidx="tidx"
:data-commentdix="i" :data-commentdix="i"
:data-goodsidx="goods_idx" :data-goodsidx="goods_idx"
@click.stop="handleComment"
>评价</view> >评价</view>
</view> </view>
</view> </view>
...@@ -83,19 +85,19 @@ ...@@ -83,19 +85,19 @@
<view <view
v-for="(temp, tidx) in hadCommentList" v-for="(temp, tidx) in hadCommentList"
:key="tidx" :key="tidx"
@click="handleAddComment"
> >
<view <view
class="list-item w-100 p-2 r-8" class="list-item w-100 p-2 r-8"
v-for="(hadComment, i) in temp" v-for="(hadComment, i) in temp"
:key="i" :key="i"
> >
<view class="font-32 font-bold mb-2">{{hadComment.shop_name}}</view> <!-- <view class="font-32 font-bold mb-2">{{hadComment.shop_name}}</view> -->
<view <view
v-for="(goods, goods_idx) in hadComment.goods" v-for="(goods, goods_idx) in hadComment.goods"
:key="goods_idx" :key="goods_idx"
@click.stop="nav('goods', goods.goods_id)"
> >
<view class="w-100 flex j-start a-center"> <view class="goodsItem w-100 flex j-start a-center">
<image <image
class="cover mr-2 r-8" class="cover mr-2 r-8"
:src="baseUrl + '/' + goods.goods_thumb" :src="baseUrl + '/' + goods.goods_thumb"
...@@ -107,7 +109,7 @@ ...@@ -107,7 +109,7 @@
readonly readonly
size="12" size="12"
margin="2" margin="2"
:value="goods.grade" :value="goods.com_grade"
/> />
<view class="descColor font-24">{{goods.goods_attr}}</view> <view class="descColor font-24">{{goods.goods_attr}}</view>
</view> </view>
...@@ -118,11 +120,12 @@ ...@@ -118,11 +120,12 @@
<view class="mt-2" <view class="mt-2"
v-for="(replyItem, r_idx) in goods.goods_comment" v-for="(replyItem, r_idx) in goods.goods_comment"
:key="r_idx" :key="r_idx"
@click.stop="nav('comment', replyItem.id)"
> >
<view class="mb-2"> <view class="mb-2">
<words :content="replyItem.content" /> <words :content="replyItem.content" />
</view> </view>
<view class="mb-2"> <view class="mb-2" v-if="replyItem.media && replyItem.media.length > 0">
<media-view :media="replyItem.media" /> <media-view :media="replyItem.media" />
</view> </view>
<view class="font-24 descColor mb-2" v-if="goods.comment_type === '2'"> <view class="font-24 descColor mb-2" v-if="goods.comment_type === '2'">
...@@ -135,7 +138,7 @@ ...@@ -135,7 +138,7 @@
<view class="reply-content"> <view class="reply-content">
<words :content="'商家回复：' + b_reply.content" /> <words :content="'商家回复：' + b_reply.content" />
</view> </view>
<view class="mt-2" v-if="b_reply.img_url.length > 0"> <view class="mt-2" v-if="b_reply.media.length > 0">
<media-view :media="b_reply.media" /> <media-view :media="b_reply.media" />
</view> </view>
</view> </view>
...@@ -147,6 +150,7 @@ ...@@ -147,6 +150,7 @@
:data-listidx="tidx" :data-listidx="tidx"
:data-commentdix="i" :data-commentdix="i"
:data-goodsidx="goods_idx" :data-goodsidx="goods_idx"
@click.stop="handleAddComment"
>追评</view> >追评</view>
</view> </view>
<view class="font-24 descColor" v-if="goods.comment_type === '3'">感谢您的用心评价！</view> <view class="font-24 descColor" v-if="goods.comment_type === '3'">感谢您的用心评价！</view>
...@@ -167,9 +171,10 @@ ...@@ -167,9 +171,10 @@
import rate from '@/components/rate/index.vue' import rate from '@/components/rate/index.vue'
import mediaView from '@/components/comments/media-view.vue' import mediaView from '@/components/comments/media-view.vue'
import words from '@/components/comments/words.vue' import words from '@/components/comments/words.vue'
import { unCommentList, hadCommentList } from '@/apis/comment.js' import { unCommentList, hadCommentList, uncommentNum } from '@/apis/comment.js'
import LoadMore from '@/utils/load-more.js' import LoadMore from '@/utils/load-more.js'
import { resetCommentData, debounce } from '@/utils/common.js' import { resetCommentData, debounce } from '@/utils/common.js'
// 1可追评 2已评论已追评 3已超时 // 1可追评 2已评论已追评 3已超时
export default { export default {
data() { data() {
...@@ -188,31 +193,37 @@ ...@@ -188,31 +193,37 @@
words words
}, },
onLoad(ops) {
const { unCommentCounts } = ops
this.unCommentCounts = unCommentCounts || 0
},
created() { created() {
this.unCommendLoad = new LoadMore() this.unCommendLoad = new LoadMore()
this.hadCommendLoad = new LoadMore() this.hadCommendLoad = new LoadMore()
}, this.pageShowRefresh()
onShow() {
const cur_tab = this.cur_tab
if(cur_tab === 0) {
this.unCommendLoad.resetParams()
this.unCommentList = []
} else if(cur_tab === 1){
this.hadCommendLoad.resetParams()
this.hadCommentList = []
}
this.getList()
}, },
methods: { methods: {
pageShowRefresh() {
const cur_tab = this.cur_tab
if(cur_tab === 0) {
this.unCommendLoad.resetParams()
this.unCommentList = []
} else if(cur_tab === 1){
this.hadCommendLoad.resetParams()
this.hadCommentList = []
}
this.getList()
this.getCommentNum()
},
async getList() { async getList() {
try{ try{
const { cur_tab } = this const { cur_tab } = this
if(cur_tab === 0) { if(cur_tab === 0) {
const { status, data } = await this.unCommendLoad.getList({}, unCommentList) const { status, data } = await this.unCommendLoad.getList({}, unCommentList)
if(status && data && data.length > 0) { if(status && data && data.length > 0) {
this.unCommentCounts = this.unCommendLoad.total
this.$set(this.unCommentList, this.unCommentList.length, data) this.$set(this.unCommentList, this.unCommentList.length, data)
} }
} else { } else {
...@@ -261,6 +272,24 @@ ...@@ -261,6 +272,24 @@
this.hadCommentList = [] this.hadCommentList = []
} }
this.getList() this.getList()
this.getCommentNum()
},
nav(type, id) {
switch(type) {
case 'goods':
uni.navigateTo({
url: `/pages/goods/detail?goods_id=${id}`
})
break;
case 'comment':
uni.navigateTo({
url: `/subPages/comments/detail?id=${id}`
})
break;
default:
break;
}
}, },
// 评价 // 评价
...@@ -285,7 +314,16 @@ ...@@ -285,7 +314,16 @@
res.eventChannel.emit('comment_event', { item, type: 'add' }) res.eventChannel.emit('comment_event', { item, type: 'add' })
} }
}) })
}, 1000) }, 1000),
// 获取待评论数量
getCommentNum() {
uncommentNum()
.then(res => {
this.unCommentCounts = res.data.count
})
.catch(err => console.log(err))
}
} }
} }
</script> </script>
...@@ -337,10 +375,17 @@ ...@@ -337,10 +375,17 @@
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.goodsItem {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
}
.cover { .cover {
flex: 0 0 180rpx; flex: 0 0 180rpx;
width: 180rpx; width: 180rpx;
height: 180rpx; height: 180rpx;
background-color: $mainBg;
} }
.info { .info {
height: 180rpx; height: 180rpx;
......
subPages/comments/comment.vue
View file @ fe3ee7f9
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<view class="font-32 font-bold mr-2">商品评分</view> <view class="font-32 font-bold mr-2">商品评分</view>
<rate <rate
:readonly="type === 'add'" :readonly="type === 'add'"
:value.sync="form.com_grade || 1" :value.sync="form.com_grade"
size="17" size="17"
margin="15" margin="15"
/> />
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
<view class="w-100 mb-4"> <view class="w-100 mb-4">
<view class="w-100 flex j-between a-center"> <view class="w-100 flex j-between a-center">
<view class="font-32 font-bold">服务评价</view> <view class="font-32 font-bold">{{type === 'add' ? '' : '服务评价'}}</view>
<view class="flex a-center" @click="form.anonymity = ~~!form.anonymity"> <view class="flex a-center as-end" @click="form.anonymity = ~~!form.anonymity">
<view :class="form.anonymity ? 'icon-unSelect' : 'icon-select'"></view> <view :class="form.anonymity ? 'icon-unSelect' : 'icon-select'"></view>
<text class="ml-2 font-24 descColor">匿名评价</text> <text class="ml-2 font-24 descColor">匿名评价</text>
</view> </view>
...@@ -177,6 +177,8 @@ ...@@ -177,6 +177,8 @@
from: 1, from: 1,
anonymity: 0 // 1 不匿名 0匿名 anonymity: 0 // 1 不匿名 0匿名
} }
this.imgTemp = []
this.videoTemp = ''
const form = this.form const form = this.form
this.commentData = {...item} this.commentData = {...item}
form.og_id = item.og_id form.og_id = item.og_id
...@@ -211,7 +213,7 @@ ...@@ -211,7 +213,7 @@
const result = res.map(item => item.data.path) const result = res.map(item => item.data.path)
const fullPathResult = result.map(item => (`${this.baseUrl}/${item}`)) const fullPathResult = result.map(item => (`${this.baseUrl}/${item}`))
this.imgTemp = [...this.imgTemp, ...fullPathResult] this.imgTemp = [...this.imgTemp, ...fullPathResult]
this.form.img_url = [...this.imgTemp, ...result] this.form.img_url = [...this.form.img_url, ...result]
}) })
.catch((err) => console.log(err) && this.$toast({title: '上传失败'})) .catch((err) => console.log(err) && this.$toast({title: '上传失败'}))
.finally(() => { .finally(() => {
...@@ -255,16 +257,18 @@ ...@@ -255,16 +257,18 @@
} }
}, },
validateForm() { validateForm(valiteData) {
const formValidator = new Validator() const formValidator = new Validator()
const form = this.form formValidator.add(valiteData.og_id, [{strategy: 'notEmpty', errorMsg: '商品id不能为空'}])
formValidator.add(form.og_id, [{strategy: 'notEmpty', errorMsg: '商品id不能为空'}]) formValidator.add(valiteData.content, [{strategy: 'notEmpty', errorMsg: '评论内容不能为空'}])
formValidator.add(form.content, [{strategy: 'notEmpty', errorMsg: '评论内容不能为空'}])
return formValidator.validate() return formValidator.validate()
}, },
handleSubmit: debounce(function() { handleSubmit: debounce(function() {
const validateErr = this.validateForm() const form = this.form
form.content = form.content.replace(/\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]/ig, "[表情]")
// console.log(form.content)
const validateErr = this.validateForm(form)
if(validateErr) return this.$toast({title: validateErr}) if(validateErr) return this.$toast({title: validateErr})
this.$modal({ this.$modal({
content: '提交后无法修改，请确认不含隐私信息再提交噢~', content: '提交后无法修改，请确认不含隐私信息再提交噢~',
...@@ -282,10 +286,10 @@ ...@@ -282,10 +286,10 @@
case 'add': case 'add':
const { status: addStatus, data: addData } = await addComment(this.form) const { status: addStatus, data: addData } = await addComment(this.form)
if(!addStatus) return this.$toast({title: '评论失败'}) if(!addStatus) return this.$toast({title: '评论失败'})
// uni.navigateTo({ uni.navigateTo({
// url: '/subPages/comments/success?id=' + addData.id url: '/subPages/comments/success?id=' + addData.id
// }) })
this.$toast({title: '追评成功', cb: () => uni.navigateBack()}) // this.$toast({title: '追评成功', cb: () => uni.navigateBack()})
break; break;
default: default:
break; break;
...@@ -310,6 +314,7 @@ ...@@ -310,6 +314,7 @@
.cover { .cover {
width: 110rpx; width: 110rpx;
height: 110rpx; height: 110rpx;
background-color: $mainBg;
} }
.goods { .goods {
height: 110rpx; height: 110rpx;
......
subPages/comments/detail.vue
View file @ fe3ee7f9
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</view> </view>
<!-- 评论 --> <!-- 评论 -->
<view class="comment mt-4">{{detail[0].goods.content}}</view> <view class="comment mt-4">{{detail[0].content}}</view>
<template v-for="(media, idx) in detail[0].media"> <template v-for="(media, idx) in detail[0].media">
<!-- video --> <!-- video -->
...@@ -38,14 +38,14 @@ ...@@ -38,14 +38,14 @@
/> />
</template> </template>
<template v-if="detail[0].add_data.past_day > 0"> <template v-if="detail[0].add_data.content">
<view class="primaryColor font-32 font-bold">{{detail[0].add_data.past_day}}天后追</view> <view class="primaryColor font-32 font-bold mt-2">{{detail[0].add_data.past_day}}天后追评</view>
<view class="comment-add my-2">{{detail[0].add_data.content}}</view> <view class="comment-add my-2">{{detail[0].add_data.content}}</view>
<!-- video --> <!-- video -->
<video <video
v-if="detail[0].add_data.video_url" v-if="detail[0].add_data.video_url.url"
class="comment-video mt-4 mb-2 r-8" class="comment-video mt-4 mb-2 r-8"
:src="detail[0].add_data.video_url" :src="detail[0].add_data.video_url.url"
:controls="controls" :controls="controls"
:autoplay="false" :autoplay="false"
:show-play-btn="false" :show-play-btn="false"
...@@ -53,10 +53,10 @@ ...@@ -53,10 +53,10 @@
<!-- imgs --> <!-- imgs -->
<image <image
v-for="(img, idx) in detail[0].add_data.img_url" v-for="(addimg, add_idx) in detail[0].add_data.img_url"
:key="item" :key="add_idx"
class="comment-img r-8" class="comment-img r-8"
:src="img.url" :src="addimg.url"
mode="widthFix" mode="widthFix"
/> />
</template> </template>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<view class="merchant-comment" v-if="detail[0].reply.length > 0"> <view class="merchant-comment" v-if="detail[0].reply.length > 0">
<template v-for="(reply, ridx) in detail[0].reply"> <template v-for="(reply, ridx) in detail[0].reply">
<view class="comment" :key="ridx"> <view class="comment mb-2" :key="ridx">
<view class="font-bold font-32 mb-2">商家回复:</view> <view class="font-bold font-32 mb-2">商家回复:</view>
<view>{{reply.content}}</view> <view>{{reply.content}}</view>
</view> </view>
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
<video <video
v-if="reply.video_url" v-if="reply.video_url"
class="w-100 mt-2 r-8" class="w-100 mt-2 r-8"
:src="reply.video_url" :src="reply.video_url.url"
:controls="controls" :controls="controls"
:autoplay="false" :autoplay="false"
:show-play-btn="false" :show-play-btn="false"
...@@ -88,6 +88,35 @@ ...@@ -88,6 +88,35 @@
mode="widthFix" mode="widthFix"
/> />
</template> </template>
<template v-if="detail[0].add_data.reply.length > 0">
<template v-for="(reply, ridx) in detail[0].add_data.reply">
<view class="comment my-2" :key="ridx">
<view class="font-bold font-32 mb-2">商家回复追评:</view>
<view>{{reply.content}}</view>
</view>
<!-- video -->
<video
v-if="reply.video_url"
class="w-100 mt-2 r-8"
:src="reply.video_url.url"
:controls="controls"
:autoplay="false"
:show-play-btn="false"
/>
<!-- imgs -->
<image
v-for="(img, idx) in reply.img_url"
:key="item"
class="w-100 mt-2 r-8"
:src="img.url"
mode="widthFix"
/>
</template>
</template>
</view> </view>
</view> </view>
</template> </template>
...@@ -99,6 +128,7 @@ ...@@ -99,6 +128,7 @@
export default { export default {
data() { data() {
return { return {
controls: true,
detail: [] detail: []
} }
}, },
......
subPages/comments/success.vue
View file @ fe3ee7f9
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</view> </view>
<!-- title --> <!-- title -->
<view class="my-2 ml-3">心情不错，继续评价</view> <view class="my-2 ml-3" v-if="list.length > 0">心情不错，继续评价</view>
<!-- list --> <!-- list -->
<view class="wrap-list" @click="handleComment"> <view class="wrap-list" @click="handleComment">
......
utils/common.js
View file @ fe3ee7f9
...@@ -140,7 +140,7 @@ export function cWx(wxapi, ops = {}, cops = {}) { ...@@ -140,7 +140,7 @@ export function cWx(wxapi, ops = {}, cops = {}) {
}) })
} }
// 初始化评论的数据格式 // 初始化评论的数据格式 评论详情，评论中心和评论页面都用到这个方法 我日
export function resetCommentData(data) { export function resetCommentData(data) {
if(isObeject(data)) { if(isObeject(data)) {
data = [{ data = [{
...@@ -151,13 +151,13 @@ export function resetCommentData(data) { ...@@ -151,13 +151,13 @@ export function resetCommentData(data) {
let media = [] let media = []
let reply = null let reply = null
let add_data = null let add_data = null
if(item.img_url) { if(item.img_url && item.img_url !== 'null') {
media = [...item.img_url.split(',').map(item => ({ media = [...item.img_url.split(',').map(item => ({
url: `${baseUrl}/${item}`, url: `${baseUrl}/${item}`,
tpye: 'image' type: 'image'
}))] }))]
} }
if(item.video_url) { if(item.video_url && item.video_url !== 'null') {
media.unshift({ media.unshift({
url: `${baseUrl}/${item.video_url}`, url: `${baseUrl}/${item.video_url}`,
type: 'video' type: 'video'
...@@ -166,13 +166,12 @@ export function resetCommentData(data) { ...@@ -166,13 +166,12 @@ export function resetCommentData(data) {
reply = item.reply ? item.reply.map(r => { reply = item.reply ? item.reply.map(r => {
const videos = r.video_url && { const videos = r.video_url && {
url: `${baseUrl}/${r.video_url}`, url: `${baseUrl}/${r.video_url}`,
tpye: 'video' type: 'video'
} || null } || null
const imgs = r.img_url && r.img_url.split(',').map(url => ({ const imgs = (r.img_url && r.img_url !== 'null' ) ? r.img_url.split(',').map(url => ({
url: `${baseUrl}/${url}`, url: `${baseUrl}/${url}`,
tpye: 'image' type: 'image'
})) || null })) : []
console.log(imgs)
let r_media = [] let r_media = []
r_media = [...imgs] r_media = [...imgs]
if(videos) { if(videos) {
...@@ -192,12 +191,35 @@ export function resetCommentData(data) { ...@@ -192,12 +191,35 @@ export function resetCommentData(data) {
past_day: item.past_day, past_day: item.past_day,
video_url: item.add_data.video_url && { video_url: item.add_data.video_url && {
url: `${baseUrl}/${item.add_data.video_url}`, url: `${baseUrl}/${item.add_data.video_url}`,
tpye: 'video' type: 'video'
}, },
img_url: item.add_data.img_url && item.add_data.img_url.split(',').map(url => ({ reply: item.add_data.reply ? item.add_data.reply.map(r => {
const videos = r.video_url && {
url: `${baseUrl}/${r.video_url}`,
type: 'video'
} || null
const imgs = (r.img_url && r.img_url !== 'null') ? r.img_url.split(',').map(url => ({
url: `${baseUrl}/${url}`,
type: 'image'
})) : []
let r_media = []
r_media = [...imgs]
if(videos) {
r_media.unshift(videos)
}
return {
content: r.content,
user_name: r.user_name,
video_url: videos,
img_url: imgs,
// ri
media: r_media
}
}) : null,
img_url: (item.add_data.img_url && item.add_data.img_url !== 'null') ? item.add_data.img_url.split(',').map(url => ({
url: `${baseUrl}/${url}`, url: `${baseUrl}/${url}`,
tpye: 'image' type: 'image'
})) })) : []
} : null } : null
return { return {
user: { user: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment