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'
/**
......@@ -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
This diff is collapsed.
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