Skip to content

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

评论列表，评论详情

parent 41acc5bc
Expand all 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' import { baseUrl } from '@/config'
/** /**
...@@ -76,4 +76,12 @@ export function pay({order_sn, openid}) { ...@@ -76,4 +76,12 @@ export function pay({order_sn, openid}) {
}, },
needMask: true needMask: true
}) })
}
// 上传文件
export function upLoadFile() {
return upload({
})
} }
\ No newline at end of file
pages.json
View file @ c8777985
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
{ {
"path": "pages/goods/detail", "path": "pages/goods/detail",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom",
"enablePullDownRefresh": true
} }
}, },
{ {
......
pages/goods/comment-list.vue
View file @ c8777985
...@@ -21,6 +21,16 @@ ...@@ -21,6 +21,16 @@
</view> </view>
<media-view :media="item.media" /> <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> <view class="descColor font-24 mt-2">{{item.goods_attr}}</view>
</navigator> </navigator>
...@@ -44,6 +54,7 @@ ...@@ -44,6 +54,7 @@
import mediaView from '@/components/comments/media-view.vue' import mediaView from '@/components/comments/media-view.vue'
import commonModules from './common.js' import commonModules from './common.js'
import { commentList } from '@/apis/comment.js' import { commentList } from '@/apis/comment.js'
import { resetCommentData } from '@/utils/common.js'
import LoadMore from '@/utils/load-more.js' import LoadMore from '@/utils/load-more.js'
export default { export default {
data() { data() {
...@@ -79,37 +90,10 @@ ...@@ -79,37 +90,10 @@
async getData() { async getData() {
try{ 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) { if(status) {
const resetData = data.map(item => { const resetData = await resetCommentData(data)
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
}
})
console.log(resetData) console.log(resetData)
this.list = this.list.concat(resetData) this.list = this.list.concat(resetData)
} }
...@@ -142,6 +126,12 @@ ...@@ -142,6 +126,12 @@
@include borderBox(40rpx, 30rpx); @include borderBox(40rpx, 30rpx);
border-bottom: 1rpx solid $line; border-bottom: 1rpx solid $line;
} }
.reply {
@include borderBox(20rpx, 20rpx);
border-radius: 8rpx;
background-color: $mainBg;
}
} }
} }
</style> </style>
pages/goods/detail.vue
View file @ c8777985
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
</view> </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="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 class="font-24 primaryColor flex j-end a-center" @click="handleComment">
...@@ -113,13 +113,14 @@ ...@@ -113,13 +113,14 @@
<i class="ml-2"></i> <i class="ml-2"></i>
</view> </view>
</view> </view>
<user /> <view class="mb-2">
<words <user :user="firstComment.user" />
className="my-2" </view>
content="这个是评论内容内容这个是评论内容内容这个是评论容 内容这个是评论内容内容这个是评论内容内容" <view class="mb-2">
/> <words :content="firstComment.content" />
<media-view className="mr-3" /> </view>
<view class="font-24 descColor overtext-1 mt-2">规格</view> <media-view :media="firstComment.media" />
<view class="font-24 descColor overtext-1 mt-2">{{firstComment.goods_attr}}</view>
</view> </view>
<!-- 详情 --> <!-- 详情 -->
...@@ -150,7 +151,8 @@ import goodsPopup from '@/components/goods-popup/index.vue' ...@@ -150,7 +151,8 @@ import goodsPopup from '@/components/goods-popup/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 { goodDetail, goodsSku } from '@/apis/goods.js' 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 { mapState } from 'vuex'
import common_share from '@/mixins/setting_share.js' import common_share from '@/mixins/setting_share.js'
import commonModules from './common.js' import commonModules from './common.js'
...@@ -169,7 +171,7 @@ export default { ...@@ -169,7 +171,7 @@ export default {
logistics_cur: 0, // 切换物流 logistics_cur: 0, // 切换物流
showMoreArea: false, showMoreArea: false,
skuData: [], skuData: [],
firstComment: null,
navBg: "rgba(255, 255, 255, 0)" navBg: "rgba(255, 255, 255, 0)"
} }
}, },
...@@ -184,10 +186,24 @@ export default { ...@@ -184,10 +186,24 @@ export default {
mediaView, mediaView,
words words
}, },
async onLoad(options) { async onLoad(options) {
goods_id = options.goods_id goods_id = options.goods_id
this.getDetail() this.init()
this.getSku() },
onPullDownRefresh() {
uni.showLoading({
title: '加载中...',
mask: true
})
this.init()
let timer = setTimeout(() => {
clearTimeout(timer)
timer =null
uni.stopPullDownRefresh()
uni.hideLoading()
}, 800)
}, },
computed: { computed: {
...@@ -228,6 +244,12 @@ export default { ...@@ -228,6 +244,12 @@ export default {
methods: { methods: {
...commonModules, ...commonModules,
init() {
this.getDetail()
this.getSku()
this.getComment()
},
// 富文本预览事件 // 富文本预览事件
preview(src, e) { preview(src, e) {
// do something // do something
...@@ -263,6 +285,23 @@ export default { ...@@ -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) { swiperChange(e) {
this.swiperCurrent = e.detail.current this.swiperCurrent = e.detail.current
}, },
......
subPages/comments/center.vue
View file @ c8777985
This diff is collapsed.
subPages/comments/comment.vue
View file @ c8777985
...@@ -115,11 +115,13 @@ ...@@ -115,11 +115,13 @@
components: { components: {
rate rate
}, },
data() { data() {
return { return {
videoTemp: '', videoTemp: '',
imgTemp: [], imgTemp: [],
form: { form: {
og_id: '',
v1: 0, v1: 0,
v2: 0, v2: 0,
v3: 0, v3: 0,
...@@ -129,6 +131,11 @@ ...@@ -129,6 +131,11 @@
} }
}, },
onLoad(ops) {
const { order_id } = ops
this.form.og_id = order_id
},
computed: { computed: {
words() { words() {
return this.form.val.length return this.form.val.length
......
subPages/comments/detail.vue
View file @ c8777985
<template> <template>
<view class="coment-detail_wrapper w-100" :class="{isIphoneX}"> <view class="coment-detail_wrapper w-100" :class="{isIphoneX}">
<view class="user-comment"> <view class="user-comment">
<user /> <user :user="detail[0].user" />
<!-- goods --> <!-- 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 <image
class="cover mr-2 r-8" 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" mode="aspectFit"
/> />
<view class="title">1111111111111111111111111111</view> <view class="title">{{detail[0].goods.goods_name}}</view>
</view> </view>
<!-- 评论 --> <!-- 评论 -->
<view class="comment mt-4">1111111111111111111111111111</view> <view class="comment mt-4">{{detail[0].goods.content}}</view>
<!-- video --> <template v-for="(media, idx) in detail[0].media">
<video <!-- video -->
class="comment-video mt-4 mb-2 r-8" <video
src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" v-if="media.type === 'video'"
:controls="controls" class="comment-video mt-4 mb-2 r-8"
:autoplay="false" :src="media.url"
:show-play-btn="false" :controls="controls"
/> :autoplay="false"
:show-play-btn="false"
<!-- imgs --> :key="idx"
<image />
v-for="(item, idx) in 4"
:key="item" <!-- imgs -->
class="comment-img r-8" <image
src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png" v-else
mode="aspectFit" :key="idx"
/> class="comment-img r-8"
:src="media.url"
<view class="primaryColor font-32 font-bold">二十天后追</view> mode="widthFix"
<view class="comment-add mt-2">333</view> />
<!-- video --> </template>
<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 --> <template v-if="detail[0].add_data">
<image <view class="primaryColor font-32 font-bold">{{detail[0].add_data.past_day}}天后追</view>
v-for="(item, idx) in 4" <view class="comment-add my-2">{{detail[0].add_data.content}}</view>
:key="item" <!-- video -->
class="comment-img r-8" <video
src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png" v-if="detail[0].add_data.video_url"
mode="aspectFit" 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>
<view class="merchant-comment"> <view class="merchant-comment" v-if="detail[0].reply.length > 0">
<view class="comment"> <template v-for="(reply, ridx) in detail[0].reply">
<view class="font-bold font-32 mb-2">商家回复:</view> <view class="comment" :key="ridx">
<view>2222222222222222222222</view> <view class="font-bold font-32 mb-2">商家回复:</view>
</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>
</view> </view>
</template> </template>
...@@ -67,7 +95,14 @@ ...@@ -67,7 +95,14 @@
<script> <script>
import user from '@/components/comments/user.vue' import user from '@/components/comments/user.vue'
import { commentDetail } from '@/apis/comment.js' import { commentDetail } from '@/apis/comment.js'
import { resetCommentData } from '@/utils/common.js'
export default { export default {
data() {
return {
detail: []
}
},
components: { components: {
user user
}, },
...@@ -98,7 +133,8 @@ ...@@ -98,7 +133,8 @@
if(!this.id) return if(!this.id) return
const { status, data } = await commentDetail(this.id) const { status, data } = await commentDetail(this.id)
if(status) { if(status) {
console.log(data) const resetData = resetCommentData(data)
this.detail = resetData
} }
}catch(e){ }catch(e){
console.log(e) console.log(e)
......
utils/common.js
View file @ c8777985
import { isFunction, isObeject } from "@/utils/types.js" import { isFunction, isObeject } from "@/utils/types.js"
import Toast from "@/lib/toast/index.js" import Toast from "@/lib/toast/index.js"
import store from "@/store/index.js" import store from "@/store/index.js"
import { baseUrl } from '@/config/index.js'
/** /**
* @desc 倒计时 * @desc 倒计时
* @param { Number } num 倒计时时间 * @param { Number } num 倒计时时间
...@@ -137,4 +138,82 @@ export function cWx(wxapi, ops = {}, cops = {}) { ...@@ -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