feat: 新增购买页广告位

apps/bigmember_pc/src/views/order/components/analysis-report/form.vue

@@ -21,6 +21,13 @@
         </el-form>
       </div>
     </SelectorCard>
+
+    <AdContainer
+      class='ex-show-module'
+      auto-height
+      :exposure-prefix="'PC芝麻信用共建报告购买页轮播广告位-' + code + '-'"
+      :code="code"
+    />
   </div>
 </template>
 
@@ -28,14 +35,17 @@
 import SelectorCard from '@/components/selector/SelectorCard.vue'
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 import { validateEmail } from '@/utils/functions/check'
+import AdContainer from '@/views/workspace/components/AdContainer.vue'
 
 export default {
   name: 'analysis-report-order-form',
   components: {
+    AdContainer,
     SelectorCard
   },
   data() {
     return {
+      code: 'order_pc_zhima_bottom_' + this.$route.params.type,
       ruleForm: {
         email: '',
         phone: ''
@@ -98,6 +108,7 @@ export default {
 <style lang="scss" scoped>
 .analysis-report-order-form {
   padding: 24px 30px;
+  padding-bottom: 0;
   .vip-sub-item-title {
     &::before {
       content: '*';
@@ -117,6 +128,12 @@ export default {
     .el-input {
       width: 590px;
     }
+    .ex-show-module {
+      margin-top: 20px;
+      .el-carousel__container {
+        border-radius: 12px;
+      }
+    }
   }
 }
 </style>

apps/bigmember_pc/src/views/order/components/analysis-report/title.vue

@@ -30,9 +30,7 @@
       </div>
       <div>
         <ReportExample placement="bottom-end">
-          <el-button slot="reference" class="header-guide-button" size="small"
-          >报告样例</el-button
-          >
+          <el-button slot="reference" class="header-guide-button" size="small">查看报告样例</el-button>
         </ReportExample>
       </div>
     </div>

apps/bigmember_pc/src/views/workspace/components/AdContainer.vue

@@ -4,6 +4,7 @@
       :exposure-prefix="exposurePrefix"
       :list="carouselList"
       :height="height"
+      :auto-height="autoHeight"
       :code="code"
     />
   </div>
@@ -23,6 +24,10 @@ export default {
       type: String,
       default: ''
     },
+    autoHeight: {
+      type: Boolean,
+      default: false
+    },
     code: {
       type: String,
       default: ''

apps/bigmember_pc/src/views/workspace/ui/AdSwipe.vue

@@ -1,26 +1,32 @@
 <template>
-  <el-carousel
-    class="carousel-list"
-    :autoplay="autoplay"
-    :interval="interval"
-    :indicator-position="indicatorPosition"
-    :arrow="arrow"
-    :height="height"
-  >
-    <el-carousel-item v-for="(item, index) in list" :key="index">
-      <a
-        class="link-wrapper"
-        :class="{ unlink: !item.link }"
-        target="_blank"
-        @click="openNewTab(item)"
-        :id="[code, index].join('-')"
-        :data-exposure="exposurePrefix + item.name"
-        data-exposure-loop
-      >
-        <img :src="item.pic" :alt="item.name" />
-      </a>
-    </el-carousel-item>
-  </el-carousel>
+    <el-carousel
+      class="carousel-list"
+      :autoplay="autoplay"
+      :interval="interval"
+      :indicator-position="indicatorPosition"
+      :arrow="arrow"
+      :height="calcStyleHeight"
+      @change="doChangeHeight"
+    >
+      <el-carousel-item v-for="(item, index) in list" :key="index">
+        <a
+          class="link-wrapper"
+          :class="{ unlink: !item.link }"
+          target="_blank"
+          @click="openNewTab(item)"
+          :id="[code, index].join('-')"
+          :data-exposure="exposurePrefix + item.name"
+          data-exposure-loop
+        >
+          <img
+            ref="cImg"
+            :src="item.pic"
+            :alt="item.name"
+            @load="calcHeight(index)"
+          />
+        </a>
+      </el-carousel-item>
+    </el-carousel>
 </template>
 
 <script>
@@ -41,6 +47,10 @@ export default {
       required: true,
       default: ''
     },
+    autoHeight: {
+      type: Boolean,
+      default: false
+    },
     height: {
       type: String,
       default: ''
@@ -82,8 +92,24 @@ export default {
       } else {
         return ''
       }
+    },
+    calcStyleHeight() {
+      if (this.autoHeight) {
+        return this.imgHeights[this.activeIndex] + 'px'
+      } else {
+        return this.height
+      }
+    },
+  },
+  data () {
+    return {
+      imgHeights: [],
+      activeIndex: 0,
     }
   },
+  mounted () {
+    this.calcHeight(0)
+  },
   methods: {
     resolveLink(link) {
       const { href } = this.$router.resolve(link)
@@ -95,12 +121,17 @@ export default {
         window.open(link)
       }
     },
-    calcStyle(extend) {
-      if (!extend) return ''
-      return {
-        width: extend.width || '',
-        height: extend.height || ''
-      }
+    calcHeight (index) {
+      this.$nextTick(() => {
+        if (this.$refs.cImg) {
+          const cHeight = this.list.length > 1 ? this.$refs.cImg[index]?.clientHeight : this.$refs.cImg[0]?.clientHeight
+          this.$set(this.imgHeights, index, cHeight)
+        }
+      })
+    },
+    doChangeHeight (index) {
+      this.calcHeight(index)
+      this.activeIndex = index
     }
   }
 }