234 lines
6.7 KiB
Vue
234 lines
6.7 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">
|
|
</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>
|
|
<!-- <image class="sc" @click="btnscqx" v-if="spotObj.isCollected == true" src="https://api.ccttiot.com/smartmeter/img/static/uREVO9VLwercFEWbnurd" mode=""></image>
|
|
<image class="sc" @click="btnscqd" v-else src="https://api.ccttiot.com/smartmeter/img/static/ukfmNwl4GOF4v090KRqy" mode=""></image> -->
|
|
</view>
|
|
|
|
<!-- 基本信息 -->
|
|
<view class="base-info">
|
|
<view class="title-row">
|
|
<view class="left">
|
|
<view class="name">{{spotObj.name || '--'}}</view>
|
|
<view class="meta" v-if="spotObj.address">{{spotObj.address}}</view>
|
|
</view>
|
|
<view class="actions" v-if="spotObj.latitude && spotObj.longitude">
|
|
<image @click="btndh" src="https://api.ccttiot.com/smartmeter/img/static/uFDC6JRPVkfL2PYrRlz0" style="width: 54rpx;height: 52rpx;" mode=""></image>
|
|
</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">
|
|
{{spotObj.description}}
|
|
</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>
|
|
<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
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
this.getxq()
|
|
},
|
|
methods: {
|
|
// 点击进行收藏
|
|
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;
|
|
}
|
|
</style>
|
|
|