blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/examples-docs/invalid-goods.md
View File

@ -1,81 +0,0 @@
## InvalidGoods 不可用商品列表
<script>
const item = {
sku: [{ v: '商品SKU1' }, { v: '商品SKU2' }],
num: 2,
sku_id: 123,
title: "商品名称",
price: 12200,
unavailable_desc: '超出配送区域',
img_url: 'https://img.yzcdn.cn/upload_files/2017/06/29/FnPSAKkEeh4FnDA09oIbmnlzWQrw.png',
};
export default {
data() {
return {
goods: [item, item, item]
}
}
}
</script>
### 使用指南
``` javascript
import { InvalidGoods } from 'vant';
Vue.component(InvalidGoods.name, InvalidGoods);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-invalid-goods :goods="goods" />
```
```javascript
const item = {
num: 2,
sku_id: 123,
price: 12200,
title: "商品名称",
img_url: 'https://img.yzcdn.cn/...',
unavailable_desc: '超出配送区域',
sku: [
{ v: '商品SKU1' },
{ v: '商品SKU2' }
]
};
export default {
data() {
return {
goods: [item, item, item]
}
}
}
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| goods | 商品数据 | `Array` | | 是 |
| title | 标题 | `String` | `以下商品无法一起购买，点击查看原因` | 否 |
| actionsheetTitle | 弹出层标题 | `String` | `以下商品无法一起下单` | 否 |
### 数据格式
#### data中的商品字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| num | 商品数量 | `Number` |
| sku_id | 商品 id | `Number` |
| price | 商品价格，以分为单位 | `Number` |
| title | 商品标题 | `String` |
| img_url | 商品图片 url | `String` |
| unavailable_desc | 不可用原因 | `String` |
| sku | 商品 sku | `Array` |

3
packages/index.js
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,

30
packages/invalid-goods/Card.vue
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>

78
packages/invalid-goods/index.vue
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>

1
packages/vant-css/src/index.css
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';

122
packages/vant-css/src/invalid-goods.css
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;
}
}

81
test/unit/specs/invalid-goods.spec.js
View File

@ -1,81 +0,0 @@
import InvalidGoods from 'packages/invalid-goods/index';
import { mount } from 'avoriaz';
import { DOMChecker } from '../utils';
const mockItem = {
sku: [{ v: '商品SKU1' }, { v: '商品SKU2' }],
num: 2,
'sku_id': 123,
title: '商品名称',
price: 12200,
'unavailable_desc': '超出配送区域',
'img_url': 'https://img.yzcdn.cn/upload_files/2017/06/29/FnPSAKkEeh4FnDA09oIbmnlzWQrw.png'
};
describe('InvalidGoods', () => {
let wrapper;
afterEach(() => {
wrapper && wrapper.destroy();
});
it('default', () => {
wrapper = mount(InvalidGoods, {
attachToDocument: true,
propsData: {
goods: [mockItem, mockItem, mockItem]
}
});
DOMChecker(wrapper, {
text: {
'.van-invalid-goods__title': '以下商品无法一起购买，点击查看原因',
'.van-actionsheet__header h3': '以下商品无法一起下单',
'.van-invalid-goods-card__price': '¥122.00',
'.van-invalid-goods-card__sku': '商品SKU1, 商品SKU2',
'.van-invalid-goods-card__title': mockItem.title,
'.van-invalid-goods-card__num': 'x' + mockItem.num,
'.van-invalid-goods-card__desc': mockItem.unavailable_desc,
'.van-invalid-goods__count span': '共3件'
},
count: {
'.van-invalid-goods-card': 3,
'.van-invalid-goods__gallery img': 3
},
src: {
'.van-invalid-goods__thumb img': mockItem.img_url
}
});
});
it('title prop', () => {
wrapper = mount(InvalidGoods, {
attachToDocument: true,
propsData: {
goods: [mockItem],
title: '标题'
}
});
DOMChecker(wrapper, {
text: {
'.van-invalid-goods__title': '标题'
}
});
});
it('actionsheetTitle prop', () => {
wrapper = mount(InvalidGoods, {
attachToDocument: true,
propsData: {
goods: [mockItem],
actionsheetTitle: 'actionsheet标题'
}
});
DOMChecker(wrapper, {
text: {
'.van-actionsheet__header h3': 'actionsheet标题'
}
});
});
});