feat[litemall-vue]: 支持团购列表页面，新品首发页面，人气推荐页面

litemall-vue/src/api/api.js

@@ -330,7 +330,14 @@ const FootprintDelete='wx/footprint/delete'; //删除足迹
 
 const UserFormIdCreate='wx/formid/create'; //用户FromId，用于发送模版消息
 
-const GroupOnList='wx/groupon/list'; //团购列表
+const GrouponList='wx/groupon/list'; //团购列表
+export function grouponList(query) {
+  return request({
+    url: GrouponList,
+    method: 'get',
+    params: query
+  })
+}
 const GroupOn='wx/groupon/query'; //团购API-查询
 const GroupOnMy='wx/groupon/my'; //团购API-我的团购
 const GroupOnDetail='wx/groupon/detail'; //团购API-详情

litemall-vue/src/router/items.js

@@ -31,5 +31,23 @@ export default [
     name: 'list',
     component: () => import('@/views/items/list'),
     props: route => route.query
+  },
+  {
+    path: '/items/hot',
+    name: 'hot',
+    component: () => import('@/views/items/hot'),
+    props: route => route.query
+  },
+  {
+    path: '/items/new',
+    name: 'new',
+    component: () => import('@/views/items/new'),
+    props: route => route.query
+  },
+  {
+    path: '/items/groupon',
+    name: 'groupon',
+    component: () => import('@/views/items/groupon'),
+    props: route => route.query
   }
 ];

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

@@ -1,33 +1,37 @@
 <template>
   <div class="tab_home">
     <div class="tal_class_searchBox">
-      <van-search placeholder="点击前往搜索" @click="$router.push({ name: 'search' })"/>
+      <van-search placeholder="点击前往搜索"
+                  @click="$router.push({ name: 'search' })" />
       <div class="tal_class_searchMask"></div>
     </div>
     <!-- 品牌商 -->
-    <van-swipe :autoplay="3000" indicator-color="white">
-      <van-swipe-item v-for="(image, index) in brandList" :key="index">
-        <img :src="image" style="height:230px">
+    <van-swipe :autoplay="3000"
+               indicator-color="white">
+      <van-swipe-item v-for="(image, index) in brandList"
+                      :key="index">
+        <img :src="image"
+             style="height:230px">
       </van-swipe-item>
     </van-swipe>
 
-  <div class="goods-channel">
-    <div class="item" 
-        @click="changeTabbar(channel)"  
-        v-for="(channel, index) in shopInfos.channel"
-        :key="index">
-      <img :src="channel.iconUrl" background-size="cover"/>
-      <span>{{channel.name}}</span>
+    <div class="goods-channel">
+      <div class="item"
+           @click="changeTabbar(channel)"
+           v-for="(channel, index) in shopInfos.channel"
+           :key="index">
+        <img :src="channel.iconUrl"
+             background-size="cover" />
+        <span>{{channel.name}}</span>
+      </div>
     </div>
-  </div>
 
-    <van-panel title="优惠券" style=" padding-bottom: 10px;">
-      <div
-        class="van-coupon-item"
-        v-for="(coupon,index) in shopInfos.couponList"
-        :key="index"
-        @click="getCoupon(coupon.id)"
-      >
+    <van-panel title="优惠券"
+               style=" padding-bottom: 10px;">
+      <div class="van-coupon-item"
+           v-for="(coupon,index) in shopInfos.couponList"
+           :key="index"
+           @click="getCoupon(coupon.id)">
         <div class="van-coupon-item__content">
           <div class="van-coupon-item__head">
             <h2>
@@ -39,73 +43,91 @@
           <div class="van-coupon-item__body">
             <h2>{{coupon.name}}</h2>
             <p>有效期：{{coupon.days}} 天</p>
-        
+
           </div>
         </div>
-         
+
       </div>
     </van-panel>
 
     <van-panel>
-      <van-card
-        :thumb-link="goDetail(grouponGood.id)"
-        v-for="(grouponGood ,index) in shopInfos.grouponList"
-        :key="index"
-        :title="grouponGood.name"
-        :desc="grouponGood.brief"
-        :origin-price="grouponGood.retailPrice"
-        :price="grouponGood.grouponPrice +'.00'"
-        :thumb="grouponGood.picUrl"
-        @native-click="goDetail(grouponGood.id)"
-      >
-        <div slot="tags" class="card__tags">
-          <van-tag plain type="primary">
+      <van-card :thumb-link="goDetail(grouponGood.id)"
+                v-for="(grouponGood ,index) in shopInfos.grouponList"
+                :key="index"
+                :title="grouponGood.name"
+                :desc="grouponGood.brief"
+                :origin-price="grouponGood.retailPrice"
+                :price="grouponGood.grouponPrice +'.00'"
+                :thumb="grouponGood.picUrl"
+                @native-click="goDetail(grouponGood.id)">
+        <div slot="tags"
+             class="card__tags">
+          <van-tag plain
+                   type="primary">
             {{grouponGood.grouponMember}}人成团
           </van-tag>
