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
| 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
<template> <div class="home-page"> <div class="home"> <!-- top 高度固定6vh; --> <header-vue></header-vue> <!-- 內容滾動 --> <div class="home-content wrapper" ref="wrapper"> <div class="content"> <div style="min-height:900px; border:1px solid red;"> 進入訂單頁面顯示訂單列表。開始編輯地址收貨表。如果之前有，查詢出來，直接選擇上。沒有用戶開始去編輯 <!-- 新增收貨地址：vant - AddressList --> <van-address-list v-model="chosenAddressId" :list="list" @add="onAdd" @edit="onEdit" /> <!-- 彈出層，提示選擇地址，沒有則編輯 --> <van-popup v-model="show1" position="" :overlay="false"> <van-button @click="show1 = false">關閉</van-button> <!-- 地址組件 --> <!-- <div style="width:100vw;height:100vh;background:#fff;">地址編輯內容</div> --> <van-address-edit :area-list="areaList" :columns-num="2" :address-info="addressInfo" show-postal show-delete show-set-default show-search-result @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" /> </van-popup> <!-- vatn - card --> <van-card title="標題" desc="描述" num="2" price="2.00" :thumb="imageURL" > <div slot="footer"> <van-button size="mini">按鈕</van-button> <van-button size="mini">按鈕</van-button> </div> </van-card> </div> </div> </div> </div> </div></template> <script>import BScroll from 'better-scroll'import HeaderVue from '../../components/common/header/Header.vue'// 導入 area.jsimport areaList from '../../../config/area.min.js' import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' export default { name: '', components:{ HeaderVue, [Card.name]:Card, [button.name]:button, [Toast.name]:Toast, [AddressList.name]:AddressList, [Popup.name]:Popup, [AddressEdit .name]:AddressEdit, [Area.name]:Area, }, data () { return { msg: 'Welcome to Home.vue App sss', chosenAddressId:'1', show:false, show1:false, areaList:'', searchResult:[ { id: '1', name: '張三', tel: '13000000000', address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室' } ], addressInfo:'', imageURL:'kdkk', list:[ { id: '1', name: '張三', tel: '13000000000', province:'江蘇', city:'無錫', county:'崇安區', area_code:'120000', address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室', postal_code:'123456', } ], } }, mounted(){ // 初始化滾動插件 better-scroll this.scroll = new BScroll(this.$refs.wrapper,{ scrollY:true, click:true,//一開始的點擊事件被bscroll阻止了，設置這個才能點擊 }) this.getOrderDate() }, methods:{ getOrderDate:function(){ console.log('獲取 該用戶名下的訂單表數據') }, onAdd() { console.log('新增收貨地址'); this.show1 = true; console.log('areaList') console.log(areaList) this.areaList = areaList; // 地址編輯默認信息 this.addressInfo = new Object; }, onEdit(item, index) { let addressInfo = new Object; this.areaList = areaList; // Toast('編輯收貨地址:' + index); console.log('編輯收貨地址:' + index); console.log(item); // 進入編輯模式 this.show1 = true; addressInfo = { id:item.id, name:item.name, tel:item.tel, province:item.province, city:item.city, county:item.county, area_code:item.area_code, address_detail:item.address, postal_code:item.postal_code, is_default:item.is_default, } this.addressInfo = addressInfo; }, onSave(content) { 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); // 判斷是否選中默認 if (content.is_default) { this.chosenAddressId = len; } if (is_add) { this.show1 = false; } console.log(this.list); // this.list = listArr; // this.list = [{ // id: '1', // name: '張三', // tel: '13000000000', // address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室' // }]; }, onDelete() { Toast('delete'); console.log('delete'); }, onChangeDetail(val) { // if (val) { // this.searchResult = [{ // name: '黃龍萬科中心', // address: '杭州市西湖區' // }]; // }else { // this.searchResult = []; // } } },}</script> <!-- Add "scoped" attribute to limit CSS to this component only --><style > .home-page{} .home{ width: 100%; } .header{ width: 100%; height: 6vh; border-bottom: 1px solid #ddd; } .home-content{ height: 94vh; border: 1px solid #000; overflow: hidden; } /*彈出層*/ .van-popup{ /* width: 100%; top: 40%!important;*/ } .van-address-list__add{ position: relative!important; z-index: 1999; font-size: 14px; } .van-cell{ position: relative!important; } .van-popup{ height: 100%; width: 100%; } .van-address-list__group{ padding-bottom: 10px!important; } </style>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
