509 lines
11 KiB
Vue
509 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar title="导游评价" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|||
|
|
title-size='36' height='46' id="navbar">
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="search-container">
|
|||
|
|
<view class="search-bar" style="padding-left: 30rpx;">
|
|||
|
|
<u-icon name="search" size="28" color="#999"></u-icon>
|
|||
|
|
<input class="search-input" placeholder="搜索关键词" v-model="searchKeyword" @confirm="sendReply"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="paixu">
|
|||
|
|
<view class="lt">
|
|||
|
|
<view class="px">
|
|||
|
|
<text :class="pxindex == 0 ? 'active' : ''" @click="btnpx(0)">默认排序</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="px" style="border: none;">
|
|||
|
|
<text :class="pxindex == 1 ? 'active' : ''" @click="btnpx(1)">最新评论</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="rt" v-if="bqname">
|
|||
|
|
共{{total}}条
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view class="listpl" @scrolltolower="handqixing" scroll-y>
|
|||
|
|
<view class="yonghu" v-for="(item,index) in plarr" :key="index">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="lt">
|
|||
|
|
<image :src="item.userAvatar" mode="aspectFill"></image>
|
|||
|
|
<view class="info">
|
|||
|
|
<view class="name">
|
|||
|
|
{{item.nickName}}
|
|||
|
|
</view>
|
|||
|
|
<u-rate :count="count" active-color="#E7322C" size="24" inactive-color="#b2b2b2" v-model="item.rating"></u-rate>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="rts">
|
|||
|
|
{{item.createTime}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="contxt">
|
|||
|
|
{{item.content}}
|
|||
|
|
</view>
|
|||
|
|
<view class="imglist" v-if="item.mediaUrl">
|
|||
|
|
<view class="" v-for="(val,index2) in getMediaList(item.mediaUrl)" :key="index2">
|
|||
|
|
<image v-if="!isVideoItem(val)" :src="val" mode="aspectFill" @click="previewImage(item.mediaUrl, index2)" />
|
|||
|
|
<video v-else :src="val" :controls="true" @click="playVideo(val)"></video>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;color: #ccc;">
|
|||
|
|
暂时没有更多评论了...
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 视频全屏播放弹窗 -->
|
|||
|
|
<view class="video-modal" v-if="showVideoModal" @click="closeVideoModal">
|
|||
|
|
<view class="video-container" @click.stop>
|
|||
|
|
<video :src="currentVideoUrl" :controls="true" :show-center-play-btn="true" class="fullscreen-video"></video>
|
|||
|
|
<view class="close-btn" @click="closeVideoModal">×</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
},
|
|||
|
|
rating:3,
|
|||
|
|
count:5,
|
|||
|
|
obj:{},
|
|||
|
|
pageNum:1,
|
|||
|
|
id:'',
|
|||
|
|
havePicOrVideo:false,
|
|||
|
|
plarr:[],
|
|||
|
|
tabindex:0,
|
|||
|
|
pxindex:0,
|
|||
|
|
maxRating:'',
|
|||
|
|
searchKeyword:'',
|
|||
|
|
bqlist:[],
|
|||
|
|
bqindex:-1,
|
|||
|
|
bqname:'',
|
|||
|
|
total:0,
|
|||
|
|
time_desc:'',
|
|||
|
|
showVideoModal: false,
|
|||
|
|
currentVideoUrl: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
this.id = e.id
|
|||
|
|
this.getxq()
|
|||
|
|
this.getpinlun()
|
|||
|
|
this.getbiaoqian()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 请求导游详情（用于评分汇总）
|
|||
|
|
getxq(){
|
|||
|
|
this.$u.get(`/app/tourGuide/detail/${this.id}`).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.obj = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 上拉加载更多
|
|||
|
|
handqixing() {
|
|||
|
|
if (this.plarr.length < this.total) {
|
|||
|
|
this.getpinlun()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 点击切换标签
|
|||
|
|
btnbq(item,index){
|
|||
|
|
if(item.name == this.bqname){
|
|||
|
|
this.bqname = ''
|
|||
|
|
this.bqindex = -1
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getpinlun()
|
|||
|
|
}else{
|
|||
|
|
this.bqname = item.name
|
|||
|
|
this.bqindex = index
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getpinlun()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 请求导游评价标签
|
|||
|
|
getbiaoqian(){
|
|||
|
|
this.$u.get(`/app/comment/labelList?bstId=${this.id}&bstType=5`).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.bqlist = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 点击回车进行搜索
|
|||
|
|
sendReply(){
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getpinlun()
|
|||
|
|
},
|
|||
|
|
// 获取媒体列表（过滤空值）
|
|||
|
|
getMediaList(mediaUrl) {
|
|||
|
|
if (!mediaUrl) return []
|
|||
|
|
return mediaUrl.split(',').map(url => url.trim()).filter(url => url)
|
|||
|
|
},
|
|||
|
|
// 判断图片还是视频
|
|||
|
|
isVideoItem(item) {
|
|||
|
|
if (!item) return false
|
|||
|
|
const url = String(item).trim()
|
|||
|
|
return /\.(mp4|m4v|mov|avi|wmv|flv|m3u8)(\?|#|$)/i.test(url)
|
|||
|
|
},
|
|||
|
|
// 预览图片
|
|||
|
|
previewImage(mediaUrl, currentIndex) {
|
|||
|
|
if (!mediaUrl) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '图片加载失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const allUrls = mediaUrl.split(',').map(url => url.trim()).filter(url => url)
|
|||
|
|
if (allUrls.length === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '没有可预览的图片',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const urls = allUrls.filter(url => !this.isVideoItem(url)).map(url => url.trim())
|
|||
|
|
if (urls.length === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '没有可预览的图片',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 计算当前点击的图片在过滤后的图片数组中的索引
|
|||
|
|
let imageIndex = 0
|
|||
|
|
for (let i = 0; i < currentIndex && i < allUrls.length; i++) {
|
|||
|
|
if (!this.isVideoItem(allUrls[i])) {
|
|||
|
|
imageIndex++
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const current = urls[imageIndex] || urls[0]
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: urls,
|
|||
|
|
current: current || urls[0],
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('预览图片失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '图片预览失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 播放视频
|
|||
|
|
playVideo(videoUrl) {
|
|||
|
|
if (!videoUrl) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '视频加载失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.currentVideoUrl = videoUrl
|
|||
|
|
this.showVideoModal = true
|
|||
|
|
},
|
|||
|
|
// 关闭视频弹窗
|
|||
|
|
closeVideoModal() {
|
|||
|
|
this.showVideoModal = false
|
|||
|
|
this.currentVideoUrl = ''
|
|||
|
|
},
|
|||
|
|
// 点击切换排序
|
|||
|
|
btnpx(num){
|
|||
|
|
this.pxindex = num
|
|||
|
|
if(num == 1){
|
|||
|
|
this.time_desc = 'time_desc'
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getpinlun()
|
|||
|
|
}else{
|
|||
|
|
this.time_desc = ''
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getpinlun()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 点击切换tab
|
|||
|
|
btntab(num){
|
|||
|
|
this.tabindex = num
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.bqname = ''
|
|||
|
|
this.bqindex = -1
|
|||
|
|
if(num == 1){
|
|||
|
|
this.havePicOrVideo = true
|
|||
|
|
this.maxRating = ''
|
|||
|
|
this.getpinlun()
|
|||
|
|
}else if(num == 2){
|
|||
|
|
this.havePicOrVideo = false
|
|||
|
|
this.maxRating = 3
|
|||
|
|
this.getpinlun()
|
|||
|
|
}else{
|
|||
|
|
this.havePicOrVideo = false
|
|||
|
|
this.maxRating = ''
|
|||
|
|
this.getpinlun()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 请求导游评价列表（类型 5）
|
|||
|
|
getpinlun(){
|
|||
|
|
this.$u.get(`/app/comment/list?pageNum=${this.pageNum}&pageSize=20&bstTypes=5&bstId=${this.id}&havePicOrVideo=${this.havePicOrVideo}&maxRating=${this.maxRating}&keyword=${this.searchKeyword}&types=${this.bqname}&sortBy=${this.time_desc}`).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.total = res.total
|
|||
|
|
if(this.pageNum == 1){
|
|||
|
|
this.plarr = res.rows
|
|||
|
|
this.pageNum ++
|
|||
|
|
}else{
|
|||
|
|
this.plarr =this.plarr.concat(res.rows)
|
|||
|
|
this.pageNum ++
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.active{
|
|||
|
|
color: #1EC28B !important;
|
|||
|
|
}
|
|||
|
|
.actives{
|
|||
|
|
color: #fff !important;
|
|||
|
|
background-color: #1EC28B !important;
|
|||
|
|
}
|
|||
|
|
page {
|
|||
|
|
background: #F4F4F4;
|
|||
|
|
}
|
|||
|
|
.top{
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
.listpl{
|
|||
|
|
height: 78vh;
|
|||
|
|
overflow: scroll;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.yonghu{
|
|||
|
|
width: 712rpx;
|
|||
|
|
max-height: 6458rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
padding: 36rpx 20rpx;
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
.imglist{
|
|||
|
|
margin-top: 28rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
view{
|
|||
|
|
image{
|
|||
|
|
width: 210rpx;
|
|||
|
|
height: 210rpx;
|
|||
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|||
|
|
}
|
|||
|
|
video{
|
|||
|
|
width: 210rpx;
|
|||
|
|
height: 210rpx;
|
|||
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contxt{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
margin-top: 22rpx;
|
|||
|
|
}
|
|||
|
|
.top{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.lt{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
image{
|
|||
|
|
width: 68rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 14rpx;
|
|||
|
|
}
|
|||
|
|
.info{
|
|||
|
|
.name{
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
padding-left: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.rts{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #606060;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.paixu{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
.lt{
|
|||
|
|
display: flex;
|
|||
|
|
.px{
|
|||
|
|
border-right: 1px solid #D8D8D8;
|
|||
|
|
padding-right: 14rpx;
|
|||
|
|
margin-right: 14rpx;
|
|||
|
|
}
|
|||
|
|
view{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.shuaixuan{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
view{
|
|||
|
|
background: #ECEEFA;
|
|||
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|||
|
|
padding: 12rpx 32rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #1EC28B;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tab{
|
|||
|
|
margin-top: 36rpx;
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1px solid #D8D8D8;
|
|||
|
|
padding-bottom: 16rpx;
|
|||
|
|
padding-left: 32rpx;
|
|||
|
|
view{
|
|||
|
|
margin-right: 56rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
text{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.pinfen {
|
|||
|
|
width: 710rpx;
|
|||
|
|
max-height: 3746rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|||
|
|
padding: 0rpx 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.top {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.rt {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-left: 1px solid #D8D8D8;
|
|||
|
|
.oen {
|
|||
|
|
margin-left: 42rpx;
|
|||
|
|
.fen {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #1EC28B;
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #606060;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.lt {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.ltfen {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 64rpx;
|
|||
|
|
color: #1EC28B;
|
|||
|
|
margin-right: 14rpx;
|
|||
|
|
}
|
|||
|
|
.ltbang {
|
|||
|
|
text {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #606060;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
.bang {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #1EC28B;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 搜索栏样式
|
|||
|
|
.search-container {
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
.search-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
border-radius: 25rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
padding: 0 8rpx;
|
|||
|
|
}
|
|||
|
|
.search-input {
|
|||
|
|
flex: 1;
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
// 视频全屏播放弹窗
|
|||
|
|
.video-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.video-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.fullscreen-video {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.close-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 40rpx;
|
|||
|
|
right: 40rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 10000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|