<template> <el-dialog title="编辑收货地址" center append-to-body :visible.sync="dialogObj.show" width="800px"> <vue-address :province="dialogObj.province" :city="dialogObj.city" :district="dialogObj.district" :detail="dialogObj.detail" :mobile="dialogObj.receive_mobile" :name="dialogObj.receive_name" @change="handlerAddressChange"> </vue-address> <div slot="footer" class="dialog-footer"> <el-button @click="dialogObj.show = false">取 消</el-button> <el-button type="primary" @click="saveAddress">保 存</el-button> </div> </el-dialog> </template> <script> import {editAddressApi} from "../../service/api"; import vueAddress from '../framework/address-picker/Address' import AddressArray from '../framework/address-picker/addr' export default { name: "dialogObj", props:[ 'dialogObj' ], data(){ return{ } }, methods:{ handlerAddressChange (val) { console.log(val) console.log(this.dialogObj) if(!val.province || !val.city || !val.district){ return } this.dialogObj.detail = val.detail; this.dialogObj.province = val.province; this.dialogObj.city = val.city; this.dialogObj.receive_mobile = val.mobile; this.dialogObj.receive_name = val.name; let provinceObj = AddressArray.filter((item) => { return item.value === val.province }) let cityObj = provinceObj[0].children.filter((city) => { return city.value === val.city }) let districtObj = cityObj[0].children.filter((district) => { return district.value === val.district }) this.dialogObj.province_name = provinceObj[0].label; this.dialogObj.city_name = cityObj[0].label; this.dialogObj.district_name = districtObj.length > 0 ? districtObj[0].label : cityObj[0].children[0].label; this.dialogObj.district = districtObj.length > 0 ? districtObj[0].value : cityObj[0].children[0].value; }, saveAddress () { this.$confirm('确定保存?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(()=>{ let json = { province_id: this.dialogObj.province, province_name: this.dialogObj.province_name, city_id: this.dialogObj.city, city: this.dialogObj.city_name, area: this.dialogObj.district_name, area_id: this.dialogObj.district, address: this.dialogObj.detail, receive_name: this.dialogObj.receive_name, receive_mobile: this.dialogObj.receive_mobile }; editAddressApi(this.dialogObj.id,json).then(res=>{ this.$message({ type: 'success', message: '修改成功' }); this.dialogObj.show=false; this.$emit("reflash"); }); }) }, }, components:{ vueAddress }, mounted(){ } } </script> <style scoped lang="less"> .dialog-footer{ display: block; text-align: center; } </style>