Skip to content
GitLab
Commit 9060274d authored by Junling Bu's avatar Junling Bu
Browse files

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

parent a756578b
Show whitespace changes
Inline Side-by-side
litemall-vue/src/components/item-card-hori/index.vue deleted 100644 → 0
View file @ a756578b
<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 deleted 100644 → 0
View file @ a756578b
<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 deleted 100644 → 0
View file @ a756578b
<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
View file @ 9060274d
...@@ -101,6 +101,9 @@ export default { ...@@ -101,6 +101,9 @@ export default {
this.loading = false; this.loading = false;
this.finished = res.data.data.page >= res.data.data.pages; 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
View file @ 9060274d
<template> <template>
<div class="item_search"> <div class="item_search">
<form action="/search" @submit="disabledSubmit"> <form action="/search"
<van-search placeholder="请输入商品名称" v-model="keyword" @search="enterSearch" autofocus/> @submit="disabledSubmit">
<van-search placeholder="请输入商品名称"
v-model="keyword"
@search="enterSearch"
autofocus />
</form> </form>
<div class="item_search_content"> <div class="item_search_content">
<div class="item_search_text clearfix"> <div class="item_search_text clearfix">
<div class="float-l">历史搜索</div> <div class="float-l">历史搜索</div>
<div class="float-r" @click="clearHistory"> <div class="float-r"
<van-icon name="lajitong" style="font-size: 12px;margin-right: 3px" /> @click="clearHistory">
<van-icon name="lajitong"
style="font-size: 12px;margin-right: 3px" />
清空历史记录 清空历史记录
</div> </div>
</div> </div>
<div class="item_search_history"> <div class="item_search_history">
<van-tag <van-tag plain
plain
v-for="(his, i) in wordHistory" v-for="(his, i) in wordHistory"
:key="i" :key="i"
@click="clickSearch(his)" @click="clickSearch(his)">{{his}}</van-tag>
>{{his}}</van-tag>
</div> </div>
</div> </div>
<van-list v-model="loading"
<van-list
v-model="loading"
:finished="finished" :finished="finished"
:immediate-check="false" :immediate-check="false"
@load="loadMore" @load="loadMore">
> <van-card v-for="(item, i) in list"
<item-group> :key="i"
<item-card-hori :desc="item.brief"
v-for="(item) in list" :title="item.name"
:key="item.id" :thumb="item.picUrl"
:goods="item" :price="item.retailPrice"
@click="itemClick(item.id)" :origin-price="item.counterPrice"
/> @click="itemClick(item.id)" />
</item-group>
</van-list> </van-list>
<is-empty v-if="isEmpty">抱歉,没有找到符合条件商品</is-empty> <is-empty v-if="isEmpty">抱歉,没有找到符合条件商品</is-empty>
...@@ -43,11 +44,9 @@ ...@@ -43,11 +44,9 @@
</template> </template>
<script> <script>
import { Search, Tag, List } from 'vant'; import { Card, Search, Tag, List } from 'vant';
import { goodsList } from '@/api/api'; import { goodsList } from '@/api/api';
import ItemGroup from '@/components/item-group/';
import IsEmpty from '@/components/is-empty/'; import IsEmpty from '@/components/is-empty/';
import ItemCardHori from '@/components/item-card-hori/';
export default { export default {
data() { data() {
...@@ -131,15 +130,17 @@ export default { ...@@ -131,15 +130,17 @@ export default {
this.finished = true; this.finished = true;
} }
}, },
itemClick(id) {
this.$router.push(`/items/detail/${id}`);
}
}, },
activated() { activated() {
this.wordHistory = this.getKeyWordHistory(); this.wordHistory = this.getKeyWordHistory();
}, },
components: { components: {
[Search.name]: Search, [Search.name]: Search,
[Card.name]: Card,
[Tag.name]: Tag, [Tag.name]: Tag,
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[List.name]: List, [List.name]: List,
[IsEmpty.name]: IsEmpty [IsEmpty.name]: IsEmpty
} }
......
litemall-vue/src/views/user/module-collect/index.vue
View file @ 9060274d
<template> <template>
<div class="user_collect"> <div class="user_collect">
<van-list <van-list v-model="loading"
v-model="loading"
:finished="finished" :finished="finished"
:immediate-check="false" :immediate-check="false"
:offset="100" :offset="100"
@load="loadMore" @load="loadMore">
> <van-card v-for="(item, i) in items"
<item-group>
<item-card-hori
v-for="(item, i) in items"
:style="{backgroundColor: !item.goods_status && '#fcfcfc'}"
:key="i" :key="i"
:goods="item" :desc="item.brief"
@click="itemClick(i,item)" :title="item.name"
> :thumb="item.picUrl"
<van-icon :price="item.retailPrice"
name="lajitong" :origin-price="item.counterPrice"
slot="footer" @click="itemClick(item.valueId)">
@click.stop="cancelCollect($event, i,item)" <div slot="footer">
style="float: right;" <van-button size="mini"
/> icon="lajitong"
</item-card-hori> @click.stop="cancelCollect($event, i,item)">删除</van-button>
</item-group> </div>
</van-card>
</van-list> </van-list>
<is-empty v-if="items.length === 0">没有商品收藏</is-empty> <is-empty v-if="items.length === 0">没有商品收藏</is-empty>
...@@ -33,10 +29,8 @@ ...@@ -33,10 +29,8 @@
<script> <script>
import { collectList, collectAddOrDelete } from '@/api/api'; 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 IsEmpty from '@/components/is-empty/';
import { Search, List } from 'vant'; import { Card, Search, List } from 'vant';
import loadMore from '@/mixin/list-load-more'; import loadMore from '@/mixin/list-load-more';
import scrollFixed from '@/mixin/scroll-fixed'; import scrollFixed from '@/mixin/scroll-fixed';
...@@ -59,7 +53,7 @@ export default { ...@@ -59,7 +53,7 @@ export default {
methods: { methods: {
init() { 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.page = res.data.data.page;
this.limit = res.data.data.limit; this.limit = res.data.data.limit;
this.total = res.data.data.total; this.total = res.data.data.total;
...@@ -73,17 +67,16 @@ export default { ...@@ -73,17 +67,16 @@ export default {
}); });
}); });
}, },
itemClick(i, item) { itemClick(id) {
this.$router.push(`/items/detail/${item.valueId}`); this.$router.push(`/items/detail/${id}`);
} }
}, },
components: { components: {
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Search.name]: Search, [Search.name]: Search,
[IsEmpty.name]: IsEmpty, [IsEmpty.name]: IsEmpty,
[List.name]: List [List.name]: List,
[Card.name]: Card
} }
}; };
</script> </script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment