cascaderProps: {
label: 'fullname',
value: 'fullname',
lazy: true,
lazyLoad: (node, resolve) => {
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
const {level} = node;
if (level == 0) {
this.getChilrden().then(res => {
resolve(res)
})
} else {
const {id} = node.data
this.getChilrden({id}).then(res => {
const nodes = res.map((item, index) => {
return {
...item,
leaf: (item.polygon && item.polygon.length > 0) ? null : true //此字段为null,则表示当前节点为叶子节点,可继续选择。为true则选择器会关闭
}
})
resolve(nodes)
})
}
}
}
<template>
<div>
<!-- 修改收货地址-->
<el-dialog
:visible.sync="listShow"
width="80%"
@close="changeClose"
>
<div v-if="!addShow">
<div class="address-list-header">
<div class="header-title">修改收货地址</div>
<el-input
v-model="param.keyword"
placeholder="请输入收货人姓名或电话"
prefix-icon="el-icon-search"
size="small"
style="width: 300px;margin-left: 30px"
>
</el-input>
<el-button icon="el-icon-plus" size="small" style="margin-left: 30px" type="text"
@click="pushAddress">新增地址
</el-button>
</div>
<div class="address-list">
<div v-for="item in 4" class="address-list-item">
<el-radio v-model="radio" :label="item">有赞小金 , 小金 , 18879171667</el-radio>
<div class="item-group">
<div class="g_item">修改</div>
<div class="g_item">删除</div>
</div>
</div>
</div>
</div>
<!-- 新增收货地址-->
<div v-else class="add-address">
<div class="left-form">
<el-form label-width="100px">
<el-form-item label="客户名称">
<el-input size="small"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input size="small"></el-input>
</el-form-item>
<el-form-item label="收货人">
<el-input size="small"></el-input>
</el-form-item>
<el-form-item label="手机">
<el-input size="small"></el-input>
</el-form-item>
<el-form-item label="区域">
<el-cascader style="width: 100%" size="small" ref="cascader" v-model="pua" :props="cascaderProps"></el-cascader>
</el-form-item>
<el-form-item label="详细地址">
<el-input size="small"></el-input>
</el-form-item>
</el-form>
</div>
<div id="container" class="right-map">
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="listShow = false">取 消</el-button>
<el-button type="primary" @click="listShow = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "w-address",
data() {
this.map = null //地图对象
this.district = null//省市区功能对象
return {
pua: '',
provinceList: [],//省列表
radio: 1,
param: {},
listShow: false,
addShow: false,
map: null,
cascaderProps: {
label: 'fullname',
value: 'fullname',
lazy: true,
lazyLoad: (node, resolve) => {
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
const {level} = node;
if (level == 0) {
this.getChilrden().then(res => {
resolve(res)
})
} else {
const {id} = node.data
this.getChilrden({id}).then(res => {
const nodes = res.map((item, index) => {
return {
...item,
leaf: (item.polygon && item.polygon.length > 0) ? null : true //此字段为null,则表示当前节点为叶子节点,可继续选择。为true则选择器会关闭
}
})
resolve(nodes)
})
}
}
}
}
},
methods: {
changeClose() {
this.addShow = false
this.map = null
},
pushAddress() {
this.addShow = true
this.$nextTick(() => {
this.map = new TMap.Map('container', {
zoom: 8,
center: new TMap.LatLng(40, 116),
});
})
},
getChilrden(val) {
if (!this.district) {
this.district = new TMap.service.District({
// 新建一个行政区划类
polygon: 2, // 返回行政区划边界的类型
});
return new Promise((resolve => {
this.getData(val).then(res => {
resolve(res)
})
}))
} else {
return new Promise((resolve => {
this.getData(val).then(res => {
resolve(res)
})
}))
}
},
getData(val) {
return new Promise((resolve, reject) => {
if (!val) {
this.district.getChildren().then(res => {
this.provinceList = res.result[0]
resolve(res.result[0])
})
} else {
this.district.getChildren(val).then(res => {
this.provinceList = res.result[0]
resolve(res.result[0])
})
}
})
},
show() {
this.listShow = true
}
}
}
</script>
<style lang="scss" scoped>
.add-address {
display: flex;
.left-form {
width: 30%;
}
.right-map {
margin-left: auto;
width: 68%;
height: 500px;
}
}
.address-list-header {
display: flex;
align-items: center;
}
.address-list {
padding: 20px 0;
.address-list-item {
margin-bottom: 10px;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
.item-group {
display: flex;
& > div {
margin-left: 20px;
}
.g_item:hover {
cursor: pointer;
color: #409EFF;
}
}
&:hover {
background: #f1f1f1;
cursor: pointer;
}
}
}
</style>
网友评论