feat[litemall-vue]: 支持专题列表页面和专题详情页面

litemall-vue/src/api/api.js

@@ -219,8 +219,29 @@ const CommentCount='wx/comment/count'; //评论总数
 const CommentPost='wx/comment/post'; //发表评论
 
 const TopicList='wx/topic/list'; //专题列表
+export function topicList(query) {
+  return request({
+    url: TopicList,
+    method: 'get',
+    params: query
+  })
+}
 const TopicDetail='wx/topic/detail'; //专题详情
+export function topicDetail(query) {
+  return request({
+    url: TopicDetail,
+    method: 'get',
+    params: query
+  })
+}
 const TopicRelated='wx/topic/related'; //相关专题
+export function topicRelated(query) {
+  return request({
+    url: TopicRelated,
+    method: 'get',
+    params: query
+  })
+}
 
 const SearchIndex='wx/search/index'; //搜索关键字
 const SearchResult='wx/search/result'; //搜索结果

litemall-vue/src/router/items.js

@@ -61,5 +61,17 @@ export default [
     name: 'brandList',
     component: () => import('@/views/items/brand-list'),
     props: route => route.query
+  },
+  {
+    path: '/items/topic/:topicId',
+    name: 'topic',
+    props: true,
+    component: () => import('@/views/items/topic')
+  },
+  {
+    path: '/items/topic-list',
+    name: 'topicList',
+    component: () => import('@/views/items/topic-list'),
+    props: route => route.query
   }
 ];

litemall-vue/src/views/home/tabbar-home.vue

@@ -91,7 +91,7 @@
                        :url="goBrand(brand.id)">
           <img :src="brand.picUrl"
                style="width: 80%;" />
-          <div style="size:10px;"> {{ brand.name }}</div>
+          <div style="font-size:16px;"> {{ brand.name }}</div>
         </van-grid-item>
       </van-grid>
       <div slot='header'>
@@ -152,6 +152,29 @@
       </div>
     </van-panel>
 
+<van-panel>
+      <van-grid clickable
+                :column-num="2">
+        <van-grid-item v-for="(topic ,index) in shopInfos.topicList"
+                       :key="index"
+                       :url="goTopic(topic.id)">
+          <img :src="topic.picUrl"
+               style="width: 90%; max-height: 150px;" />
+          <div style="font-size:14px;color:#ab956d;"> {{ topic.title }}</div>
+          <div style="font-size:10px;color:#ab956d;"> {{ topic.subtitle }}</div>
+        </van-grid-item>
+      </van-grid>
+      <div slot='header'>
+        <van-cell-group>
+          <van-cell title="专题精选"
+                    isLink>
+            <router-link to="/items/topic-list"
+                         class="text-desc">更多专题精选</router-link>
+          </van-cell>
+        </van-cell-group>
+      </div>
+    </van-panel>
+
   </div>
 </template>
 
