From 1538ad4c85e16102fc22a4e48435ff612c93afa0 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Sat, 2 Aug 2025 17:52:46 +0800
Subject: [PATCH] =?UTF-8?q?walkInto=E7=95=8C=E9=9D=A2=E8=AE=BE=E8=AE=A11.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/walkInto/walkInto.vue | 500 +++++++++++++++++++++++-------------
 1 file changed, 321 insertions(+), 179 deletions(-)

diff --git a/pages/walkInto/walkInto.vue b/pages/walkInto/walkInto.vue
index 01fa062..a22b44a 100644
--- a/pages/walkInto/walkInto.vue
+++ b/pages/walkInto/walkInto.vue
@@ -1,200 +1,342 @@
-<template>
-  <view class="page">
-    <!-- 使用自定义导航栏组件 -->
-    <custom-navbar title="走进平山" />
-    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
-      <image class="temple-image" :src="templeInfo.imgUrl" mode="aspectFill"></image>
-      <view class="temple-info">
-        <text class="temple-desc">{{ stripHtmlTags(templeInfo.content) || '暂无描述' }}</text>
-      </view>
-      
-      <!-- 联系信息区域 -->
-      <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>
+  <template>
+    <view class="page">
+      <!-- 使用自定义导航栏组件 -->
+      <custom-navbar title="走进平山" />
+      <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
+        <image class="temple-image" :src="templeInfo.imgUrl" mode="aspectFill"></image>
+        <view class="temple-info">
+          <text class="temple-desc">{{ stripHtmlTags(templeInfo.content) || '暂无描述' }}</text>
         </view>
-        <view class="contact-item" v-if="templeInfo.address">
-          <text class="contact-label">地址：</text>
-          <text class="contact-value">{{ templeInfo.address }}</text>
+
+        <!-- 联系信息区域 -->
+        <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" @click="callPhone">{{ templeInfo.phone }}</text>
+          </view>
+          <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>
-  </view>
-</template>
+  </template>
 
