1.訂單提交地址等組件的應用。

使用的組件有如下：

import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant'

主要是配貨地址編輯這塊；

 <van-address-edit           :area-list="areaList"           :address-info="addressInfo"           show-postal           show-delete           show-set-default           show-search-result                      @save="onSave"           @delete="onDelete"           @change-detail="onChangeDetail"          />

地址編輯。沒有用默認的地址編輯屬性：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.jsimport 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