sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="./css/api.css" />
		<!--<link rel="stylesheet" type="text/css" href="./css/aui.css" />-->
		<link rel="stylesheet" type="text/css" href="./css/aui-win.css" />
		<link rel="stylesheet" type="text/css" href="./css/css/vant-ui.css" />
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="./css/main.css" />
		<script src="./script/js/vue.js"></script>
		<script src="./script/js/vant-ui.js"></script>
		<script src="./script/js/main.js"></script>
		<script src="./script/vue_plugins.js"></script>

		<style type="text/css">
			body, html {
				width: 100%;
				height: 100%;
			}
			.aui-nav .aui-bar-tab {
				background: #fff;
			}
			.aui-bar {
				text-align: center;
				/*height: 3.3rem;*/
			}
			#app{
				background: linear-gradient(#00a0ea,#040da9);
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
			}
			.my-swipe{
				width: 60%;
				background: #ffffff;
				box-shadow: 0 6px 12px 7px rgba(0,0,0,0.2);
				height: 60%;
				border-radius: 10px;

			}
			.my-swipe-item{
				/*display: flex;
				flex-wrap: wrap;
				justify-content: center;*/
				padding: 32px 24px;
				box-sizing: border-box;
				position: relative;
			}
			.avatar{
				width: 2.2rem;
				height: 2.2rem;
				border-radius: 1.1rem;
				overflow: hidden;
				background: rgba(0,0,0,.2);
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
			}
			img{
				width: 100%;
				height: auto;
			}
			.title{
				text-align: center;
				margin-top: .2rem;
				font-size: 0.32rem;
			}
				.title span{
					color: #00a0ea;
					font-weight: 600;
				}
			.btn-goin{
				position: absolute;
				bottom: 1rem;
				margin: 0 auto;
				width: 80%
			}
		</style>
	</head>
	<body>
			<header class="aui-bar aui-bar-nav" id="aui-header">选择你的角色</header>
			<div id="app" v-cloak>
				<van-swipe v-if="showScope" class="my-swipe" @change="onChange">
					<van-swipe-item class="my-swipe-item" v-for="(item,index) in roleList" :key="index">
							<div class="avatar">
								<img v-if="item.spart=='10'" src="./image/image/t.png" />
								<img v-else-if="item.spart=='40'" src="./image/image/p.png" />
							</div>
							<div class="title"><span>{{item.spartName}}经销商</span></div>
							<van-button class="btn-goin" round type="info" @click="selectedRole(item)">立即进入</van-button>
					</van-swipe-item>
				</van-swipe>
				<div v-else style="width:100%;height:100%;text-align:center;line-height:100%;">
					<van-loading v-show="loadingShow"></van-loading>
					<van-empty v-show="!loadingShow" description="页面加载失败">
					  <van-button round type="danger" class="bottom-button" @click="reback">
					    退出重新登录
					  </van-button>
					</van-empty>
				</div>
			</div>
	</body>
	<script type="text/javascript" src="./script/api.js"></script>
	<script type="text/javascript" src="./script/aui-tab.js" ></script>
	<script type="text/javascript" src="./script/httpRequest.js"></script>
	<script type="text/javascript">
		apiready = function() {
			//$api.clearStorage();
			var header = $api.byId('aui-header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var body_h = $api.offset($api.dom('body')).h;
			api.addEventListener({
			    name: 'rebacklogin'
			}, function(ret, err){
				if( ret ){
						//  alert( JSON.stringify( ret ) );
				}else{
						//  alert( JSON.stringify( err ) );
				}
			});
			new Vue({
				el: "#app",
				data: {
						loginid: "",
						roleScene: "",
						currentItem:0,
						roleList: [],
						showScope: false,
						loadingShow: true
				},
				created: function(){
					var _this = this;
					// 判断是否登录
					if(!this.isLogin()){
						_this.openLogin(headerPos, body_h);
					};
					// 判断是否需要选择角色，需要选择角色的情况：showScope为true
					if(typeof $api.getStorage("showScope") == "string" && $api.getStorage("showScope")=="true"){
						// 需要选择角色
						if(typeof $api.getStorage("showScope") != "string"||$api.getStorage("roleScene")==""||$api.getStorage("roleScene")==undefined){
							_this.openLogin(headerPos, body_h);
						}else{
								_this.loginEntrance($api.getStorage("roleScene"),'.');
						}
					}else if(typeof $api.getStorage("showScope") == "string" && $api.getStorage("showScope")=="false"){
							// 不需要选择角色，直接进入对应的界面
						_this.loginEntrance($api.getStorage("roleScene"),'.');
					}else{
						_this.openLogin(headerPos, body_h);
					};
					// 这里是账号密码登录的数据
					api.addEventListener({name:"saveUserPwdInfo"},function(info){
						_this.showScope = info.value.data.data.showScope;
						if(_this.showScope){
							// 选择业务场景
							_this.roleList = info.value.data.data.scopeList;
						}else{
							// 默认不选择业务场景时
							$api.setStorage('roleScene', info.value.data.data.spart);
							_this.loginEntrance(info.value.data.data.spart,'.');
						}
					});
				},
				mounted: function(){
					var _this = this;
					setTimeout(function(){
						_this.loadingShow = false;
					},6*1000)
				},
				methods: {
					reback: function(){
						// 加载失败退出重新登录
							this.openLogin(headerPos, body_h);
					},
					onChange(index) {
						 this.currentItem = index;
					 },
					 openLogin(headerPos, body_h, footer_h) {
						 	$api.clearStorage();
				 			api.openWin({
				 				name : 'login',
				 				url : './main/login.html',
				 				rect : {
				 					x : 0,
				 					y : 0,
				 					w : 'auto',
				 					h : body_h - footer_h - headerPos.h
				 				},
				 				animation : {
				 					type : "none", //动画类型（详见动画类型常量）
				 					subType : "from_right", //动画子类型（详见动画子类型常量）
				 					duration : 200 //动画过渡时间，默认300毫秒
				 				}
				 			});
						},
						selectedRole(params){
							var _this = this;
							this.showModal("场景确认",'您确认进入'+params.spartName+'业务场景？', ["取消", "确认"],function(index){
								if(index==1){
									var data = {
										token : $api.getStorage("token"),
										vkorg : params.vkorg,
										vtweg : params.vtweg,
										spart: params.spart,
										url : 'json',
										type : 'body'
									};
									_this.$post("confirmBusinessScope", data, function(ret) {
										if(ret.code==0||ret.code=="0"){
												_this.loginEntrance(params.spart,'.');
												$api.setStorage('roleScene', params.spart);
												$api.setStorage("token", ret.data.token);
										}
									})
								}else{
										$api.clearStorage("roleScene");
								}
							})
						}
			 		}
			});
		}
	</script>
</html>