feat(广告): (#454) 动态列表随机插入模拟动态卡片广告

src/page/feed/FeedList.vue

@@ -50,10 +50,14 @@
             :pinned="true" />
         </li>
         <li
-          v-for="(feed, index) in feeds"
-          v-if="feed.id"
-          :key="`feed-${feedType}-${feed.id}-${index}`">
-          <feed-card :feed="feed" />
+          v-for="(card, index) in feeds"
+          :key="`feed-${feedType}-${card.id}-${index}`">
+          <feed-card
+            v-if="card.user_id"
+            :feed="card" />
+          <feed-ad-card
+            v-if="card.space_id"
+            :ad="card"/>
         </li>
       </ul>
     </jo-load-more>
@@ -68,6 +72,7 @@
  */
 
 import FeedCard from "@/components/FeedCard/FeedCard.vue";
+import FeedAdCard from "./components/FeedAdCard.vue";
 import BannerAd from "@/components/advertisement/BannerAd.vue";
 import * as api from "@/api/feeds.js";
 import * as bootApi from "@/api/bootstrappers.js";
@@ -77,11 +82,12 @@ const noop = () => {};
 
 export default {
   name: "FeedList",
-  components: { FeedCard, BannerAd },
+  components: { FeedCard, BannerAd, FeedAdCard },
   data() {
     return {
       pinned: [], // 置顶
-      feedCardAds: [],
+      adCardList: [],
+      adIndex: 0,
 
       newFeeds: [],
       hotFeeds: [],
@@ -122,30 +128,50 @@ export default {
   },
   created() {
     this.onRefresh(noop);
+    this.getAdCards();
   },
   methods: {
     onRefresh(callback) {
       // TODO: @mutoe [api] refactor there with vuex action
       api.getFeedsByType(this.feedType, 15).then(({ data }) => {
         const { pinned = [], feeds = [] } = data;
-        this.feeds = feeds;
         this.pinned = pinned;
         callback(feeds.length < 15);
+        if (this.feedType === "hot") {
+          // 从广告栈顶取出一条随机插入列表
+          let rand = ~~(Math.random() * 14) + 1;
+          rand > feeds.length && (rand = feeds.length);
+          this.adIndex = 0;
+          this.adCardList[this.adIndex] &&
+            feeds.splice(rand, 0, this.adCardList[this.adIndex++]);
+        }
+        this.feeds = feeds;
       });
-      this.feedType === "hot" &&
-        // TODO: @mutoe [api] refactor there with vuex action
-        bootApi.getAdsById(this.feedCardAdsId).then(({ data }) => {
-          this.feedCardAds = data.sort((a, b) => a.sort < b.sort);
-        });
     },
     onLoadMore(callback) {
       // 热门动态 修改为 offset
-      const after = this.feedType === "hot" ? this.hotFeeds.length : this.maxId;
+      const after =
+        this.feedType === "hot"
+          ? this.hotFeeds.length - this.adCardList.length
+          : this.maxId;
       api.getFeedsByType(this.feedType, 15, after).then(({ data }) => {
         const { pinned = [], feeds = [] } = data;
         this.pinned = pinned;
-        this.feeds = [...this.feeds, ...feeds];
         callback(feeds.length < 15);
+        if (this.feedType === "hot") {
+          // 从广告栈顶取出一条随机插入列表
+          let rand = ~~(Math.random() * 9) + 1;
+          rand > feeds.length && (rand = feeds.length);
+          this.adCardList[this.adIndex] &&
+            feeds.splice(rand, 0, this.adCardList[this.adIndex++]);
+        }
+        this.feeds = [...this.feeds, ...feeds];
+      });
+    },
+    getAdCards() {
+      // TODO: @mutoe [api] refactor there with vuex action
+      bootApi.getAdsById(this.feedCardAdsId).then(({ data }) => {
+        this.adCardList = data.sort((a, b) => a.sort < b.sort);
       });
     }
   }

src/page/feed/components/FeedAdCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <a
+    :href="ad.data.link"
+    class="m-box-model m-card">
+    <div class="m-box">
+      <avatar :user="ad.data" />
+      <section class="m-box-model m-flex-grow1 m-flex-shrink1 m-card-main">
+        <header class="m-box m-aln-center m-justify-bet m-card-usr">
+          <h4 class="m-flex-grow1 m-flex-shrink1">{{ ad.data.name }}</h4>
+          <div class="m-box m-aln-center">
+            <span>{{ ad.data.time | formatDate('MM-dd') }}</span>
+          </div>
+        </header>
+        <article class="m-card-body">
+          <div
+            v-if="ad.data.content.length > 0"
+            class="m-card-con">
+            <p class="m-text-box m-text-cut-3">{{ ad.data.content }}</p>
+            <div class="image">
+              <img :src="ad.data.image">
+            </div>
+          </div>
+        </article>
+      </section>
+    </div>
+    <footer class="m-box-model m-card-foot m-bt1">
+      <div class="m-box m-aln-center m-card-tools m-lim-width">
+        <span class="advertise-badge">广告</span>
+      </div>
+    </footer>
+  </a>
+</template>
+
+<script>
+/**
+ * 模拟动态卡片广告
+ */
+export default {
+  name: "FeedCard",
+  props: {
+    ad: { type: Object, required: true }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.m-card {
+  padding: 30px 20px 0;
+  box-sizing: border-box;
+  background-color: #fff;
+
+  .m-card-usr {
+    font-size: 24px;
+    color: #ccc;
+    margin-bottom: 30px;
+    h4 {
+      color: #000;
+      font-size: 26px;
+    }
+    span + span {
+      margin-left: 15px;
+    }
+  }
+  .m-card-main {
+    margin-left: 20px;
+  }
+  .m-card-con {
+    overflow: hidden;
+    font-size: 30px;
+    line-height: 42px;
+    color: @text-color2;
+
+    .image {
+      margin-top: 12px;
+      img {
+        width: 518px;
+      }
+    }
+  }
+  .m-card-body {
+    > h2 {
+      font-size: 32px;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+  }
+  .m-card-foot {
+    margin-top: 20px;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding: 0 20px 0 120px;
+
+    .advertise-badge {
+      border: 1px solid #ededed;
+      padding: 2px 8px;
+    }
+  }
+  .m-card-tools {
+    padding: 30px 0;
+    color: #b3b3b3;
+    font-size: 24px;
+    a {
+      color: inherit;
+      + a {
+        margin-left: 60px;
+      }
+    }
+    span {
+      margin-left: 10px;
+    }
+  }
+}
+</style>