文章卡片组件

src/api/classification.js

+import { requestPOST, requestGET } from "@/utils/request.js"
+export default {
+  getArticleList(data) {
+    return requestPOST(
+      `${process.env.OLSHOP_URL}/article/getArticleList`,
+      data
+    );
+  },
+  addLike(data) {
+     return requestPOST(`${process.env.OLSHOP_URL}/article/fabulous`, data);
+  }
+};
\ No newline at end of file

src/components/content/information/articleItem.vue

+<template>
+  <!-- 文章item -->
+  <div
+    class="articleItem"
+    :class="[
+      'articleItem'+listStyle,
+      cartStyle == 2 && listStyle != 5 ? 'articleItemBorder' : '',
+      imgRight ? 'imgRight' : '',
+    ]"
+    :style="{
+      'box-shadow': cartStyle == 1 && listStyle != 5 ? '0px 0px 5px 0px #ccc' : '',
+      '--border_color': '#D8D8D8',
+      'border-radius': cartRadius == 1 && listStyle != 5 ? '8px' : '',
+      '--border_radius': cartRadius == 1 && listStyle != 5 ? '8px' : '',
+      'background': listStyle != 5 ? bgColor : ''
+    }"
+    @click="toInfoPage"
+  >
+    <div class="img" v-if="!imgRight" :style="{'background': listStyle != 5 ? bgColor : ''}">
+      <div
+        class="tagList flex"
+        v-if="info.tagList && info.tagList.length > 0 && tagShow"
+      >
+        <div
+          class="tag"
+          v-for="(item, index) in info.tagShowList"
+          :key="index"
+        >
+          <i class="tag-i">#</i>
+          <span class="tagName">{{ item.tagName }}</span>
+        </div>
+      </div>
+      <image :src="info.coverUrl" mode="widthFix"></image>
+    </div>
+    <div class="infoText">
+      <p
+        class="content"
+        :style="{ 'font-weight': fontWeight, color: textColor }"
+      >
+        {{ info.title }}
+      </p>
+      <div class="bottom flex" v-if="viewNumShow || starNumShow">
+        <div class="view" v-if="viewNumShow">
+          <span>阅读</span>
+          <span>{{ info.userBrowsingNum }}</span>
+        </div>
+        <div
+          class="star"
+          v-if="starNumShow"
+          @click.stop="toLike(info)"
+          :class="{ isLike: info.isLike == 'true' }"
+        >
+          <i class="ant-shoucang-line"></i>
+          <span>{{ info.fabulousNum }}</span>
+        </div>
+      </div>
+    </div>
+    <!-- 针对图片在右边 -->
+    <div class="img" v-if="imgRight">
+      <div
+        class="tagList flex"
+        v-if="info.tagList && info.tagList.length > 0 && tagShow"
+      >
+        <div
+          class="tag"
+          v-for="(item, index) in info.tagShowList"
+          :key="index"
+        >
+          <i class="tag-i">#</i>
+          <span class="tagName">{{ item.tagName }}</span>
+        </div>
+      </div>
+      <image :src="info.coverUrl" mode="widthFix"></image>
+    </div>
+  </div>
+</template>
+<script type="text/ecmascript-6">
+import informationComputed from "./mixin/information-computed.js";
+const app=getApp();
+export default {
+  mixins: [informationComputed],
+  name: "articleItem",
+  props: {
+    render: {
+      type: Boolean,
+      default: false,
+    },
+    info: {
+      type: Object,
+      default: {},
+    },
+    num: {
+      type: Number,
+      default: 0,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    datas: {
+      type: Object,
+      default: function () {
+        return {
+          componentData: {},
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      imgWidth: 0,
+    };
+  },
+  components: {},
+  computed: {
+    imgRight() {
+      if ((this.listStyle == 5 && this.num > 0) || this.listStyle == 6) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    toInfoPage() {
+      this.$emit("toInfoPage", this.info);
+    },
+    // 点赞
+    toLike(item) {
+      if (!this.render) return;
+      app.$themeArticleLike(item, (res) => {
+        item.isLike = res;
+        if (res == "true") {
+          item.fabulousNum = Number(item.fabulousNum) + 1;
+        } else {
+          item.fabulousNum -= 1;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+img {
+  display: block;
+}
+.articleItem {
+  padding-bottom: 0.84em;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+  .img {
+    width: 100%;
+    position: relative;
+    background: #fdfdfd;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .tagList {
+      position: absolute;
+      bottom: 4px;
+      left: 4px;
+      max-width: 92%;
+      flex-wrap: wrap;
+      overflow: hidden;
+      .tag {
+        padding: 0 8px;
+        height: 22px;
+        line-height: 22px;
+        background: #fff;
+        border-radius: 4px;
+        margin-left: 4px;
+        margin-bottom: 4px;
+        display:flex;
+        .tag-i {
+          font-weight: 400;
+          color: var(--main-color);
+          font-size: 12px;
+        }
+        .tagName {
+          color: #424242;
+          font-size: 12px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+  .content {
+    padding: 0 8px;
+    font-size: 14px;
+    min-height: 42px;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    position: relative;
+    line-height: 22px;
+  }
+  .bottom {
+    margin-top: 8px;
+    padding: 0 8px;
+    justify-content: space-between;
+    align-items: center;
+    & > div {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+      color: #999;
+      i {
+        font-size: 16px;
+      }
+      span:nth-child(2) {
+        margin-left: 4px;
+      }
+    }
+    .isLike {
+      color: var(--main-color);
+    }
+  }
+}
+.articleItemBorder{
+  border: 1px solid #D8D8D8;
+}
+// 大图模式
+.articleItem1 {
+  margin-top: 10px;
+  .img {
+    height: 140px;
+  }
+  .infoText {
+    margin-top: 10px;
+  }
+}
+// 瀑布流
+.articleItem2 {
+  margin-bottom: 10px;
+  .img {
+    image {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .infoText {
+    margin-top: 0.84em;
+  }
+}
+// 一行两个
+.articleItem3 {
+  display: inline-block;
+  margin-top: 0;
+  width: 49%;
+  vertical-align: top;
+  white-space: normal;
+  .img {
+    height: 140px;
+  }
+  .infoText {
+    margin-top: 10px;
+    .content {
+      overflow: hidden;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      position: relative;
+      line-height: 22px;
+    }
+  }
+}
+.articleItem3:nth-child(2n) {
+  margin-left: 2%;
+}
+.articleItem3:not(:nth-child(-1n + 2)) {
+  margin-top: 10px;
+}
+// 横向滚动
+.articleItem4 {
+  display: inline-block;
+  margin-top: 0;
+  width: 42%;
+  vertical-align: top;
+  white-space: normal;
+  .img {
+    height: 140px;
+  }
+  .infoText {
+    margin-top: 10px;
+    .content {
+      overflow: hidden;
+      -o-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      position: relative;
+      line-height: 22px;
+    }
+  }
+}
+.articleItem4:not(:first-of-type) {
+  margin-left: 2%;
+}
+// 一大多小
+.articleItem5 {
+  .img {
+    height: 140px;
+  }
+  .infoText {
+    margin-top: 10px;
+  }
+}
+.articleItem5:not(:first-of-type) {
+  border-top: 1px solid #d8d8d8;
+  .img {
+    height: 140px;
+  }
+  .infoText {
+    margin-top: 10px;
+  }
+}
+// 详细列表
+.articleItem6 {
+  margin-top: 10px;
+}
+
+.imgRight {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 8px 12px 0;
+  .infoText {
+    flex: 1;
+    height: 90px;
+    margin-top: 0 !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .img {
+    width: 100px;
+    height: 100px !important;
+    border-radius: 6px;
+    overflow: hidden;
+    margin-left: 12px;
+  }
+}
+</style>

src/components/content/information/mixin/information-computed.js

+// information-computed  计算属性混入
+export default {
+  computed: {
+    // 列表样式
+    listStyle() {
+      return this.datas.componentData.listStyle || 1;
+    },
+    // 展示文章标签
+    tagShow() {
+      return this.datas.componentData.tagShow || false;
+    },
+    // 展示阅读数
+    viewNumShow() {
+      return this.datas.componentData.viewNumShow || false;
+    },
+    // 展示点赞数
+    starNumShow() {
+      return this.datas.componentData.starNumShow || false;
+    },
+    //字体粗细
+    fontWeight() {
+      return this.datas.componentData.fontWeight || "bold";
+    },
+    //文字颜色
+    textColor() {
+      return this.datas.componentData.textColor || "rgba(51,51,51,1)";
+    },
+    //卡片样式
+    cartStyle() {
+      return this.datas.componentData.cartStyle || 1;
+    },
+    //卡片倒角
+    cartRadius() {
+      return this.datas.componentData.cartRadius || 1;
+    },
+    //背景颜色
+    bgColor() {
+      return this.datas.componentData.bgColor || "rgba(255,255,255,1)";
+    }
+  }
+};

src/components/content/information/skeleton-information.vue

+<template>
+  <div
+    class="skeleton-information skeleton-animate skeleton-block-w100"
+    :class="[listStyle==2||listStyle==3||listStyle==4?'skeleton-flex-sb':'']"
+  >
+    <div class="skeleton-bg skeleton-title-h20 skeleton-title-w100"></div>
+    <div
+      v-for="(item,index) in skeletonNum"
+      :key="index"
+      :class="[listStyle==2||listStyle==3||listStyle==4?'skeleton-block-w48':'skeleton-block-w100']"
+    >
+      <div v-if="listStyle==1">
+        <div class="skeleton-bg skeleton-block-h40 skeleton-block-w100"></div>
+        <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
+        <div class="skeleton-flex-sb">
+          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
+          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
+        </div>
+      </div>
+      <div v-if="listStyle==2||listStyle==3||listStyle==4">
+        <div class="skeleton-bg skeleton-block-h100 skeleton-block-w100"></div>
+        <div class="skeleton-bg skeleton-title-h20 skeleton-title-w100"></div>
+        <div class="skeleton-flex-sb">
+          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
+          <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
+        </div>
+      </div>
+      <div v-if="listStyle==5">
+        <div v-if="index==0">
+          <div class="skeleton-bg skeleton-block-h40 skeleton-block-w100"></div>
+          <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
+          <div class="skeleton-flex-sb">
+            <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
+            <div class="skeleton-bg skeleton-title-h16 skeleton-title-w20"></div>
+          </div>
+        </div>
+        <div v-else>
+          <div class="skeleton-flex-sb">
+            <div class="skeleton-block-w60">
+              <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
+              <div class="skeleton-block-h12 skeleton-block-w30"></div>
+              <div class="skeleton-flex-sb">
+                <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
+                <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
+              </div>
+            </div>
+            <div class="skeleton-bg skeleton-block-h30 skeleton-block-w30"></div>
+          </div>
+        </div>
+      </div>
+      <div v-if="listStyle==6">
+        <div class="skeleton-flex-sb">
+          <div class="skeleton-block-w60">
+            <div class="skeleton-bg skeleton-title-h30 skeleton-title-w100"></div>
+            <div class="skeleton-block-h12 skeleton-block-w30"></div>
+            <div class="skeleton-flex-sb">
+              <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
+              <div class="skeleton-bg skeleton-title-h16 skeleton-title-w30"></div>
+            </div>
+          </div>
+          <div class="skeleton-bg skeleton-block-h30 skeleton-block-w30"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "skeleton-information",
+  props:['listStyle','skeletonNum'],
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+$skeletonColor: #f2f3f5;
+// $skeletonColor: #ccc;
+// 骨架屏样式
+.skeleton-bg {
+  background: $skeletonColor;
+}
+.skeleton-flex-sb {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.skeleton-flex-sa {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  align-items: center;
+}
+@for $h from 1 through 200 {
+  .skeleton-block-h#{$h} {
+    padding-top: (1% * $h);
+    margin-top: 10px;
+  }
+}
+@for $w from 1 through 200 {
+  .skeleton-block-w#{$w} {
+    width: (1% * $w);
+  }
+}
+@for $h from 1 through 200 {
+  .skeleton-title-h#{$h} {
+    height: (1px * $h);
+    margin-top: 10px;
+  }
+}
+@for $h from 1 through 200 {
+  .skeleton-title-w#{$h} {
+    width: (1% * $h);
+  }
+}
+
+.skeleton-animate {
+  animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+@keyframes skeleton-blink {
+  50% {
+    opacity: 0.6;
+  }
+}
+</style>

src/main.js

@@ -7,8 +7,9 @@ import orderApi from "./api/order"
 import promoteApi from "./api/promote";
 import indexApi from './api/index'
 import cartApi from './api/cart'
+import classificationApi from "./api/classification";
 import { DFSImg } from "@/utils/index";
-import { $themeToLink, $themeAddToCard } from "@/utils/mayi";
+import { $themeToLink, $themeAddToCard, $themeArticleLike } from "@/utils/mayi";
 import shop from "./api/shop";
 
 Vue.config.productionTip = false
@@ -54,12 +55,15 @@ console.log('3555555', wx)
 mpApp.$themeToLink = $themeToLink
 // 全局加入购物车
 mpApp.$themeAddToCard = $themeAddToCard
+// 文章点赞
+mpApp.$themeArticleLike = $themeArticleLike
 // api
 mpApp.goodsApi = goodsApi;
 mpApp.orderApi = orderApi;
 mpApp.promoteApi = promoteApi;
 mpApp.indexApi = indexApi;
 mpApp.cartApi = cartApi;
+mpApp.classificationApi = classificationApi;
 mpApp.DFSImg = DFSImg;
 
 mpApp.getThemePage = getThemePage

src/pages/home/index.vue

@@ -76,7 +76,7 @@
 			      <live-broadcast :datas="item"></live-broadcast>
           </div>
           <div v-if="item.componentCode == 'information' && item.componentInfo.visible == 1">
-			      <!-- <information :datas="item"></information> -->
+			      <information :datas="item"></information>
           </div>
           <div v-if="item.componentCode == 'share-picture' && item.componentInfo.visible == 1">
 			      <share-picture :datas="item"></share-picture>
@@ -97,7 +97,7 @@ import interval from '@/components/basicTool/interval/index.vue'
 import partition from '@/components/basicTool/partition/index.vue'
 import shopPopup from '@/components/basicTool/shop-popup/index.vue'
 import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
-// import information from '@/components/content/information/index.vue'
+import information from '@/components/content/information/index.vue'
 import text from '@/components/content/text'
 import imgText from '@/components/content/imgText'
 import coupon from '@/components/activity/coupon'
@@ -130,7 +130,7 @@ export default {
     coupon,
     integralTurntable,
     transverseLabel,
-    // information
+    information
   },
   onShareAppMessage(res) {
     let shareVal={};

src/utils/mayi.js

 import cart from "@/api/cart"
+import classificationApi from "@/api/classification";
 
 // 登录白名单 name
 export const noLoginList = ["index", "media-video", "goods-goodsInfo", "goods-commodityMenu", "goodsSearch-goodsSearch", "chooseStores", "activty-receivingGift", "activty", "login-register", "login-phoneLogin", "login-authInformation", "login-forgetPassWord", "login-accountLogin", "login-wxRegister", "pay-payList", "comment-evaluateList", "goods-commonProblemList", "article-articlePage", "article-articleList", "goods-posters", "liveBroadcast", "liveBroadcast-list", "personalCenter-coupon-getCoupon", "buyerShow-showDetail", "goods-addGoodsList", "personalCenter-CDkey-exchange", "giftCards-linkReceive", "giftCoupon-preview", "smartForm", "shopCart-shareShopCart", "groupBuying-beInvite", "brandTopics", 'personalCenter-spokesmanCenter', 'personalCenter-spokesmanCenter-mine-spokesmanHomePage','liveBroadcast-lived', 'personalCenter-spokesmanCenter-mine-getBusinessCard','changeAdr'];
@@ -207,3 +208,17 @@ export function checkShowConditionIds(list) {
         isAreaNavigation
     }
 }
+export function $themeArticleLike(item, callback){
+  let query = { articleId: item.id };
+  classificationApi.addLike(query).then(res => {
+    if (res.data.code == "200") {
+        if (res.data.data == 'true') {
+            callback("true");
+        } else {
+            callback("false");
+        }
+    } else {
+      Toast(res.data.msg);
+    }
+  });
+}
\ No newline at end of file