mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Remove InvalidGoods
This commit is contained in:
陈嘉涵
parent
1391fbfabf
commit
061334a820
@ -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` |
|
|
||||||
@ -21,7 +21,6 @@ import GoodsActionBigBtn from './goods-action-big-btn';
|
|||||||
import GoodsActionMiniBtn from './goods-action-mini-btn';
|
import GoodsActionMiniBtn from './goods-action-mini-btn';
|
||||||
import Icon from './icon';
|
import Icon from './icon';
|
||||||
import ImagePreview from './image-preview';
|
import ImagePreview from './image-preview';
|
||||||
import InvalidGoods from './invalid-goods';
|
|
||||||
import Lazyload from './lazyload';
|
import Lazyload from './lazyload';
|
||||||
import Loading from './loading';
|
import Loading from './loading';
|
||||||
import NoticeBar from './notice-bar';
|
import NoticeBar from './notice-bar';
|
||||||
@ -73,7 +72,6 @@ const components = [
|
|||||||
GoodsActionBigBtn,
|
GoodsActionBigBtn,
|
||||||
GoodsActionMiniBtn,
|
GoodsActionMiniBtn,
|
||||||
Icon,
|
Icon,
|
||||||
InvalidGoods,
|
|
||||||
Loading,
|
Loading,
|
||||||
NoticeBar,
|
NoticeBar,
|
||||||
OrderGoods,
|
OrderGoods,
|
||||||
@ -139,7 +137,6 @@ export {
|
|||||||
GoodsActionMiniBtn,
|
GoodsActionMiniBtn,
|
||||||
Icon,
|
Icon,
|
||||||
ImagePreview,
|
ImagePreview,
|
||||||
InvalidGoods,
|
|
||||||
Lazyload,
|
Lazyload,
|
||||||
Loading,
|
Loading,
|
||||||
NoticeBar,
|
NoticeBar,
|
||||||
|
|||||||
@ -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>
|
|
||||||
|
|
||||||
@ -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>
|
|
||||||
@ -47,7 +47,6 @@
|
|||||||
/* business components */
|
/* business components */
|
||||||
@import './deep-select.css';
|
@import './deep-select.css';
|
||||||
@import './goods-action.css';
|
@import './goods-action.css';
|
||||||
@import './invalid-goods.css';
|
|
||||||
@import './notice-bar.css';
|
@import './notice-bar.css';
|
||||||
@import './coupon.css';
|
@import './coupon.css';
|
||||||
@import './order-goods.css';
|
@import './order-goods.css';
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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标题'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
x
Reference in New Issue
Block a user