Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bd46f412 1 parent 82c480b6

fix: 修复标签页标题显示问题并添加模拟文本 

将硬编码的标签页标题改为动态绑定，并添加模拟文本字段
修复故事标签页的标题判断逻辑
Inline Side-by-side
Showing 1 changed file with 13 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-15 22:08:49 2 * @Date: 2024-09-15 22:08:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-17 18:52:39 4 + * @LastEditTime: 2025-09-17 19:50:14
5 * @FilePath: /map-demo/src/views/checkin/info.vue 5 * @FilePath: /map-demo/src/views/checkin/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -41,17 +41,17 @@ ...@@ -41,17 +41,17 @@
41 <div id="tab-wrapper" style="margin-top: 0.5rem;"> 41 <div id="tab-wrapper" style="margin-top: 0.5rem;">
42 <van-config-provider :theme-vars="themeVars"> 42 <van-config-provider :theme-vars="themeVars">
43 <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" :shrink="show_shrink" sticky animated> 43 <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" :shrink="show_shrink" sticky animated>
44 - <van-tab title="敬老月优惠" v-if="page_details.introduction"> 44 + <van-tab :title="page_details.introduction_text" v-if="page_details.introduction">
45 <div class="info-content"> 45 <div class="info-content">
46 <div id="introduction" v-html="page_details.introduction" style="padding: 0 1rem;"></div> 46 <div id="introduction" v-html="page_details.introduction" style="padding: 0 1rem;"></div>
47 </div> 47 </div>
48 </van-tab> 48 </van-tab>
49 - <van-tab title="百联繁花里" v-if="page_details.story"> 49 + <van-tab :title="page_details.story_text" v-if="page_details.story">
50 <div class="info-content"> 50 <div class="info-content">
51 <div id="story" v-html="page_details.story" style="padding: 0 1rem;"></div> 51 <div id="story" v-html="page_details.story" style="padding: 0 1rem;"></div>
52 </div> 52 </div>
53 </van-tab> 53 </van-tab>
54 - <van-tab title="体 验" v-if="page_details.experience"> 54 + <van-tab :title="page_details.experience_text" v-if="page_details.experience">
55 <div class="info-content"> 55 <div class="info-content">
56 <div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div> 56 <div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div>
57 </div> 57 </div>
...@@ -127,6 +127,10 @@ watch( ...@@ -127,6 +127,10 @@ watch(
127 if (newInfo && newInfo.details && newInfo.details.length) { 127 if (newInfo && newInfo.details && newInfo.details.length) {
128 // 更新page_details数据 128 // 更新page_details数据
129 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 }; 129 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 };
130 + // TODO: 模拟假的tab文字
131 + page_details.value.introduction_text = '敬老月优惠';
132 + page_details.value.story_text = '百联繁花里';
133 + page_details.value.experience_text = '体 验';
130 // 获取浏览器可视范围的高度 134 // 获取浏览器可视范围的高度
131 $('.info-page').height(props.height + 'px'); 135 $('.info-page').height(props.height + 'px');
132 // 检查打卡状态 136 // 检查打卡状态
...@@ -216,6 +220,10 @@ onMounted(async () => { ...@@ -216,6 +220,10 @@ onMounted(async () => {
216 page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') 220 page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
217 page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') 221 page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
218 page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') 222 page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
223 + // TODO: 模拟假的tab文字
224 + page_details.value.introduction_text = '敬老月优惠';
225 + page_details.value.story_text = '百联繁花里';
226 + page_details.value.experience_text = '体 验';
219 // 定位 227 // 定位
220 if (current_lng && current_lat) { 228 if (current_lng && current_lat) {
221 page_details.value.current_lng = current_lng; 229 page_details.value.current_lng = current_lng;
...@@ -390,7 +398,7 @@ const clickTab = (evt) => { // 标签切换 ...@@ -390,7 +398,7 @@ const clickTab = (evt) => { // 标签切换
390 if (evt.title === '敬老月优惠') { // 介绍 398 if (evt.title === '敬老月优惠') { // 介绍
391 var imgs = $('#introduction').find('img'); 399 var imgs = $('#introduction').find('img');
392 } 400 }
393 - if (evt.title === '故 事') { // 故事 401 + if (evt.title === '百联繁花里') { // 故事
394 var imgs = $('#story').find('img'); 402 var imgs = $('#story').find('img');
395 } 403 }
396 if (evt.title === '体 验') { // 体验 404 if (evt.title === '体 验') { // 体验
......