Skip to content

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

评论列表，评论详情

parent 41acc5bc
Hide whitespace changes
Inline Side-by-side
Showing with 457 additions and 160 deletions
apis/common.js
View file @ c8777985
import { request } from "@/lib/service"
import { request, upload } from "@/lib/service"
import { baseUrl } from '@/config'
/**
......@@ -76,4 +76,12 @@ export function pay({order_sn, openid}) {
},
needMask: true
})
}
// 上传文件
export function upLoadFile() {
return upload({
})
}
\ No newline at end of file
pages.json
View file @ c8777985
......@@ -41,7 +41,8 @@
{
"path": "pages/goods/detail",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
},
{
......
pages/goods/comment-list.vue
View file @ c8777985
......@@ -21,6 +21,16 @@
</view>
<media-view :media="item.media" />
<view
v-if="item.reply.length > 0"
class="reply mt-2"
v-for="(replyItem, index) in item.reply"
:key="index"
>
<view class="mb-2 font-32 font-bold">商家回复：</view>
<view>{{replyItem.content}}</view>
</view>
<view class="descColor font-24 mt-2">{{item.goods_attr}}</view>
</navigator>
......@@ -44,6 +54,7 @@
import mediaView from '@/components/comments/media-view.vue'
import commonModules from './common.js'
import { commentList } from '@/apis/comment.js'
import { resetCommentData } from '@/utils/common.js'
import LoadMore from '@/utils/load-more.js'
export default {
data() {
......@@ -79,37 +90,10 @@
async getData() {
try{
const { status, data } = await this.loadMore.getList({goods_id: 9863}, commentList)
if(!this.detail && !this.detail.goods_id) return
const { status, data } = await this.loadMore.getList({goods_id: this.detail.goods_id}, commentList)
if(status) {
const resetData = data.map(item => {
let media = []
const baseUrl = this.baseUrl
if(item.img_url) {
media = [...item.img_url.split(',').map(item => ({
url: `${baseUrl}/${item}`,
tpye: 'image'
}))]
}
if(item.video_url) {
media.unshift({
url: `${baseUrl}/${item.video_url}`,
type: 'video'
})
}
return {
user: {
nickname: item.nickname,
avatar: item.avatar,
add_time: item.add_time,
grade: item.com_grade
},
content: item.content,
media,
id: item.id,
reply: [],
goods_attr: item.goods_attr
}
})
const resetData = await resetCommentData(data)
console.log(resetData)
this.list = this.list.concat(resetData)
}
......@@ -142,6 +126,12 @@
@include borderBox(40rpx, 30rpx);
border-bottom: 1rpx solid $line;
}
.reply {
@include borderBox(20rpx, 20rpx);
border-radius: 8rpx;
background-color: $mainBg;
}
}
}
</style>
pages/goods/detail.vue
View file @ c8777985
......@@ -105,7 +105,7 @@
</view>
<!-- 评论 -->
<view class="w-100 comment-wrap mb-2">
<view class="w-100 comment-wrap mb-2" v-if="firstComment">
<view class="mb-4 flex j-between a-center">
<view class="font-bold">商品评论</view>
<view class="font-24 primaryColor flex j-end a-center" @click="handleComment">
......@@ -113,13 +113,14 @@
<i class="ml-2"></i>
</view>
</view>
<user />
<words
className="my-2"
content="这个是评论内容内容这个是评论内容内容这个是评论容 内容这个是评论内容内容这个是评论内容内容"
/>
<media-view className="mr-3" />
<view class="font-24 descColor overtext-1 mt-2">规格</view>
<view class="mb-2">
<user :user="firstComment.user" />
</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>
</view>
<!-- 详情 -->
......@@ -150,7 +151,8 @@ import goodsPopup from '@/components/goods-popup/index.vue'
import mediaView from '@/components/comments/media-view.vue'
import words from '@/components/comments/words.vue'
import { goodDetail, goodsSku } from '@/apis/goods.js'
import { makePhoneCall, throttle } from '@/utils/common.js'
import { makePhoneCall, throttle, resetCommentData } from '@/utils/common.js'
import { commentList } from '@/apis/comment.js'
// import { mapState } from 'vuex'
import common_share from '@/mixins/setting_share.js'
import commonModules from './common.js'
......@@ -169,7 +171,7 @@ export default {
logistics_cur: 0, // 切换物流
showMoreArea: false,
skuData: [],
firstComment: null,
navBg: "rgba(255, 255, 255, 0)"
}
},
......@@ -184,10 +186,24 @@ export default {
mediaView,
words
},
async onLoad(options) {
goods_id = options.goods_id
this.getDetail()
this.getSku()
this.init()
},
onPullDownRefresh() {
uni.showLoading({
title: '加载中...',
mask: true
})
this.init()
let timer = setTimeout(() => {
clearTimeout(timer)
timer =null
uni.stopPullDownRefresh()
uni.hideLoading()
}, 800)
},
computed: {
......@@ -228,6 +244,12 @@ export default {
methods: {
...commonModules,
init() {
this.getDetail()
this.getSku()
this.getComment()
},
// 富文本预览事件
preview(src, e) {
// do something
......@@ -263,6 +285,23 @@ export default {
}
},
// 获取评论 取第一个
async getComment() {
try{
if(!goods_id) return
const { status, data } = await commentList({
goods_id,
page: 1
})
if(status) {
const resetData = resetCommentData(data.list)
this.firstComment = resetData[0]
}
}catch(e){
console.log(e)
}
},
swiperChange(e) {
this.swiperCurrent = e.detail.current
},
......
subPages/comments/center.vue
View file @ c8777985
......@@ -6,7 +6,7 @@
class="tab-inner flex-1"
:class="cur_tab === 0 ? 'tab-active' : null"
data-tabid="0"
>待评价(4)</view>
>待评价<text v-show="unCommentCounts">({{unCommentCounts}})</text></view>
<view
class="tab-inner flex-1"
:class="cur_tab === 1 ? 'tab-active' : null"
......@@ -16,64 +16,136 @@
<!-- list -->
<swiper class="list-wrap" :current="cur_tab" @change="swiperChange">
<swiper-item>
<swiper-item class="swiperItem">
<pull-list
@tolower="tolower"
@refresh="refresh"
>
<view class="list-item w-100 p-2 r-8">
<view class="font-32 font-bold mb-2">这是一个店铺名称</view>
<view class="w-100 flex j-start a-center">
<image
class="cover mr-2 r-8"
src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png"
mode="aspectFit"
/>
<view class="info flex-1 flex j-between a-start flex-column">
<view class="title font-bold">这是一堆蔬菜和水果有黄瓜番茄这是这是一堆蔬菜和水果有黄瓜番茄一堆蔬菜和水果有黄瓜番茄 什么的</view>
<rate
readonly
size="12"
margin="2"
value="3"
/>
<view class="w-100 flex j-between a-center">
<view class="descColor font-24">规格: 200g/包</view>
<view class="btn-comment r-8">评价</view>
<template v-if="unCommentList.length === 0">
<empty-view />
</template>
<template v-else>
<view
v-for="(temp, tidx) in unCommentList"
:key="tidx"
@click="handleComment"
>
<view
class="list-item w-100 p-2 r-8"
v-for="(unComment, i) in temp"
:key="i"
>
<view class="font-32 font-bold mb-2">{{unComment.shop_name}}</view>
<view
class="w-100 flex j-start a-center"
v-for="(goods, goods_idx) in unComment.goods"
:key="goods_idx"
>
<image
class="cover mr-2 r-8"
:src="baseUrl + '/' + goods.goods_thumb"
mode="aspectFit"
/>
<view class="info flex-1 flex j-between a-start flex-column">
<view class="title font-bold">{{goods.goods_name}}</view>
<rate
readonly
size="0"
margin="2"
value="0"
/>
<view class="w-100 flex j-between a-center">
<view class="descColor font-24">{{goods.goods_attr}}</view>
<view class="btn-comment r-8" :data-order_id="unComment.order_id">评价</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</pull-list>
</swiper-item>
<swiper-item>
<swiper-item class="swiperItem">
<pull-list
@tolower="tolower"
@refresh="refresh"
>
<view class="list-item w-100 p-2 r-8">
<view class="font-32 font-bold mb-2">这是一个店铺名称</view>
<view class="w-100 flex j-start a-center">
<image
class="cover mr-2 r-8"
src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png"
mode="aspectFit"
/>
<view class="info flex-1 flex j-between a-start flex-column">
<view class="title font-bold">这是一堆蔬菜和水果有黄瓜番茄这是这是一堆蔬菜和水果有黄瓜番茄一堆蔬菜和水果有黄瓜番茄 什么的</view>
<rate
readonly
size="12"
margin="2"
value="3"
/>
>
<template v-if="hadCommentList.length === 0">
<empty-view />
</template>
<template v-else>
<view
v-for="(temp, tidx) in hadCommentList"
:key="tidx"
@click="handleAddComment"
>
<view
class="list-item w-100 p-2 r-8"
v-for="(hadComment, i) in temp"
:key="i"
>
<view class="font-32 font-bold mb-2">{{hadComment.shop_name}}</view>
<view
v-for="(goods, goods_idx) in hadComment.goods"
:key="goods_idx"
>
<view class="w-100 flex j-start a-center">
<image
class="cover mr-2 r-8"
:src="baseUrl + '/' + goods.goods_thumb"
mode="aspectFit"
/>
<view class="info flex-1 flex j-between a-start flex-column">
<view class="title font-bold">{{goods.goods_name}}</view>
<rate
readonly
size="12"
margin="2"
:value="goods.grade"
/>
<view class="descColor font-24">{{goods.goods_attr}}</view>
</view>
</view>
<!-- 评论 -->
<template v-if="goods.goods_comment.length > 0">
<view class="mt-2"
v-for="(replyItem, r_idx) in goods.goods_comment"
:key="r_idx"
>
<view class="mb-2">
<words :content="replyItem.content" />
</view>
<view class="mb-2">
<media-view :media="replyItem.media" />
</view>
<view class="mb-2"
v-for="(b_reply, b_idx) in replyItem.reply"
:key="b_idx"
>
<view class="reply-content">
<view class="font-32 font-bold">商家回复：</view>
<words :content="b_reply.content" />
</view>
<view class="mt-2" v-if="b_reply.img_url.length > 0">
<media-view :media="() => {
const media = [...b_reply.img_url]
b_reply.video_url && media.unshift(b_reply.video_url)
return media
}" />
</view>
</view>
</view>
</template>
</view>
<view class="w-100 flex j-between a-center">
<view class="descColor font-24">规格: 200g/包</view>
<view class="btn-comment r-8">评价</view>
<view class="descColor font-24">qqqq</view>
<view class="btn-comment r-8" :data-order_id="hadComment.order_id">评价</view>
</view>
</view>
</view>
</view>
</template>
</pull-list>
</swiper-item>
</swiper>
......@@ -83,12 +155,21 @@
<script>
import pullList from '@/components/pull-list/index.vue'
import rate from '@/components/rate/index.vue'
import mediaView from '@/components/comments/media-view.vue'
import words from '@/components/comments/words.vue'
import { unCommentList, hadCommentList } from '@/apis/comment.js'
import LoadMore from '@/utils/load-more.js'
import { resetCommentData } from '@/utils/common.js'
// 1可追评 2已评论已追评 3已超时
const commentStatus = {
"1": '1'
}
export default {
data() {
return {
cur_tab: 0,
unCommentCounts: 0,
unCommentList: [],
hadCommentList: []
}
......@@ -96,12 +177,17 @@
components: {
pullList,
rate
rate,
mediaView,
words
},
created() {
this.unCommendLoad = new LoadMore()
this.hadCommendLoad = new LoadMore()
},
onShow() {
this.getList()
},
......@@ -111,14 +197,23 @@
const { cur_tab } = this
console.log(cur_tab)
if(cur_tab === 0) {
const { status, data, test } = await unCommentList()
console.log(status, test)
const { status, data } = await this.unCommendLoad.getList({}, unCommentList)
if(status && data && data.length > 0) {
this.unCommentCounts = this.unCommendLoad.total
this.$set(this.unCommentList, this.unCommentList.length, data)
}
} else {
const { status, data, test } = await hadCommentList()
console.log(status, test)
const { status, data } = await this.hadCommendLoad.getList({}, hadCommentList)
if(status && data && data.length > 0) {
data.forEach(r => r.goods && r.goods.forEach(n => {
n.grade = n.goods_comment.com_grade
n.goods_comment = resetCommentData(n.goods_comment)
}))
this.$set(this.hadCommentList, this.hadCommentList.length, data)
}
}
}catch(e){
console.log(e)
this.$toast({title: '程序错误，获取失败'})
}
},
......@@ -127,19 +222,50 @@
const index = +e.target.dataset.tabid
if(index === this.cur_tab) return
this.cur_tab = index
if(index === 0 && !this.unCommentList.length) {
this.getList()
} else if(index === 1 && !this.hadCommentList.length) {
this.getList()
}
},
swiperChange(e) {
this.cur_tab = e.detail.current
if(this.cur_tab === 0 && !this.unCommentList.length) {
this.getList()
} else if(this.cur_tab === 1 && !this.hadCommentList.length) {
this.getList()
}
},
// 加载更多
tolower() {
console.log(2)
this.getList()
},
refresh() {
console.log(1)
}
if(this.cur_tab === 0) {
this.unCommendLoad.resetParams()
this.unCommentList = []
} else {
this.hadCommendLoad.resetParams()
this.hadCommentList = []
}
this.getList()
},
// 评价
handleComment(e) {
const { order_id } = e.target.dataset
console.log(order_id)
if(!order_id) return
uni.navigateTo({
url: '/subPages/comments/comment?order_id=' + order_id
})
},
// 追评
handleAddComment(e) {}
}
}
</script>
......@@ -184,24 +310,35 @@
width: 690rpx;
height: calc(100vh - 108rpx);
overflow: hidden;
.list-item {
box-sizing: border-box;
background-color: #fff;
.cover {
flex: 0 0 180rpx;
width: 180rpx;
height: 180rpx;
}
.info {
height: 180rpx;
.title, .desc {
@include text-ellipsis(2);
.swiperItem {
width: 100%;
overflow: hidden;
.list-item {
box-sizing: border-box;
background-color: #fff;
margin-bottom: 20rpx;
.cover {
flex: 0 0 180rpx;
width: 180rpx;
height: 180rpx;
}
.info {
height: 180rpx;
.title, .desc {
@include text-ellipsis(2);
}
}
.btn-comment {
padding: 8rpx 32rpx;
background-color: $primary;
color: #fff;
}
.reply-content {
padding: 20rpx;
box-sizing: border-box;
border-radius: 8rpx;
background-color: $mainBg;
}
}
.btn-comment {
padding: 8rpx 32rpx;
background-color: $primary;
color: #fff;
}
}
}
......
subPages/comments/comment.vue
View file @ c8777985
......@@ -115,11 +115,13 @@
components: {
rate
},
data() {
return {
videoTemp: '',
imgTemp: [],
form: {
og_id: '',
v1: 0,
v2: 0,
v3: 0,
......@@ -129,6 +131,11 @@
}
},
onLoad(ops) {
const { order_id } = ops
this.form.og_id = order_id
},
computed: {
words() {
return this.form.val.length
......
subPages/comments/detail.vue
View file @ c8777985
<template>
<view class="coment-detail_wrapper w-100" :class="{isIphoneX}">
<view class="user-comment">
<user />
<user :user="detail[0].user" />
<!-- goods -->
<view class="goods r-8 mt-4 p-2 flex j-start a-center">
<view class="goods r-8 mt-4 p-2 flex j-start a-center" v-if="detail[0].goods.goods_name">
<image
class="cover mr-2 r-8"
src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png"
:src="detail[0].goods.goods_img"
mode="aspectFit"
/>
<view class="title">1111111111111111111111111111</view>
<view class="title">{{detail[0].goods.goods_name}}</view>
</view>
<!-- 评论 -->
<view class="comment mt-4">1111111111111111111111111111</view>
<view class="comment mt-4">{{detail[0].goods.content}}</view>
<!-- video -->
<video
class="comment-video mt-4 mb-2 r-8"
src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
:controls="controls"
:autoplay="false"
:show-play-btn="false"
/>
<!-- imgs -->
<image
v-for="(item, idx) in 4"
:key="item"
class="comment-img r-8"
src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png"
mode="aspectFit"
/>
<view class="primaryColor font-32 font-bold">二十天后追</view>
<view class="comment-add mt-2">333</view>
<!-- video -->
<video
class="comment-video mt-4 mb-2 r-8"
src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
:controls="controls"
:autoplay="false"
:show-play-btn="false"
/>
<template v-for="(media, idx) in detail[0].media">
<!-- video -->
<video
v-if="media.type === 'video'"
class="comment-video mt-4 mb-2 r-8"
:src="media.url"
:controls="controls"
:autoplay="false"
:show-play-btn="false"
:key="idx"
/>
<!-- imgs -->
<image
v-else
:key="idx"
class="comment-img r-8"
:src="media.url"
mode="widthFix"
/>
</template>
<!-- imgs -->
<image
v-for="(item, idx) in 4"
:key="item"
class="comment-img r-8"
src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png"
mode="aspectFit"
/>
<template v-if="detail[0].add_data">
<view class="primaryColor font-32 font-bold">{{detail[0].add_data.past_day}}天后追</view>
<view class="comment-add my-2">{{detail[0].add_data.content}}</view>
<!-- video -->
<video
v-if="detail[0].add_data.video_url"
class="comment-video mt-4 mb-2 r-8"
:src="detail[0].add_data.video_url"
:controls="controls"
:autoplay="false"
:show-play-btn="false"
/>
<!-- imgs -->
<image
v-for="(img, idx) in detail[0].add_data.img_url"
:key="item"
class="comment-img r-8"
:src="img.url"
mode="widthFix"
/>
</template>
</view>
<view class="merchant-comment">
<view class="comment">
<view class="font-bold font-32 mb-2">商家回复:</view>
<view>2222222222222222222222</view>
</view>
<view class="merchant-comment" v-if="detail[0].reply.length > 0">
<template v-for="(reply, ridx) in detail[0].reply">
<view class="comment" :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"
: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>
</view>
</view>
</template>
......@@ -67,7 +95,14 @@
<script>
import user from '@/components/comments/user.vue'
import { commentDetail } from '@/apis/comment.js'
import { resetCommentData } from '@/utils/common.js'
export default {
data() {
return {
detail: []
}
},
components: {
user
},
......@@ -98,7 +133,8 @@
if(!this.id) return
const { status, data } = await commentDetail(this.id)
if(status) {
console.log(data)
const resetData = resetCommentData(data)
this.detail = resetData
}
}catch(e){
console.log(e)
......
utils/common.js
View file @ c8777985
import { isFunction, isObeject } from "@/utils/types.js"
import Toast from "@/lib/toast/index.js"
import store from "@/store/index.js"
import { baseUrl } from '@/config/index.js'
/**
* @desc 倒计时
* @param { Number } num 倒计时时间
......@@ -137,4 +138,82 @@ export function cWx(wxapi, ops = {}, cops = {}) {
}
})
})
}
// 初始化评论的数据格式
export function resetCommentData(data) {
if(isObeject(data)) {
data = [{
...data
}]
}
const resetData = data.map(item => {
let media = []
let reply = null
let add_data = null
if(item.img_url) {
media = [...item.img_url.split(',').map(item => ({
url: `${baseUrl}/${item}`,
tpye: 'image'
}))]
}
if(item.video_url) {
media.unshift({
url: `${baseUrl}/${item.video_url}`,
type: 'video'
})
}
reply = item.reply.map(r => {
const videos = r.video_url && {
url: `${baseUrl}/${r.video_url}`,
tpye: 'video'
} || null
const imgs = r.img_url && r.img_url.split(',').map(url => ({
url: `${baseUrl}/${url}`,
tpye: 'image'
})) || null
console.log(imgs)
let r_media = []
r_media = [...imgs] && (videos && r_media.unshift(videos))
return {
content: r.content,
user_name: r.user_name,
video_url: videos,
img_url: imgs,
// ri
media: r_media
}
})
add_data = item.add_data ? {
content: item.add_data.content,
past_day: item.past_day,
video_url: item.add_data.video_url && {
url: `${baseUrl}/${item.add_data.video_url}`,
tpye: 'video'
},
img_url: item.add_data.img_url && item.add_data.img_url.split(',').map(url => ({
url: `${baseUrl}/${url}`,
tpye: 'image'
}))
} : null
return {
user: {
nickname: item.nickname,
avatar: item.avatar,
add_time: item.add_time,
grade: item.com_grade
},
goods: {
goods_name: item.goods_name || null,
goods_img: item.goods_img ? `${baseUrl}/${item.goods_img}` : null
},
content: item.content,
media,
id: item.id,
reply,
goods_attr: item.goods_attr,
add_data
}
})
return resetData
}
\ No newline at end of file
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