refact[litemall-vue]: 删除三个card相关自定义组件，而是采用vant Card组件

litemall-vue/src/components/item-card-hori/index.vue

@@ -1,161 +0,0 @@
-<template>
-  <div class="item_card_H_wrap one_border" @click="OnClick">
-    <div class="clearfix">
-      <div class="item_card_image float-l">
-        <div v-if="$slots.leftTopIcon" class="leftTopIcon">
-          <slot name="leftTopIcon"></slot>
-        </div>
-
-        <div v-if="$slots.mask" class="item_img_mask">
-          <slot name="mask"></slot>
-        </div>
-        <img v-lazy="goods.picUrl">
-        <div class="item_image_desc">{{goodsStatusToMe}}</div>
-      </div>
-      <!-- {{goods}} -->
-      <div class="item_card_info">
-        <div class="item_card_name">
-          <van-tag plain type="danger" v-if="goods.is_haitao">海淘</van-tag>
-          <span v-if="$slots.icon" class="item_card_icon">
-            <slot name="icon"></slot>
-          </span>
-          {{goods.name}}
-        </div>
-
-        <div class="item_card_info_desc">{{goods.brief}}</div>
-
-        <div class="item_card_footer">
-          <div class="footer_price">
-            <span>{{goods.retailPrice * 100 | yuan}}</span>
-            <span class="marketPrice" v-if="goods.counterPrice">{{goods.counterPrice * 100 | yuan}}</span>
-          </div>
-
-          <div class="footer_desc" v-if="$slots.footer">
-            <slot name="footer"></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-
-<script>
-import item_mix from '@/mixin/item-card';
-
-export default {
-  name: 'item-card-hori',
-  mixins: [item_mix]
-};
-</script>
-
-<style lang="scss" scoped>
-.item_card_H_wrap {
-  padding: 15px 10px;
-}
-
-.item_card_image {
-  position: relative;
-  padding-top: 5px;
-  width: 90px;
-  height: 90px;
-  text-align: center;
-  img {
-    display: inline-block;
-    max-height: 100%;
-    max-width: 100%;
-  }
-  .leftTopIcon {
-    position: absolute;
-    left: 0;
-    top: 0;
-    max-width: 50%;
-    text-align: left;
-  }
-  .item_image_desc {
-    position: absolute;
-    bottom: 0;
-    background-color: rgba(244, 133, 145, 0.8);
-    width: 100%;
-    color: #fff;
-    font-size: 12px;
-  }
-  .item_img_mask {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 2;
-    transform: translate(-50%, -50%);
-    width: 70px;
-    height: 70px;
-    overflow: hidden;
-  }
-}
-
-.item_card_info {
-  position: relative;
-  margin-left: 110px;
-  height: 100px;
-  .item_card_name {
-    font-size: 12px;
-    margin-bottom: 10px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .item_card_name .item_card_icon {
-    width: 25px;
-    height: 14px;
-    vertical-align: middle;
-    display: inline-block;
-    background-repeat: no-repeat;
-  }
-
-  .isHaiTao {
-    background-image: url(http://mamaqunaer.oss-cn-shanghai.aliyuncs.com/20171121/xMACDPN2Bz.png);
-  }
-
-  .item_card_info_desc {
-    font-size: 12px;
-    color: $font-color-gray;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-
-  .item_card_icon img {
-    max-height: 100%;
-    max-width: 100%;
-  }
-
-  .item_card_footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-
-    .footer_price {
-      color: $red;
-      margin-right: 5px;
-    }
-
-    .footer_price .marketPrice {
-      color: $font-color-gray;
-      font-size: 12px;
-      text-decoration: line-through;
-      margin-left: 5px;
-    }
-
-    .footer_desc {
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-</style>

litemall-vue/src/components/item-card-vert/index.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="item_card_V_wrap" @click="OnClick">
-    <div class="item_card_image">
-      <div v-if="$slots.leftTopIcon" class="leftTopIcon">
-        <slot name="leftTopIcon"></slot>
-      </div>
-
-      <div v-if="$slots.mask" class="item_img_mask">
-        <slot name="mask"></slot>
-      </div>
-      <img v-lazy="goods.pic_url">
-      <div class="item_image_desc">{{goodsStatusToMe}}</div>
-    </div>
-    <div class="item_card_name">
-      <van-tag plain type="danger" v-if="goods.is_haitao">海淘</van-tag>
-      <span v-if="$slots.icon" class="item_card_icon">
-        <slot name="icon"></slot>
-      </span>
-      {{goods.name}}
-    </div>
-
-    <div class="item_card_price">{{goods.retailPrice | yuan}}</div>
-  </div>
-</template>
-
-
-<script>
-import item_mix from '@/mixin/item-card';
-
-export default {
-  name: 'item-card-vert',
-  mixins: [item_mix]
-};
-</script>
-
-<style lang="scss" scoped>
-.item_card_V_wrap {
-  display: inline-block;
-  flex: 1;
-  width: 90px;
-  margin: 0 10px;
-}
-
-.item_card_image {
-  position: relative;
-  width: 100%;
-  height: 90px;
-  margin-bottom: 5px;
-  text-align: center;
-  .leftTopIcon {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 3;
-    max-width: 50%;
-    text-align: left;
-  }
-  img {
-    display: inline-block;
-    max-height: 100%;
-    max-width: 100%;
-  }
-  .item_image_desc {
-    position: absolute;
-    bottom: 0;
-    background-color: rgba(244, 133, 145, 0.8);
-    width: 100%;
-    color: #fff;
-    font-size: 12px;
-  }
-  .item_img_mask {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 2;
-    transform: translate(-50%, -50%);
-    width: 70px;
-    height: 70px;
-    overflow: hidden;
-  }
-}
-
-.item_card_name {
-  line-height: 16px;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  text-align: center;
-}
-
-.item_card_icon {
-  width: 30px;
-  height: 14px;
-  vertical-align: middle;
-  display: inline-block;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.item_card_icon img {
-  max-height: 100%;
-  max-width: 100%;
-}
-
-.isHaiTao {
-  background-image: url(http://www-dev.mamaqunaer.com/images/common/icon_menu_bdt.png);
-}
-
-.item_card_price {
-  text-align: center;
-  color: $red;
-}
-</style>

litemall-vue/src/components/item-group/index.vue

@@ -1,152 +0,0 @@
-<template>
-	<div class="items_group">
-		<van-cell-group v-if="setting && !!setting.title">
-			<van-cell>
-				<slot v-if="$slots.title_right" name="title_right"></slot>
-				<template slot="icon">
-					<van-icon class="van-cell__left-icon" v-if="setting.icon" :style="{color: setting.title_color}" :name="setting.icon"/>
-				</template>
-				<template slot="title">
-					<span class="group_title" :style="{color: setting.title_color}">{{setting.title}}</span>
-					<slot name="title-desc">
-						<span class="group_title_desc">{{setting.title_desc}}</span>
-					</slot>
-				</template>
-			</van-cell>
-		</van-cell-group>
-
-		<div class="group_banner" v-if="setting && setting.banner">
-			<img v-lazy="setting.banner" alt="海报" width="100%">
-		</div>
-
-		<div class="item_scroll_box" v-if="setting.style">
-			<div class="item_scroll" v-scrollArrow="scrollMore">
-				<div class="item_scroll_wrap" :style="{width: scrollWidth}">
-					<slot></slot>
-				</div>
-			</div>
-
-			<transition name="fade">
-				<van-icon name="arrow" v-show="leftOver && isShowArrow" class="items_arrow right_arrow" />
-			</transition>
-			<transition name="fade">
-				<van-icon name="arrow-left" v-show="rightOver && isShowArrow" class="items_arrow left_arrow" />
-			</transition>
-		</div>
-		<div v-else>
-			<slot></slot>
-		</div>
-
-	</div>
-</template>
-<script>
-import ItemCardVert from '../item-card-vert/';
-import ItemCardHori from '../item-card-hori/';
-import { Cell, CellGroup, Icon } from 'vant';
-import scrollArrow from '../_directive/scrollMore';
-
-export default {
-  name: 'item-group',
-  props: {
-    setting: {
-      type: Object,
-      default: () => ({})
-    },
-    col: {
-      type: Number,
-      default: 3
-    }
-  },
-  data() {
-    const clientW =
-        document.body.clientWidth || document.documentElement.clientWidth,
-      col = this.col,
-      itemW = Math.floor(clientW / col),
-      itemsLen = this.setting.item_len;
-    return {
-      itemW,
-      scrollWidth: `${itemW * itemsLen}px`,
-      rightOver: false,
-      leftOver: true,
-      isShowArrow: itemsLen > col
-    };
-  },
-  methods: {
-    scrollMore(obj) {
-      this.rightOver = !obj.isLeftOver;
-      this.leftOver = !obj.isRightOver;
-    }
-  },
-  directives: {
-    scrollArrow
-  },
-  components: {
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup,
-    [Icon.name]: Icon,
-    [ItemCardVert.name]: ItemCardVert,
-    [ItemCardHori.name]: ItemCardHori
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.items_group {
-  background-color: #fff;
-}
-.group_title {
-  font-weight: 700;
-}
-
-.group_title_desc {
-  font-size: 12px;
-  color: $font-color-gray;
-}
-.group_banner img {
-  max-height: 200px;
-  display: block;
-}
-
-.item_scroll_box {
-  position: relative;
-  width: 100%;
-  padding: 10px 0;
-}
-.item_scroll {
-  width: 100%;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-.item_scroll_wrap {
-  display: flex;
-}
-
-.items_arrow {
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-  font-size: 18px;
-}
-
-.left_arrow {
-  left: 0;
-}
-
-.right_arrow {
-  right: 0;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.3s;
-}
-
-.fade-enter-to,
-.fade-leave {
-  opacity: 1;
-}
-</style>

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

@@ -101,6 +101,9 @@ export default {
         this.loading = false;
         this.finished = res.data.data.page >= res.data.data.pages;
       });
+    },
+    itemClick(id) {
+      this.$router.push(`/items/detail/${id}`);
     }
   },
 

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

@@ -1,53 +1,52 @@
 <template>
-	<div class="item_search">
-		<form action="/search" @submit="disabledSubmit">
-			<van-search placeholder="请输入商品名称" v-model="keyword" @search="enterSearch" autofocus/>
-		</form>
-		<div class="item_search_content">
-			<div class="item_search_text clearfix">
-				<div class="float-l">历史搜索</div>
-				<div class="float-r" @click="clearHistory">
-					<van-icon name="lajitong" style="font-size: 12px;margin-right: 3px" />
-					清空历史记录
-				</div>
-			</div>
-			<div class="item_search_history">
-				<van-tag
-          plain
-					v-for="(his, i) in wordHistory"
-					:key="i"
-					@click="clickSearch(his)"
-				>{{his}}</van-tag>
-			</div>
-		</div>
+  <div class="item_search">
+    <form action="/search"
+          @submit="disabledSubmit">
+      <van-search placeholder="请输入商品名称"
+                  v-model="keyword"
+                  @search="enterSearch"
+                  autofocus />
+    </form>
+    <div class="item_search_content">
+      <div class="item_search_text clearfix">
+        <div class="float-l">历史搜索</div>
+        <div class="float-r"
+             @click="clearHistory">
+          <van-icon name="lajitong"
+                    style="font-size: 12px;margin-right: 3px" />
+          清空历史记录
+        </div>
+      </div>
+      <div class="item_search_history">
+        <van-tag plain
+                 v-for="(his, i) in wordHistory"
+                 :key="i"
+                 @click="clickSearch(his)">{{his}}</van-tag>
+      </div>
+    </div>
 
-    
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      :immediate-check="false"
-      @load="loadMore"
-    >
-      <item-group>
-        <item-card-hori
-          v-for="(item) in list"
-          :key="item.id"
-          :goods="item"
-          @click="itemClick(item.id)"
-        />
-      </item-group>
+    <van-list v-model="loading"
+              :finished="finished"
+              :immediate-check="false"
+              @load="loadMore">
+      <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-list>
 
     <is-empty v-if="isEmpty">抱歉,没有找到符合条件商品</is-empty>
-	</div>
+  </div>
 </template>
 
 <script>
-import { Search, Tag, List } from 'vant';
+import { Card, Search, Tag, List } from 'vant';
 import { goodsList } from '@/api/api';
-import ItemGroup from '@/components/item-group/';
 import IsEmpty from '@/components/is-empty/';
-import ItemCardHori from '@/components/item-card-hori/';
 
 export default {
   data() {
@@ -61,7 +60,7 @@ export default {
       pages: 0,
       loading: false,
       finished: false,
-      isEmpty: false    
+      isEmpty: false
     };
   },
   methods: {
@@ -110,11 +109,11 @@ export default {
     },
     searchGoods() {
       goodsList({
-          keyword: this.keyword,
-          page: this.page,
-          limit: this.limit,
-          categoryId: 0
-        }).then(res => {
+        keyword: this.keyword,
+        page: this.page,
+        limit: this.limit,
+        categoryId: 0
+      }).then(res => {
         var data = res.data.data;
         this.list.push(...data.list);
         this.page = data.page;
@@ -131,17 +130,19 @@ export default {
         this.finished = true;
       }
     },
+    itemClick(id) {
+      this.$router.push(`/items/detail/${id}`);
+    }
   },
   activated() {
     this.wordHistory = this.getKeyWordHistory();
   },
   components: {
     [Search.name]: Search,
+    [Card.name]: Card,
     [Tag.name]: Tag,
-    [ItemGroup.name]: ItemGroup,
-    [ItemCardHori.name]: ItemCardHori,
     [List.name]: List,
-    [IsEmpty.name]: IsEmpty    
+    [IsEmpty.name]: IsEmpty
   }
 };
 </script>

litemall-vue/src/views/user/module-collect/index.vue

@@ -1,28 +1,24 @@
 <template>
   <div class="user_collect">
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      :immediate-check="false"
-      :offset="100"
-      @load="loadMore"
-    >
-      <item-group>
-        <item-card-hori
-          v-for="(item, i) in items"
-          :style="{backgroundColor: !item.goods_status && '#fcfcfc'}"
-          :key="i"
-          :goods="item"
-          @click="itemClick(i,item)"
-        >
-          <van-icon
-            name="lajitong"
-            slot="footer"
-            @click.stop="cancelCollect($event, i,item)"
-            style="float: right;"
-          />
-        </item-card-hori>
-      </item-group>
+    <van-list v-model="loading"
+              :finished="finished"
+              :immediate-check="false"
+              :offset="100"
+              @load="loadMore">
+      <van-card v-for="(item, i) in items"
+                :key="i"
+                :desc="item.brief"
+                :title="item.name"
+                :thumb="item.picUrl"
+                :price="item.retailPrice"
+                :origin-price="item.counterPrice"
+                @click="itemClick(item.valueId)">
+        <div slot="footer">
+          <van-button size="mini"
+                      icon="lajitong"
+                      @click.stop="cancelCollect($event, i,item)">删除</van-button>
+        </div>
+      </van-card>
     </van-list>
 
     <is-empty v-if="items.length === 0">没有商品收藏</is-empty>
@@ -33,10 +29,8 @@
 <script>
 import { collectList, collectAddOrDelete } from '@/api/api';
 
-import ItemGroup from '@/components/item-group/';
-import ItemCardHori from '@/components/item-card-hori/';
 import IsEmpty from '@/components/is-empty/';
-import { Search, List } from 'vant';
+import { Card, Search, List } from 'vant';
 
 import loadMore from '@/mixin/list-load-more';
 import scrollFixed from '@/mixin/scroll-fixed';
@@ -59,7 +53,7 @@ export default {
 
   methods: {
     init() {
-      collectList({type:0, page:this.page, limit:this.limit}).then(res => {
+      collectList({ type: 0, page: this.page, limit: this.limit }).then(res => {
         this.page = res.data.data.page;
         this.limit = res.data.data.limit;
         this.total = res.data.data.total;
@@ -73,17 +67,16 @@ export default {
         });
       });
     },
-    itemClick(i, item) {
-      this.$router.push(`/items/detail/${item.valueId}`);
+    itemClick(id) {
+      this.$router.push(`/items/detail/${id}`);
     }
   },
 
   components: {
-    [ItemGroup.name]: ItemGroup,
-    [ItemCardHori.name]: ItemCardHori,
     [Search.name]: Search,
     [IsEmpty.name]: IsEmpty,
-    [List.name]: List
+    [List.name]: List,
+    [Card.name]: Card
   }
 };
 </script>