123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <link rel="stylesheet" href="./css/element.css">
- <script src="./js/babel.min.js"></script>
- <script src="./js/vue.js"></script>
- <script src="./js/axios.min.js"></script>
- <script src="./js/element.js"></script>
- <title>大卫博士-防伪查询</title>
- <script type="text/javascript">
- document.addEventListener('plusready', function() {
-
- });
- </script>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- html,
- body,
- #app {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: flex-start;
- flex-direction: column;
- }
- .LoginContainer {
- flex: 1;
- overflow: hidden;
- padding: 80px 25px;
- box-sizing: border-box;
-
- }
- .LoginHeader {
- color: #333333;
- width: 100%;
- margin-bottom: 30px;
- }
- .LoginHeader>p {
- display: inline-block;
- color: #333333;
- font-size: 32px;
-
- }
-
- .FormInput {
- width: 100%;
- border: none;
- border-bottom: 1px solid #EEEEEE;
- padding: 15px 0;
- margin-bottom: 15px;
- outline: none;
- }
- .LoginSubmit {
- width: calc(100% - 40px);
- height: 48px;
- margin: 20px auto 0;
- border-radius: 48px;
- text-align: center;
- line-height: 48px;
- color: #FFFFFF;
- font-size: 20px;
- background: linear-gradient(to right, #A080FF, #5D6BFF);
- }
-
- </style>
- </head>
-
- <body>
- <div id="app">
- <div class="LoginContainer">
- <div class="LoginHeader">
- <p>登录</p>
- </div>
- <div class="LoginForm">
- <input v-model="phone" type="text" placeholder="请输入手机号" class="FormInput">
- <input v-model="password" type="password" placeholder="请输入密码" class="FormInput">
- </div>
- <p class="LoginSubmit" @click="noMultipleClicks(toLogin)">确认登录</p>
- </div>
- </div>
- <script type="text/babel">
- var app = new Vue({
- el: '#app',
- data() {
- return {
- noClick: true,
- phone:'',
- password:'',
- }
- },
- mounted() {
- this.isLogin()
- },
- methods: {
-
- noMultipleClicks(methods) {
- let that = this;
- if (that.noClick) {
- that.noClick= false;
- methods();
- setTimeout(function () {
- that.noClick= true;
- }, 1500)
- }
- },
- isLogin() {
- let token = window.localStorage.getItem("token")
- if(token) {
- this.checkLoginTokenSuccess()
- }
- },
- checkLoginTokenSuccess() {
- let loading = window.ELEMENT.Loading.service()
- let _this = this
- axios.get('http://fangw.jiuweiyun.cn/api/get_good', {
- headers: {
- Authorization: `Bearer ` + localStorage.getItem("token")
- }
- }).then(res => {
- loading.close()
- if(res.code === 200) {
- window.location.href = "./pages/product.html"
- } else {
- window.localStorage.removeItem("token")
- }
- }).catch(() => {
- loading.close()
- window.localStorage.removeItem("token")
- })
- },
- toLogin() {
- if(!this.phone) {
- window.ELEMENT.Message.error('请输入手机号')
- return false
- }
- if(!this.password) {
- window.ELEMENT.Message.error('请输入密码')
- return false
- }
- let loading = window.ELEMENT.Loading.service()
- let _this = this
- axios.post('http://fangw.jiuweiyun.cn/api/login/ChangeAppLogin', {
- phone: _this.phone,
- password: _this.password
- }).then(res => {
- if (res.code === 200) {
- window.localStorage.setItem('token', res.data.token)
- window.ELEMENT.Message.success('登录成功')
- window.location.href = "./pages/product.html"
- loading.close()
- } else {
- window.ELEMENT.Message.error(res.msg || '登录失败')
- loading.close()
- }
- }).catch(() => {
- loading.close()
- window.ELEMENT.Message.error('登录失败')
- })
- }
- }
- })
- </script>
- </body>
- </html>
|