Fix：5043 【商城小程序】体验项目简介内容过长会被遮挡

pkg_product/views/experienceProjectDetail.vue

@@ -92,20 +92,23 @@
           <swiper
             v-if="projectList.length > 0"
             class="experience-swiper"
+            :style="{ height: experienceSwiperHeight ? (experienceSwiperHeight + 'px') : '520rpx' }"
             circular
             :autoplay="true"
             :interval="3000"
             :indicator-dots="false"
             indicator-color="rgba(255, 255, 255, .4)"
             indicator-active-color="#ffffff"
+            @change="handleExperienceSwiperChange"
           >
             <swiper-item v-for="(item, index) in projectList" :key="index">
-              <view class="experience-card">
+              <view :id="'experience-card-' + index" class="experience-card">
                 <image
                   v-if="item.projectImage"
                   :src="item.projectImage"
                   class="experience-image"
                   mode="widthFix|heightFix"
+                  @load="onExperienceImageLoad"
                 />
                 <view class="experience-info">
                   <view class="experience-title-wrap">
@@ -191,7 +194,9 @@ export default {
       projectList: [],
       userLatitude: null,
       userLongitude: null,
-      distanceText: ''
+      distanceText: '',
+      currentExperienceIndex: 0,
+      experienceSwiperHeight: 0
     }
   },
   computed: {
@@ -268,6 +273,24 @@ export default {
         this.videoContext.play()
       }
     },
+    handleExperienceSwiperChange(e) {
+      this.currentExperienceIndex = e.detail.current || 0
+      this.updateExperienceSwiperHeight(this.currentExperienceIndex)
+    },
+    onExperienceImageLoad() {
+      this.updateExperienceSwiperHeight(this.currentExperienceIndex)
+    },
+    updateExperienceSwiperHeight(index) {
+      const targetIndex = Number.isInteger(index) ? index : this.currentExperienceIndex
+      this.$nextTick(() => {
+        const query = uni.createSelectorQuery().in(this)
+        query.select('#experience-card-' + targetIndex).boundingClientRect(rect => {
+          if (rect && rect.height) {
+            this.experienceSwiperHeight = rect.height
+          }
+        }).exec()
+      })
+    },
     fetchProjectDetail() {
       if (!this.experienceMerchantId) {
         return
@@ -317,10 +340,15 @@ export default {
           }
           if (project.projectList && project.projectList.length) {
             this.projectList = project.projectList
+            this.currentExperienceIndex = 0
             this.detailList = project.projectList.map(item => ({
               name: item.projectName || '',
               count: item.projectIntro || ''
             }))
+            this.updateExperienceSwiperHeight(0)
+            setTimeout(() => {
+              this.updateExperienceSwiperHeight(0)
+            }, 200)
           }
         }
       }).finally(() => {
@@ -620,7 +648,6 @@ export default {
 .experience-swiper {
   margin-top: 16rpx;
   width: 100%;
-  height: 520rpx;
 }
 .experience-image {
   width: 100%;