feat(checkin): 支持从 URL 参数动态设置标签页标题
- 新增 updateDefaultTitleFromURL() 函数,支持从 URL 参数更新标签页默认标题 - 在 watch props.info 和 onMounted 中添加 discount_title 参数处理逻辑 - 优先级:接口返回标题 > URL 参数标题 > 默认标题 使用方式: URL 示例: /checkin/info?id=xxx&discount_title=春节特别活动 效果: 所有标签页标题变为"春节特别活动" 相关文件: - src/views/checkin/tab-config.js (新增函数) - src/views/checkin/info.vue (添加 URL 参数处理) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
2 changed files
with
36 additions
and
1 deletions
| ... | @@ -98,7 +98,7 @@ import { mapAPI, mapAudioAPI } from '@/api/map.js' | ... | @@ -98,7 +98,7 @@ import { mapAPI, mapAudioAPI } from '@/api/map.js' |
| 98 | import { isCheckedAPI, checkinAPI } from '@/api/checkin.js' | 98 | import { isCheckedAPI, checkinAPI } from '@/api/checkin.js' |
| 99 | import { getAdaptiveFontSize, getAdaptivePadding, getDeviceInfo } from '@/utils/tools.js' | 99 | import { getAdaptiveFontSize, getAdaptivePadding, getDeviceInfo } from '@/utils/tools.js' |
| 100 | // 导入标签页配置和工具函数 | 100 | // 导入标签页配置和工具函数 |
| 101 | -import { TAB_CONFIGS, setTabTitles, updateTabConfigsFromAPI } from './tab-config.js' | 101 | +import { TAB_CONFIGS, setTabTitles, updateTabConfigsFromAPI, updateDefaultTitleFromURL } from './tab-config.js' |
| 102 | 102 | ||
| 103 | const store = mainStore(); | 103 | const store = mainStore(); |
| 104 | const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store); | 104 | const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store); |
| ... | @@ -164,6 +164,12 @@ watch( | ... | @@ -164,6 +164,12 @@ watch( |
| 164 | // 更新page_details数据 | 164 | // 更新page_details数据 |
| 165 | page_details.value = { ...newInfo.details[0], position: newInfo.position, path: newInfo.path, current_lng: newInfo.current_lng, current_lat: newInfo.current_lat, openid: newInfo.openid }; | 165 | page_details.value = { ...newInfo.details[0], position: newInfo.position, path: newInfo.path, current_lng: newInfo.current_lng, current_lat: newInfo.current_lat, openid: newInfo.openid }; |
| 166 | 166 | ||
| 167 | + // 如果 URL 参数中有 discount_title,更新标签页默认标题 | ||
| 168 | + const discountTitle = $route.query.discount_title; | ||
| 169 | + if (discountTitle) { | ||
| 170 | + tab_configs.value = updateDefaultTitleFromURL(discountTitle, tab_configs.value); | ||
| 171 | + } | ||
| 172 | + | ||
| 167 | // 使用工具函数设置标签页标题 | 173 | // 使用工具函数设置标签页标题 |
| 168 | page_details.value = setTabTitles(page_details.value, tab_configs.value); | 174 | page_details.value = setTabTitles(page_details.value, tab_configs.value); |
| 169 | 175 | ||
| ... | @@ -257,6 +263,12 @@ onMounted(async () => { | ... | @@ -257,6 +263,12 @@ onMounted(async () => { |
| 257 | page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') | 263 | page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') |
| 258 | page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') | 264 | page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') |
| 259 | 265 | ||
| 266 | + // 如果 URL 参数中有 discount_title,更新标签页默认标题 | ||
| 267 | + const discountTitle = $route.query.discount_title; | ||
| 268 | + if (discountTitle) { | ||
| 269 | + tab_configs.value = updateDefaultTitleFromURL(discountTitle, tab_configs.value); | ||
| 270 | + } | ||
| 271 | + | ||
| 260 | // 使用工具函数设置标签页标题 | 272 | // 使用工具函数设置标签页标题 |
| 261 | page_details.value = setTabTitles(page_details.value, tab_configs.value); | 273 | page_details.value = setTabTitles(page_details.value, tab_configs.value); |
| 262 | 274 | ... | ... |
| ... | @@ -135,3 +135,26 @@ export function updateTabConfigsFromAPI(apiData, tab_configs = TAB_CONFIGS) { | ... | @@ -135,3 +135,26 @@ export function updateTabConfigsFromAPI(apiData, tab_configs = TAB_CONFIGS) { |
| 135 | export function getVisibleTabConfigs(page_details, tab_configs = TAB_CONFIGS) { | 135 | export function getVisibleTabConfigs(page_details, tab_configs = TAB_CONFIGS) { |
| 136 | return tab_configs.filter(config => page_details[config.content_key]) | 136 | return tab_configs.filter(config => page_details[config.content_key]) |
| 137 | } | 137 | } |
| 138 | + | ||
| 139 | +/** | ||
| 140 | + * 从 URL 参数更新标签页默认标题 | ||
| 141 | + * | ||
| 142 | + * @description 如果 URL 中有 discount_title 参数,用它更新所有标签页的默认标题 | ||
| 143 | + * @param {string} discount_title - 从 URL 参数获取的标题 | ||
| 144 | + * @param {Array<Object>} tab_configs - 标签页配置数组 | ||
| 145 | + * @returns {Array<Object>} 更新后的标签页配置数组 | ||
| 146 | + * | ||
| 147 | + * @example | ||
| 148 | + * const tab_configs = updateDefaultTitleFromURL('敬老月特别优惠') | ||
| 149 | + * // 所有标签页的 default_title 都会被更新为 '敬老月特别优惠' | ||
| 150 | + */ | ||
| 151 | +export function updateDefaultTitleFromURL(discount_title, tab_configs = TAB_CONFIGS) { | ||
| 152 | + if (!discount_title) { | ||
| 153 | + return tab_configs | ||
| 154 | + } | ||
| 155 | + | ||
| 156 | + return tab_configs.map(config => ({ | ||
| 157 | + ...config, | ||
| 158 | + default_title: discount_title | ||
| 159 | + })) | ||
| 160 | +} | ... | ... |
-
Please register or login to post a comment