qimall/addons/Happiness/client/views/order/component/order-address.php

<template id="order-address">
    <div class="">
        <el-dialog :title="title" :visible.sync="isShowChangeAddress" @close="dialogClose">
            <el-form :model="form" ref="address" label-width="80px" :rules="rules" size="small" label-position="top">
                <el-form-item label="收货人" prop="receiver_name">
                    <el-input v-model="form.receiver_name"></el-input>
                </el-form-item>
                <el-form-item label="收货人手机号" prop="mobile">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="收货人邮编" prop="zip">
                    <el-input v-model="form.zip"></el-input>
                </el-form-item>
                <el-form-item label="" prop="region_name">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div>省</div>
                        </el-col>
                        <el-col :span="8">
                            <div>市</div>
                        </el-col>
                        <el-col :span="8">
                            <div>区</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-select v-model="regionArr[0]" size="small" placeholder="请选择" @change="getCity">
                                <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select v-model="regionArr[1]" size="small" placeholder="请选择" @change="getDistrict">
                                <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select v-model="regionArr[2]" size="small" placeholder="请选择" @change="getArea">
                                <el-option v-for="item in district" :key="item.id" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isShowChangeAddress = false">取 消</el-button>
                <el-button type="primary" @click="comfirm('address')" :loading="changeAddressLoading">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    Vue.component('order-address', {
        template: '#order-address',
        props: {
            is_show: {
                type: Boolean,
                default: false
            },
            order_info: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            changeAddressLoading:{
                type:Boolean,
                default:false
            },
            title: {
                type: String,
                default: '修改地址'
            }
        },
        data() {
            return {
                isShowChangeAddress: false,
                regionArr: [],
                province: [],
                city: [],
                district: [],
                addressInfo: '',
                form: {
                    name: '',
                    mobile: '',
                    address: '',
                    region_name: ''
                },
                rules: {
                    receiver_name: [{
                        required: true,
                        message: '请填写收货人姓名',
                        trigger: 'change'
                    }],
                    mobile: [{
                        required: true,
                        message: '请填写收货人手机号',
                        trigger: 'change'
                    }],
                    region_name: [{
                        required: true,
                        message: '请填写所在区域',
                        trigger: 'change'
                    }],
                    address: [{
                        required: true,
                        message: '请填写详细地址',
                        trigger: 'change'
                    }],
                },
            }
        },
        watch: {
            is_show: function(newVal) {
                if (newVal) {
                    this.openAddress();
                }
                this.isShowChangeAddress = newVal
            },
            order_info(val) {
                this.form = {
                    id:val.id,
                    receiver_name: val.receiver_name,
                    mobile: val.mobile,
                    address: val.address,
                    zip: val.zip,
                    province: val.province,
                    city: val.city,
                    area: val.area,
                }
                let region_name = val.region_name
                this.regionArr = region_name.split(' ')
                console.log(this.regionArr)
            },
            regionArr(val) {
                this.form.region_name = val[0] + ' ' + val[1] + ' ' + val[2]
            }
        },
        methods: {
            openAddress() {
                request({
                    params: {
                        r: 'common/region/list',
                        level: 3
                    },
                }).then(res => {
                    // console.log(res)
                    this.province = res.data.data.list
                    for (let i = 0; i < this.province.length; i++) {
                        if (this.regionArr[0] == this.province[i].name) {
                            this.city = this.province[i].children
                        }
                    }
                    for (let i = 0; i < this.city.length; i++) {
                        if (this.regionArr[1] == this.city[i].name) {
                            this.district = this.city[i].children
                        }
                    }
                    // this.getDistrict();
                })
            },
            // 获取城市列表
            getCity() {
                for (let i = 0; i < this.province.length; i++) {
                    if (this.regionArr[0] == this.province[i].name) {
                        this.city = this.province[i].children
                        this.regionArr[1] = this.city[0].name
                        this.district = this.city[0].children
                        this.regionArr[2] = this.district[0].name
                        this.form.province = this.province[i].id
                        this.form.city = this.city[0].id
                        this.form.area = this.district[0].id
                    }
                    
                }
            },
            // 获取区县
            getDistrict() {
                for (let i = 0; i < this.city.length; i++) {
                    if (this.regionArr[1] == this.city[i].name) {
                        this.district = this.city[i].children
                        this.regionArr[2] = this.district[0].name
                        this.form.city = this.city[i].id
                        this.form.area = this.district[0].id
                    }
                }
            },
            getArea(e) {
                this.district.forEach((it, i) => {
                    if (it.name == e) {
                        this.form.area = it.id
                    }
                })
            },
            comfirm(formName) { // 确定
                // console.log('ok')
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.form);
                        this.$emit('sure',this.form)
                    } else {
                        console.log('error submit!!');
                        
                    }
                });
            },
            dialogClose() {
                this.$emit('close')
            }
        }
    });
</script>

<style>

</style>