详情页文章中新增点击图片展示功能

hookehuyr
Commit e1c5de119ae774138d34024fa0686b87a3ccb099 e1c5de11 1 parent d91c3c6a
Showing 2 changed files with 56 additions and 7 deletions
components.d.ts
src/views/bieyuan/info.vue
--- a/components.d.ts
View file @e1c5de1
+++ b/components.d.ts
View file @e1c5de1
@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     VanFloatingPanel: typeof import('vant/es')['FloatingPanel']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
+    VanImagePreview: typeof import('vant/es')['ImagePreview']
     VanOverlay: typeof import('vant/es')['Overlay']
     VanPopup: typeof import('vant/es')['Popup']
     VanRow: typeof import('vant/es')['Row']
--- a/src/views/bieyuan/info.vue
View file @e1c5de1
+++ b/src/views/bieyuan/info.vue
View file @e1c5de1
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-23 18:22:34
+ * @LastEditTime: 2024-09-25 14:07:44
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -33,17 +33,17 @@
           <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" sticky animated>
             <van-tab title="介 绍">
               <div class="info-content">
-                <div v-html="page_details.introduction" style="padding: 0 1rem;"></div>
+                <div id="introduction" v-html="page_details.introduction" style="padding: 0 1rem;"></div>
               </div>
             </van-tab>
             <van-tab title="故 事">
               <div class="info-content">
-                <div v-html="page_details.story" style="padding: 0 1rem;"></div>
+                <div id="story" v-html="page_details.story" style="padding: 0 1rem;"></div>
               </div>
             </van-tab>
             <van-tab title="体 验" id="tab-3">
               <div class="info-content">
-                <div v-html="page_details.experience" style="padding: 0 1rem;"></div>
+                <div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div>
               </div>
               <div v-if="page_details.experience_audio.length" class="audio-wrapper">
                 <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index">
@@ -67,13 +67,17 @@
         <p style="padding: 0.5rem 1rem;">{{ toast_text }}</p>
       </template>
     </van-toast>
+
+    <van-image-preview v-model:show="show_preview" :images="preview_images" @change="onChange" doubleScale>
+      <template v-slot:index>第{{ index + 1 }}张</template>
+    </van-image-preview>
     </div>
 </template>
 <script setup>
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import { showImagePreview } from 'vant';
 import { storeToRefs } from 'pinia'
 import { mainStore } from '@/store';
@@ -180,8 +184,21 @@ onMounted(async () => {
     page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
     page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
     page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
-    console.log("🚀 ~ file: info.vue:177 ~ onMounted ~ page_details.value:", page_details.value);
   }
+  // 介绍栏目，图片点击事件
+  var imgs = $('#introduction').find('img');
+  // 图片点击事件
+  imgs.each(function(index, img) {
+    $(img).on('click', function (e) {
+        showImagePreview({
+          images: [$(img).attr('src')],
+          startPosition: 0,
+          onClose: () => {
+            // console.log('close');
+          }
+        })
+    })
+  });
 });
 onUnmounted(() => { // 离开页面时关闭音频播放
@@ -238,8 +255,31 @@ const voicePause = () => {
 }
 const tabsRef = ref(null);
-const clickTab = (evt) => {
+const clickTab = (evt) => { // 标签切换
   tabsRef.value.resize();
+  nextTick(() => {
+    if (evt.name === 0) { // 介绍
+      var imgs = $('#introduction').find('img');
+    }
+    if (evt.name === 1) { // 故事
+      var imgs = $('#story').find('img');
+    }
+    if (evt.name === 2) { // 体验
+      var imgs = $('#experience').find('img');
+    }
+    // 图片点击事件
+    imgs.each(function(index, img) {
+      $(img).on('click', function (e) {
+          showImagePreview({
+            images: [$(img).attr('src')],
+            startPosition: 0,
+            onClose: () => {
+              // console.log('close');
+            }
+          })
+      })
+    });
+  });
 }
 watch(
@@ -256,6 +296,14 @@ watch(
 defineExpose({
   outerStopAudio
 })
+
+
+const show_preview = ref(false);
+const index = ref(0);
+const preview_images = [];
+const onChange = (newIndex) => {
+  index.value = newIndex;
+};
 </script>
 <style lang="less">