hemall.terabimsoft.com.cn/plugins/help-user-buying/views/buying/template/editMemberAddress.blade.php

<template id="edit_member_address">
    <!-- 修改收货地址 -->
    <el-dialog :visible.sync="modal_edit_member_address" width="900px"  :title="d_title" center>
        <div style="overflow:auto">
            <div style="">
                <el-form  label-position="right" :model="member_address" label-width="15%">
                    <el-form-item label="收件人">
                        <el-input v-model="member_address.username" style="width:70%"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="member_address.mobile" style="width:70%"></el-input>
                    </el-form-item>

                    <el-form-item label="所在区域" v-loading="all_loading">
                        <el-select v-model="member_address.province" placeholder="请选择省" clearable style="width:20%" @change="changeProvince()" value-key="id">
                            <el-option v-for="item in province_list" :key="item.id" :label="item.areaname" :value="item"></el-option>
                        </el-select>
                        <el-select v-model="member_address.city" placeholder="请选择市" clearable style="width:20%" value-key="id" @change="changeCity()">
                            <el-option v-for="item in city_list" :key="item.id" :label="item.areaname" :value="item"></el-option>
                        </el-select>
                        <el-select v-model="member_address.district" placeholder="请选择区" clearable style="width:20%" value-key="id"  @change="changeDistrict()">
                            <el-option v-for="item in district_list" :key="item.id" :label="item.areaname" :value="item"></el-option>
                        </el-select>
                        <el-select v-if="is_street" v-model="member_address.street" placeholder="请选择街道" clearable style="width:20%" value-key="id">
                            <el-option v-for="item in street_list" :key="item.id" :label="item.areaname" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input v-model="member_address.address" style="width:70%"></el-input>
                    </el-form-item>
                    <el-form-item label="是否默认">
                        <el-radio-group v-model="member_address.isdefault">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmSubmit()">确 认</el-button>
                <el-button @click="modal_edit_member_address = false">取 消</el-button>
            </span>
    </el-dialog>
</template>


