theluyuan/litemall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Junling Bu
2019-07-03 14:03:23 +08:00
parent a756578b4a
commit 9060274daf
6 changed files with 78 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
litemall-vue/src/components/item-card-hori/index.vue
View File

@@ -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>

116
litemall-vue/src/components/item-card-vert/index.vue
View File

@@ -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>

152
litemall-vue/src/components/item-group/index.vue
View File

@@ -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>

3
litemall-vue/src/views/items/list/index.vue
View File

@@ -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}`);
}
},

99
litemall-vue/src/views/items/search/index.vue
View File

@@ -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>

57
litemall-vue/src/views/user/module-collect/index.vue
View File

@@ -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>