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};
});
});
Vue 一个注册页面有省市联动的更多相关文章
- jsp注册页面的省份联动(网上copy别人的,然后自己弄了一下才知道怎么用)
首先写一个js里面是所有的省份一些七七八八的东西,直接复制黏贴过去就好了. var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, d ...
- MyEclipse做一个注册页面,需要注意的地方。
- 学习笔记_Java_day14—编码实战___一个注册页面的完整流程
- Servlet(4):一个简单的注册页面
一. 注册要求 1. 一个注册页面 username (文本框) password:密码 (密码框) passwordYes :再次输入密码(密码框) hobby (多选框) sex (单选框) in ...
- HTML&CSS基础学习笔记1.22-简单的注册页面
一个简单的注册页面 表单提交是前后端数据交互的一种方式. 代码区是一个注册页面,其中包含了以下标签:<form>.<table>.<input>.<butto ...
- node.js实现简单的登录注册页面
首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...
- 使用Html和ashx文件实现其简单的注册页面
记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序 中 一直在出错,大的问题小的问题一直出错,似乎是不在状 ...
- 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面(get&post)
使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...
- 使用vue和drf后台进行登录页面和注册页面(本文大概的疏通一下前后台是怎么交互的)
注册页面 先从vue页面开始,下面是举例的vue页面截图 从上面的截图我们可以看到一些vue的指令:v-model和v-on(缩写成@) v-model是表单指令:就是获取属性值,在这里就是这些输入框 ...
随机推荐
- 学习笔记13_第三方js控件&EasyUI使用
第三方UI包使用思路: 1.先映入各种JS包,包含JS版本包,第三方CSS包,第三方主JS包,第三方语言包. 2.确定要做什么,是对话框还是表格.3.根据Demo和目的,在<body>内, ...
- [2018-06-27] virtualenv
在开发Python应用程序的时候,系统安装的Python只有一个版本:3.4.所有第三方的包都会被pip安装到Python3的site-packages目录下. 如果我们要同时开发多个应用程序,那这些 ...
- [考试反思]1104csp-s模拟测试100: 终结
这么好的整数场,就终结了我连续莫名考好的记录. 功德圆满了... 还是炸了啊.而且炸的还挺厉害(自己又上不去自己粘的榜单啦) 说实在的这场考试做的非常差劲.虽说分数不算特别低但是表现是真的特别差. T ...
- CSPS模拟 73
被T3坑了 忘记考虑$atan$只会返回正数导致无法区分方向相反模长相等的两个向量 直接把向量拆成ab两个上三角函数干出来就对了 真的exhausted
- 数据仓库ETL案例学习(一)
来自课程案例学习 某跨国食品超市的信息管理系统,每天都会记录成千上万条各地连锁超市的销售数据.基于大数据的背景,该公司的管理层决定建立FoodMart数据仓库,期望能从庞大的数据中挖掘出有商业价值 ...
- PHP Laravel 6.2 中用于用户登录的新密码确认流程
Laravel 发布了 v6.2 版本,它添加了一个新的密码确认功能,该功能使你可以要求已登录的用户重新输入密码,然后才能访问路由. 在你执行敏感操作的时候,这个功能就类似GitHub确认对话框.在 ...
- thefuck的安装和使用
先上一张图片 当输错linux命令,fuck一下….. 安装步骤: sudo apt-get install python3-dev python3-pip sudo -H pip3 install ...
- hdu 2846 Repository (字典树)
RepositoryTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- 队列+BFS (附vector初试)
优先队列的使用: include<queue>//关联头文件 struct node{ int x,y; friend bool operator < (node d1,node d ...
- rsync同步基本用法
...