feat(notice): 添加参访须知页面路线图展示和预览功能
- 新增路线图展示组件,居中显示在温馨提示下方 - 实现路线图点击预览功能,支持全屏查看和缩放 - 路线图容器样式与页面其他元素保持统一(白色背景、圆角、内边距) - 添加图片点击视觉反馈效果(透明度变化) - 使用 Taro.previewImage API 实现图片预览功能 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
2 changed files
with
61 additions
and
3 deletions
| 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; | ... | ... |
-
Please register or login to post a comment