parking_h5_all/components/ad-banner/ad-banner.vue

<!--
 * @Description: 广告横幅
 * @Author: 空白格
 * @Date: 2023-05-24 09:23:58
 * @LastEditors: 空白格
 * @LastEditTime: 2023-05-25 11:25:19
 * @FilePath: \parking_h5_all\components\ad-banner\ad-banner.vue
 * @Copyright: Copyright (c) 2016~2023 by 空白格, All Rights Reserved. 
-->
<template>
  <view class="ad-banner">
    <u-swiper v-if="list.length" :list="list" @click="adBannerClick" height="300" />
    <u-empty v-else text="暂无广告数据" mode="data" />
  </view>
</template>

<script>
export default {
  name: 'AdBanner',
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getBannerList();
  },
  methods: {
    /**
     * @description: 获取轮播列表
     * @return {*}
     */
    async getBannerList() {
      const { code, rows } = await this.$u.api.adBannerModuleApi.getAdBannerListApi({ pageNum: 1, pageSize: 10, onlineStatus: 1 });
      if (code === 200) {
        this.list = rows.map((item) => {
          return { id: String(item.id), image: item.bannerUrl, type: item.contentType, link: item.jumpUrl, ...item };
        });
      }
    },
    /**
     * @description: 轮播图点击
     * @param {*} e
     * @return {*}
     */
    adBannerClick(e) {
      const listItem = this.list[e];
      switch (Number(listItem.type)) {
        case 0:
          this.$u.route({
            url: '/pages/adBannerDetails/adBannerDetails',
            params: {
              id: listItem.id
            }
          });
          break;
        case 1:
          location.href = listItem.link;
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ad-banner {
  padding: 0 30rpx;
}
</style>