✨ feat: Bob新增需求

1、轮播图能否点开看原图，可以放大缩小 2、轮播图比例4x3显示 3、详情页图片有5个像素的圆角； 4、介绍、故事、体验，如果没有就不显示tab；靠左对齐； 5、前往按钮根据设置来定，有路径的才显示；

✨ feat: Bob新增需求
1、轮播图能否点开看原图，可以放大缩小 2、轮播图比例4x3显示 3、详情页图片有5个像素的圆角； 4、介绍、故事、体验，如果没有就不显示tab；靠左对齐； 5、前往按钮根据设置来定，有路径的才显示；
hookehuyr
Commit 411e262d84963e5b61264c2e42d1d9aec0753f5a 411e262d 1 parent 0e33c0d0
Showing 1 changed file with 51 additions and 9 deletions
src/views/bieyuan/info.vue
--- a/src/views/bieyuan/info.vue
View file @411e262
+++ b/src/views/bieyuan/info.vue
View file @411e262
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-25 17:24:19
+ * @LastEditTime: 2024-10-08 10:30:17
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -13,8 +13,8 @@
       </div>
       <van-config-provider :theme-vars="themeVars">
         <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
-          <van-swipe-item v-for="image in page_details.banner" :key="image">
+          <van-swipe-item v-for="(image, index) in page_details.banner" :key="index">
-            <van-image fit="fill" width="100%" height="15rem" :src="image" />
+            <van-image fit="cover" width="100%" :height="img_height" :src="image" @click="onClickImg(index)" />
           </van-swipe-item>
         </van-swipe>
       </van-config-provider>
@@ -24,24 +24,24 @@
       <div class="info-header">
         <div style="display: flex; justify-content: space-between;">
           <p class="info-title">{{ page_details.name }}</p>
-          <div @click="goTo()" class="info-btn">前往</div>
+          <div v-if="page_details.path?.length > 1" @click="goTo()" class="info-btn">前往</div>
         </div>
         <div class="info-sub-title">{{ page_details.note }}</div>
       </div>
       <div style="margin-top: 0.5rem;">
         <van-config-provider :theme-vars="themeVars">
-          <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" sticky animated>
+          <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>
-            <van-tab title="介 绍">
+            <van-tab title="介 绍" v-if="page_details.introduction">
               <div class="info-content">
                 <div id="introduction" v-html="page_details.introduction" style="padding: 0 1rem;"></div>
               </div>
             </van-tab>
-            <van-tab title="故 事">
+            <van-tab title="故 事" v-if="page_details.story">
               <div class="info-content">
                 <div id="story" v-html="page_details.story" style="padding: 0 1rem;"></div>
               </div>
             </van-tab>
-            <van-tab title="体 验" id="tab-3">
+            <van-tab title="体 验" v-if="page_details.experience">
               <div class="info-content">
                 <div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div>
               </div>
@@ -171,6 +171,7 @@ const stopAudio = (item, index) => {
 }
 const audio = ref(new Audio());
+const img_height = ref('15rem');
 onMounted(async () => {
   // 通过ID查询到标记点详情
@@ -200,8 +201,17 @@ onMounted(async () => {
             // console.log('close');
           }
         })
-    })
+    });
+    // 图片有2个像素的圆角
+    $(img).css('border-radius', '5px');
   });
+  // 获取屏幕宽度，设置高度4:3
+  // 获取屏幕的宽度
+  var screenWidth = $(window).width();
+  // 计算4:3比例的高度
+  var screenHeight = screenWidth * 3 / 4;
+  // 设置容器的高度
+  img_height.value = screenHeight + 'px';
 });
 onUnmounted(() => { // 离开页面时关闭音频播放
@@ -287,6 +297,8 @@ const clickTab = (evt) => { // 标签切换
             }
           })
       })
+      // 图片有5个像素的圆角
+      $(img).css('border-radius', '5px');
     });
   });
 }
@@ -313,6 +325,32 @@ const preview_images = [];
 const onChange = (newIndex) => {
   index.value = newIndex;
 };
+
+const onClickImg = (idx) => {
+  showImagePreview({
+    images: page_details.value.banner,
+    startPosition: idx,
+    showIndex: true,
+    onClose: () => {
+      // console.log('close');
+    }
+  })
+};
+
+const show_shrink = computed(() => {
+  // 统计非空字段的个数
+  let filledFields = 0;
+
+  if (page_details.value.introduction) filledFields++;
+  if (page_details.value.story) filledFields++;
+  if (page_details.value.experience) filledFields++;
+
+  // 判断是否只有一个字段有值
+  if (filledFields === 1) {
+    return true;
+  }
+  return false;
+})
 </script>
 <style lang="less">
@@ -431,6 +469,10 @@ const onChange = (newIndex) => {
   .van-tabs__wrap {
     border-bottom: 1px solid #F3F3F3;
   }
+
+  .van-tabs__nav--line.van-tabs__nav--shrink {
+    padding-left: 2rem;
+  }
 }
 .van-back-top {