292 lines
7.6 KiB
Vue
292 lines
7.6 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='40' id="navbar" :custom-back="btnfh">
|
|
</u-navbar>
|
|
<view class="" v-if="dongtaiflag == false">
|
|
<!-- 顶部大图 -->
|
|
<view class="hero">
|
|
<image class="hero-img" :src="spotObj.picture || '/static/image/a1.png'" mode="aspectFill" style="width: 100%; height: 420rpx;"></image>
|
|
</view>
|
|
|
|
<!-- 基本信息 -->
|
|
<view class="base-info">
|
|
<view class="title-row">
|
|
<view class="left">
|
|
<view class="name">{{spotObj.name || '--'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小节：景点简介 -->
|
|
<view class="section-block" v-if="spotObj.description">
|
|
<view class="section-hd"><text class="dot"></text><text class="txt">景点简介</text></view>
|
|
<view class="para">
|
|
<u-parse :html="spotObj.description" ></u-parse>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小节：推荐理由 -->
|
|
<view class="section-block" v-if="spotObj.reason">
|
|
<view class="section-hd"><text class="dot"></text><text class="txt">推荐理由</text></view>
|
|
<view class="para">
|
|
{{spotObj.reason}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小节：开放时间 -->
|
|
<view class="section-block" v-if="spotObj.startTime || spotObj.endTime">
|
|
<view class="section-hd"><text class="dot"></text><text class="txt">开放时间</text></view>
|
|
<view class="para">
|
|
每日{{spotObj.startTime || '--'}} - {{spotObj.endTime || '--'}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小节：地址信息 -->
|
|
<view class="section-block" v-if="spotObj.address">
|
|
<view class="section-hd"><text class="dot"></text><text class="txt">地址信息</text></view>
|
|
<view class="para">
|
|
{{spotObj.address}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 地图：展示景点位置，点击跳转导航 -->
|
|
<view class="section-block map-wrap" v-if="spotObj.latitude && spotObj.longitude">
|
|
<map
|
|
class="spot-map"
|
|
:latitude="Number(spotObj.latitude)"
|
|
:longitude="Number(spotObj.longitude)"
|
|
:scale="15"
|
|
:markers="mapMarkers"
|
|
@tap="btndh"
|
|
show-location
|
|
/>
|
|
</view>
|
|
</view>
|
|
<image v-else style="width: 100%;height: 100vh;position: fixed;top: 160rpx;left: 0;z-index: 999;" src="https://api.ccttiot.com/mgV9maxWGSQb6aa145cf863980513eecdf75080f75a0.png" mode=""></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
id:'',
|
|
spotObj:{},
|
|
dongtaiflag:false,
|
|
fanhui:''
|
|
}
|
|
},
|
|
computed: {
|
|
mapMarkers() {
|
|
if (!this.spotObj.latitude || !this.spotObj.longitude) return []
|
|
return [{
|
|
id: 1,
|
|
latitude: Number(this.spotObj.latitude),
|
|
longitude: Number(this.spotObj.longitude),
|
|
title: this.spotObj.name || '景点位置',
|
|
width: 20,
|
|
height: 30
|
|
}]
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
this.getxq()
|
|
if(option.fanhui){
|
|
this.fanhui = option.fanhui
|
|
}
|
|
},
|
|
// 分享到好友（会话）
|
|
onShareAppMessage: function() {
|
|
return {
|
|
title: '玩转福鼎',
|
|
path: '/page_fenbao/gonglue/jingdianxq?id=' + this.id + '&fanhui=1'
|
|
}
|
|
},
|
|
// 分享到朋友圈
|
|
onShareTimeline: function() {
|
|
return {
|
|
title: '玩转福鼎',
|
|
query: '',
|
|
path: '/page_fenbao/gonglue/jingdianxq?id=' + this.id + '&fanhui=1'
|
|
}
|
|
},
|
|
methods: {
|
|
btnfh(){
|
|
console.log(this.fanhui,'000');
|
|
if(this.fanhui == 1){
|
|
uni.reLaunch({
|
|
url:'/pages/index/index'
|
|
})
|
|
}else{
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
// 点击进行收藏
|
|
btnscqd(){
|
|
let data = {
|
|
bstType:2,
|
|
bstId:this.id
|
|
}
|
|
this.$u.post(`/app/favorite/add`,data).then(res =>{
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '收藏成功',
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
this.spotObj.isCollected = true
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration:3000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 点击进行取消收藏
|
|
btnscqx(){
|
|
this.$u.delete(`/app/favorite/cancel/${this.id}?bstType=2`).then(res =>{
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '取消收藏成功',
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
this.spotObj.isCollected = false
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration:3000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 点击进行导航
|
|
btndh(){
|
|
// 检查坐标数据是否存在
|
|
if (!this.spotObj.latitude || !this.spotObj.longitude) {
|
|
uni.showToast({
|
|
title: '坐标数据不完整',
|
|
icon: 'none',
|
|
duration:3000
|
|
})
|
|
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.spotObj.latitude), // 确保是数字类型
|
|
longitude: parseFloat(this.spotObj.longitude), // 确保是数字类型
|
|
name: this.spotObj.name || '目的地', // 地点名称
|
|
success: function(res) {
|
|
console.log('打开地图成功', res);
|
|
},
|
|
fail: function(err) {
|
|
console.error('打开地图失败', err);
|
|
uni.showToast({
|
|
title: '打开地图失败: ' + (err.errMsg || '未知错误'),
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 请求景点详情
|
|
getxq(){
|
|
this.$u.get(`/app/scenicSpot/${this.id}`).then((res) => {
|
|
if(res.code == 200){
|
|
this.spotObj = res.data
|
|
this.dongtaiflag = false
|
|
}else if(res.msg == '景点不存在' || res.code != 200){
|
|
this.dongtaiflag = true
|
|
}
|
|
}).catch(err => {
|
|
console.error('请求景点详情失败', err)
|
|
this.dongtaiflag = true
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page { background: #fff; }
|
|
.page { background: #fff; min-height: 100vh; }
|
|
/* 顶部大图 */
|
|
.hero { width: 100%; height: 420rpx; overflow: hidden;
|
|
position: relative;
|
|
.sc{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
}}
|
|
.hero-img { width: 100%; height: 100%; }
|
|
/* 基本信息 */
|
|
.base-info {
|
|
padding: 30rpx;
|
|
.title-row {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
.left {
|
|
.name { font-size: 52rpx; font-weight: 700; color: #262B37; }
|
|
.meta { margin-top: 8rpx; font-size: 28rpx; color: #3D3D3D; }
|
|
}
|
|
.actions { display: flex; gap: 30rpx;align-items: flex-end; }
|
|
}
|
|
}
|
|
/* 区块标题 */
|
|
.section-block { padding: 10rpx 20rpx 20rpx; }
|
|
.section-hd { display: flex; align-items: center; gap: 12rpx; margin: 18rpx 2rpx; }
|
|
.section-hd .dot { width: 8rpx; height: 28rpx; background: #111827; border-radius: 4rpx; }
|
|
.section-hd .txt { font-size: 36rpx; font-weight: 800; color: #111827; }
|
|
.para {
|
|
font-size: 28rpx;
|
|
color: #4b5563;
|
|
line-height: 1.8;
|
|
margin-top: 12rpx;
|
|
padding: 20rpx;
|
|
background: #f8f9fb;
|
|
border-radius: 12rpx;
|
|
}
|
|
/* 地图区域 */
|
|
.map-wrap { padding: 10rpx 20rpx 20rpx; }
|
|
.spot-map {
|
|
width: 710rpx;
|
|
height: 360rpx;
|
|
border-radius: 12rpx;
|
|
margin-top: 12rpx;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|