walkInto界面设计1.1

pages/walkInto/walkInto.vue

@@ -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>
+  <script>
-import {
+  import {
     CommonEnum
-} from '@/enum/common.js'
+  } from '@/enum/common.js'
-import {
+  import {
     getTempleInfo
-} from '@/api/walkInto/walkInto.js'
+  } from '@/api/walkInto/walkInto.js'
-import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
+  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>