ancientTourById.vue 1.0

2025-08-12 12:02:20 +08:00 · 2025-08-12 12:02:20 +08:00 · 5303ae03d8
commit 5303ae03d8
parent ad30e079bc
3 changed files with 354 additions and 1 deletions
--- a/pages.json
+++ b/pages.json
@ -169,6 +169,13 @@
 			{
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/ancient/ancientTourById",
+			"style" :
+			{
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"subPackages": [
--- a/pages/ancient/ancientTourById.vue
+++ b/pages/ancient/ancientTourById.vue
@ -0,0 +1,344 @@
+<template>
+  <view class="page">
+    <!-- 使用自定义导航栏组件 -->
+    <custom-navbar title="走进平山"
+                   ref="customNavbar"
+    />
+    <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" @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>
+</template>
+
+<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: '',
+        lon: null,
+        lat: null
+      },
+      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
+      }
+    },
+
+    // 去除 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>
+
+<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: 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-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; /* 长单词换行 */
+}
+
+/* 联系信息样式 */
+.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:last-child {
+  margin-bottom: 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;
+}
+
+.nav-arrow {
+  width: 32rpx;
+  height: 32rpx;
+}
+</style>
--- a/pages/walkInto/walkInto.vue
+++ b/pages/walkInto/walkInto.vue
@ -1,7 +1,9 @@
  <template>
    <view class="page">
      <!-- 使用自定义导航栏组件 -->
-      <custom-navbar title="走进平山" />
+      <custom-navbar title="走进平山"
+                     ref="customNavbar"
+      />
      <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
        <image class="temple-image" :src="templeInfo.imgUrl" mode="aspectFill"></image>
        <view class="temple-info">