@@ -200,6 +223,9 @@ export default {
     goBrand(id) {
       return `#/items/brand/${id}`;
     },
+    goTopic(id) {
+      return `#/items/topic/${id}`;
+    },    
     getCoupon(id) {
       couponReceive({ couponId: id }).then(res => {
         Toast.success('领取成功');

litemall-vue/src/views/items/brand-list/index.vue

@@ -56,7 +56,6 @@ export default {
     getBrandList() {
       this.page++;
       brandList({
-        isNew: true,
         page: this.page,
         limit: this.limit
       }).then(res => {

litemall-vue/src/views/items/topic-list/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="goods_topic_list">
+    <van-list v-model="loading"
+              :finished="finished"
+              :immediate-check="false"
+              finished-text="没有更多了"
+              @load="getTopicList">
+      <div class="topic-info"
+           v-for="(topic, index) in list"
+           :key="index"
+           @click="itemClick(topic.id)">
+        <div class="name">
+          <img class="img"
+               :src="topic.picUrl"
+               background-size="cover" />
+          <div class="info-box">
+            <div class="txt">{{topic.title}}</div>
+            <div class="line"></div>
+            <div class="price">阅读次数：{{topic.readCount}}</div>
+          </div>
+        </div>
+        <div class="desc">
+          {{topic.subtitle}}
+        </div>
+      </div>
+    </van-list>
+
+  </div>
+</template>
+
+<script>
+import { topicList } from '@/api/api';
+import { List } from 'vant';
+
+export default {
+  data() {
+    return {
+      list: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false
+    };
+  },
+
+  created() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      this.page = 0;
+      this.list = [];
+      this.getTopicList();
+    },
+    getTopicList() {
+      this.page++;
+      topicList({
+        page: this.page,
+        limit: this.limit
+      }).then(res => {
+        this.list.push(...res.data.data.list);
+        this.loading = false;
+        this.finished = res.data.data.page >= res.data.data.pages;
+      });
+    },
+    itemClick(id) {
+      this.$router.push(`/items/topic/${id}`);
+    }
+  },
+
+  components: {
+    [List.name]: List
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.goods_topic_list {
+  .topic-info {
+    .name {
+      width: 100%;
+      height: 180px;
+      position: relative;
+
+      .img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 180px;
+      }
+
+      .info-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 180px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        display: block;
+
+        .txt {
+          margin-top: 60px;
+          height: 25px;
+          font-size: 25px;
+          color: #fff;
+        }
+
+        .line {
+          margin: 0 auto;
+          margin-top: 16px;
+          display: block;
+          height: 2px;
+          width: 300px;
+          background: #fff;
+        }
+        .price{
+          height: 25px;
+          font-size: 25px;
+          color: #fff;
+        }
+      }
+    }
+    .desc {
+      background: #fff;
+      width: 100%;
+      height: auto;
+      overflow: hidden;
+      padding: 25px 20px;
+      font-size: 20px;
+      color: #666;
+      line-height: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>

litemall-vue/src/views/items/topic/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="goods_topic">
+    <div class="topic-detail"
+         v-html="topic.content">
+    </div>
+
+    <van-row gutter>
+      <van-col span="12"
+               v-for="(goods ,index) in topicGoods"
+               :key="index">
+        <router-link :to="{ path: `/items/detail/${goods.id}`}">
+          <img :src="goods.picUrl"
+               style="width:150px;height:150px;">
+        </router-link>
+        <div style="margin-left: 20px; rgb(123, 116, 116);">{{goods.name}}</div>
+        <div style="margin-left: 20px; color:#ab956d">￥ {{goods.retailPrice}}</div>
+      </van-col>
+    </van-row>
+
+  </div>
+</template>
+
+<script>
+import { topicDetail, topicRelated } from '@/api/api';
+import { Card, Row, Col } from 'vant';
+
+export default {
+  props: {
+    topicId: [String, Number]
+  },
+  data() {
+    return {
+      topic: {},
+      topicGoods: [],
+      topicRelated: []
+    };
+  },
+
+  created() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      topicDetail({
+        id: this.topicId
+      }).then(res => {
+        this.topic = res.data.data.topic;
+        this.topicGoods = res.data.data.goods;
+      });
+
+      topicRelated({
+        id: this.topicId
+      }).then(res => {
+        this.topicRelated = res.data.data;
+      });
+    },
+    itemClick(id) {
+      this.$router.push(`/items/detail/${id}`);
+    }
+  },
+
+  components: {
+    [Card.name]: Card,
+    [Row.name]: Row,
+    [Col.name]: Col
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.goods_topic {
+  .topic-detail {
+    /deep/ p {
+      padding: 0 10px;
+      margin-block-start: 0 !important;
+      margin-block-end: 0 !important;
+    }
+    /deep/ img {
+      max-width: 100%;
+      width: 100% !important;
+      height: 100% !important;
+      display: block;
+    }
+  }
+}
+</style>