溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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.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
<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 >
進入訂單頁面顯示訂單列表。開始編輯地址收貨表。如果之前有，查詢出來，直接選擇上。沒有用戶開始去編輯
<!-- 新增收貨地址：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 >地址編輯內容</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.js
import 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
