roamfuding-xcx/page_user/techan/techandp.vue

423 lines
9.7 KiB
Vue
Raw Normal View History

2025-12-20 14:32:28 +08:00
<template>
<view class="page">
<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
2026-03-16 10:00:58 +08:00
title-size='36' height='46' id="navbar" :custom-back="btnfh">
2025-12-20 14:32:28 +08:00
</u-navbar>
<u-swiper class="bj" :height="582" bg-color="#fff" :list="list"></u-swiper>
<view class="box">
<view class="name">
{{obj.name}}
</view>
<view class="xiao">
营业时间{{obj.startTime}}-{{obj.endTime}}
</view>
<view class="xiao">
地址{{obj.address}}
</view>
2026-03-26 17:47:52 +08:00
<!-- 操作区域导航 / 打电话紧凑文字按钮样式 -->
2025-12-20 14:32:28 +08:00
<view class="liat">
2026-03-26 17:47:52 +08:00
<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>
2025-12-20 14:32:28 +08:00
</view>
<view class="haowu">
2026-03-16 10:00:58 +08:00
{{tyep == 1 ? '精选美食' : '精选好物'}}
2025-12-20 14:32:28 +08:00
</view>
<view class="hwlist">
2026-03-16 10:00:58 +08:00
<view class="hwitem" v-for="(item,index) in lists" :key="index" @click="btnhw(item)">
<image v-if="type == 1" :src="item.imageUrl ? item.imageUrl.split(',')[0] : item.imageUrl" mode="aspectFill"></image>
<image v-else :src="item.picture ? item.picture.split(',')[0] : item.picture" mode="aspectFill"></image>
2025-12-20 14:32:28 +08:00
<text>{{item.name}}</text>
</view>
</view>
2026-03-26 17:47:52 +08:00
<!-- 店铺评价区域 -->
<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>
2025-12-20 14:32:28 +08:00
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
id:'',
list:[],
2026-03-16 10:00:58 +08:00
obj:{},
type:'',
lists:[],
2026-03-26 17:47:52 +08:00
fanhui:'',
plarr:[],
total:0
2025-12-20 14:32:28 +08:00
}
},
onLoad(e) {
this.id = e.id
2026-03-16 10:00:58 +08:00
if(e.type){
this.type = e.type
}
2025-12-20 14:32:28 +08:00
this.getdianpu()
2026-03-26 17:47:52 +08:00
this.getpinlun()
2026-03-16 10:00:58 +08:00
if(e && e.fanhui){
this.fanhui = e.fanhui
}
},
// 分享到好友(会话)
onShareAppMessage: function() {
return {
title: '玩转福鼎',
path: '/page_user/techan/techandp?id=' + this.id + (this.type ? '&type=' + this.type : '') + '&fanhui=1'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '玩转福鼎',
query: '',
path: '/page_user/techan/techandp?id=' + this.id + (this.type ? '&type=' + this.type : '') + '&fanhui=1'
}
2025-12-20 14:32:28 +08:00
},
methods: {
2026-03-16 10:00:58 +08:00
btnfh(){
if(this.fanhui == 1){
uni.reLaunch({
url:'/pages/index/index'
})
}else{
uni.navigateBack()
}
},
2025-12-20 14:32:28 +08:00
// 点击拨打电话
btntel(){
uni.makePhoneCall({
phoneNumber: this.obj.contactMobile,
success: function(res) {
console.log('拨打电话成功', res)
},
fail: function(err) {
console.error('拨打电话失败', err)
}
})
},
// 点击进行导航
btndh(){
if (!this.obj.latitude || !this.obj.longitude) {
uni.showToast({
title: '坐标数据不完整',
icon: 'none',
2026-03-16 10:00:58 +08:00
duration:5000
2025-12-20 14:32:28 +08:00
})
return
}
uni.getSetting({
success: (res) => {
if (res.authSetting['scope.userLocation'] === false) {
uni.showModal({
title: '位置权限',
content: '需要获取您的位置信息才能进行导航,请在设置中开启位置权限',
confirmText: '去设置',
success: (modalRes) => {
if (modalRes.confirm) {
uni.openSetting()
}
}
})
return
}
this.openMap()
}
})
},
// 打开地图
openMap() {
uni.openLocation({
latitude: parseFloat(this.obj.latitude), // 确保是数字类型
longitude: parseFloat(this.obj.longitude), // 确保是数字类型
name: this.obj.name || '目的地', // 地点名称
success: function(res) {
console.log('打开地图成功', res)
},
fail: function(err) {
console.error('打开地图失败', err)
uni.showToast({
title: '打开地图失败: ' + (err.errMsg || '未知错误'),
icon: 'none',
duration: 3000
})
}
})
},
// 请求店铺详情
getdianpu(){
this.$u.get(`/app/store/detail/${this.id}`).then((res) => {
if(res.code == 200){
this.obj = res.data
2026-03-16 10:00:58 +08:00
if(this.type == 1){
this.lists = res.data.dishes
}else{
this.lists = res.data.specialties
}
2025-12-20 14:32:28 +08:00
let imgArray = res.data.picture.split(',')
imgArray.forEach(item =>{
this.list.push({
image: item
})
})
}
})
},
2026-03-26 17:47:52 +08:00
// 查询店铺评价(类型 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'
})
},
2025-12-20 14:32:28 +08:00
// 点击精选好物跳转详情
btnhw(item){
uni.navigateTo({
2026-03-16 10:00:58 +08:00
url:'/page_user/techan/techansp?id=' + item.id + '&type=' + this.type
2025-12-20 14:32:28 +08:00
})
}
}
}
</script>
<style lang="less">
::v-deep .u-icon__icon,
::v-deep .u-title{
2026-03-26 17:47:52 +08:00
// padding-bottom: 22rpx !important;
2025-12-20 14:32:28 +08:00
}
.box{
width: 750rpx;
height: 59vh;
background: #FFFFFF;
border-radius:50rpx 50rpx 0 0;
position: relative;
2026-03-26 17:47:52 +08:00
top: -160rpx;
2026-03-16 10:00:58 +08:00
overflow: hidden;
2025-12-20 14:32:28 +08:00
padding-bottom: 30rpx;
padding: 36rpx 48rpx;
.hwlist{
display: flex;
gap: 30rpx;
margin-top: 26rpx;
overflow: scroll;
width: 750rpx;
padding-right: 80rpx;
.hwitem{
width: 200rpx;
image{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
text{
font-weight: 600;
font-size: 30rpx;
color: #3D3D3D;
display: block;
margin-top: 16rpx;
text-align: center;
}
}
}
.haowu{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
margin-top: 56rpx;
}
.liat{
display: flex;
2026-03-26 17:47:52 +08:00
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;
}
2025-12-20 14:32:28 +08:00
}
}
.name{
font-weight: 600;
font-size: 48rpx;
color: #3D3D3D;
margin-bottom: 14rpx;
}
.xiao{
font-size: 28rpx;
color: #3D3D3D;
margin-top: 16rpx;
}
2026-03-26 17:47:52 +08:00
/* 店铺评价区域 */
.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;
}
2025-12-20 14:32:28 +08:00
}
.bj{
width: 750rpx;
height: 582rpx;
}
page {
background: #fff;
height: 100vh;
overflow: hidden;
}
</style>