|
|
@@ -1,205 +1,330 @@
|
|
|
- <template>
|
|
|
- <div style="background-color: #F6F6F6;">
|
|
|
- <view class="zai-box" >
|
|
|
- <scroll-view scroll-y class="page">
|
|
|
- <view style="text-align: center;">
|
|
|
- <image src="/static/icon/gklog.jpeg" mode='aspectFit' class="zai-logo"></image>
|
|
|
- </view>
|
|
|
- <view class="zai-title"></view>
|
|
|
- <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
|
|
|
-
|
|
|
- <view class="cu-form-group margin-top round shadow-blur">
|
|
|
- <view class="title">账号:</view>
|
|
|
- <input placeholder="请输入账号" name="input" v-model="userName"></input>
|
|
|
- </view>
|
|
|
- <view class="cu-form-group margin-top round">
|
|
|
- <view class="title">密码:</view>
|
|
|
- <input placeholder="请输入密码" name="input" type="password" v-model="password"></input>
|
|
|
- </view>
|
|
|
- <view class="padding flex flex-direction">
|
|
|
- <button class="cu-btn bg-green shadow-blur round lg" :loading="loading"
|
|
|
- @tap="onLogin"> {{loading ? "登录中...":"登 录"}}
|
|
|
- </button>
|
|
|
- </view>
|
|
|
+<template>
|
|
|
+ <div style="background-color: #F6F6F6;">
|
|
|
+ <view class="zai-box">
|
|
|
+ <scroll-view scroll-y class="page">
|
|
|
+ <view style="text-align: center;">
|
|
|
+ <image src="/static/icon/gklog.jpeg" mode='aspectFit' class="zai-logo"></image>
|
|
|
+ </view>
|
|
|
+ <view class="zai-title"></view>
|
|
|
+ <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
|
|
|
+
|
|
|
+ <view class="cu-form-group margin-top round shadow-blur">
|
|
|
+ <view class="title">账号:</view>
|
|
|
+ <input placeholder="请输入账号" name="input" v-model="userName"></input>
|
|
|
+ </view>
|
|
|
+ <view class="cu-form-group margin-top round">
|
|
|
+ <view class="title">密码:</view>
|
|
|
+ <input placeholder="请输入密码" name="input" type="password" v-model="password"></input>
|
|
|
+ </view>
|
|
|
+ <div style="height: 10px;"></div>
|
|
|
+ <view>
|
|
|
+ <checkbox-group @change="checkboxChange">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <label>
|
|
|
+ <checkbox :value="checkbox[0].value" :class="checkbox[0].checked=='true'?'checked':''"
|
|
|
+ :checked="checkbox[0].checked=='true'?true:false" style="transform:scale(0.7)" />
|
|
|
+ 记住密码
|
|
|
+ </label>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </checkbox-group>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="padding flex flex-direction">
|
|
|
+ <button class="cu-btn bg-green shadow-blur round lg" :loading="loading" @tap="onLogin">
|
|
|
+ {{loading ? "登录中...":"登 录"}}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 登录加载弹窗 -->
|
|
|
+ <view class="cu-load load-modal" v-if="loading">
|
|
|
+ <image src="/static/login3.png" mode="aspectFit" style="top: 35px;"></image>
|
|
|
+ <view class="gray-text" style="margin-top: 35px;">登录中...</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import {
|
|
|
+ ACCESS_TOKEN,
|
|
|
+ USER_NAME,
|
|
|
+ USER_INFO
|
|
|
+ } from "@/common/util/constants"
|
|
|
+ import {
|
|
|
+ mapActions
|
|
|
+ } from "vuex"
|
|
|
+ import myImageUpload from "@/components/my-componets/my-image-upload.vue"
|
|
|
+ import mypage from "@/components/my-componets/my-page.vue"
|
|
|
+ import myselect from "@/components/my-componets/my-select.vue"
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ 'my-image-upload': myImageUpload,
|
|
|
+ 'my-select': myselect
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ exitloading:false,
|
|
|
+ userName: '',
|
|
|
+ value: 1,
|
|
|
+ password: '',
|
|
|
+ phoneNo: '',
|
|
|
+ smsCode: '',
|
|
|
+ showPassword: false, //是否显示明文
|
|
|
+ loginWay: 1, //1: 账密，2：验证码
|
|
|
+ smsCountDown: 0,
|
|
|
+ smsCountInterval: null,
|
|
|
+ toggleDelay: false,
|
|
|
+ version: '',
|
|
|
+ timeoutid:null,
|
|
|
+ checkbox: [{
|
|
|
+ value: '1',
|
|
|
+ checked: 'false'
|
|
|
+ } ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: function() {
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ var that = this
|
|
|
+ plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
|
|
|
+ that.version = wgtinfo.version
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ this.getCookie();
|
|
|
+ this.loadingLogin();
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res.model);
|
|
|
+ console.log(res.pixelRatio);
|
|
|
+ console.log(res.windowWidth);
|
|
|
+ console.log(res.windowHeight);
|
|
|
+ console.log(res.language);
|
|
|
+ console.log(res.version);
|
|
|
+ console.log(res.system);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadingLogin(){
|
|
|
+ if(this.checkbox[1].checked=='true'){
|
|
|
+ this.onLogin();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //读取cookie
|
|
|
+ getCookie: function() {
|
|
|
+ if (document.cookie.length > 0) {
|
|
|
+ var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
+ var arr2 = arr[i].split('='); //再次切割
|
|
|
+ //判断查找相对应的值
|
|
|
+ if (arr2[0] == 'userName') {
|
|
|
+ this.userName = arr2[1]; //保存到保存数据的地方
|
|
|
+ } else if (arr2[0] == 'userPwd') {
|
|
|
+ this.password = arr2[1];
|
|
|
+ } else if (arr2[0] == 'pwdchecked') {
|
|
|
+ this.checkbox[0].checked = arr2[1];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.checkbox)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //清除cookie
|
|
|
+
|
|
|
+ setCookie(c_name, c_pwd, exdays, pwdche) {
|
|
|
+ var exdate = new Date(); //获取时间
|
|
|
+ exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
|
|
|
+ //字符串拼接cookie
|
|
|
+ window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
|
|
|
+ window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
|
|
|
+ window.document.cookie = "pwdchecked" + "=" + pwdche + ";path=/;expires=" + exdate.toGMTString();
|
|
|
|
|
|
+ },
|
|
|
+ checkboxChange: function(e) {
|
|
|
+ var items = this.checkbox,
|
|
|
+ values = e.detail.value;
|
|
|
+
|
|
|
+ for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
|
|
+ items[i].checked = 'false';
|
|
|
+ for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
|
|
|
+ if (items[i].value == values[j]) {
|
|
|
+ items[i].checked = 'true';
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ...mapActions(["mLogin", "PhoneLogin"]),
|
|
|
+
|
|
|
+ onLogin: function() {
|
|
|
+ if (!this.userName || this.userName.length == 0) {
|
|
|
+ this.$tip.toast('请填写用户名');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.password || this.password.length == 0) {
|
|
|
+ this.$tip.toast('请填写密码');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let loginParams = {
|
|
|
+ username: this.userName,
|
|
|
+ password: this.password
|
|
|
+ }
|
|
|
+ var pwd = this.checkbox;
|
|
|
+ var uname="";
|
|
|
+ var upwd="";
|
|
|
+ var pwdCheked=false;
|
|
|
+ if (this.checkbox[0].checked == 'true') {
|
|
|
+ uname=this.userName;
|
|
|
+ upwd=this.password;
|
|
|
+ pwdCheked=true;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setCookie(uname,upwd,7,pwdCheked);
|
|
|
+ this.loading = true;
|
|
|
+ this.timeoutid=setTimeout(() => {
|
|
|
+ if (this.loading == true) {
|
|
|
+ this.exitloading = true;
|
|
|
+ this.mLogin(loginParams).then((res) => {
|
|
|
+ console.log("mLogin", res)
|
|
|
+ if (res.data.success) {
|
|
|
+ this.$tip.success('登录成功!')
|
|
|
+ this.$Router.replaceAll({
|
|
|
+ name: 'index'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$tip.alert(res.data.message);
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ let msg = err.data.message || "请求出现错误，请稍后再试"
|
|
|
+ this.$tip.alert(msg);
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading=false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }, 3000);
|
|
|
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <!-- 登录加载弹窗 -->
|
|
|
- <view class="cu-load load-modal" v-if="loading">
|
|
|
- <image src="/static/login3.png" mode="aspectFit"></image>
|
|
|
- <view class="gray-text">登录中...</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-</div>
|
|
|
-</template>
|
|
|
-
|
|
|
-
|
|
|
-<script>
|
|
|
- import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
|
|
|
- import { mapActions } from "vuex"
|
|
|
- import myImageUpload from "@/components/my-componets/my-image-upload.vue"
|
|
|
- import mypage from "@/components/my-componets/my-page.vue"
|
|
|
- import myselect from "@/components/my-componets/my-select.vue"
|
|
|
- export default {
|
|
|
- components:{
|
|
|
- 'my-image-upload':myImageUpload,
|
|
|
- 'my-select':myselect
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: false,
|
|
|
- userName: '',
|
|
|
- password: '',
|
|
|
- phoneNo: '',
|
|
|
- smsCode: '',
|
|
|
- showPassword: false, //是否显示明文
|
|
|
- loginWay: 1, //1: 账密，2：验证码
|
|
|
- smsCountDown: 0,
|
|
|
- smsCountInterval: null,
|
|
|
- toggleDelay: false,
|
|
|
- version:'',
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad:function(){
|
|
|
- // #ifdef APP-PLUS
|
|
|
- var that=this
|
|
|
- plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
|
|
|
- that.version=wgtinfo.version
|
|
|
- } );
|
|
|
- // #endif
|
|
|
-
|
|
|
- console.log(this.$store.getters.indexId)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapActions([ "mLogin","PhoneLogin" ]),
|
|
|
-
|
|
|
- onLogin: function (){
|
|
|
- if(!this.userName || this.userName.length==0){
|
|
|
- this.$tip.toast('请填写用户名');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(!this.password || this.password.length==0){
|
|
|
- this.$tip.toast('请填写密码');
|
|
|
- return;
|
|
|
- }
|
|
|
- let loginParams = {
|
|
|
- username:this.userName,
|
|
|
- password:this.password
|
|
|
- }
|
|
|
- this.loading=true;
|
|
|
- /* this.$Router.push({name:'index'}) */
|
|
|
- this.mLogin(loginParams).then((res) => {
|
|
|
-
|
|
|
- console.log("mLogin",res)
|
|
|
- this.loading=false;
|
|
|
- if(res.data.success){
|
|
|
- this.$tip.success('登录成功!')
|
|
|
- this.$Router.replaceAll({name:'index'})
|
|
|
-
|
|
|
- }else{
|
|
|
- this.$tip.alert(res.data.message);
|
|
|
- }
|
|
|
- }).catch((err) => {
|
|
|
- let msg = err.data.message || "请求出现错误，请稍后再试"
|
|
|
- this.$tip.alert(msg);
|
|
|
- }).finally(()=>{
|
|
|
- this.loading=false;
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-<style>
|
|
|
- .map_container{
|
|
|
- height: 300px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .map {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .login-paddingtop {
|
|
|
- padding-top: 200 upx;
|
|
|
- }
|
|
|
-
|
|
|
- .zai-box {
|
|
|
- padding: 0 20 upx;
|
|
|
- padding-top: 100 upx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .zai-logo {
|
|
|
- width: 30%;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .zai-title {
|
|
|
- font-size: 58upx;
|
|
|
- color: #000000;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .input-placeholder, .zai-input {
|
|
|
- color: #94afce;
|
|
|
- }
|
|
|
-
|
|
|
- .zai-label {
|
|
|
- padding: 60 upx 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 30 upx;
|
|
|
- color: #a7b6d0;
|
|
|
- }
|
|
|
-
|
|
|
- .zai-btn {
|
|
|
- background: #ff65a3;
|
|
|
- color: #fff;
|
|
|
- border: 0;
|
|
|
- border-radius: 100 upx;
|
|
|
- font-size: 36 upx;
|
|
|
- }
|
|
|
-
|
|
|
- .zai-btn:after {
|
|
|
- border: 0;
|
|
|
- }
|
|
|
-
|
|
|
- /*按钮点击效果*/
|
|
|
- .zai-btn.button-hover {
|
|
|
- transform: translate(1 upx, 1 upx);
|
|
|
- }
|
|
|
-
|
|
|
-.divimg{
|
|
|
- background-image:url(../../static/home/beij3.jpeg) ;
|
|
|
- position:fixed;
|
|
|
-
|
|
|
- top:0;
|
|
|
-
|
|
|
- left:0;
|
|
|
-
|
|
|
- width:100%;
|
|
|
-
|
|
|
- height:100%;
|
|
|
-
|
|
|
- min-width:1000px;
|
|
|
-
|
|
|
- z-index:-10;
|
|
|
-
|
|
|
- zoom:1;
|
|
|
- background-repeat:no-repeat;
|
|
|
-
|
|
|
- background-size:cover;
|
|
|
-
|
|
|
- -webkit-background-size:cover;
|
|
|
-
|
|
|
- -o-background-size:cover;
|
|
|
-
|
|
|
- background-position:center0;
|
|
|
-}
|
|
|
-</style>
|
|
|
+
|
|
|
+ /* this.$Router.push({name:'index'}) */
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <style>
|
|
|
+ ul {
|
|
|
+ margin-left: -60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul li {
|
|
|
+ list-style-type: none;
|
|
|
+ display: inline;
|
|
|
+ margin: 53px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .map_container {
|
|
|
+ height: 300px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-paddingtop {
|
|
|
+ padding-top: 200 upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zai-box {
|
|
|
+ padding: 0 20 upx;
|
|
|
+ padding-top: 100 upx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zai-logo {
|
|
|
+ width: 30%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .zai-title {
|
|
|
+ font-size: 58upx;
|
|
|
+ color: #000000;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-placeholder,
|
|
|
+ .zai-input {
|
|
|
+ color: #94afce;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zai-label {
|
|
|
+ padding: 60 upx 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30 upx;
|
|
|
+ color: #a7b6d0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zai-btn {
|
|
|
+ background: #ff65a3;
|
|
|
+ color: #fff;
|
|
|
+ border: 0;
|
|
|
+ border-radius: 100 upx;
|
|
|
+ font-size: 36 upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zai-btn:after {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*按钮点击效果*/
|
|
|
+ .zai-btn.button-hover {
|
|
|
+ transform: translate(1 upx, 1 upx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .divimg {
|
|
|
+ background-image: url(../../static/home/beij3.jpeg);
|
|
|
+ position: fixed;
|
|
|
+
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ min-width: 1000px;
|
|
|
+
|
|
|
+ z-index: -10;
|
|
|
+
|
|
|
+ zoom: 1;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ -webkit-background-size: cover;
|
|
|
+
|
|
|
+ -o-background-size: cover;
|
|
|
+
|
|
|
+ background-position: center0;
|
|
|
+ }
|
|
|
+ </style>
|
LG88888888