-<script>
-import {
-  CommonEnum
-} from '@/enum/common.js'
-import {
-  getTempleInfo
-} from '@/api/walkInto/walkInto.js'
-import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
+  <script>
+  import {
+    CommonEnum
+  } from '@/enum/common.js'
+  import {
+    getTempleInfo
+  } from '@/api/walkInto/walkInto.js'
+  import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 
-export default {
-  components: {
-    CustomNavbar
-  },
-  data() {
-    return {
-      CommonEnum,
-      templeInfo: {
-        id: '',
-        name: '',
-        title: '',
-        content: '',
-        imgUrl: '',
-        address: '',
-        phone: '',
-        startTime: '',
-        endTime: ''
-      },
-      loading: false
-    }
-  },
-  onLoad() {
-    this.fetchTempleInfo()
-  },
-  methods: {
-    async fetchTempleInfo() {
-      try {
-        this.loading = true
-        const res = await getTempleInfo()
-        if (res.code === 200 && res.data) {
-          this.templeInfo = res.data
-        } else {
-          uni.showToast({
-            title: res.msg || '获取寺庙信息失败',
-            icon: 'none'
-          })
-        }
-      } catch (e) {
-        console.error('获取寺庙信息失败:', e)
-        uni.showToast({
-          title: '网络错误',
-          icon: 'none'
-        })
-      } finally {
-        this.loading = false
+  export default {
+    components: {
+      CustomNavbar
+    },
+    data() {
+      return {
+        CommonEnum,
+        templeInfo: {
+          id: '',
+          name: '',
+          title: '',
+          content: '',
+          imgUrl: '',
+          address: '',
+          phone: '',
+          startTime: '',
+          endTime: '',
+          lon: null,
+          lat: null
+        },
+        loading: false
       }
     },
-
-    // 去除 HTML 标签，返回纯文本，并根据空格进行换行
-    stripHtmlTags(html) {
-      if (!html) return ''; // 处理空值
-      
-      // 先去除HTML标签
-      let text = html.replace(/<[^>]+>/g, '');
-      
-      // 解码HTML实体
-      text = text.replace(/&nbsp;/g, ' ');
-      text = text.replace(/&amp;/g, '&');
-      text = text.replace(/&lt;/g, '<');
-      text = text.replace(/&gt;/g, '>');
-      text = text.replace(/&quot;/g, '"');
-      
-      // 根据空格进行换行处理
-      // 将连续的空格替换为换行符
-      text = text.replace(/\s{2,}/g, '\n');
-      
-      // 处理段落开头的空格
-      text = text.replace(/^\s+/gm, '');
-      
-      // 去除多余的空行
-      text = text.replace(/\n\s*\n/g, '\n');
-      
-      // 为每个段落添加缩进（在每行开头添加两个空格）
-      text = text.replace(/^/gm, '    ');
-      
-      // 移除内容末尾的联系信息（因为我们在单独的区域显示）
-      text = text.replace(/电话：.*$/gm, '');
-      text = text.replace(/地址：.*$/gm, '');
-      
-      return text.trim();
+    onLoad() {
+      this.fetchTempleInfo()
     },
+    methods: {
+      async fetchTempleInfo() {
+        try {
+          this.loading = true
+          const res = await getTempleInfo()
+          if (res.code === 200 && res.data) {
+            this.templeInfo = res.data
+          } else {
+            uni.showToast({
+              title: res.msg || '获取寺庙信息失败',
+              icon: 'none'
+            })
+          }
+        } catch (e) {
+          console.error('获取寺庙信息失败:', e)
+          uni.showToast({
+            title: '网络错误',
+            icon: 'none'
+          })
+        } finally {
+          this.loading = false
+        }
+      },
+
+      // 去除 HTML 标签，返回纯文本，并根据空格进行换行
+      stripHtmlTags(html) {
+        if (!html) return ''; // 处理空值
+
+        // 先去除HTML标签
+        let text = html.replace(/<[^>]+>/g, '');
+
+        // 解码HTML实体
+        text = text.replace(/&nbsp;/g, ' ');
+        text = text.replace(/&amp;/g, '&');
+        text = text.replace(/&lt;/g, '<');
+        text = text.replace(/&gt;/g, '>');
+        text = text.replace(/&quot;/g, '"');
+
+        // 根据空格进行换行处理
+        // 将连续的空格替换为换行符
+        text = text.replace(/\s{2,}/g, '\n');
+
+        // 处理段落开头的空格
+        text = text.replace(/^\s+/gm, '');
+
+        // 去除多余的空行
+        text = text.replace(/\n\s*\n/g, '\n');
+
+        // 为每个段落添加缩进（在每行开头添加两个空格）
+        text = text.replace(/^/gm, '    ');
+
+        // 移除内容末尾的联系信息（因为我们在单独的区域显示）
+        text = text.replace(/电话：.*$/gm, '');
+        text = text.replace(/地址：.*$/gm, '');
+
+        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>
+  </script>
 
-<style lang="scss">
-.page {
-  background: #F5F0E7;
-  width: 100%;
-  min-height: 100vh;
-  flex-direction: column;
-  align-items: center;
-}
+  <style lang="scss">
+  .page {
+    background: #F5F0E7;
+    width: 100%;
+    min-height: 100vh;
+    flex-direction: column;
+    align-items: center;
+  }
 
-.header {
-  margin: 26rpx 28rpx;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 0 15rpx;
-  padding-bottom: rpx;
-  border-radius: 16rpx 16rpx 16rpx 16rpx;
-}
+  .header {
+    margin: 26rpx 28rpx;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    padding: 0 15rpx;
+    padding-bottom: 40rpx;
+    border-radius: 16rpx 16rpx 16rpx 16rpx;
+  }
 
-.temple-image {
-  width: 610rpx;
-  height: 324rpx;
-  background: #D8D8D8; /* 灰色占位背景 */
-  border-radius: 12rpx 12rpx 12rpx 12rpx;
-  display: block;
-  margin: 34rpx auto;
-  object-fit: cover;
-}
+  .temple-image {
+    width: 610rpx;
+    height: 324rpx;
+    background: #D8D8D8; /* 灰色占位背景 */
+    border-radius: 12rpx 12rpx 12rpx 12rpx;
+    display: block;
+    margin: 34rpx auto;
+    object-fit: cover;
+  }
 
-.temple-info {
-  width: 100%;
-  padding: 24rpx 42rpx;
-  border-radius: 20rpx 20rpx 20rpx 20rpx;
-}
+  .temple-info {
+    width: 100%;
+    padding: 24rpx 42rpx;
+    border-radius: 20rpx 20rpx 20rpx 20rpx;
+  }
 
-.temple-desc {
-  display: block;
-  font-weight: 400;
-  font-size: 28rpx;
-  color: #522510;
-  line-height: 45rpx;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  white-space: pre-line; /* 保留换行符 */
-  word-wrap: break-word; /* 长单词换行 */
-}
+  .temple-desc {
+    display: block;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #522510;
+    line-height: 45rpx;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    white-space: pre-line; /* 保留换行符 */
+    word-wrap: break-word; /* 长单词换行 */
+  }
 
-/* 联系信息样式 */
-.contact-info {
-  margin-top: 40rpx;
-  padding: 30rpx;
-  border-radius: 16rpx;
+  /* 联系信息样式 */
+  .contact-info {
+    margin-top: 40rpx;
+    padding: 30rpx;
+    border-radius: 16rpx;
 
-}
+  }
 
-.contact-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 20rpx;
-  line-height: 40rpx;
-}
+  .contact-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 20rpx;
+    line-height: 40rpx;
+  }
 
-.contact-item:last-child {
-  margin-bottom: 0;
-}
+  .contact-item:last-child {
+    margin-bottom: 0;
+  }
 
-.contact-label {
-  font-size: 28rpx;
-  min-width: 100rpx;
-  color: #522510;
-  flex-shrink: 0;
-}
+  .contact-label {
+    font-size: 28rpx;
+    min-width: 100rpx;
+    color: #522510;
+    flex-shrink: 0;
+  }
 
-.contact-value {
-  font-size: 28rpx;
-  color: #522510;
-  flex: 1;
-  word-wrap: break-word;
-}
-</style>
\ No newline at end of file
+  .contact-value {
+    font-size: 28rpx;
+    color: #522510;
+    flex: 1;
+    word-wrap: break-word;
+  }
+
+  .nav-arrow {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  </style>
\ No newline at end of file