<script>
    Vue.component('editMemberAddress', {
        style:``,
        name:"editMemberAddress",
        template: `#edit_member_address`,
        props: {
            operationType:{
                type:Number|String,
                default:'',
            },
            member_address:{
                type:Object|String,
                default:{},
            },
            is_street:{
                type:Number,
                default:0,
            },
            edit_address_dialog_show:{
                type:Number,
                default:0,
            },
        },
        delimiters: ['[[', ']]'],
        data() {
            return {
                all_loading:false,
                d_title: '编辑收货地址',
                //编辑收货地址
                modal_edit_member_address:false,
                province_list:[],//省
                city_list:[],//市
                district_list:[],//区域
                street_list:[],//街道
                edit_member_address: {
                    address: "",
                    city: "",
                    city_id: 0,
                    district: "",
                    district_id: 0,
                    mobile: "",
                    province: "",
                    province_id: 0,
                    street: "",
                    street_id: 0,
                    username: "",
                    isdefault:0,
                }
            }
        },
        watch:{
            edit_address_dialog_show(val) {

                if (this.operationType == 'create') {
                    this.showCreateDialog();
                } else if (this.operationType == 'edit') {
                    this.showEditDialog()
                }
            }
        },
        created() {},
        mounted: function () {
            // this.__childInitial();

        },
        methods: {
            //初始化页面数据，请求链接
            __childInitial() {
                if (this.member_address.length==0) {
                    this.member_address = {
                        address: "",
                        city: "",
                        city_id: 0,
                        district: "",
                        district_id: 0,
                        mobile: "",
                        province: "",
                        province_id: 0,
                        street: "",
                        street_id: 0,
                        username: "",
                        isdefault:0,
                    }
                }

                if (this.operationType == 'create') {
                    this.d_title = '新增收货地址';
                }
            },
            showEditDialog() {
                console.log(this.member_address);
                this.modal_edit_member_address = true;
                this.getProvince();
                this.changeProvince(this.member_address.province_id);
                this.changeCity(this.member_address.city_id);
                if(this.is_street) {
                    this.changeDistrict(this.member_address.district_id);
                }
            },
            showCreateDialog() {
                console.log(this.member_address);
                this.modal_edit_member_address = true;
                this.getProvince();
            },
            confirmSubmit() {
                if (this.operationType == 'create') {
                    this.confirmCreate();
                } else if (this.operationType == 'edit') {
                    this.confirmEdit()
                }
            },

            confirmCreate() {
                console.log(this.member_address);

                let address = {
                    uid:this.member_address.uid,
                    isdefault:this.member_address.isdefault,
                    username:this.member_address.username,
                    mobile:this.member_address.mobile,
                    address:this.member_address.address,
                    latitude:this.member_address.latitude,
                    longitude:this.member_address.longitude,
                };
                if(this.member_address.province.id) {
                    address.province = this.member_address.province.areaname;
                } else {
                    address.province = this.member_address.province;
                }
                if(this.member_address.city.id) {
                    address.city = this.member_address.city.areaname;
                } else {
                    address.city = this.member_address.city;
                }
                if(this.member_address.district.id) {
                    address.district = this.member_address.district.areaname;
                } else {
                    address.district = this.member_address.district;
                }

                if(this.is_street){
                    if(this.member_address.street.id) {
                        address.street = this.member_address.street.areaname;
                    } else {
                        address.street = this.member_address.street;
                    }
                }
                console.log({address:address});

                this.$http.post("{!! yzWebFullUrl('plugin.help-user-buying.admin.member-address.create-member-address') !!}",{address:address}).then(response => {
                    if(response.data.result==1){
                        this.$message.success(response.data.msg);
                        this.syncInitAddress();
                    } else{
                        this.$message.error(response.data.msg);
                    }
                    this.modal_edit_member_address = false;
                }),function(res){
                    console.log(res);
                };
            },

            confirmEdit() {
                console.log(this.member_address);

                let address = {
                    isdefault:this.member_address.isdefault,
                    username:this.member_address.username,
                    mobile:this.member_address.mobile,
                    address:this.member_address.address,
                    latitude:this.member_address.latitude,
                    longitude:this.member_address.longitude,
                };
                if(this.member_address.province.id) {
                    address.province = this.member_address.province.areaname;
                } else {
                    address.province = this.member_address.province;
                }
                if(this.member_address.city.id) {
                    address.city = this.member_address.city.areaname;
                } else {
                    address.city = this.member_address.city;
                }
                if(this.member_address.district.id) {
                    address.district = this.member_address.district.areaname;
                } else {
                    address.district = this.member_address.district;
                }

                if(this.is_street){
                    if(this.member_address.street.id) {
                        address.street = this.member_address.street.areaname;
                    } else {
                        address.street = this.member_address.street;
                    }
                }
                console.log({id:this.member_address.id,address:address});

                this.$http.post("{!! yzWebFullUrl('plugin.help-user-buying.admin.member-address.edit-member-address') !!}",{id:this.member_address.id,address:address}).then(response => {
                    if(response.data.result==1){
                        this.syncInitAddress();
                    } else{
                        this.$message.error(response.data.msg);
                    }
                    this.modal_edit_member_address = false;
                }),function(res){
                    console.log(res);
                };

            },

            //子组件搜索传参到父级
            syncInitAddress() {
                this.$emit('init-address',this.operationType);
            },

            // 获取省份信息
            getProvince() {
                var that = this;
                that.all_loading = true;
                that.$http.get("{!! yzWebFullUrl('plugin.help-user-buying.admin.member-address.get-address',['type' => 'province']) !!}",).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        this.province_list = response.data.data;

                    } else{
                        that.$message.error(response.data);
                        that.all_loading = false;
                    }
                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },

            // 省份改变
            changeProvince(parentid) {
                var that = this;
                if(!parentid) {
                    parentid = that.member_address.province.id;
                    that.member_address.city_id = 0;
                    that.member_address.city = '';
                    that.member_address.district_id = 0;
                    that.member_address.district = '';
                    that.member_address.street_id = 0;
                    that.member_address.street = '';
                }
                that.all_loading = true;
                that.$http.get("{!! yzWebFullUrl('plugin.help-user-buying.admin.member-address.get-address',['type' => 'city','parentid' => '']) !!}"+parentid).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        this.city_list = response.data.data;
                    }

                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            // 城市改变
            changeCity(parentid) {
                var that = this;
                if(!parentid) {
                    parentid = that.member_address.city.id;
                    that.member_address.district_id = 0;
                    that.member_address.district = '';
                    that.member_address.street_id = 0;
                    that.member_address.street = '';
                }
                that.all_loading = true;
                that.$http.get("{!! yzWebFullUrl('plugin.help-user-buying.admin.member-address.get-address',['type' => 'district','parentid' => '']) !!}"+parentid).then(response => {
                    if(response.data.result==1){
                        that.district_list = response.data.data;
                    }

                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            // 区域改变
            changeDistrict(parentid) {
                var that = this;
                if(this.is_street) {
                    if(!parentid) {
                        parentid = that.member_address.district.id;
                        that.member_address.street_id = 0;
                        that.member_address.street = '';
                    }
                    that.all_loading = true;
                    that.$http.get("{!! yzWebFullUrl('plugin.help-user-buying.admin.member-address.get-address',['type' => 'street','parentid' => '']) !!}"+parentid).then(response => {
                        if(response.data.result==1){
                            that.street_list = response.data.data;
                        }
                        that.all_loading = false;
                    }),function(res){
                        console.log(res);
                        that.all_loading = false;
                    };
                }
            },
        },
    });

</script>