walkInto界面设计1.1

pages/walkInto/walkInto.vue

@@ -12,11 +12,12 @@
         <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>
@@ -48,7 +49,9 @@ export default {
           address: '',
           phone: '',
           startTime: '',
-        endTime: ''
+          endTime: '',
+          lon: null,
+          lat: null
         },
         loading: false
       }
@@ -113,6 +116,140 @@ export default {
 
         return text.trim();
       },
+
+      // 拨打电话
+      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>
@@ -132,7 +269,7 @@ export default {
     display: flex;
     flex-direction: column;
     padding: 0 15rpx;
-  padding-bottom: rpx;
+    padding-bottom: 40rpx;
     border-radius: 16rpx 16rpx 16rpx 16rpx;
   }
 
@@ -197,4 +334,9 @@ export default {
     flex: 1;
     word-wrap: break-word;
   }
+
+  .nav-arrow {
+    width: 32rpx;
+    height: 32rpx;
+  }
   </style>