walkInto界面设计1.1
This commit is contained in:
minimaxagent1
parent
2ef461a21d
commit
1538ad4c85
|
|
@ -1,4 +1,4 @@
|
|||
<template>
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 使用自定义导航栏组件 -->
|
||||
<custom-navbar title="走进平山" />
|
||||
|
|
@ -12,27 +12,28 @@
|
|||
<view class="contact-info" v-if="templeInfo.phone || templeInfo.address">
|
||||
<view class="contact-item" v-if="templeInfo.phone">
|
||||
<text class="contact-label">电话：</text>
|
||||
<text class="contact-value">{{ templeInfo.phone }}</text>
|
||||
<text class="contact-value" @click="callPhone">{{ templeInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="contact-item" v-if="templeInfo.address">
|
||||
<view class="contact-item" v-if="templeInfo.address" @click="openMap">
|
||||
<text class="contact-label">地址：</text>
|
||||
<text class="contact-value">{{ templeInfo.address }}</text>
|
||||
<image class="nav-arrow" :src="CommonEnum.NAV_ARROW" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
<script>
|
||||
import {
|
||||
CommonEnum
|
||||
} from '@/enum/common.js'
|
||||
import {
|
||||
} from '@/enum/common.js'
|
||||
import {
|
||||
getTempleInfo
|
||||
} from '@/api/walkInto/walkInto.js'
|
||||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||||
} from '@/api/walkInto/walkInto.js'
|
||||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
CustomNavbar
|
||||
},
|
||||
|
|
@ -48,7 +49,9 @@ export default {
|
|||
address: '',
|
||||
phone: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
endTime: '',
|
||||
lon: null,
|
||||
lat: null
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
|
|
@ -113,30 +116,164 @@ export default {
|
|||
|
||||
return text.trim();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
// 拨打电话
|
||||
callPhone() {
|
||||
if (this.templeInfo.phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.templeInfo.phone,
|
||||
success: () => {
|
||||
console.log('拨打电话成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('拨打电话失败:', err)
|
||||
uni.showToast({
|
||||
title: '拨打电话失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 打开地图
|
||||
openMap() {
|
||||
if (this.templeInfo.address && this.templeInfo.lon && this.templeInfo.lat) {
|
||||
// #ifdef H5
|
||||
// H5环境下使用地址搜索
|
||||
this.openMapByAddress()
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
// 非H5环境下使用经纬度打开地图
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(this.templeInfo.lat),
|
||||
longitude: parseFloat(this.templeInfo.lon),
|
||||
name: this.templeInfo.name || '寺庙',
|
||||
address: this.templeInfo.address,
|
||||
success: () => {
|
||||
console.log('打开地图成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('打开地图失败:', err)
|
||||
// 如果经纬度打开失败，尝试使用地址搜索
|
||||
this.openMapByAddress()
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
} else if (this.templeInfo.address) {
|
||||
// 只有地址，使用地址搜索
|
||||
this.openMapByAddress()
|
||||
}
|
||||
},
|
||||
|
||||
// 使用地址打开地图
|
||||
openMapByAddress() {
|
||||
// #ifdef H5
|
||||
// H5环境下提供多个地图选项
|
||||
uni.showActionSheet({
|
||||
itemList: ['复制地址', '百度地图', '高德地图', '腾讯地图'],
|
||||
success: (res) => {
|
||||
switch (res.tapIndex) {
|
||||
case 0:
|
||||
// 复制地址
|
||||
this.copyAddress()
|
||||
break
|
||||
case 1:
|
||||
// 百度地图
|
||||
this.openBaiduMap()
|
||||
break
|
||||
case 2:
|
||||
// 高德地图
|
||||
this.openGaodeMap()
|
||||
break
|
||||
case 3:
|
||||
// 腾讯地图
|
||||
this.openTencentMap()
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
// 非H5环境下直接复制地址
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否复制地址到剪贴板？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.copyAddress()
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
|
||||
// 复制地址
|
||||
copyAddress() {
|
||||
uni.setClipboardData({
|
||||
data: this.templeInfo.address,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '地址已复制',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '复制失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 打开百度地图
|
||||
openBaiduMap() {
|
||||
const address = encodeURIComponent(this.templeInfo.address)
|
||||
const url = `https://api.map.baidu.com/geocoder?address=${address}&output=html&src=webapp.baidu.openAPIdemo`
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
|
||||
// 打开高德地图
|
||||
openGaodeMap() {
|
||||
const address = encodeURIComponent(this.templeInfo.address)
|
||||
const url = `https://uri.amap.com/search?query=${address}`
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
|
||||
// 打开腾讯地图
|
||||
openTencentMap() {
|
||||
const address = encodeURIComponent(this.templeInfo.address)
|
||||
const url = `https://apis.map.qq.com/uri/v1/search?keyword=${address}&referer=myapp`
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
background: #F5F0E7;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
.header {
|
||||
margin: 26rpx 28rpx;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding-bottom: rpx;
|
||||
padding-bottom: 40rpx;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.temple-image {
|
||||
.temple-image {
|
||||
width: 610rpx;
|
||||
height: 324rpx;
|
||||
background: #D8D8D8; /* 灰色占位背景 */
|
||||
|
|
@ -144,15 +281,15 @@ export default {
|
|||
display: block;
|
||||
margin: 34rpx auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.temple-info {
|
||||
.temple-info {
|
||||
width: 100%;
|
||||
padding: 24rpx 42rpx;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.temple-desc {
|
||||
.temple-desc {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
|
|
@ -163,38 +300,43 @@ export default {
|
|||
text-transform: none;
|
||||
white-space: pre-line; /* 保留换行符 */
|
||||
word-wrap: break-word; /* 长单词换行 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 联系信息样式 */
|
||||
.contact-info {
|
||||
/* 联系信息样式 */
|
||||
.contact-info {
|
||||
margin-top: 40rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-item:last-child {
|
||||
.contact-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
.contact-label {
|
||||
font-size: 28rpx;
|
||||
min-width: 100rpx;
|
||||
color: #522510;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
.contact-value {
|
||||
font-size: 28rpx;
|
||||
color: #522510;
|
||||
flex: 1;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user