1.订单提交地址等组件的应用。
创新互联公司主要从事网站建设、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务钟楼,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
使用的组件有如下：
import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant'主要是配货地址编辑这块；
地址编辑。没有用默认的地址编辑属性：search-result
| search-result | 详细地址搜索结果 |
所以去掉了，一是没有做地理搜索功能。而且发现模拟测试老是有bug，干脆去掉。
2.默认list属性。要重新定义。配合自己需要做的功能。文档给的属性很少
list:[
{ id: '1',
name: '张三',
tel: '13000000000',
province:'江苏',
city:'无锡',
county:'崇安区',
area_code:'120000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
postal_code:'123456',
}
],
原来的
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
},
，后添加详细的数据，是为了方便后期做更改编辑功能。
3.地址json文件。
默认要导入全国地址表，
// 导入 area.js import areaList from '../../../config/area.min.js'
直接在函数。将数据绑定给了模型 areaList
:area-list="areaList"
4.保存地址：
默认数据类型对象。所以定义了一个addr。否则老是报错。但不影响程序运行。
addr重新组合了拿到的数据。压入list里去渲染，这里做了下判断是否保存数据成功
let addr = new Object;
console.log('content');
console.log(content);
let len = this.list.length + 1;
addr = {
id:len,
name:content.name,
tel:content.tel,
city:content.city,
county:content.county,
is_default:content.is_default,
postal_code:content.postal_code,
province:content.province,
area_code:content.area_code,
address:content.province+content.city+content.county+content.address_detail
};
let is_add = this.list.push(addr);
5，编辑的时候。 onEdit(item, index) 这个item就是我最先更改的list数据模型了。这里有需要的地区code码。这就是想要的。
因为跳到编辑页面，需要将地区重新解析出来。测试时可以。
其中待完善：编辑时候的详细地址未变化。删除地址等操作
下方。测试代码demo
关闭 按钮 按钮
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。