login.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. (function() {
  2. Vue.component('login-form', {
  3. template: `<div><div class="container-fluid">
  4. <div class="container" id="head">
  5. <div class="ptb15 top-banner">
  6. <img src="../../images/LOGO.png" class="hlogo" />
  7. <span class="qr-container">
  8. <img src="../../images/qr_code.png" class="qr_code" />
  9. <p class="c-f12 text-center">下载APP</p>
  10. </span>
  11. </div>
  12. </div>
  13. </div>
  14. <div class="container-fluid chahua-bg">
  15. <div class="chahua container">
  16. <div class="loginForm fr" :class="{'loginForm-active':!registerFlag}">
  17. <div class="tabs-container no-borders mtb20 plr30">
  18. <ul class="nav nav-tabs c-border-b">
  19. <li :class="{'active': type==1}" @click="changeType(1)">
  20. <a style="padding:10px 0px;margin-left:35px;margin-right: 35px;font-size: 20px;">密码登录</a>
  21. </li>
  22. <li :class="{'active': type==2}" @click="changeType(2)">
  23. <a style="padding:10px 0px;margin-left:25px;margin-right: 25px;font-size: 20px;">验证码登录</a>
  24. </li>
  25. </ul>
  26. <div class="tab-content">
  27. <div class="tab-pane" :class="{'active': type==1}">
  28. <div class="panel-body no-borders" style="padding: 0px;">
  29. <form id="form1" class="m-t" role="form" onsubmit="return false;">
  30. <div class="form-group">
  31. <input class="form-control" type="text" v-model="account" placeholder="请输入身份证号或者手机号码">
  32. </div>
  33. <div class="form-group">
  34. <input class="form-control" type="password" v-model="password" placeholder="请输入密码">
  35. </div>
  36. <div class="text-right c-323232" style="margin-top:-10px;">忘记密码</div>
  37. <button type="submit" class="btn btn-theme block full-width m-b" @click="login">登 录</button>
  38. <a type="button" class="btn btn-default block full-width m-b" @click="toggleRegister">注 册</a>
  39. </form>
  40. </div>
  41. </div>
  42. <div class="tab-pane" :class="{'active': type==2}">
  43. <div class="panel-body no-borders" style="padding: 0px;">
  44. <form id="form2" class="m-t" role="form" onsubmit="return false;">
  45. <div class="form-group">
  46. <input class="form-control" type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号码">
  47. </div>
  48. <div class="form-group">
  49. <input class="form-control" type="text" v-model="imgcaptcha" placeholder="请输入图形验证码">
  50. <a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
  51. </div>
  52. <div class="form-group">
  53. <input class="form-control" type="text" v-model="captcha" placeholder="请输入短信验证码">
  54. <a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
  55. </div>
  56. <button type="submit" class="btn btn-theme block full-width m-b" @click="login">登 录</button>
  57. <a type="button" class="btn btn-default block full-width m-b" @click="toggleRegister">注 册</a>
  58. </form>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="registerForm fr" :class="{'registerForm-active':registerFlag}">
  65. <div class="ptb10 plr30 c-border-b c-f26">注册<span class="fr c-909090 c-f14 fhdl" @click="toggleRegister">返回登录</span></div>
  66. <form id="form" class="m-t plr30" role="form" onsubmit="return false;">
  67. <div class="form-group">
  68. <select class="form-control codeType" v-model="codeType">
  69. <option value="1">身份证</option>
  70. <option value="2">手机</option>
  71. </select>
  72. </div>
  73. <div class="form-group">
  74. <input class="form-control" type="text" :maxlength="maxLength" placeholder="请输入身份证号" v-model="idCardNo" id="IDCard">
  75. </div>
  76. <div class="form-group">
  77. <input class="form-control" placeholder="请输入登录密码" v-model="rPassword" type="password" minlength="6" maxlength="16">
  78. </div>
  79. <div class="form-group">
  80. <input class="form-control" placeholder="请确认登录密码" v-model="confirmPassword" type="password" minlength="6" maxlength="16">
  81. </div>
  82. <p class="c-909090" style="margin-top:-10px;">密码格式为6-16位,不允许有空格</p>
  83. <div class="checkbox">
  84. <label><input type="checkbox"
  85. v-model="toggle"> 阅读并接受<a href="#" target="_blank">《健康之路用户协议》</a>及<a href="#" target="_blank">《健康之路隐私保护声明》</a></label>
  86. </div>
  87. <button type="submit" class="btn btn-theme block full-width m-b" :class="{'disabled':!toggle}" @click="register">完成注册并登录</button>
  88. </form>
  89. </div>
  90. </div>
  91. </div>
  92. <div id="foot">
  93. <p>主办方:上饶市卫生与计划生育委员会&nbsp;&nbsp;&nbsp;技术支持:健康之路(中国)信息技术有限公司&nbsp;&nbsp;&nbsp;备案号登记号:赣ICP98273877号-1</p>
  94. <p>上饶市卫生信息中心 Copyright&nbsp;<span class="glyphicon glyphicon-copyright-mark"></span>&nbsp;2009-2017 All Rights Reserved</p>
  95. </div></div>`,
  96. props: [],
  97. data: function() {
  98. return {
  99. type: 1, //记录选择的登录方式,1-手机号登录,2-验证码登录
  100. account: '17500000001',
  101. mobile: '',
  102. password: '123456',
  103. imgcaptcha: '',
  104. captcha: '',
  105. infoText: '获取验证码',
  106. countdown: false ,//是否在倒计时
  107. codeType: 1,
  108. idCardNo: "350526199501142015",
  109. rPassword: 'a123123',
  110. confirmPassword: "a123123",
  111. toggle: true,
  112. registerFlag:false,
  113. maxLength:18,
  114. }
  115. },
  116. methods: {
  117. changeType: function(val) {
  118. this.type = val;
  119. },
  120. getCaptcha: function() {
  121. //先校验手机号码是否正确
  122. var isMobile = isMobilePhone(this.mobile);
  123. if(!isMobile) {
  124. alert('请输入正确的手机号码!');
  125. return false;
  126. }
  127. setTimer(this);
  128. //发送请求
  129. // sendToGetCaptcha(this);
  130. },
  131. login: function() {
  132. var vm = this
  133. if(this.type == 1) {
  134. if(!vm.account) {
  135. console.log("账号不能为空!");
  136. return false;
  137. }
  138. if(!vm.password) {
  139. console.log("登录密码不能为空!");
  140. return false;
  141. }
  142. console.log(httpRequest)
  143. var data={
  144. grant_type: httpRequest.grant_type,
  145. client_id: httpRequest.client_id,
  146. username: vm.account,
  147. password: vm.password
  148. }
  149. console.log(data)
  150. loginAPI.accessToken(data).then(function(oauthInfo) {
  151. storage.setItem("oauthInfo", JSON.stringify(oauthInfo));
  152. var data1={
  153. userName:oauthInfo.user,
  154. accessToken: oauthInfo.accessToken
  155. }
  156. loginAPI.getUserInfo(data1).then(function(res) {
  157. console.log("登录成功");
  158. loginedList = [res.telephone]
  159. storage.setItem("loginedList", JSON.stringify(loginedList));
  160. storage.setItem("userAgent", JSON.stringify(res));
  161. vm.getJueSeData(res);
  162. }), function error(xhr, type, errorThrown) {
  163. if(type == "timeout" || type == "abort" || type == "error") {
  164. console.log("账号或密码错误");
  165. }
  166. }
  167. }).catch(function(e) {
  168. console.log("账号或密码错误")
  169. })
  170. } else {
  171. if(!vm.mobile) {
  172. console.log("手机号不能为空!");
  173. return false;
  174. }
  175. if(!vm.imgcaptcha) {
  176. console.log("图形验证码不能为空!");
  177. return false;
  178. }
  179. if(!vm.captcha) {
  180. console.log("手机验证码不能为空!");
  181. return false;
  182. }
  183. }
  184. },
  185. getJueSeData: function(userAgent) {
  186. var vm = this;
  187. //获取居民权限接口
  188. loginAPI.findByUserId({
  189. userId: userAgent.id
  190. }).then(function(data) {
  191. storage.setItem("roleList",JSON.stringify(data.detailModelList));//缓存角色列表
  192. // app.openWebviewExtras("../../home/html/home.html");//跳转到主页面
  193. })
  194. },
  195. register: function() {
  196. var vm = this
  197. if(!isCardNo(vm.idCardNo, vm.codeType)) {
  198. return
  199. }
  200. if(!vm.rPassword) {
  201. alert("登录密码不能为空!");
  202. return false;
  203. }
  204. if(!vm.confirmPassword) {
  205. alert("确认密码不能为空!");
  206. return false;
  207. }
  208. if(vm.rPassword.length < 6 && vm.rPassword.length > 16) {
  209. alert("登录密码需6-16位");
  210. return false;
  211. }
  212. if(vm.confirmPassword.length < 6 && vm.confirmPassword.length > 16) {
  213. alert("确认密码需6-16位");
  214. return false;
  215. }
  216. if(vm.rPassword != vm.confirmPassword) {
  217. alert("新密码和确认密码必须一致");
  218. return false;
  219. }
  220. if(!vm.toggle) {
  221. alert("未确认是否阅读并接受条款");
  222. return false;
  223. }
  224. // location.href = "../login/login.html"
  225. //连接注册后台接口
  226. var data={
  227. demographicId: vm.idCardNo,
  228. codeType:vm.codeType,
  229. telephone: vm.tel,
  230. password: vm.password,
  231. }
  232. var params = {
  233. userJsonData:JSON.stringify(data),
  234. appId: httpRequest.client_id
  235. }
  236. loginAPI.registe(params).then(function (res) {
  237. if (res.successFlg) {
  238. alert("注册成功");
  239. vm.login();
  240. } else {
  241. alert(res.errorMsg);
  242. }
  243. }).catch(function (err) {
  244. alert(err.errorMsg);
  245. })
  246. },
  247. toggleRegister:function(){
  248. var vm=this;
  249. vm.registerFlag=!vm.registerFlag
  250. }
  251. },
  252. watch: {
  253. Password: function(newVal, oldVal) {
  254. var val = newVal.toString();
  255. var reg = /\s+/g; //去除空格
  256. if(reg.test(val)) {
  257. this.Password = oldVal;
  258. }
  259. },
  260. confirmPassword: function(newVal, oldVal) {
  261. var val = newVal.toString();
  262. var reg = /\s+/g; //去除空格
  263. if(reg.test(val)) {
  264. this.confirmPassword = oldVal;
  265. }
  266. },
  267. codeType: function(newVal) {
  268. var vm=this;
  269. var val = newVal.toString();
  270. if(val == 1) {
  271. $("#IDCard").attr("placeholder", "请输入身份证号")
  272. vm.maxLength=18
  273. } else if(val == 2) {
  274. $("#IDCard").attr("placeholder", "请输入手机号码")
  275. vm.maxLength=11
  276. }
  277. }
  278. }
  279. })
  280. //验证码定时
  281. function setTimer(vm) {
  282. var seconds = 59;
  283. vm.countdown = true;
  284. timer = setInterval(function() {
  285. if(seconds == 0) {
  286. clearInterval(timer);
  287. timer = null;
  288. seconds = 59;
  289. vm.infoText = "获取验证码";
  290. vm.countdown = false;
  291. return;
  292. }
  293. seconds--;
  294. vm.infoText = seconds + "s后重新获取";
  295. }, 1000)
  296. }
  297. function isCardNo(card, codeType) {
  298. var isidcard = false
  299. if(codeType == 1) { // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
  300. var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  301. if(!reg.test(card)) {
  302. alert("身份证号输入不合法");
  303. } else {
  304. isidcard = true
  305. }
  306. }else{
  307. var reg = /0?(13|14|15|18|17)[0-9]{9}/;
  308. if(!reg.test(card)) {
  309. alert("手机号码输入不合法");
  310. } else {
  311. isidcard = true
  312. }
  313. }
  314. return isidcard
  315. }
  316. function sendToGetCaptcha(vm) {
  317. var url = "common/captcha",
  318. params = {
  319. mobile: vm.mobile,
  320. type: 5,
  321. captchaToken: 5
  322. };
  323. httpRequest.post(url, {
  324. data: params
  325. }).then(function(res) {
  326. if(res.status == 200) {
  327. tip('发送成功', 'add');
  328. } else {
  329. tip('获取验证码失败');
  330. }
  331. });
  332. }
  333. function getPublicKey(vm) {
  334. var url = "login/public_key";
  335. httpRequest.post(url).then(function(res) {
  336. if(res.status) {
  337. var mod = res.data.modulus;
  338. var exp = res.data.exponent;
  339. key = RSAUtils.getKeyPair(exp, "", mod);
  340. if(key) {
  341. encryedPwd = RSAUtils.encryStr(key, vm.password);
  342. login({
  343. mobile: vm.mobile,
  344. password: encryedPwd,
  345. platform: 4
  346. })
  347. } else {
  348. tip("获取数据失败")
  349. $submit.removeAttr('disabled')
  350. }
  351. } else {
  352. tip(res.msg);
  353. }
  354. })
  355. }
  356. function login(data) {
  357. httpRequest.post('login/doctor', {
  358. data: data
  359. }).then(function(res) {
  360. if(res.status == 200) {
  361. var docInfo = res.data;
  362. localoginlStorage.setItem(httpRequest.agentName, JSON.stringify({
  363. id: docInfo.id,
  364. uid: docInfo.uid,
  365. token: docInfo.token,
  366. imei: localStorage.getItem('WLYY_IMEI'),
  367. platform: 4
  368. }));
  369. //将用户的角色信息单独存储在localstorage中
  370. localStorage.setItem("userRole", JSON.stringify(docInfo.userRole));
  371. window.location.href = "../home/html/index.html";
  372. } else {
  373. tip(res.msg);
  374. }
  375. });
  376. }
  377. })()