福鼎
This commit is contained in:
parent
6937ede214
commit
246e8f9a3b
|
|
@ -16,7 +16,7 @@ const install = (Vue, vm) => {
|
|||
// },
|
||||
// });
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
// baseUrl: 'http://192.168.1.6:4601',
|
||||
// baseUrl: 'http://192.168.1.4:4601',
|
||||
// baseUrl: 'http://192.168.2.75:4601',
|
||||
baseUrl: 'https://fd.ccttiot.com/prod-api',
|
||||
loadingText: '努力加载中~',
|
||||
|
|
|
|||
|
|
@ -9,8 +9,28 @@
|
|||
<view class="name">
|
||||
{{agencyDetail.name}}
|
||||
</view>
|
||||
<view class="jieshao">
|
||||
<!-- <view class="jieshao">
|
||||
{{agencyDetail.description == null ? '暂无简介' : agencyDetail.description}}
|
||||
</view> -->
|
||||
<!-- 导游评价概览 -->
|
||||
<view class="pinjia" v-if="agencyDetail">
|
||||
<view class="lt">
|
||||
<view class="fen">
|
||||
{{ agencyDetail.averageRating == undefined ? '--' : Number(agencyDetail.averageRating).toFixed(1) }}
|
||||
</view>
|
||||
<u-rate
|
||||
:count="count"
|
||||
active-color="#1EC28B"
|
||||
size="24"
|
||||
inactive-color="#b2b2b2"
|
||||
v-model="agencyDetail.averageRating"
|
||||
readonly
|
||||
></u-rate>
|
||||
</view>
|
||||
<view class="rt" @click="btndp">
|
||||
{{ agencyDetail.commentNum == undefined ? (total || 0) : agencyDetail.commentNum }} 条评价
|
||||
<u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="agency-detail-card" @click="btnxq">
|
||||
|
|
@ -26,6 +46,7 @@
|
|||
</view>
|
||||
<view class="agency-detail-desc" style="margin-top: 24rpx;">{{ lxsobj.description == null ? '暂无简介' : lxsobj.description }}</view>
|
||||
</view>
|
||||
<image @click="btnaddpj" style="width: 120rpx;height: 126rpx;position: fixed;right: 30rpx;top: 50%;z-index: 99;" src="https://api.ccttiot.com/gR560ieYsn1o129725c14b972b2414473797127255c3.png" mode=""></image>
|
||||
<!-- 富文本解析 -->
|
||||
<u-parse v-if="agencyDetail.details" :html="agencyDetail.details" style="width: 660rpx;margin: auto;padding: 20rpx;background-color: #fff;border-radius: 14rpx;"></u-parse>
|
||||
<!-- 导游推荐 -->
|
||||
|
|
@ -62,16 +83,24 @@
|
|||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
// 评价相关
|
||||
count:5,
|
||||
rating:4,
|
||||
agencyDetail: {},
|
||||
id:'',
|
||||
lxsobj:{},
|
||||
lxsdylst:[],
|
||||
fanhui:''
|
||||
fanhui:'',
|
||||
plarr:[],
|
||||
total:0,
|
||||
bqlist:[]
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.getxq()
|
||||
this.getpinlun()
|
||||
this.getbiaoqian()
|
||||
if(option && option.fanhui){
|
||||
this.fanhui = option.fanhui
|
||||
}
|
||||
|
|
@ -92,6 +121,11 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
btnaddpj(){
|
||||
uni.navigateTo({
|
||||
url:'/page_fenbao/daoyou/dypinjia?id=' + this.id
|
||||
})
|
||||
},
|
||||
btnfh(){
|
||||
if(this.fanhui == 1){
|
||||
uni.reLaunch({
|
||||
|
|
@ -167,6 +201,29 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
// 查询导游评价列表（只取一条展示）
|
||||
getpinlun(){
|
||||
this.$u.get(`/app/comment/list?bstId=${this.id}&bstTypes=5&pageNum=1&pageSize=1`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.plarr = res.rows
|
||||
this.total = res.total
|
||||
}
|
||||
})
|
||||
},
|
||||
// 查询导游评价标签
|
||||
getbiaoqian(){
|
||||
this.$u.get(`/app/comment/labelList?bstId=${this.id}&bstType=5`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.bqlist = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击查看更多导游评价
|
||||
btndp(){
|
||||
uni.navigateTo({
|
||||
url:'/page_fenbao/daoyou/dydianpin?id=' + this.id
|
||||
})
|
||||
},
|
||||
|
||||
// 点击查看旅行社详情
|
||||
btnxq(){
|
||||
|
|
@ -354,5 +411,56 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// 评价模块样式
|
||||
.pinlun{
|
||||
width: 710rpx;
|
||||
margin: auto;
|
||||
margin-top: 28rpx;
|
||||
.tit{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #1EC28B;
|
||||
margin-top: 36rpx;
|
||||
.one{
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pinjia{
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.rt{
|
||||
font-size: 24rpx;
|
||||
color: #1EC28B;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.lt{
|
||||
width: 260rpx;
|
||||
height: 56rpx;
|
||||
background: #e6eae7;
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50rpx;
|
||||
.fen{
|
||||
border-radius:50rpx 0 0 50rpx;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #1EC28B;
|
||||
width: 90rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
padding-left: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
508
page_fenbao/daoyou/dydianpin.vue
Normal file
508
page_fenbao/daoyou/dydianpin.vue
Normal file
|
|
@ -0,0 +1,508 @@
|
|||
<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>
|
||||
|
||||
348
page_fenbao/daoyou/dypinjia.vue
Normal file
348
page_fenbao/daoyou/dypinjia.vue
Normal file
|
|
@ -0,0 +1,348 @@
|
|||
<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="tip-bar">
|
||||
<text>提交评价或建议，帮助导游做得更好~</text>
|
||||
</view>
|
||||
<!-- 评价主体 -->
|
||||
<view class="eval-container">
|
||||
<!-- 匿名提交 -->
|
||||
<view class="anonymous-wrap">
|
||||
<text>您对导游满意吗？</text>
|
||||
<u-checkbox
|
||||
v-model="isAnonymous"
|
||||
shape="circle"
|
||||
size="24rpx"
|
||||
label="匿名提交"
|
||||
label-size="26rpx"
|
||||
>匿名提交</u-checkbox>
|
||||
</view>
|
||||
<!-- 商家信息 -->
|
||||
<view class="merchant-info">
|
||||
<image class="merchant-img" v-if="jdobj.photo" :src="jdobj.photo" mode="aspectFill"></image>
|
||||
<image class="merchant-img" v-else src="/static/merchant.png" mode="aspectFill"></image>
|
||||
<text class="merchant-name">{{jdobj.name == undefined ? '--' : jdobj.name}}</text>
|
||||
</view>
|
||||
<!-- 评价主体 -->
|
||||
<view class="eval-container" style="padding: 0;margin: 0;margin-top: 20rpx;">
|
||||
<!-- 修改后的评分项 -->
|
||||
<view class="score-item" v-for="(item, index) in scoreList" :key="index">
|
||||
<text class="score-label">{{ item.label }}</text>
|
||||
<view class="stars-wrap">
|
||||
<u-icon
|
||||
v-for="sIdx in 5"
|
||||
:key="sIdx"
|
||||
name="star-fill"
|
||||
:color="sIdx <= item.score ? '#FFC107' : '#eee'"
|
||||
size="36rpx"
|
||||
@click="setScore(index, sIdx)"
|
||||
class="star"
|
||||
></u-icon>
|
||||
</view>
|
||||
<text class="score-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评价输入 -->
|
||||
<view class="eval-input">
|
||||
<u-icon name="chat" color="#999" size="32rpx"></u-icon>
|
||||
<textarea v-model="contxt" placeholder="说说怎么样，给大家参考" placeholder-style="color:#999"></textarea>
|
||||
</view>
|
||||
<!-- 上传附件 -->
|
||||
<view class="upload-wrap">
|
||||
<view class="upload-item">
|
||||
<view class="" style="position: relative;" v-for="(item,index) in imglist" :key="index">
|
||||
<image :src="item" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" mode="aspectFill"></image>
|
||||
<text @click="btndel(index)" style="font-size: 44rpx;display: block;width: 40rpx;height: 40rpx;color: #fff;background-color: red;position: absolute;right: -20rpx;top: -20rpx;line-height: 40rpx;border-radius: 50%;text-align: center;">×</text>
|
||||
</view>
|
||||
<image @click="getimage" src="https://api.ccttiot.com/smartmeter/img/static/u3z28zohbXoJ5kWcR6X1" style="width: 200rpx;height: 200rpx;filter: grayscale(100%);" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部提交按钮 -->
|
||||
<button class="submit-btn" @click="btntj">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
isAnonymous: false,
|
||||
// 评分数据
|
||||
scoreList: [
|
||||
{ label: '综合', score: 5, text: '非常满意' },
|
||||
// { label: '位置', score: 5, text: '非常满意' },
|
||||
// { label: '设施', score: 5, text: '非常满意' },
|
||||
// { label: '服务', score: 5, text: '非常满意' },
|
||||
// { label: '卫生', score: 5, text: '非常满意' }
|
||||
],
|
||||
id:'',
|
||||
jdobj:{},
|
||||
token:'',
|
||||
imglist:[],
|
||||
contxt:'',
|
||||
jlflag:true
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
console.log(e);
|
||||
this.id = e.id
|
||||
this.getxq()
|
||||
this.getqiniuyun()
|
||||
},
|
||||
methods: {
|
||||
// 点击进行提交
|
||||
btntj(){
|
||||
if(this.contxt == ''){
|
||||
uni.showToast({
|
||||
title: '评价不能为空',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
return
|
||||
}
|
||||
if(this.jlflag == false){
|
||||
return
|
||||
}
|
||||
this.jlflag = false
|
||||
const picture = this.imglist.join(',')
|
||||
let data = {
|
||||
bstType:5,
|
||||
bstId:this.id,
|
||||
content:this.contxt,
|
||||
mediaUrl:picture,
|
||||
rating:this.scoreList[0].score,
|
||||
anonymous:this.isAnonymous,
|
||||
|
||||
}
|
||||
this.$u.post(`/app/comment/add`,data).then(res =>{
|
||||
if(res.code == 200){
|
||||
uni.showToast({
|
||||
title: '评价成功',
|
||||
icon: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack()
|
||||
this.jlflag = true
|
||||
},1500)
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
this.jlflag = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击评分
|
||||
setScore(index, score) {
|
||||
this.scoreList[index].score = score;
|
||||
const textMap = ['非常不满意', '不满意', '一般', '满意', '非常满意'];
|
||||
this.scoreList[index].text = textMap[score];
|
||||
console.log( this.scoreList);
|
||||
},
|
||||
// 查询详情
|
||||
getxq(){
|
||||
this.$u.get(`/app/tourGuide/detail/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.jdobj = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取七牛云上传token
|
||||
getqiniuyun(){
|
||||
this.$u.get("/common/qiniuToken").then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.token = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击删除图片
|
||||
btndel(index){
|
||||
this.imglist.splice(index, 1)
|
||||
},
|
||||
getimage(e){
|
||||
if(this.imglist.length >= 9){
|
||||
return uni.showToast({ title: '最多选择九张图片', icon: 'none',duration:3000 })
|
||||
}
|
||||
let _this = this
|
||||
// 使用 uni.chooseMedia 从手机相册选择图片和视频
|
||||
uni.chooseMedia({
|
||||
count: 9 - this.imglist.length, // 剩余可选择的数量
|
||||
mediaType: ['image'], // 允许选择图片和视频
|
||||
sourceType: ['album', 'camera'], // 允许从相册和相机选择
|
||||
camera: 'back', // 默认后置摄像头
|
||||
success(res) {
|
||||
const tempFiles = res.tempFiles
|
||||
tempFiles.forEach(file => {
|
||||
wx.uploadFile({
|
||||
url: 'https://up-z2.qiniup.com',
|
||||
name: 'file',
|
||||
filePath: file.tempFilePath, //文件路径
|
||||
formData: {
|
||||
token: _this.token, //后端返回的token
|
||||
key:file.tempFilePath //传的文件名称
|
||||
},
|
||||
success: function(res) {
|
||||
let str = JSON.parse(res.data)
|
||||
let fileUrl = 'https://api.ccttiot.com/' + str.key
|
||||
// 添加到媒体列表
|
||||
_this.imglist.push(fileUrl)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.log('选择照片失败:', err)
|
||||
uni.showToast({
|
||||
title: '选择失败',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 提示栏 */
|
||||
.tip-bar {
|
||||
background: #fffbe6;
|
||||
color: #fa8c16;
|
||||
font-size: 30rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
}
|
||||
|
||||
/* 评价主体容器 */
|
||||
.eval-container {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
// box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 匿名提交 */
|
||||
.anonymous-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 商家信息 */
|
||||
.merchant-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
.merchant-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #eee;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.merchant-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* 评分项 */
|
||||
.score-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
.score-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
width: 120rpx;
|
||||
}
|
||||
.stars-wrap {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
.star {
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
// 增加hover效果，提升用户体验
|
||||
&:hover {
|
||||
color: #FFD700 !important; // 悬浮时颜色更亮
|
||||
transform: scale(1.1); // 轻微放大
|
||||
}
|
||||
}
|
||||
}
|
||||
.score-text {
|
||||
font-size: 28rpx;
|
||||
color: #ff9500;
|
||||
font-weight: 500;
|
||||
width: 150rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
/* 评价输入 */
|
||||
.eval-input {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
textarea {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
min-height: 80rpx;
|
||||
}
|
||||
}
|
||||
/* 上传附件 */
|
||||
.upload-wrap {
|
||||
display: flex;
|
||||
gap: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
.upload-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
/* 提交按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #ff9500;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<view class="agency-info">
|
||||
<view class="agency-title">{{ agency.name }}</view>
|
||||
<view class="agency-desc">{{ agency.description == null ? '暂无简介' : agency.description }}</view>
|
||||
<u-rate :count="count" active-color="#FFB400" size="24" inactive-color="#b2b2b2" v-model="agency.rating"></u-rate>
|
||||
<u-rate :count="count" active-color="#FFB400" size="24" inactive-color="#b2b2b2" v-model="agency.averageRating"></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
|
||||
|
|
|
|||
550
page_fenbao/daoyou/lvxingshe-dianpin.vue
Normal file
550
page_fenbao/daoyou/lvxingshe-dianpin.vue
Normal file
|
|
@ -0,0 +1,550 @@
|
|||
<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 class="pinfen">
|
||||
<view class="top">
|
||||
<view class="lt">
|
||||
<view class="ltfen">
|
||||
{{obj.averageRating}}
|
||||
</view>
|
||||
<view class="ltbang">
|
||||
<text class="bang" v-if="obj.averageRating > 4">棒</text>
|
||||
<text class="bang" v-if="obj.averageRating > 3 && obj.averageRating < 4">不错</text>
|
||||
<text class="bang" v-if="obj.averageRating > 2 && obj.averageRating < 3">一般</text>
|
||||
<text class="bang" v-if="obj.averageRating < 2">差</text>
|
||||
<text>高于86%同类旅行社</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rt">
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="tab">
|
||||
<view :class="tabindex == 0 ? 'active' : ''" @click="btntab(0)">
|
||||
全部<text>({{obj.commentCount == undefined ? '--' : obj.commentCount}})</text>
|
||||
</view>
|
||||
<view :class="tabindex == 1 ? 'active' : ''" @click="btntab(1)">
|
||||
有图/视频<text>({{obj.haveMediaCount == undefined ? '--' : obj.haveMediaCount}})</text>
|
||||
</view>
|
||||
<view :class="tabindex == 2 ? 'active' : ''" @click="btntab(2)">
|
||||
低分<text>({{obj.lowRatingCount == undefined ? '--' : obj.lowRatingCount}})</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shuaixuan" v-if="bqlist.length > 0">
|
||||
<view :class="bqindex == index ? 'actives' : '' " v-for="(item,index) in bqlist" :key="index" @click="btnbq(item,index)">
|
||||
{{item.name}} {{item.percent}}%
|
||||
</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/travelAgency/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()
|
||||
}
|
||||
},
|
||||
// 请求旅行社评价标签（bstType=4）
|
||||
getbiaoqian(){
|
||||
this.$u.get(`/app/comment/labelList?bstId=${this.id}&bstType=4`).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()
|
||||
}
|
||||
},
|
||||
// 请求旅行社评价列表（类型 4）
|
||||
getpinlun(){
|
||||
this.$u.get(`/app/comment/list?pageNum=${this.pageNum}&pageSize=20&bstTypes=4&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;
|
||||
.qb{
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 28rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.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>
|
||||
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<view class="agency-detail-info">
|
||||
<view class="agency-detail-title">{{ agencyDetail.name }} <u-icon name="arrow-right" size="28" color="#000"></u-icon> </view>
|
||||
<view class="agency-detail-desc">{{ agencyDetail.description == null ? '暂无简介' : agencyDetail.description }}</view>
|
||||
<u-rate :count="5" active-color="#FFB400" size="24" inactive-color="#b2b2b2" v-model="agencyDetail.rating" readonly></u-rate>
|
||||
<u-rate :count="5" active-color="#FFB400" size="24" inactive-color="#b2b2b2" v-model="agencyDetail.averageRating" readonly></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -35,6 +35,59 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 旅行社评价区域 -->
|
||||
<view class="agency-comment-section">
|
||||
<view class="section-header agency-comment-header">
|
||||
<view class="" style="display: flex;align-items: center;">
|
||||
<view class="green-bar"></view>
|
||||
<text class="section-title">评价（{{ total || 0 }}）</text>
|
||||
</view>
|
||||
<view class="more-comment" @click="btndp">
|
||||
更多评价
|
||||
<u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-list" v-if="plarr.length > 0">
|
||||
<view class="comment-item" v-for="(item, index) in plarr" :key="index">
|
||||
<view class="comment-top">
|
||||
<view class="comment-user">
|
||||
<image class="comment-avatar" :src="item.userAvatar" mode="aspectFill"></image>
|
||||
<view class="comment-user-info">
|
||||
<view class="comment-nickname">
|
||||
{{ item.nickName }}
|
||||
</view>
|
||||
<u-rate :count="5" active-color="#E7322C" size="24" inactive-color="#b2b2b2" v-model="item.rating" readonly></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-time">
|
||||
{{ item.createTime }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-content">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<view class="comment-images" v-if="item.mediaUrl">
|
||||
<image v-for="(val, idx) in item.mediaUrl.split(',')" :key="idx" :src="val" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="comment-all" @click="btndp">
|
||||
全部{{ total }}条评论
|
||||
<u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="no-comment" v-else>
|
||||
暂无评价，快来抢沙发～
|
||||
</view>
|
||||
|
||||
<!-- 写评价悬浮按钮 -->
|
||||
<image
|
||||
class="add-comment-btn"
|
||||
@click="btnaddpj"
|
||||
src="https://api.ccttiot.com/gR560ieYsn1o129725c14b972b2414473797127255c3.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -49,7 +102,9 @@
|
|||
guideList: [],
|
||||
id:'',
|
||||
obj:{},
|
||||
fanhui:''
|
||||
fanhui:'',
|
||||
plarr:[],
|
||||
total:0
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
|
|
@ -57,6 +112,7 @@
|
|||
this.id = option.id
|
||||
this.getxq()
|
||||
this.getdylist()
|
||||
this.getpinlun()
|
||||
if(option && option.fanhui){
|
||||
this.fanhui = option.fanhui
|
||||
}
|
||||
|
|
@ -114,6 +170,27 @@
|
|||
uni.navigateTo({
|
||||
url:'/page_fenbao/daoyou/lvxingshexq?id=' + this.id
|
||||
})
|
||||
},
|
||||
// 查询旅行社评价列表（根据旅行社id，类型为4）
|
||||
getpinlun(){
|
||||
this.$u.get(`/app/comment/list?bstId=${this.id}&bstTypes=4&pageNum=1&pageSize=1`).then((res) => {
|
||||
if(res.code === 200){
|
||||
this.plarr = res.rows || []
|
||||
this.total = res.total || 0
|
||||
}
|
||||
})
|
||||
},
|
||||
// 查看全部评价
|
||||
btndp(){
|
||||
uni.navigateTo({
|
||||
url:'/page_fenbao/daoyou/lvxingshe-dianpin?id=' + this.id
|
||||
})
|
||||
},
|
||||
// 写评价（评价旅行社）
|
||||
btnaddpj(){
|
||||
uni.navigateTo({
|
||||
url:'/page_fenbao/jiudian/addpj?btsid=' + this.id + '&type=4'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -256,4 +333,141 @@
|
|||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 旅行社评价区域样式 */
|
||||
.agency-comment-section {
|
||||
margin: 40rpx 30rpx 40rpx;
|
||||
position: relative;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.agency-comment-header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.more-comment {
|
||||
font-size: 26rpx;
|
||||
color: #1EC28B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-summary {
|
||||
width: 710rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.score-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-weight: 600;
|
||||
font-size: 64rpx;
|
||||
color: #1EC28B;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.score-text text {
|
||||
font-size: 24rpx;
|
||||
color: #606060;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comment-list {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
background: #f3f3f3;
|
||||
border-radius: 20rpx;
|
||||
margin: auto;
|
||||
padding: 32rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.comment-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.comment-nickname {
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
font-size: 26rpx;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 22rpx;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.comment-images {
|
||||
margin-top: 28rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.comment-images image {
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.comment-all {
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 28rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.no-comment {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
color: #ccc;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.add-comment-btn {
|
||||
width: 120rpx;
|
||||
height: 126rpx;
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
bottom: 560rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<view class="info-card">
|
||||
<!-- 评分 -->
|
||||
<view class="rating-section">
|
||||
<u-rate :count="5" active-color="#FFB400" size="32" inactive-color="#E5E5E5" v-model="agencyInfo.rating" readonly></u-rate>
|
||||
<u-rate :count="5" active-color="#FFB400" size="32" inactive-color="#E5E5E5" v-model="agencyInfo.averageRating" readonly></u-rate>
|
||||
</view>
|
||||
<!-- 简介部分 -->
|
||||
<view class="intro-section">
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<!-- 评价输入 -->
|
||||
<view class="eval-input">
|
||||
<u-icon name="chat" color="#999" size="32rpx"></u-icon>
|
||||
<textarea v-model="contxt" placeholder="说说酒店怎么样，给大家参考" placeholder-style="color:#999"></textarea>
|
||||
<textarea v-model="contxt" placeholder="说说怎么样，给大家参考" placeholder-style="color:#999"></textarea>
|
||||
</view>
|
||||
<!-- 上传附件 -->
|
||||
<view class="upload-wrap">
|
||||
|
|
@ -92,6 +92,7 @@
|
|||
],
|
||||
id:'',
|
||||
jdobj:{},
|
||||
bstType:3,
|
||||
token:'',
|
||||
imglist:[],
|
||||
contxt:'',
|
||||
|
|
@ -100,7 +101,14 @@
|
|||
},
|
||||
onLoad(e) {
|
||||
console.log(e);
|
||||
this.id = e.id
|
||||
// 兼容酒店和其它业务类型：优先使用 btsid，其次 id
|
||||
this.id = e.btsid || e.id
|
||||
// 业务类型：默认 3（酒店），旅行社传 4
|
||||
if(e.type){
|
||||
this.bstType = Number(e.type)
|
||||
}else{
|
||||
this.bstType = 3
|
||||
}
|
||||
this.getxq()
|
||||
this.getqiniuyun()
|
||||
},
|
||||
|
|
@ -109,7 +117,7 @@
|
|||
btntj(){
|
||||
if(this.contxt == ''){
|
||||
uni.showToast({
|
||||
title: '酒店评价不能为空',
|
||||
title: '商家评价不能为空',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
|
|
@ -121,7 +129,7 @@
|
|||
this.jlflag = false
|
||||
const picture = this.imglist.join(',')
|
||||
let data = {
|
||||
bstType:3,
|
||||
bstType:this.bstType,
|
||||
bstId:this.id,
|
||||
content:this.contxt,
|
||||
mediaUrl:picture,
|
||||
|
|
@ -162,11 +170,28 @@
|
|||
},
|
||||
// 查询酒店详情
|
||||
getxq(){
|
||||
this.$u.get(`/app/hotel/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.jdobj = res.data
|
||||
}
|
||||
})
|
||||
// 酒店
|
||||
if(this.bstType === 3){
|
||||
this.$u.get(`/app/hotel/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.jdobj = res.data
|
||||
}
|
||||
})
|
||||
// 旅行社
|
||||
}else if(this.bstType === 4){
|
||||
this.$u.get(`/app/travelAgency/detail/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.jdobj = res.data
|
||||
}
|
||||
})
|
||||
// 店铺（特产 / 美食等，类型 2）
|
||||
}else if(this.bstType === 2){
|
||||
this.$u.get(`/app/store/detail/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.jdobj = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取七牛云上传token
|
||||
getqiniuyun(){
|
||||
|
|
|
|||
|
|
@ -14,20 +14,20 @@
|
|||
<view class="top">
|
||||
<view class="lt">
|
||||
<view class="ltfen">
|
||||
{{obj.rating}}
|
||||
{{obj.averageRating}}
|
||||
</view>
|
||||
<view class="ltbang">
|
||||
<text class="bang" v-if="obj.rating > 4">棒</text>
|
||||
<text class="bang" v-if="obj.rating > 3 && obj.rating < 4">不错</text>
|
||||
<text class="bang" v-if="obj.rating > 2 && obj.rating < 3">一般</text>
|
||||
<text class="bang" v-if="obj.rating < 2">差</text>
|
||||
<text class="bang" v-if="obj.averageRating > 4">棒</text>
|
||||
<text class="bang" v-if="obj.averageRating > 3 && obj.averageRating < 4">不错</text>
|
||||
<text class="bang" v-if="obj.averageRating > 2 && obj.averageRating < 3">一般</text>
|
||||
<text class="bang" v-if="obj.averageRating < 2">差</text>
|
||||
<text>高于86%同类酒店</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rt">
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{obj.locationRating == undefined ? '--' : obj.locationRating}}
|
||||
{{obj.averageLocationRating == undefined ? '--' : obj.averageLocationRating}}
|
||||
</view>
|
||||
<view class="">
|
||||
位置
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</view>
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{obj.facilityRating == undefined ? '--' : obj.facilityRating}}
|
||||
{{obj.averageFacilityRating == undefined ? '--' : obj.averageFacilityRating}}
|
||||
</view>
|
||||
<view class="">
|
||||
设施
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</view>
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{obj.serviceRating == undefined ? '--' : obj.serviceRating}}
|
||||
{{obj.averageServiceRating == undefined ? '--' : obj.averageServiceRating}}
|
||||
</view>
|
||||
<view class="">
|
||||
服务
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</view>
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{obj.hygieneRating == undefined ? '--' : obj.hygieneRating}}
|
||||
{{obj.averageHygieneRating == undefined ? '--' : obj.averageHygieneRating}}
|
||||
</view>
|
||||
<view class="">
|
||||
卫生
|
||||
|
|
@ -144,6 +144,7 @@
|
|||
rating:3,
|
||||
count:5,
|
||||
obj:{},
|
||||
bstType:3,
|
||||
pageNum:1,
|
||||
id:'',
|
||||
havePicOrVideo:false,
|
||||
|
|
@ -163,18 +164,37 @@
|
|||
},
|
||||
onLoad(e) {
|
||||
this.id = e.id
|
||||
// 支持按类型区分：酒店=3，旅行社=4，店铺=2（默认3，兼容老入口）
|
||||
this.bstType = e.type ? Number(e.type) : 3
|
||||
this.getxq()
|
||||
this.getpinlun()
|
||||
this.getbiaoqian()
|
||||
},
|
||||
methods: {
|
||||
// 请求酒店详情
|
||||
// 请求商家详情（酒店 / 旅行社 / 店铺）
|
||||
getxq(){
|
||||
this.$u.get(`/app/hotel/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.obj = res.data
|
||||
}
|
||||
})
|
||||
// 酒店
|
||||
if(this.bstType === 3){
|
||||
this.$u.get(`/app/hotel/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.obj = res.data
|
||||
}
|
||||
})
|
||||
// 旅行社
|
||||
}else if(this.bstType === 4){
|
||||
this.$u.get(`/app/travelAgency/detail/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.obj = res.data
|
||||
}
|
||||
})
|
||||
// 店铺（特产 / 美食等）
|
||||
}else if(this.bstType === 2){
|
||||
this.$u.get(`/app/store/detail/${this.id}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.obj = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 上拉加载更多
|
||||
handqixing() {
|
||||
|
|
@ -196,9 +216,9 @@
|
|||
this.getpinlun()
|
||||
}
|
||||
},
|
||||
// 请求酒店标签
|
||||
// 请求标签
|
||||
getbiaoqian(){
|
||||
this.$u.get(`/app/comment/labelList?bstId=${this.id}&bstType=3`).then(res =>{
|
||||
this.$u.get(`/app/comment/labelList?bstId=${this.id}&bstType=${this.bstType}`).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.bqlist = res.data
|
||||
}
|
||||
|
|
@ -315,9 +335,9 @@
|
|||
this.getpinlun()
|
||||
}
|
||||
},
|
||||
// 请求评价列表
|
||||
// 请求评价列表（bstTypes 按类型区分：酒店3 / 旅行社4）
|
||||
getpinlun(){
|
||||
this.$u.get(`/app/comment/list?pageNum=${this.pageNum}&pageSize=20&bstTypes=3&bstId=${this.id}&havePicOrVideo=${this.havePicOrVideo}&maxRating=${this.maxRating}&keyword=${this.searchKeyword}&types=${this.bqname}&sortBy=${this.time_desc}`).then(res =>{
|
||||
this.$u.get(`/app/comment/list?pageNum=${this.pageNum}&pageSize=20&bstTypes=${this.bstType}&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){
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
<view class="hotel-info">
|
||||
<view class="hotel-name">{{ item.name }}</view>
|
||||
<view class="hotel-rating">
|
||||
<view class="rating-score">{{ item.rating != null && item.rating !== '' ? Number(item.rating).toFixed(1) : '--' }}</view>
|
||||
<view class="rating-score">{{ item.averageRating != null && item.averageRating !== '' ? Number(item.averageRating).toFixed(1) : '--' }}</view>
|
||||
<view class="rating-text" v-if="item.tags && item.tags.length > 0" v-for="(val,indexs) in item.tags" :key="indexs">{{val}}</view>
|
||||
</view>
|
||||
<view class="hotel-location">
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
<view class="pinjia">
|
||||
<view class="lt">
|
||||
<view class="fen">
|
||||
{{jdobj.rating == undefined ? '--' : Number(jdobj.rating).toFixed(1)}}
|
||||
{{jdobj.averageRating == undefined ? '--' : Number(jdobj.averageRating).toFixed(1)}}
|
||||
</view>
|
||||
<u-rate :count="count" active-color="#1EC28B" size="24" inactive-color="#b2b2b2" v-model="jdobj.rating - 1"></u-rate>
|
||||
<u-rate :count="count" active-color="#1EC28B" size="24" inactive-color="#b2b2b2" v-model="jdobj.averageRating - 1"></u-rate>
|
||||
</view>
|
||||
<view class="rt" @click="btndp">
|
||||
{{jdobj.commentCount == undefined ? '0' : jdobj.commentCount}}条评价 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon>
|
||||
{{jdobj.commentNum == undefined ? '0' : jdobj.commentNum}}条评价 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sheshi">
|
||||
|
|
@ -102,30 +102,30 @@
|
|||
</view>
|
||||
<view class="pinlun">
|
||||
<view class="tit">
|
||||
<view class="one">评价（{{jdobj.commentCount == undefined ? '0' : jdobj.commentCount}}）</view>
|
||||
<view class="one">评价（{{jdobj.commentNum == undefined ? '0' : jdobj.commentNum}}）</view>
|
||||
<view @click="btndp">更多评价 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon> </view>
|
||||
</view>
|
||||
<view class="pinfen">
|
||||
<view class="top">
|
||||
<view class="lt">
|
||||
<view class="ltfen">
|
||||
{{jdobj.rating == undefined ? '--' : Number(jdobj.rating).toFixed(1)}}
|
||||
{{jdobj.averageRating == undefined ? '--' : Number(jdobj.averageRating).toFixed(1)}}
|
||||
</view>
|
||||
<view class="ltbang">
|
||||
<text class="bang" v-if="jdobj.rating > 4">棒</text>
|
||||
<text class="bang" v-if="jdobj.rating > 3 && jdobj.rating < 4">不错</text>
|
||||
<text class="bang" v-if="jdobj.rating > 2 && jdobj.rating < 3">一般</text>
|
||||
<text class="bang" v-if="jdobj.rating < 2">差</text>
|
||||
<text v-if="jdobj.rating > 4.5">高于99%同类酒店</text>
|
||||
<text v-if="jdobj.rating > 3 && jdobj.rating < 4">高于91.8%同类酒店</text>
|
||||
<text v-if="jdobj.rating > 2 && jdobj.rating < 3">高于89.7%同类酒店</text>
|
||||
<text v-if="jdobj.rating < 2">高于82.9%同类酒店</text>
|
||||
<text class="bang" v-if="jdobj.averageRating > 4">棒</text>
|
||||
<text class="bang" v-if="jdobj.averageRating > 3 && jdobj.averageRating < 4">不错</text>
|
||||
<text class="bang" v-if="jdobj.averageRating > 2 && jdobj.averageRating < 3">一般</text>
|
||||
<text class="bang" v-if="jdobj.averageRating < 2">差</text>
|
||||
<text v-if="jdobj.averageRating > 4.5">高于99%同类酒店</text>
|
||||
<text v-if="jdobj.averageRating > 3 && jdobj.averageRating < 4">高于91.8%同类酒店</text>
|
||||
<text v-if="jdobj.averageRating > 2 && jdobj.averageRating < 3">高于89.7%同类酒店</text>
|
||||
<text v-if="jdobj.averageRating < 2">高于82.9%同类酒店</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rt">
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{jdobj.locationRating == undefined ? '--' : Number(jdobj.locationRating).toFixed(1)}}
|
||||
{{jdobj.averageLocationRating == undefined ? '--' : Number(jdobj.averageLocationRating).toFixed(1)}}
|
||||
</view>
|
||||
<view class="">
|
||||
位置
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
</view>
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{jdobj.facilityRating == undefined ? '--' : Number(jdobj.facilityRating).toFixed(1)}}
|
||||
{{jdobj.averageFacilityRating == undefined ? '--' : Number(jdobj.averageFacilityRating).toFixed(1)}}
|
||||
</view>
|
||||
<view class="">
|
||||
设施
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
</view>
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{jdobj.serviceRating == undefined ? '--' : Number(jdobj.serviceRating).toFixed(1)}}
|
||||
{{jdobj.averageServiceRating == undefined ? '--' : Number(jdobj.averageServiceRating).toFixed(1)}}
|
||||
</view>
|
||||
<view class="">
|
||||
服务
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
</view>
|
||||
<view class="oen">
|
||||
<view class="fen">
|
||||
{{jdobj.hygieneRating == undefined ? '--' : Number(jdobj.hygieneRating).toFixed(1)}}
|
||||
{{jdobj.averageHygieneRating == undefined ? '--' : Number(jdobj.averageHygieneRating).toFixed(1)}}
|
||||
</view>
|
||||
<view class="">
|
||||
卫生
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
<view class="merchant-right">
|
||||
<view class="merchant-title">{{ merchant.name }}</view>
|
||||
<view class="merchant-rating">
|
||||
<text class="rating-score">{{ merchant.rating ? merchant.rating.toFixed(1) : '-' }}</text>
|
||||
<text class="rating-score">{{ merchant.averageRating ? merchant.averageRating.toFixed(1) : '-' }}</text>
|
||||
<!-- <text class="rating-star">★</text>
|
||||
<text class="rating-count">{{ merchant.commentCount || 0 }}条评价</text> -->
|
||||
<text class="price">¥{{ merchant.capita || '-' }}/人</text>
|
||||
|
|
@ -152,14 +152,6 @@
|
|||
this.$u.get(`app/store/list?pageNum=1&pageSize=999&dishIds=${this.id}`).then((res) => {
|
||||
if(res.code == 200){
|
||||
this.merchantList = res.rows
|
||||
// this.total = res.total
|
||||
// if(this.pageNum == 1){
|
||||
// this.pageNum++
|
||||
|
||||
// }else{
|
||||
// this.pageNum++
|
||||
// this.merchantList = this.merchantList.concat(res.rows)
|
||||
// }
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -179,22 +171,6 @@
|
|||
uni.navigateTo({
|
||||
url:'/page_user/techan/techandp?id=' + merchant.id + '&type=1'
|
||||
})
|
||||
// uni.openLocation({
|
||||
// latitude: parseFloat(merchant.areaLat), // 确保是数字类型
|
||||
// longitude: parseFloat(merchant.areaLon), // 确保是数字类型
|
||||
// name: merchant.address || '目的地', // 地点名称
|
||||
// success: function(res) {
|
||||
// console.log('打开地图成功', res);
|
||||
// },
|
||||
// fail: function(err) {
|
||||
// console.error('打开地图失败', err);
|
||||
// uni.showToast({
|
||||
// title: '打开地图失败: ' + (err.errMsg || '未知错误'),
|
||||
// icon: 'none',
|
||||
// duration: 3000
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
515
page_user/techan/techandp-dianpin.vue
Normal file
515
page_user/techan/techandp-dianpin.vue
Normal file
|
|
@ -0,0 +1,515 @@
|
|||
<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/store/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()
|
||||
}
|
||||
},
|
||||
// 请求店铺评价标签（bstType=2）
|
||||
getbiaoqian(){
|
||||
this.$u.get(`/app/comment/labelList?bstId=${this.id}&bstType=2`).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()
|
||||
}
|
||||
},
|
||||
// 请求店铺评价列表（类型 2）
|
||||
getpinlun(){
|
||||
this.$u.get(`/app/comment/list?pageNum=${this.pageNum}&pageSize=20&bstTypes=2&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: 57vh;
|
||||
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;
|
||||
.qb{
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 28rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.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>
|
||||
|
||||
|
|
@ -14,10 +14,16 @@
|
|||
<view class="xiao">
|
||||
地址：{{obj.address}}
|
||||
</view>
|
||||
<!-- 操作区域：导航 / 打电话，紧凑文字按钮样式 -->
|
||||
<view class="liat">
|
||||
<image @click="btndh" src="https://api.ccttiot.com/smartmeter/img/static/u8ItYUuDcFXMAe4xGutU" mode=""></image>
|
||||
<image @click="btntel" src="https://api.ccttiot.com/smartmeter/img/static/uJph4gXvhIFYLsExnUYF" mode=""></image>
|
||||
<!-- <image src="" mode=""></image> -->
|
||||
<view class="liat-btn" @click="btndh">
|
||||
<u-icon name="map" size="32" color="#1EC28B"></u-icon>
|
||||
<text>导航</text>
|
||||
</view>
|
||||
<view class="liat-btn" @click="btntel">
|
||||
<u-icon name="phone" size="32" color="#1EC28B"></u-icon>
|
||||
<text>打电话</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="haowu">
|
||||
{{tyep == 1 ? '精选美食' : '精选好物'}}
|
||||
|
|
@ -29,6 +35,48 @@
|
|||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 店铺评价区域 -->
|
||||
<view class="store-comment-section">
|
||||
<view class="store-comment-header">
|
||||
<view class="left">
|
||||
<view class="title">评价（{{ total || (obj.commentNum || 0) }}）</view>
|
||||
<view class="score" v-if="obj.averageRating">
|
||||
<text class="score-num">{{ Number(obj.averageRating).toFixed(1) }}</text>
|
||||
<u-rate :count="5" active-color="#1EC28B" size="22" inactive-color="#b2b2b2" v-model="obj.averageRating" readonly></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="right" @click="btndp">
|
||||
更多评价
|
||||
<u-icon name="arrow-right" size="26" color="#1EC28B"></u-icon>
|
||||
</view> -->
|
||||
<view class="store-comment-add" @click="btnaddpj">
|
||||
写评价
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-comment-list" v-if="plarr.length > 0">
|
||||
<view class="store-comment-item" v-for="(item,index) in plarr" :key="index">
|
||||
<view class="item-top">
|
||||
<view class="user">
|
||||
<image class="avatar" :src="item.userAvatar" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
<view class="name">{{item.nickName}}</view>
|
||||
<u-rate :count="5" active-color="#E7322C" size="22" inactive-color="#b2b2b2" v-model="item.rating" readonly></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">{{item.createTime}}</view>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
{{item.content}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-comment-empty" v-else>
|
||||
暂无评价，快来写第一条吧～
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -46,7 +94,9 @@
|
|||
obj:{},
|
||||
type:'',
|
||||
lists:[],
|
||||
fanhui:''
|
||||
fanhui:'',
|
||||
plarr:[],
|
||||
total:0
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
|
|
@ -55,6 +105,7 @@
|
|||
this.type = e.type
|
||||
}
|
||||
this.getdianpu()
|
||||
this.getpinlun()
|
||||
if(e && e.fanhui){
|
||||
this.fanhui = e.fanhui
|
||||
}
|
||||
|
|
@ -163,6 +214,27 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
// 查询店铺评价（类型 2，取一条展示）
|
||||
getpinlun(){
|
||||
this.$u.get(`/app/comment/list?bstId=${this.id}&bstTypes=2&pageNum=1&pageSize=1`).then((res) => {
|
||||
if(res.code === 200){
|
||||
this.plarr = res.rows || []
|
||||
this.total = res.total || 0
|
||||
}
|
||||
})
|
||||
},
|
||||
// 查看更多评价列表
|
||||
btndp(){
|
||||
uni.navigateTo({
|
||||
url:'/page_user/techan/techandp-dianpin?id=' + this.id
|
||||
})
|
||||
},
|
||||
// 写评价
|
||||
btnaddpj(){
|
||||
uni.navigateTo({
|
||||
url:'/page_fenbao/jiudian/addpj?btsid=' + this.id + '&type=2'
|
||||
})
|
||||
},
|
||||
// 点击精选好物跳转详情
|
||||
btnhw(item){
|
||||
uni.navigateTo({
|
||||
|
|
@ -175,16 +247,15 @@
|
|||
<style lang="less">
|
||||
::v-deep .u-icon__icon,
|
||||
::v-deep .u-title{
|
||||
padding-bottom: 22rpx !important;
|
||||
// padding-bottom: 22rpx !important;
|
||||
}
|
||||
.box{
|
||||
width: 750rpx;
|
||||
overflow: hidden;
|
||||
height: 59vh;
|
||||
background: #FFFFFF;
|
||||
border-radius:50rpx 50rpx 0 0;
|
||||
position: relative;
|
||||
top: -100rpx;
|
||||
top: -160rpx;
|
||||
overflow: hidden;
|
||||
padding-bottom: 30rpx;
|
||||
padding: 36rpx 48rpx;
|
||||
|
|
@ -195,7 +266,6 @@
|
|||
overflow: scroll;
|
||||
width: 750rpx;
|
||||
padding-right: 80rpx;
|
||||
padding-bottom: 30rpx;
|
||||
.hwitem{
|
||||
width: 200rpx;
|
||||
image{
|
||||
|
|
@ -221,13 +291,21 @@
|
|||
}
|
||||
.liat{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 122rpx;
|
||||
margin-top: 68rpx;
|
||||
padding-left: 38rpx;
|
||||
image{
|
||||
width: 112rpx;
|
||||
height: 166rpx;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 24rpx;
|
||||
gap: 32rpx;
|
||||
.liat-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #F5F5F5;
|
||||
font-size: 26rpx;
|
||||
color: #1EC28B;
|
||||
text{
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.name{
|
||||
|
|
@ -241,6 +319,96 @@
|
|||
color: #3D3D3D;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
/* 店铺评价区域 */
|
||||
.store-comment-section{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.store-comment-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left{
|
||||
.title{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.score{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.score-num{
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
color: #1EC28B;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
font-size: 26rpx;
|
||||
color: #1EC28B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.store-comment-list{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.store-comment-item{
|
||||
background: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.info{
|
||||
.name{
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-content{
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #3D3D3D;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.store-comment-empty{
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
.store-comment-add{
|
||||
margin-top: 20rpx;
|
||||
align-self: flex-start;
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #1EC28B;
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.bj{
|
||||
width: 750rpx;
|
||||
|
|
|
|||
28
pages.json
28
pages.json
|
|
@ -121,6 +121,13 @@
|
|||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "techan/techandp-dianpin",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "techan/techansp",
|
||||
"style": {
|
||||
|
|
@ -235,6 +242,27 @@
|
|||
"root": "page_fenbao",
|
||||
"pages": [
|
||||
{
|
||||
"path": "daoyou/dypinjia",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "daoyou/dydianpin",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "daoyou/lvxingshe-dianpin",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "zixunbao/huodongxq",
|
||||
"style": {
|
||||
"navigationBarTitleText": "上传",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user