ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2026-05-02 01:01:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Remove InvalidGoods

Browse Source
This commit is contained in:
陈嘉涵
2017-09-08 10:46:09 +08:00
parent 1391fbfabf
commit 061334a820
7 changed files with 0 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/index.js
-3
View File
@@ -21,7 +21,6 @@ import GoodsActionBigBtn from './goods-action-big-btn';
import GoodsActionMiniBtn from './goods-action-mini-btn';
import Icon from './icon';
import ImagePreview from './image-preview';
import InvalidGoods from './invalid-goods';
import Lazyload from './lazyload';
import Loading from './loading';
import NoticeBar from './notice-bar';
@@ -73,7 +72,6 @@ const components = [
GoodsActionBigBtn,
GoodsActionMiniBtn,
Icon,
InvalidGoods,
Loading,
NoticeBar,
OrderGoods,
@@ -139,7 +137,6 @@ export {
GoodsActionMiniBtn,
Icon,
ImagePreview,
InvalidGoods,
Lazyload,
Loading,
NoticeBar,
packages/invalid-goods/Card.vue
-30
View File
@@ -1,30 +0,0 @@
<template>
<div class="van-invalid-goods-card">
<div class="van-invalid-goods__thumb">
<img :src="item.img_url" />
<div class="van-invalid-goods-card__flag">失效</div>
</div>
<div class="van-invalid-goods-card__content">
<div class="van-invalid-goods-card__row">
<h4 class="van-invalid-goods-card__title">{{ item.title }}</h4>
<span class="van-invalid-goods-card__price">¥{{ item.price }}</span>
</div>
<div class="van-invalid-goods-card__row">
<div class="van-invalid-goods-card__sku">{{ item.sku }}</div>
<span class="van-invalid-goods-card__num">x{{ item.num }}</span>
</div>
<div class="van-invalid-goods-card__desc">{{ item.unavailable_desc }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'van-invalid-goods-card',
props: {
item: Object
}
};
</script>
packages/invalid-goods/index.vue
-78
View File
@@ -1,78 +0,0 @@
<template>
<div>
<div class="van-invalid-goods" @click="showDetail = true">
<h3 class="van-invalid-goods__title">{{ title }}</h3>
<van-cell-group class="van-invalid-goods__container">
<div class="van-invalid-goods__gallery">
<div v-for="item in formattedGoods" :key="item.sku_id" class="van-invalid-goods__thumb">
<img :src="item.img_url" />
</div>
</div>
<div class="van-invalid-goods__count">
<span>共{{ formattedGoods.length }}件</span>
<van-icon name="arrow" />
</div>
</van-cell-group>
</div>
<van-actionsheet v-model="showDetail" :title="actionsheetTitle">
<div class="van-invalid-goods__list">
<van-invalid-goods-card v-for="item in formattedGoods" :key="item.sku_id" :item="item" />
</div>
</van-actionsheet>
</div>
</template>
<script>
import Card from './Card';
import Icon from '../icon';
import CellGroup from '../cell-group';
import Actionsheet from '../actionsheet';
export default {
name: 'van-invalid-goods',
components: {
[Card.name]: Card,
[Icon.name]: Icon,
[CellGroup.name]: CellGroup,
[Actionsheet.name]: Actionsheet
},
props: {
goods: {
type: Array,
required: true
},
title: {
type: String,
default: '以下商品无法一起购买，点击查看原因'
},
actionsheetTitle: {
type: String,
default: '以下商品无法一起下单'
}
},
data() {
return {
showDetail: false
};
},
methods: {
getSkuStr(arr) {
return arr.filter(item => item.v).map(item => item.v).join(', ');
}
},
computed: {
formattedGoods() {
return this.goods.map(item => ({
...item,
price: parseFloat(item.price / 100, 10).toFixed(2),
sku: this.getSkuStr(item.sku)
}));
}
}
};
</script>
packages/vant-css/src/index.css
-1
View File
@@ -47,7 +47,6 @@
/* business components */
@import './deep-select.css';
@import './goods-action.css';
@import './invalid-goods.css';
@import './notice-bar.css';
@import './coupon.css';
@import './order-goods.css';
packages/vant-css/src/invalid-goods.css
-122
View File
@@ -1,122 +0,0 @@
@import './common/var.css';
@import "./mixins/ellipsis.css";
$van-invalid-goods-photo-size: 90px;
.van {
&-invalid-goods {
margin: 10px 0;
&__title {
color: $gray-dark;
font-size: 12px;
text-align: center;
margin-bottom: 10px;
}
&__container {
padding: 5px 10px;
}
&__gallery {
overflow: hidden;
height: $van-invalid-goods-photo-size;
}
&__thumb {
float: left;
display: flex;
height: 100%;
position: relative;
margin-right: 5px;
align-items: center;
justify-content: center;
img {
max-width: $van-invalid-goods-photo-size;
max-height: $van-invalid-goods-photo-size;
}
}
&__count {
position: absolute;
top: 0;
right: 0;
width: 80px;
color: $gray-darker;
font-size: 14px;
padding-right: 8px;
line-height: calc($van-invalid-goods-photo-size + 10px);
background-color: $white;
text-align: right;
span {
margin-right: 6px;
vertical-align: middle;
}
}
&__list {
max-height: 400px;
overflow-y: scroll;
}
}
&-invalid-goods-card {
color: $gray-dark;
margin: 10px 0;
padding: 5px 10px;
background-color: #fafafa;
height: $van-invalid-goods-photo-size;
&__flag {
position: absolute;
left: 0;
top: 70px;
width: $van-invalid-goods-photo-size;
color: $white;
font-size: 12px;
line-height: 20px;
text-align: center;
background-color: rgba(0,0,0,.6);
}
&__content {
width: 100%;
padding-left: 100px;
box-sizing: border-box;
}
&__row {
display: flex;
line-height: 20px;
}
&__title,
&__sku {
flex: 1;
@mixin multi-ellipsis 2;
}
&__title,
&__price {
font-size: 14px;
}
&__num,
&__sku {
font-size: 12px;
}
&__desc {
color: $orange;
font-size: 12px;
margin-top: 5px;
}
}
.van-icon-arrow {
color: $gray-darker;
font-size: 10px;
}
}