-          <van-tag plain type="danger">
+          <van-tag plain
+                   type="danger">
             {{grouponGood.grouponDiscount}}元再减
           </van-tag>
         </div>
       </van-card>
       <div slot='header'>
-      	<van-cell-group>
-			    <van-cell title="团购专区" isLink>
-			    	<router-link to="/user/coupon/list/0" class="text-desc">更多团购商品</router-link>
-			    </van-cell>
-		    </van-cell-group>
+        <van-cell-group>
+          <van-cell title="团购专区"
+                    isLink>
+            <router-link to="/items/groupon"
+                         class="text-desc">更多团购商品</router-link>
+          </van-cell>
+        </van-cell-group>
       </div>
     </van-panel>
 
-    <van-panel title="新品首发">
+    <van-panel>
       <van-row gutter>
-        <van-col span="12" v-for="(newGood ,index) in shopInfos.newGoodsList" :key="index">
+        <van-col span="12"
+                 v-for="(newGood ,index) in shopInfos.newGoodsList"
+                 :key="index">
           <router-link :to="{ path: `/items/detail/${newGood.id}`}">
-            <img :src="newGood.picUrl" style="width:180px;height:180px;">
+            <img :src="newGood.picUrl"
+                 style="width:180px;height:180px;">
           </router-link>
-          <span
-            style="padding-left: 20px;position: relative;bottom: 10px; color: rgb(123, 116, 116);white-space: nowrap;"
-          >{{newGood.name}}</span>
-          <span
-            style="padding-left: 80px;position: relative;bottom: 10px; color:#ab956d"
-          >￥ {{newGood.retailPrice}}</span>
+          <span style="padding-left: 20px;position: relative;bottom: 10px; color: rgb(123, 116, 116);white-space: nowrap;">{{newGood.name}}</span>
+          <span style="padding-left: 80px;position: relative;bottom: 10px; color:#ab956d">￥ {{newGood.retailPrice}}</span>
         </van-col>
       </van-row>
+      <div slot='header'>
+        <van-cell-group>
+          <van-cell title="新品首发"
+                    isLink>
+            <router-link to="/items/new"
+                         class="text-desc">更多新品首发</router-link>
+          </van-cell>
+        </van-cell-group>
+      </div>
     </van-panel>
 
-    <van-panel title="人气推荐">
-      <van-card
-        :thumb-link="goDetail(groupGood.id)"
-        v-for="(groupGood ,index) in shopInfos.hotGoodsList"
-        :key="index"
-        :title="groupGood.name"
-        :desc="groupGood.brief"
-        :origin-price="groupGood.counterPrice"
-        :price="groupGood.retailPrice +'.00'"
-        :thumb="groupGood.picUrl"
-        @native-click="goDetail(groupGood.id)"
-      >
+    <van-panel>
+      <van-card :thumb-link="goDetail(groupGood.id)"
+                v-for="(groupGood ,index) in shopInfos.hotGoodsList"
+                :key="index"
+                :title="groupGood.name"
+                :desc="groupGood.brief"
+                :origin-price="groupGood.counterPrice"
+                :price="groupGood.retailPrice +'.00'"
+                :thumb="groupGood.picUrl"
+                @native-click="goDetail(groupGood.id)">
         <!-- <div slot="footer">添加日期 {{item.addTime}}</div> -->
       </van-card>
+      <div slot='header'>
+        <van-cell-group>
+          <van-cell title="人气推荐"
+                    isLink>
+            <router-link to="/items/hot"
+                         class="text-desc">更多人气推荐</router-link>
+          </van-cell>
+        </van-cell-group>
+      </div>      
     </van-panel>
 
   </div>
@@ -153,18 +175,18 @@ export default {
       return `#/items/detail/${id}`;
     },
     getCoupon(id) {
-      couponReceive({couponId: id}).then(res => {
+      couponReceive({ couponId: id }).then(res => {
         Toast.success('领取成功');
-      })
+      });
     },
     changeTabbar(o) {
-      goodsCategory({ id: o.id}).then(res => {
+      goodsCategory({ id: o.id }).then(res => {
         let categoryId = res.data.data.currentCategory.id;
-          this.$router.replace({
+        this.$router.replace({
           name: 'list',
           query: { itemClass: categoryId }
         });
-      })
+      });
     },
     initViews() {
       getHome().then(res => {
@@ -175,7 +197,6 @@ export default {
         });
       });
     }
-
   },
 
   components: {
@@ -294,8 +315,7 @@ export default {
   padding: 24px 0 0 15px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border:1px solid red;
-
+  border: 1px solid red;
 }
 .van-coupon-item h2,
 .van-coupon-item p {

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="goods_groupon">
+    <div class="banner">
+      <div class="title">团购列表</div>
+    </div>
+
+    <van-list v-model="loading"
+              :finished="finished"
+              :immediate-check="false"
+              finished-text="没有更多了"
+              @load="getGrouponList">
+      <van-card v-for="(item, i) in list"
+                :key="i"
+                :desc="item.brief"
+                :title="item.name"
+                :thumb="item.picUrl"
+                :price="item.retailPrice"
+                :origin-price="item.counterPrice"
+                @click="itemClick(item.id)">
+        <div slot="tags">
+          <van-tag plain
+                   type="primary">
+            {{item.grouponMember}}人成团
+          </van-tag>
+          <van-tag plain
+                   type="danger"
+                   style="margin-left:5px;">
+            {{item.grouponDiscount}}元再减
+          </van-tag>
+        </div>
+      </van-card>
+    </van-list>
+
+  </div>
+</template>
+
+<script>
+import { grouponList } from '@/api/api';
+import { Card, Tag, List } from 'vant';
+import scrollFixed from '@/mixin/scroll-fixed';
+
+export default {
+  mixins: [scrollFixed],
+
+  data() {
+    return {
+      list: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false
+    };
+  },
+
+  created() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      this.page = 0;
+      this.list = [];
+      this.getGrouponList();
+    },
+    getGrouponList() {
+      this.page++;
+      grouponList({
+        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/detail/${id}`);
+    }
+  },
+
+  components: {
+    [List.name]: List,
+    [Tag.name]: Tag,
+    [Card.name]: Card
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.goods_groupon {
+  padding: 20px;
+  .banner {
+    height: 250px;
+    background-image: url('http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png');
+    background-size: cover;
+    margin-bottom: 20px;
+    .title {
+      text-align: center;
+      line-height: 200px;
+      color: #ffffff;
+      font-size: 40px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="goods_hot">
+    <div class="banner">
+      <div class="title">大家都在买</div>
+    </div>
+
+    <van-list v-model="loading"
+              :finished="finished"
+              :immediate-check="false"
+              finished-text="没有更多了"
+              @load="getHotList">
+      <van-card v-for="(item, i) in list"
+                :key="i"
+                :desc="item.brief"
+                :title="item.name"
+                :thumb="item.picUrl"
+                :price="item.retailPrice"
+                :origin-price="item.counterPrice"
+                @click="itemClick(item.id)">
+      </van-card>
+    </van-list>
+
+  </div>
+</template>
+
+<script>
+import { goodsList } from '@/api/api';
+import { Card, List } from 'vant';
+import scrollFixed from '@/mixin/scroll-fixed';
+
+export default {
+  mixins: [scrollFixed],
+
+  data() {
+    return {
+      list: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false
+    };
+  },
+
+  created() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      this.page = 0;
+      this.list = [];
+      this.getHotList();
+    },
+    getHotList() {
+      this.page++;
+      goodsList({
+        isHot: true,
+        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/detail/${id}`);
+    }
+  },
+
+  components: {
+    [List.name]: List,
+    [Card.name]: Card
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.goods_hot {
+  padding: 20px;
+  .banner {
+    height: 250px;
+    background-image: url('http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png');
+    background-size: cover;
+    margin-bottom: 20px;
+    .title {
+      text-align: center;
+      line-height: 200px;
+      color: #ffffff;
+      font-size: 40px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="goods_new">
+    <div class="banner">
+      <div class="title">新品首发</div>
+    </div>
+
+    <van-list v-model="loading"
+              :finished="finished"
+              :immediate-check="false"
+              finished-text="没有更多了"
+              @load="getNewtList">
+      <van-card v-for="(item, i) in list"
+                :key="i"
+                :desc="item.brief"
+                :title="item.name"
+                :thumb="item.picUrl"
+                :price="item.retailPrice"
+                :origin-price="item.counterPrice"
+                @click="itemClick(item.id)">
+      </van-card>
+    </van-list>
+
+  </div>
+</template>
+
+<script>
+import { goodsList } from '@/api/api';
+import { Card, List } from 'vant';
+import scrollFixed from '@/mixin/scroll-fixed';
+
+export default {
+  mixins: [scrollFixed],
+
+  data() {
+    return {
+      list: [],
+      page: 0,
+      limit: 10,
+      loading: false,
+      finished: false
+    };
+  },
+
+  created() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      this.page = 0;
+      this.list = [];
+      this.getNewtList();
+    },
+    getNewtList() {
+      this.page++;
+      goodsList({
+        isNew: true,
+        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/detail/${id}`);
+    }
+  },
+
+  components: {
+
+    [List.name]: List,
+    [Card.name]: Card
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.goods_new {
+  padding: 20px;
+  .banner {
+    height: 250px;
+    background-image: url('http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png');
+    background-size: cover;
+    margin-bottom: 20px;
+    .title {
+      text-align: center;
+      line-height: 200px;
+      color: #ffffff;
+      font-size: 40px;
+    }
+  }
+}
+</style>