• Vue 一个注册页面有省市联动


        var vm = new Vue({
            el: '#complete-info',
            data: {
                provinceList: [],
                selectedProvince: "",
                cityList: [],
                selectedCity: "",
                dealerList: [],
                selectedDealer: "",
                carTypeInfo: [],
                selectedCarType: "${carType}",
                custName:"${customer.custName}"
            },
            watch: {
                selectedProvince: function (newVal, oldVal) {
                    var _self = this;
                    if (newVal && typeof newVal != "undefined") {
                        $.get("/basedata/area/parent/" + _self.selectedProvince, function (data) {
                            _self.cityList = data;
                        })
                    }
                    _self.selectedCity = "";
                },
                selectedCity: function (newVal, oldVal) {
                    var _self = this;
                    if (newVal && typeof newVal != "undefined") {
                        $.get("/basedata/dealer/city/" + newVal, function (data) {
                            _self.dealerList = data;
                        })
                    }
                    _self.selectedDealer = "";
                },
                selectedCarType: function (newVal, oldVal) {
                    var _self = this;
                    if (newVal && typeof newVal != "undefined") {
                        $.get("/basedata/states/cartype/"+ _self.selectedCarType, function (data) {
                            _self.provinceList = data;
                            _self.selectedProvince="";
                        });
                    }
                }
            },
            methods: {
                checkInput: function(){
                    var _self=this;
                    if(_self.custName=="") return "请填写姓名";
                    if(_self.selectedProvince=="") return "请选择省市";
                    if(_self.selectedCity=="") return "请选择市区";
                    if(_self.selectedDealer=="") return "请选择经销商";
                    return "ok";
                },
                submit: function () {
                    var errMsg=this.checkInput();
                    if(errMsg!="ok"){alert(errMsg); return;}
                    var _self=this;
                    var _cartypes =  _self.carTypeInfo
                            .filter(function(t){if(t.chk==true)return t})
                            .map(function(t2){return t2.code})
                            .join();
    
                    var _state=$("#home_state").find("option:selected").text();
                    var _city=$("#home_city").find("option:selected").text();
    
                    var data = {
                        mobile: "${customer.phone}",
                        name: _self.custName,
                        attentionCarCode:_self.selectedCarType,
                        dealerCode: _self.selectedDealer,
                        recieveInfoCarType: ","+ _cartypes,
                        visitSource: window.location.href,
                        stateCode: _self.selectedProvince,
                        state:_state,
                        cityCode: _self.selectedCity,
                        city: _city,
                        isFromPc: 1,
                        type: 3
                    };
    
                    $.ajax({
                        url: "/account/order/complete-customer",
                        dataType: "json",
                        data: JSON.stringify(data),
                        contentType:"application/json",
                        type: 'post',
                        success: function (item) {
                            if (item.Code == 1) {
                                 window.location.href = '/order/account/activity/false';
                            } else {
                                alert(item.Msg);
                            }
                        }
                    });
                }
            },
            created: function () {
                var _self = this;
                $.get("/basedata/cartypeinfo/list", function (data) {
                    _self.carTypeInfo = data;
                    //关注车型
                    var intentions =${Intentions};
                    if (intentions) {
                        _self.carTypeInfo.forEach(function (t) {
                            t.chk=false;
                            intentions.forEach(function (t2) {
                                if(t2.carType==t.code) t.chk=true;
                            })
                        })
                    }
                });
            }
        });
    
        //加载完页面设置省
        $(function () {
            $.get("/basedata/states/cartype/${carType}", function (data) {
                vm.provinceList = data;
                vm.selectedProvince=${customer.stateCode};
            });
    
        });
  • 相关阅读:
    oracle 分析函数3
    oracle 分析函数4
    oracle 分析函数2
    postgres
    博客系统
    Java 笔试面试 算法编程篇 一
    Java 笔试面试 基础篇 一
    Struts2
    mysql 数据类型
    ExceptionDemo
  • 原文地址:https://www.cnblogs.com/longling2344/p/7567789.html
Copyright © 2020-2023  润新知