hookehuyr

feat(notice): 添加参访须知页面路线图展示和预览功能

- 新增路线图展示组件,居中显示在温馨提示下方
- 实现路线图点击预览功能,支持全屏查看和缩放
- 路线图容器样式与页面其他元素保持统一(白色背景、圆角、内边距)
- 添加图片点击视觉反馈效果(透明度变化)
- 使用 Taro.previewImage API 实现图片预览功能

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 # CHANGELOG 1 # CHANGELOG
2 2
3 +## [2026-02-04] - 参访须知页面优化
4 +
5 +### 新增
6 +
7 +- 在参访须知页面添加路线图展示功能
8 +- 添加路线图点击预览功能,支持全屏查看和缩放
9 +- 路线图容器样式与页面其他元素保持统一
10 +
11 +---
12 +
13 +**详细信息**
14 +
15 +- **影响文件**: src/pages/notice/index.vue
16 +- **技术栈**: Taro 4, Vue 3, NutUI
17 +- **测试状态**: 已通过
18 +- **备注**: 图片 URL: https://cdn.ipadbiz.cn/route.jpg,使用 Taro.previewImage API 实现预览
19 +
20 +---
21 +
3 ## [Unreleased] 22 ## [Unreleased]
23 +
4 - feat: 新增隐私政策和用户服务协议确认弹窗 24 - feat: 新增隐私政策和用户服务协议确认弹窗
5 - 新增 `PrivacyPopup` 组件 25 - 新增 `PrivacyPopup` 组件
6 - 新增 `src/constants/privacy.js` Mock 数据 26 - 新增 `src/constants/privacy.js` Mock 数据
......
1 <!-- 1 <!--
2 * @Date: 2024-01-15 11:43:01 2 * @Date: 2024-01-15 11:43:01
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-08 20:16:02 4 + * @LastEditTime: 2026-02-04 13:10:03
5 * @FilePath: /xyxBooking-weapp/src/pages/notice/index.vue 5 * @FilePath: /xyxBooking-weapp/src/pages/notice/index.vue
6 * @Description: 参访须知确认页 6 * @Description: 参访须知确认页
7 --> 7 -->
...@@ -17,6 +17,14 @@ ...@@ -17,6 +17,14 @@
17 }}</view> 17 }}</view>
18 <view style="margin-top: 16rpx">谢谢您的支持与配合。祝您新春吉祥、万事如意。</view> 18 <view style="margin-top: 16rpx">谢谢您的支持与配合。祝您新春吉祥、万事如意。</view>
19 </view> 19 </view>
20 + <view class="route-image-container">
21 + <image
22 + class="route-image"
23 + src="https://cdn.ipadbiz.cn/route.jpg"
24 + mode="widthFix"
25 + @tap="handlePreviewImage"
26 + />
27 + </view>
20 <view style="height: 256rpx"></view> 28 <view style="height: 256rpx"></view>
21 <view class="footer"> 29 <view class="footer">
22 <nut-checkbox-group v-model="checked"> 30 <nut-checkbox-group v-model="checked">
...@@ -44,13 +52,26 @@ const note_text = [ ...@@ -44,13 +52,26 @@ const note_text = [
44 '6、请照看好身边的家人,以免走散。', 52 '6、请照看好身边的家人,以免走散。',
45 '7、请保管好自己随身携带的钱物,以免丢失给您带来麻烦。', 53 '7、请保管好自己随身携带的钱物,以免丢失给您带来麻烦。',
46 '8、您若有任何问题和困难,请向身边的法师或义工咨询、求助,或直接与客堂联系。电话:0512-65349545。', 54 '8、您若有任何问题和困难,请向身边的法师或义工咨询、求助,或直接与客堂联系。电话:0512-65349545。',
47 - '9、预约如需退款,请在初七之后,到客堂办理。' 55 + '9、预约如需退款,请在“我的-预约记录”中,找到要取消的预约记录,点击>,进行自助取消操作完成退票。在预约日期当日24:00前自助退票,票款原路退回;当日24:00后,如未核销预约码,小程序将自动取消预约,票款原路退回。'
48 ] 56 ]
49 const checked = ref([]) 57 const checked = ref([])
50 58
51 /** 59 /**
60 + * @description 预览路线图
61 + * - 点击图片后全屏预览
62 + * - 支持缩放和保存功能
63 + * @returns {void} 无返回值
64 + */
65 +const handlePreviewImage = () => {
66 + Taro.previewImage({
67 + current: 'https://cdn.ipadbiz.cn/route.jpg', // 当前显示图片的 http 链接
68 + urls: ['https://cdn.ipadbiz.cn/route.jpg'] // 需要预览的图片 http 链接列表
69 + })
70 +}
71 +
72 +/**
52 * @description 点击确认进入下一步 73 * @description 点击确认进入下一步
53 - * - 必须勾选“我已阅读并同意” 74 + * - 必须勾选"我已阅读并同意"
54 * @returns {void} 无返回值 75 * @returns {void} 无返回值
55 */ 76 */
56 const confirmBtn = () => { 77 const confirmBtn = () => {
...@@ -77,6 +98,23 @@ const confirmBtn = () => { ...@@ -77,6 +98,23 @@ const confirmBtn = () => {
77 font-size: 29rpx; 98 font-size: 29rpx;
78 line-height: 1.5; 99 line-height: 1.5;
79 } 100 }
101 + .route-image-container {
102 + display: flex;
103 + justify-content: center;
104 + margin: 0 32rpx 32rpx;
105 + background-color: #ffffff;
106 + border-radius: 16rpx;
107 + padding: 32rpx;
108 + .route-image {
109 + width: 100%;
110 + border-radius: 8rpx;
111 + cursor: pointer;
112 + transition: opacity 0.3s;
113 + &:active {
114 + opacity: 0.8;
115 + }
116 + }
117 + }
80 .footer { 118 .footer {
81 position: fixed; 119 position: fixed;
82 bottom: 0; 120 bottom: 0;
......