119 lines
2.7 KiB
Markdown
119 lines
2.7 KiB
Markdown
## 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：对应的索引 |
|