mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Remove ExpressWay
This commit is contained in:
陈嘉涵
parent
3a8a745f6a
commit
1391fbfabf
@ -1,118 +0,0 @@
|
||||
## ExpressWay 配送方式
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentExpressType: 1,
|
||||
expressList: [{
|
||||
'postage': 10050,
|
||||
'postage_desc': '由商家门店提供配送服务, 起送价 0.01 元',
|
||||
'postage_title': '同城配送',
|
||||
'express_type': 1
|
||||
}, {
|
||||
'postage': 0,
|
||||
'postage_desc': '由商家选择合作快递为您服务',
|
||||
'postage_title': '快递发货',
|
||||
'express_type': 2,
|
||||
'postage_warn_desc': '3天后发货'
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(item, index) {
|
||||
Toast('配送方式更换为:' + item.postage_title);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { ExpressWay } from 'vant';
|
||||
|
||||
Vue.component(ExpressWay.name, ExpressWay);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-express-way
|
||||
v-model="currentExpressType"
|
||||
:express-list="expressList"
|
||||
@change="onChange"
|
||||
></van-express-way>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentExpressType: 1,
|
||||
expressList: [{
|
||||
'postage': 10050,
|
||||
'postage_desc': '由商家门店提供配送服务, 起送价 0.01 元',
|
||||
'postage_title': '同城配送',
|
||||
'express_type': 1
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(item) {
|
||||
Toast(`配送方式更换为:${item.postage_title}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 不可修改配送方式
|
||||
|
||||
:::demo 不可修改配送方式
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-express-way
|
||||
:value="1"
|
||||
:express-list="expressList"
|
||||
:editable="false"
|
||||
@change="onChange"
|
||||
></van-express-way>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选择的配送类型 | `Number` | | 是 |
|
||||
| expressList | 配送方式列表数据 | `Array` | | 是 |
|
||||
| cellTitle | Cell 标题 | `String` | `配送方式` | 否 |
|
||||
| actionsheetTitle | Actionsheet 标题 | `String` | `配送方式` | 否 |
|
||||
| editable | 能否修改配送方式 | `Boolean` | `true` | 否 |
|
||||
|
||||
|
||||
### 数据格式
|
||||
#### expressList中的配送方式字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| postage | 运费，以分为单位 | Number |
|
||||
| postage_title | 配送方式 | String |
|
||||
| postage_desc | 描述信息 | String |
|
||||
| express_type | 配送类型 | Number |
|
||||
| postage_warn_desc | 提示信息 | String |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 修改配送方式时触发 | item: 对应的数据, index：对应的索引 |
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<van-cell class="van-express-way-option" @click="$emit('change')">
|
||||
<van-radio :name="data.express_type" :value="currentExpressWay" />
|
||||
<div class="van-express-way-option__content">
|
||||
<h3 class="van-express-way-option__title">
|
||||
<span>{{ data.postage_title }}</span>
|
||||
<span>{{ data.postage }}</span>
|
||||
</h3>
|
||||
<p>{{ data.postage_desc }}</p>
|
||||
<div class="van-express-way-option__warn" v-if="data.postage_warn_desc">{{ data.postage_warn_desc }}</div>
|
||||
</div>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cell from '../cell';
|
||||
import Radio from '../radio';
|
||||
|
||||
export default {
|
||||
name: 'van-express-way-option',
|
||||
|
||||
components: {
|
||||
[Cell.name]: Cell,
|
||||
[Radio.name]: Radio
|
||||
},
|
||||
|
||||
props: {
|
||||
data: Object,
|
||||
currentExpressWay: Number
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<van-cell class="van-express-way">
|
||||
<van-actionsheet v-if="computedEditable" v-model="showActionsheet" :title="actionsheetTitle" >
|
||||
<van-cell-group>
|
||||
<van-express-way-option
|
||||
v-for="(item, index) in computedList"
|
||||
:key="item.express_type"
|
||||
:data="item"
|
||||
:currentExpressWay="value"
|
||||
@change="onSelectExpressWay(item, index)"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</van-actionsheet>
|
||||
<van-cell :title="cellTitle" :isLink="computedEditable" @click="showActionsheet = computedEditable">
|
||||
<p class="van-express-way__fee">{{ currentOption.postage }}</p>
|
||||
<p class="van-express-way__type">{{ currentOption.postage_title }}</p>
|
||||
</van-cell>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Option from './Option';
|
||||
import Cell from '../cell';
|
||||
import CellGroup from '../cell-group';
|
||||
import Actionsheet from '../actionsheet';
|
||||
|
||||
export default {
|
||||
name: 'van-express-way',
|
||||
|
||||
components: {
|
||||
[Option.name]: Option,
|
||||
[Cell.name]: Cell,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Actionsheet.name]: Actionsheet
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
expressList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
cellTitle: {
|
||||
type: String,
|
||||
default: '配送方式'
|
||||
},
|
||||
actionsheetTitle: {
|
||||
type: String,
|
||||
default: '配送方式'
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showActionsheet: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedList() {
|
||||
return this.expressList.map(item => ({
|
||||
...item,
|
||||
postage: this.calcPostage(item.postage)
|
||||
}));
|
||||
},
|
||||
|
||||
computedEditable() {
|
||||
return this.expressList && this.expressList.length >= 2 && this.editable;
|
||||
},
|
||||
|
||||
currentOption() {
|
||||
for (let i = 0; i < this.computedList.length; i++) {
|
||||
if (this.computedList[i].express_type === this.value) {
|
||||
return this.computedList[i];
|
||||
}
|
||||
}
|
||||
return {};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSelectExpressWay(item, index) {
|
||||
this.showActionsheet = false;
|
||||
this.$emit('input', item.express_type);
|
||||
this.$emit('change', item, index);
|
||||
},
|
||||
|
||||
calcPostage(postage) {
|
||||
return postage === 0 ? '免运费' : '¥' + (postage / 100).toFixed(2);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -15,7 +15,6 @@ import CouponList from './coupon-list';
|
||||
import DatetimePicker from './datetime-picker';
|
||||
import DeepSelect from './deep-select';
|
||||
import Dialog from './dialog';
|
||||
import ExpressWay from './express-way';
|
||||
import Field from './field';
|
||||
import GoodsAction from './goods-action';
|
||||
import GoodsActionBigBtn from './goods-action-big-btn';
|
||||
@ -69,7 +68,6 @@ const components = [
|
||||
CouponList,
|
||||
DatetimePicker,
|
||||
DeepSelect,
|
||||
ExpressWay,
|
||||
Field,
|
||||
GoodsAction,
|
||||
GoodsActionBigBtn,
|
||||
@ -135,7 +133,6 @@ export {
|
||||
DatetimePicker,
|
||||
DeepSelect,
|
||||
Dialog,
|
||||
ExpressWay,
|
||||
Field,
|
||||
GoodsAction,
|
||||
GoodsActionBigBtn,
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-express-way {
|
||||
padding: 0;
|
||||
|
||||
&__fee,
|
||||
&__type {
|
||||
color: $gray-darker;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__fee {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__type {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.van-actionsheet__content {
|
||||
max-height: 290px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&-option {
|
||||
position: relative;
|
||||
padding: 14px 15px 14px 0;
|
||||
|
||||
.van-radio {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -11px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-left: 30px;
|
||||
|
||||
p {
|
||||
color: $gray-dark;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
span {
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__warn {
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,6 @@
|
||||
|
||||
/* business components */
|
||||
@import './deep-select.css';
|
||||
@import './express-way.css';
|
||||
@import './goods-action.css';
|
||||
@import './invalid-goods.css';
|
||||
@import './notice-bar.css';
|
||||
|
||||
@ -1,201 +0,0 @@
|
||||
import ExpressWay from 'packages/express-way';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
const mockData = [{
|
||||
'postage': 10050,
|
||||
'postage_desc': '由商家门店提供配送服务, 起送价 0.01 元',
|
||||
'postage_title': '同城配送',
|
||||
'express_type': 1
|
||||
}, {
|
||||
'postage': 0,
|
||||
'postage_desc': '由商家选择合作快递为您服务',
|
||||
'postage_title': '快递发货',
|
||||
'express_type': 2,
|
||||
'postage_warn_desc': '3天后发货'
|
||||
}];
|
||||
|
||||
describe('ExpressWay', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('default', () => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: 1,
|
||||
expressList: mockData
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__text': '配送方式',
|
||||
'.van-express-way__fee': '¥100.50',
|
||||
'.van-express-way__type': mockData[0].postage_title,
|
||||
'.van-actionsheet__header h3': '配送方式',
|
||||
'.van-express-way-option__title span': mockData[0].postage_title,
|
||||
'.van-express-way-option__content p': mockData[0].postage_desc
|
||||
},
|
||||
count: {
|
||||
'.van-icon-arrow': 1
|
||||
},
|
||||
style: {
|
||||
'.van-actionsheet': {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('show actionsheet', (done) => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: 1,
|
||||
expressList: mockData
|
||||
}
|
||||
});
|
||||
|
||||
// 点击后弹出 actionsheet
|
||||
const cells = wrapper.find('.van-cell');
|
||||
cells[cells.length - 1].trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(wrapper.find('.van-actionsheet')[0].hasStyle('display', 'none')).to.equal(false);
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('change express way', (done) => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: 1,
|
||||
expressList: mockData
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
// 点击后弹出 actionsheet
|
||||
const cells = wrapper.find('.van-cell');
|
||||
cells[cells.length - 1].trigger('click');
|
||||
|
||||
// 监听 change 事件
|
||||
const submitSpyFunc = sinon.spy();
|
||||
wrapper.vm.$on('change', submitSpyFunc);
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.find('.van-actionsheet')[0].hasStyle('display', 'none')).to.equal(false);
|
||||
|
||||
const secondOption = wrapper.find('.van-express-way-option')[1];
|
||||
secondOption.trigger('click');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.find('.van-actionsheet')[0].hasStyle('display', 'none')).to.equal(true);
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-express-way__fee': '免运费',
|
||||
'.van-express-way__type': mockData[1].postage_title
|
||||
}
|
||||
});
|
||||
|
||||
// 修改后触发 change 事件
|
||||
expect(submitSpyFunc.calledOnce).to.be.true;
|
||||
done();
|
||||
}, 500);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('cellTitle prop', () => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: 1,
|
||||
cellTitle: '测试标题',
|
||||
expressList: mockData
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__text': '测试标题'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('actionsheetTitle prop', () => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: 1,
|
||||
actionsheetTitle: '测试标题',
|
||||
expressList: mockData
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-actionsheet__header h3': '测试标题'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('set editable false ', () => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: 1,
|
||||
editable: false,
|
||||
expressList: mockData
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-icon-arrow': 0,
|
||||
'.van-actionsheet': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('not editable when only one option', () => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: 1,
|
||||
editable: true,
|
||||
expressList: mockData.slice(0, 1)
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-icon-arrow': 0,
|
||||
'.van-actionsheet': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('unexist express type', () => {
|
||||
wrapper = mount(ExpressWay, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: -1,
|
||||
expressList: mockData
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-express-way__fee': '',
|
||||
'.van-express-way__type': ''
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user