广告请求

pages/index/index.vue

@@ -2,12 +2,12 @@
  * @Author: ch
  * @Date: 2022-05-03 22:14:16
  * @LastEditors: ch
- * @LastEditTime: 2022-05-04 22:21:04
+ * @LastEditTime: 2022-05-31 18:41:33
  * @Description: file content
 -->
 <template>
   <div class="home">
-    <Banner />
+    <Banner :data="bannerList"/>
     <div class="home-wrap">
       <Seckil
         v-if="seckillData.activityTimeVO"
@@ -50,9 +50,13 @@ import {
   ApiGetRecommendedGoodsList,
   ApiGetGoodsList,
 } from "@/plugins/api/goods";
+import {
+  ApiGetAdList
+} from "@/plugins/api/ad";
 import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
 import Pick from "./module/Pick.vue";
+import { AD_LOCATION } from '@/plugins/dicts/ad';
 import TabbarFixed from "./module/TabbarFixed.vue";
 const SECKILL_COUNT = 20; // 秒杀商品数
 const NEW_COUNT = 5; // 新品上架商品数
@@ -95,9 +99,16 @@ export default {
     if (newDataResult) {
       newData = newDataResult.records || [];
     }
+    
+      let {result:bannerList} = await ApiGetAdList({
+        location : AD_LOCATION.HOME_BANNER
+      });
+       bannerList = bannerList || [];
+      
 
     return {
       currentTime,
+      bannerList,
       newData,
       sekillGoodsList,
       seckillData,
@@ -121,7 +132,7 @@ export default {
   created() {
     this.getSelectProducts();
   },
-  mounted() {
+  async mounted() {
     // 监听滚动事件
     window.addEventListener("scroll", this.scrollEventMethod);
   },

pages/index/module/Banner.vue

@@ -2,32 +2,17 @@
  * @Author: ch
  * @Date: 2022-05-04 17:50:33
  * @LastEditors: ch
- * @LastEditTime: 2022-05-04 22:15:26
+ * @LastEditTime: 2022-05-31 18:43:10
  * @Description: file content
 -->
 
 <template>
   <div class="home-banner">
     <el-carousel height="360px" indicator-position="outside">
-      <el-carousel-item>
+      <el-carousel-item v-for="item in data" :key="item.id">
         <el-image
-          @click="onAdvBannerClick(0)"
-          :src="adv1"
-          fit="cover"
-        ></el-image>
-      </el-carousel-item>
-      <el-carousel-item>
-        <el-image
-          @click="onAdvBannerClick(1)"
-          :src="adv2"
-          fit="cover"
-        ></el-image>
-      </el-carousel-item>
-
-      <el-carousel-item v-for="item in bannerList" :key="item.id">
-        <el-image
-          @click="onBannerClick(item.id)"
-          :src="item.url"
+          @click="onBannerClick(item)"
+          :src="item.pictureUrl"
           fit="cover"
         ></el-image>
       </el-carousel-item>
@@ -35,50 +20,32 @@
   </div>
 </template>
 <script>
+import { AD_JUMP_TYPE } from '@/plugins/dicts/ad';
 export default {
   name: "HomtBanner",
+  props : {
+    data : {
+      type : Array,
+      default : () => ([])
+    }
+  },
   data() {
     return {
-      adv1: require("~/assets/img/banner/zbk.jpg"),
-      adv2: require("~/assets/img/banner/jlp.jpg"),
-      bannerList: [
-        {
-          url: require(`~/assets/img/banner/1.jpg`),
-          id: 13,
-        },
-        {
-          url: require(`~/assets/img/banner/2.jpg`),
-          id: 30,
-        },
-        {
-          url: require(`~/assets/img/banner/3.jpg`),
-          id: 15,
-        },
-        {
-          url: require(`~/assets/img/banner/4.jpg`),
-          id: 40,
-        },
-      ],
     };
   },
   methods: {
-    onAdvBannerClick(i) {
-      if (i === 1) {
-        window.open(`https://www.mashibing.com/live/1530`);
-      } else if (i === 2) {
-        window.open(`https://www.mashibing.com/free/1373`);
-      }
-    },
-    onBannerClick(goodsId) {
-      window.open(`${location.origin}/goods/detail/${goodsId}`);
-    },
-    onAdvBannerClick(i) {
-      if (i === 0) {
-        window.open(`https://www.mashibing.com/live/1530`);
-      } else if (i === 1) {
-        window.open(`https://www.mashibing.com/free/1373`);
+    onBannerClick(item) {
+      switch (item.jumpType) {
+        case AD_JUMP_TYPE.GOODS:
+          window.open(`${location.origin}/goods/detail/${item.jumpUrl}`);
+          break;
+        case AD_JUMP_TYPE.LINK:
+          window.open(item.jumpUrl, '_blank');
+          break;
+        default: 
+          break
       }
-    },
+    }
 
   },
 };

plugins/api/ad.js

@@ -0,0 +1,19 @@
+/*
+ * @Author: ch
+ * @Date: 2022-05-31 11:17:38
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-31 18:40:27
+ * @Description: file content
+ */
+
+import {ToAsyncAwait} from '@/plugins/utils';
+import { AD_PLATFORM } from '../dicts/ad';
+import {axios} from "../axios";
+
+const BASE_URL = '/mall/marketing';
+
+// 获取广告列表
+export const ApiGetAdList = (params) => ToAsyncAwait(axios.get(`${BASE_URL}/app/advertisement`, {
+	platform : AD_PLATFORM.PC,
+	...params
+}))

plugins/dicts/ad.js

@@ -0,0 +1,42 @@
+/*
+ * @Author: ch
+ * @Date: 2022-05-31 11:05:08
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-31 17:23:02
+ * @Description: file content
+ */
+
+ 
+const AD_PLATFORM = {
+	PC: 2,
+	MOBILE : 1
+}
+const AD_LOCATION = {
+	// 首页轮播图
+	HOME_BANNER: 1,
+	// 首页精装区
+	HOME_HARDCOVER: 2,
+	// 分类banner
+	CATEGORY_BANNER : 3
+	
+}
+
+const AD_JUMP_TYPE = {
+	// 商品详情
+	GOODS: 1,
+	// 分类
+	CATEGORY: 2,
+	// 链接
+	LINK: 3,
+	// 不跳转
+	NO_JUMP : 4
+	
+}
+export {
+	// 广告所属平台
+	AD_PLATFORM,
+	// 广告位置
+	AD_LOCATION,
+	// 广告跳转类型
+	AD_JUMP_TYPE
+}