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"          />

list:[    { id: '1',     name: '張三',     tel: '13000000000',     province:'江蘇',     city:'無錫',     county:'崇安區(qū)',     area_code:'120000',     address: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室',     postal_code:'123456',    }   ],

{     id: '1',     name: '張三',     tel: '13000000000',     address: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室'    },

// 導(dǎo)入 area.jsimport areaList from '../../../config/area.min.js'

 :area-list="areaList"

 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);

<template> <div class="home-page">  <div class="home">   <!-- top 高度固定6vh; -->   <header-vue></header-vue>   <!-- 內(nèi)容滾動(dòng) -->   <div class="home-content wrapper" ref="wrapper">      <div class="content">      <div style="min-height:900px; border:1px solid red;">        進(jìn)入訂單頁面顯示訂單列表。開始編輯地址收貨表。如果之前有，查詢出來，直接選擇上。沒有用戶開始去編輯              <!-- 新增收貨地址：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">關(guān)閉</van-button>         <!-- 地址組件 -->          <!-- <div style="width:100vw;height:100vh;background:#fff;">地址編輯內(nèi)容</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="標(biāo)題"         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'// 導(dǎo)入 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: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室'    }   ],   addressInfo:'',   imageURL:'kdkk',   list:[    { id: '1',     name: '張三',     tel: '13000000000',     province:'江蘇',     city:'無錫',     county:'崇安區(qū)',     area_code:'120000',     address: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室',     postal_code:'123456',    }   ],  } }, mounted(){  // 初始化滾動(dòng)插件 better-scroll  this.scroll = new BScroll(this.$refs.wrapper,{    scrollY:true,    click:true,//一開始的點(diǎn)擊事件被bscroll阻止了，設(shè)置這個(gè)才能點(diǎn)擊  })   this.getOrderDate() }, methods:{  getOrderDate:function(){   console.log('獲取 該用戶名下的訂單表數(shù)據(jù)')  },  onAdd() {   console.log('新增收貨地址');   this.show1 = true;   console.log('areaList')   console.log(areaList)   this.areaList = areaList;   // 地址編輯默認(rèn)信息   this.addressInfo = new Object;  },  onEdit(item, index) {   let addressInfo = new Object;   this.areaList = areaList;   // Toast('編輯收貨地址:' + index);   console.log('編輯收貨地址:' + index);   console.log(item);   // 進(jìn)入編輯模式   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);   // 判斷是否選中默認(rèn)   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: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室'   // }];  },  onDelete() {   Toast('delete');   console.log('delete');  },  onChangeDetail(val) {    // if (val) {    //  this.searchResult = [{    //   name: '黃龍萬科中心',    //   address: '杭州市西湖區(qū)'    //  }];    // }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>