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};
}); });

Vue 一个注册页面有省市联动的更多相关文章

  1. jsp注册页面的省份联动(网上copy别人的,然后自己弄了一下才知道怎么用)

    首先写一个js里面是所有的省份一些七七八八的东西,直接复制黏贴过去就好了. var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, d ...

  2. MyEclipse做一个注册页面,需要注意的地方。

  3. 学习笔记_Java_day14—编码实战___一个注册页面的完整流程

  4. Servlet(4):一个简单的注册页面

    一. 注册要求 1. 一个注册页面 username (文本框) password:密码 (密码框) passwordYes :再次输入密码(密码框) hobby (多选框) sex (单选框) in ...

  5. HTML&CSS基础学习笔记1.22-简单的注册页面

    一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...

  6. node.js实现简单的登录注册页面

    首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...

  7. 使用Html和ashx文件实现其简单的注册页面

    记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序 中 一直在出错,大的问题小的问题一直出错,似乎是不在状 ...

  8. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  9. 使用vue和drf后台进行登录页面和注册页面(本文大概的疏通一下前后台是怎么交互的)

    注册页面 先从vue页面开始,下面是举例的vue页面截图 从上面的截图我们可以看到一些vue的指令:v-model和v-on(缩写成@) v-model是表单指令:就是获取属性值,在这里就是这些输入框 ...

随机推荐

  1. Oracle Dorp 表数据恢复

    利用Oracle 数据回闪机制进行恢复,当一个表被drop掉,表会被放入recyclebin回收站,可通过回收站做表的闪回.表上的索引.约束等同样会被恢复不支持sys/system用户表空间对象,可通 ...

  2. 阿里巴巴开源项目: 基于mysql数据库binlog的增量订阅&消费

    背景 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.不过早期的数据库同步业务,主要是基于trigger的方式获取增量变更,不过从2010年开始,阿里系公司开始逐步的尝 ...

  3. git命令--subtree

    目录 git命令--subtree subtree 主要命令 git subtree add   --prefix=<prefix> <commit> git subtree ...

  4. 学习笔记之vim的使用

    很多刚学习linux编程的人总是对vim有一种恐惧,我自己就是这么回事的. 可是当你努力的去尝试学习使用后,才发现它的精髓所在. 在我看来,让vim变得好用的前提是要安装两个插件,ctags和tagl ...

  5. JVM 中你不得不知的一些参数

    有的同学虽然写了一段时间 Java 了,但是对于 JVM 却不太关注.有的同学说,参数都是团队规定好的,部署的时候也不用我动手,关注它有什么用,而且,JVM 这东西,听上去就感觉很神秘很高深的样子,还 ...

  6. python文件的基本操作

    打开文件的三种方式: open(r'E:\学习日记\python\code\文件的简单操作.py') open('E:\\学习日记\\python\\code\\文件的简单操作.py') open(' ...

  7. Python 基础 常用模块

    Python 为我们提供了很多功能强大的模块,今天就主要使用的到的模块进行整理,方便后面来翻阅学习. 一.时间模块 在时间模块中我们重点介绍几种自己常用的功能,主要方便我们按照自己想要的方式获取时间 ...

  8. Look into Bitmap images

    What's a Bitmap image? I'm not going to explain the differences between raster and vector images, no ...

  9. pat 1023 Have Fun with Numbers(20 分)

    1023 Have Fun with Numbers(20 分) Notice that the number 123456789 is a 9-digit number consisting exa ...

  10. nyoj 259-茵茵的第一课 (python, input, print)

    259-茵茵的第一课 内存限制:64MB 时间限制:3000ms 特判: No 通过数:23 提交数:36 难度:0 题目描述: 茵茵今年已经六年级了,爸爸给她报了一个学习程序设计的班. 第一节课上, ...