sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
							<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<title></title>
		<link rel="stylesheet" href="../../css/common.css"/>
		<link rel="stylesheet" href="../../css/login.css"/>
		<link rel="stylesheet" href="../../css/html.css"/>
		<link rel="stylesheet" href="../../css/dropdown.min.css"/>
		<style>
			body, html {
				width: 100%;
			}
			.submit {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="register" id="app">
			<div class="content">
				<form class="zmq-form zmq-width-90 zmq-margin-top-15" action="">
					<div class="userName zmq-input-parent">
						<img src="../../image/drawable-xhdpi/22.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="name" placeholder="请输入手机号" required v-model = "info.phone" />
					</div>
				<!--	<div class="passWord zmq-input-parent">
						<img src="../../image/drawable-xhdpi/pass.png" class="zmq-input-img"/>
						<input class="zmq-input" type="password" name="password" placeholder="请输入密码" required v-model="info.password" />
					</div>-->
					<!--<div class="passWord zmq-input-parent-margin zmq-flex zmq-flex-between">
						<img src="../../image/drawable-xhdpi/pass2.png" class="zmq-input-img zmq-input-ru" style="margin-top: 3%"/>
						<input class="zmq-input zmq-margin-auto" type="number" name="phoneCode" placeholder="请输入验证码" required v-model="info.code" style="width: 40%"/>
						<div class="zmq-text-font-07 zmq-btn-getCode">获取验证码</div>
					</div>-->
					<div class="passWord zmq-input-parent">
						<img src="../../image/drawable-xhdpi/33.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="name" placeholder="请输入门店名称" required v-model="info.storeName" />
					</div>
					<div class="passWord zmq-input-parent">
						<img src="../../image/drawable-xhdpi/11.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="name" placeholder="请输入经营者姓名" required v-model="info.name" />
					</div>
					<div class="passWord zmq-input-parent" v-cloak>
						<img src="../../image/drawable-xhdpi/wj.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="brand" placeholder="请选择销售品牌" readonly="readonly" required id="multipleSelect" v-on:click="chooseBrand" />
						<div class="zmq-flex zmq-border-top-1 zmq-padding-vertical-5 zmq-margin-top-5" v-show = "chooseBrandList.length > 0">
							<div class="zmq-bg-success zmq-padding-doneBtn zmq-text-white zmq-text-font-08 zmq-margin-level-5 zmq-margin-vertical-5 zmq-radius-5" v-for="(b,i) in chooseBrandList" v-on:click="deleteBrand(i)">
								{{b.cont}} <img class="zmq-close" src="../../image/close.png" />
							</div>
						</div>
					</div>
					<div class="passWord zmq-input-parent">
						<img src="../../image/drawable-xhdpi/location.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="location" placeholder="请点击选择省市" required readonly="readonly" v-model = "info.area" v-on:click="chooseArea"/>
					</div>
					<div class="passWord zmq-input-parent">
						<img src="../../image/drawable-xhdpi/address.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="address" placeholder="请输入详细地址" required  v-model = "info.address"/>
					</div>
					<div class="passWord zmq-input-parent" v-show="upChoose == true" v-cloak>
						<img src="../../image/drawable-xhdpi/jjs.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="jjs" placeholder="点击选择上级代理商名称" required id="supplierList" readonly="readonly" v-on:click="chooseUpuser" />
						<div class="zmq-flex zmq-border-top-1 zmq-padding-vertical-5 zmq-margin-top-5" v-show = "upChooseList.length > 0">
							<div class="zmq-bg-success zmq-padding-doneBtn zmq-text-white zmq-text-font-07 zmq-margin-level-5 zmq-margin-vertical-5 zmq-radius-5" v-for="(b,i) in upChooseList" v-on:click="deleteSupplier(i)">
								{{b.cont}} <img class="zmq-close" src="../../image/close.png" />
							</div>
						</div>
					</div>
					<div class="zmq-btn zmq-btn-img zmq-margin-top-15" v-on:click="regize">
						注&nbsp;&nbsp;册
					</div>
				</form>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../../script/dropdown.min.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/httpRequest.js"></script>
	<script type="text/javascript" src="../../script/vue_plugins.js"></script>
	<script type="text/javascript">
		//  获取所在省市，然后填写详细地址
		apiready = function() {
			new Vue({
				el : '#app',
				data : {
					// 选择省市区
					UIActionSelector : '',
					//  选择省市区的文件
					file : 'widget://res/city.json',
					// 提交的数据
					info : {
						phone : '', //  手机号
						code : '', // 手机验证码
						password : '', //  密码
						name : '', // 门店经营者姓名
						area : '', // 选择的省市区
						address : '', // 填入的详细地址
						upUser : [], //  上级经销商
						upCode : '', // 上级经销商id
						province : '', // 选择的省
						city : '', //  选择的市
						district : '', // 选择的区
						brand : ["金宇"],
						storeName : '', // 门店名称
					},
					//  是否显示上级经销商
					upChoose : false,
					//  根据省市获取上级经销商
					getUrl : 'getUpuserByProvideUrl',
					upChooseList : [], // 选中的经销商列表
					//  上级经销商列表
					upUserList : [],
					//  开始注册用户
					regizeUrl : 'regizeUrl',
					//  获取销售品牌接口
					BrandUrl : 'chooseBrandUrl',
					brandList : [],
					chooseBrandList : [], // 选中的品牌
					clickDom : '',
					//  品牌顺序
					brandSort : ["金宇","黑狮","玉祺麟","金路","盛凯","万宝"],
				    //  根据品牌获取代理商
				    getUpByIds : 'getUpByBrand',
				    //  根据品牌和地理位置获取代理商
				    getUpByBrandUrl : 'getUpByBrandAndArea',
				},
				methods : {
					init : function() {
						this.UIActionSelector = api.require('UIActionSelector');
						this.getBrand();
					},
					//  删除选中的轮胎品牌
					deleteBrand : function(index) {
						this.chooseBrandList.splice(index, 1);
					},
					// 删除选中代理商
					deleteSupplier : function(index) {
						this.upChooseList.splice(index, 1);
					},
					//  选择上级经销商
					chooseUpuser : function() {
						//				alert(333);
						var _this = this;
						//						this.chooseRegion(this.UIActionSelector, 1, this.upUserList, function(ret) {
						//							_this.info.upUser = ret.selectedInfo[0].agentName;
						//							_this.info.upCode = ret.selectedInfo[0].agentCode;
						//						})
						//					this.checkByDropdown(_this.upChooseList,this.upUserList,"请选择代理商名称","supplierList",function(res){
						//					    if(res.length > 0){
						//					    alert(333);
						//					       //  得确保已经选中的里面没有新选的
						//                          _this.upChooseList = res;
						//					    }
						//					})
						this.clickDom = "supplierList";
						document.body.style.overflow = 'hidden';
					},
					//  选择轮胎品牌 data title dom c
					chooseBrand : function() {
						var _this = this;
						//						this.checkByDropdown1(this.chooseBrandList, this.brandList, "请选择经营品牌", "multipleSelect", function(res) {
						//							if (res.length > 0) {
						//								alert(222);
						//								_this.chooseBrandList = res;
						//								//					       res.map(function(item,index){
						//								//					          if(_this.chooseBrandList.indexOf(item) < 0){
						//								//					            _this.chooseBrandList.push(item);
						//								//					          }
						//								//					       })
						//							}
						//						})
						this.clickDom = "multipleSelect";
						document.body.style.overflow = 'hidden';
					},
					//  获取销售品牌
					getBrand : function() {
						var _this = this;
						this.$post(this.BrandUrl, "", function(ret) {
							if (ret.code == 0) {
								var list = new Array();
								ret.list.map(function(brand, index) {
								    var ids = _this.brandSort.indexOf(brand.brandName);
									var option = {
										cont : brand.brandName,
										id : brand.id,
										code : brand.brandCode
									}
									list[ids] = option;
								})
								_this.brandList = list;
								new Dropdown({
									dom : "multipleSelect", //点击触发下拉的选择框的id
									type : 'multiple', //是单选还是多选 单选 single 多选 multiple
									title : "请选择经营品牌", //选择框title
									required : false, //是否必填
									dataArr : _this.brandList,
									success : function(resp) {// 回调函数
										if (resp.length > 0) {
											if (resp.length > 0) {
												if (_this.clickDom == "multipleSelect") {
													// 品牌
													resp.map(function(item, index) {
														var has = false;
														_this.chooseBrandList.map(function(ir, ids) {
															if (item.id == ir.id) {
																has = true;
															}
														})
														if (has == false) {
															_this.chooseBrandList.push(item);
															_this.getUpUserByBrandList();
														}
													})
												} else {
													// 上级
													resp.map(function(item, index) {
														var has = false;
														_this.upChooseList.map(function(ir, ids) {
															if (item.id == ir.id) {
																has = true;
															}
														})
														if (has == false) {
															_this.upChooseList.push(item);
														}
													})
												}
											}
										}
									}
								})
							}
						})
					},
					//  点击选择省市区
					chooseArea : function() {
						var _this = this;
						this.chooseRegion(this.UIActionSelector, 3, this.file, function(ret) {
							_this.info.area = ret.level1 + ret.level2 + ret.level3;
							_this.info.province = ret.level1;
							_this.info.city = ret.level2;
							_this.info.district = ret.level3;	
							_this.getUpUserByBrandList();						
						})
					},
					//  根据品牌获取代理
					getUpUserByBrandList : function(){
					    if(this.chooseBrandList.length == 0 || this.info.province == ''){
					      return;
					    } 
					    // 循环获取品牌id
					    var ids = new Array();
					    this.chooseBrandList.map(function(c,i){
					       if(c){
					          ids.push(c.id);
					       }
					    })
					    var data = {
							ids : ids,
							area : this.info.province,
							type : 'body',
							url : 'json'
						}, _this = this;			
						this.$post(this.getUpByBrandUrl, data, function(ret) {
							//  遍历数组，添加key为name的键值对，value为agentName
							var list = new Array();
							_this.upChoose = true;
							ret.data.map(function(upItem, index) {
								var option = {
									id : upItem.agent_id,
									cont : upItem.agent_name
								}
								list.push(option);
							})
							_this.upUserList = list;
							new Dropdown({
								dom : "supplierList", //点击触发下拉的选择框的id
								type : 'multiple', //是单选还是多选 单选 single 多选 multiple
								title : "请选择代理商名称", //选择框title
								required : false, //是否必填
								dataArr : _this.upUserList,
								success : function(resp) {// 回调函数
									if (resp.length > 0) {
										if (_this.clickDom == "multipleSelect") {
											// 品牌
											resp.map(function(item, index) {
												var has = false;
												_this.chooseBrandList.map(function(ir, ids) {
													if (item.id == ir.id) {
														has = true;
													}
												})
												if (has == false) {
													_this.chooseBrandList.push(item);
													_this.getUpUserByBrandList();
												}
											})
										} else {
											// 上级
											resp.map(function(item, index) {
												var has = false;
												_this.upChooseList.map(function(ir, ids) {
													if (item.id == ir.id) {
														has = true;
													}
												})
												if (has == false) {
													_this.upChooseList.push(item);
												}
											})
										}
									}
								}
							})
						})
					},
					//  获取该省的经销商
					getUpUserList : function(provide) {
						var data = {
							area : provide
						}, _this = this;
						this.$post(this.getUrl, data, function(ret) {
							//  遍历数组，添加key为name的键值对，value为agentName
							var list = new Array();
							_this.upChoose = true;
							ret.list.map(function(upItem, index) {
								var option = {
									id : upItem.id,
									cont : upItem.agentName
								}
								list.push(option);
							})
							_this.upUserList = list;			
							new Dropdown({
								dom : "supplierList", //点击触发下拉的选择框的id
								type : 'multiple', //是单选还是多选 单选 single 多选 multiple
								title : "请选择代理商名称", //选择框title
								required : false, //是否必填
								dataArr : _this.upUserList,
								success : function(resp) {// 回调函数
									if (resp.length > 0) {
										if (_this.clickDom == "multipleSelect") {
											// 品牌
											resp.map(function(item, index) {
												var has = false;
												_this.chooseBrandList.map(function(ir, ids) {
													if (item.id == ir.id) {
														has = true;
													}
												})
												if (has == false) {
													_this.chooseBrandList.push(item);
													_this.getUpUserByBrandList();
												}
											})
										} else {
											// 上级
											resp.map(function(item, index) {
												var has = false;
												_this.upChooseList.map(function(ir, ids) {
													if (item.id == ir.id) {
														has = true;
													}
												})
												if (has == false) {
													_this.upChooseList.push(item);
												}
											})
										}
									}
								}
							})
							//							_this.upUserList = ret.list;
							//							_this.upChoose = true;
							//							_this.upUserList.map(function(upItem, index) {
							//								_this.$set(upItem, "name", upItem.agentName);
							//							})
						})
					},
					//  注册用户
					regize : function() {
//						this.info.brand = this.chooseBrandList;
//						this.info.upUser = this.upChooseList;
                        var brandList = new Array(),upUserList = new Array();
                        this.chooseBrandList.map(function(brand,index){
                             var option = {
                                 id : brand.id,
                                 brandName : brand.cont
                             }
                             brandList.push(option);
                        })
                        this.upChooseList.map(function(upUser,index){
                             var option = {
                                 id : upUser.id,
                                 agentName : upUser.cont
                             }
                             upUserList.push(option);
                        })
                        if(this.phoneExg(this.info.phone) == false ) {
                          return;
                        }
                        if(this.checkInfo(this.info.province) == false){
                          return;
                        }
                        if(this.checkInfo(this.info.city) == false){
                          return;
                        }
                        if(this.checkInfo(this.info.district) == false){
                          return;
                        }
                        if(this.checkInfo(this.info.name) == false){
                          return;
                        }
                        if(this.checkArray(upUserList) == false){
                          return;
                        }
                        if(this.checkArray(brandList) == false){
                          return;
                        }
                        if(this.checkInfo(this.info.storeName) == false){
                          return;
                        }
						var data = {
							mobile : this.info.phone,
							password : this.info.password,
							province : this.info.province,
							city : this.info.city,
							district : this.info.district,
							storeJl : this.info.name,
							agentDtoList : upUserList,
							brandDtoList : brandList,
							storeName : this.info.storeName,
							addressInfo : this.info.address,
							type : 'body',
							url : 'json'
						}, _this = this;
						this.$post(this.regizeUrl, data, function(ret) {
							//  注册成功,请等待审核
							_this.showToast("注册成功");
							setTimeout(function() {
								_this.closeWin();
							}, 200);
						})
					},
				},
				mounted : function() {
					this.init();
				}
			})
		}
	</script>
</html>