uni_mattress/sleep/pages/login/index.vue

<template>
	<view class="login-container">
		<image src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/C34A0AB308944EF9A3BB4135827924DF.png" class="background-img"></image>
		<view class="absolve-wrapper">
			<!-- <view class="logo"><image src="../../static/logo.png" class="logo-img"></image></view> -->
			
			<view class="flex-col items-center group_3 space-y-20">
			  <text class="text_2 text_3">UU睡眠</text>
			  <text class="font_1 text_2">AI时代，全家人的睡眠健康顾问</text>
			</view>
			
			<view class="login-main">
				<view class="input-wrapper">
					<i class="iconfont icon-phone icon"></i>
					<input placeholder="请输入账户名或手机号" v-model="userFrom.username" />
				</view>
				<view class="input-wrapper">
					<i class="iconfont icon-password icon"></i>
					<input v-if="isText" type="text" placeholder="请输入密码" v-model="userFrom.password" />
					<input v-else type="password" placeholder="请输入密码" v-model="userFrom.password" />
					<i class="iconfont eye" :class="isText ? 'icon-openEye' : 'icon-closeEye'" @click="isText = !isText"></i>
				</view>
				<button style="background: linear-gradient(90deg, rgba(44, 37, 247, 0.6) 0%, rgba(6, 21, 153, 1) 100%);" class="cu-btn round login-button lg cu-load" :class="{ loading: loading }" @click="getUserInfo">登录</button>

        <button v-if="haslogin.loginType === 'auto'" class="cu-btn round login-button lg cu-load" :class="{ loading: loading }" @click="loginByHasLogin">
          微信快捷登录
        </button>
        <button v-if="haslogin.loginType === 'hand_movement'" class="cu-btn round login-button lg cu-load" :class="{ loading: loading }" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
          微信快捷登录
        </button>
			</view>
<!--			<view class="other-login">-->
<!--				<view class="other-text">第三方登录</view>-->
<!--				<view class="login-list">-->
<!--					<i class="iconfont icon-weixin other-item" @click="handleTest"></i>-->
<!--					<i class="iconfont icon-qq other-item" @click="handleTest"></i>-->
<!--					<i class="iconfont icon-weibo other-item" @click="handleTest"></i>-->
<!--				</view>-->
<!--			</view>-->
		</view>
	</view>
</template>

<script>
import {mapActions} from 'vuex'
import Storage from '@/utils/storage'
import * as API_connect from '@/api/connect'
import store from '@/store'
export default {
	data() {
		return {
			loading: false,
			isText: false,
      userInfo: null,
      userFrom: {
        username: '',
        password: '',
			},
      haslogin: {
        loginType: 'hand_movement'
      },
		};
	},
  mounted() {
    if (!this.uuid) {
      this.uuid = Storage.getItem('uuid');
    }
    this.haslogin = Storage.getItem('haslogin')
    if (!this.haslogin) {
      uni.reLaunch({
        // url:'/pages/auth/auth'
      })
      return
    }
    const uInfo = Storage.getItem('myWeixinInfo')
    if (uInfo) {
      this.userInfo = uInfo
    }
  },
	methods: {
    getPhoneNumber(e) {
      console.log('e======', e)
      let _this = this
      let params = {
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv,
        uuid: _this.uuid,
        gender: _this.userInfo.gender,
        nickName: _this.userInfo.nickName
      };
      API_connect.accessMobile(params).then(result => {
        _this.resultEvent(result)
      }).catch(err=>{
        _this.removeAllItem()
      });
    },
    removeAllItem() {
      Storage.removeItem('login_result')
      Storage.removeItem('refresh_token')
      Storage.removeItem('access_token_timeout')
      Storage.removeItem('refresh_token_timeout')
      uni.showToast({
        title: '授权已失效，请重新授权！',
        icon: "none"
      })
      uni.reLaunch({
        url:'/pages/auth/auth'
      })
    },
    loginByHasLogin() {
      let _this = this
      if (this.haslogin && this.haslogin.uid) {
        API_connect.loginById({memberId: this.haslogin.uid, uuid: this.uuid}).then(result => {
          _this.resultEvent(result)
        }).catch(err=>{
          _this.removeAllItem()
        });
      } else {
        _this.removeAllItem()
      }
    },
    resultEvent(result) {
      const { access_token, access_token_timeout,refresh_token,refresh_token_timeout, uid } = result
      // 如果登录成功 存储token(access_token refresh_token) uid 获取用户数据
      if (access_token && refresh_token && uid) {
        Storage.setItem('haslogin', { uid: uid, loginType: 'auto'})
        store.dispatch('setAccessTokenAction', access_token)
        store.dispatch('setRefreshTokenAction', refresh_token)
        Storage.setItem('uid', uid);
        Storage.setItem('access_token_timeout',Math.round(new Date() / 1000)+access_token_timeout-60)
        Storage.setItem('refresh_token_timeout',Math.round(new Date() / 1000)+refresh_token_timeout-60)
        Storage.removeItem('myWeixinInfo')
        store.dispatch('getUserDataAction').then(()=>{
          uni.switchTab({
            url: '/pages/home/index'
          })
        })
      } else {
        this.removeAllItem()
      }
    },
		getUserInfo() {
			let that = this
			//测试账号，可以改成你自己的
      const form = this.userFrom
      if (!form.username || !form.password) {
        uni.showToast({
          title: '表单填写有误，请检查！',
          icon: 'none'
        })
        return false;
      }
      this.loading = true
      const login_type = 'account'
      this.login({ login_type, form })
          .then(() => {
            that.loading = false
            uni.switchTab({
              url: '/pages/home/index'
            })
          }).catch(err => {
            that.loading = false
          uni.showToast({
            title: err.data.message,
            icon: 'none'
          })
      })
		},
    ...mapActions({
      login: 'loginAction'
    })
	}
};
</script>

<style lang="scss" scoped>
.icon-password {
	color: #fff;
}
.icon-phone {
	color: #fff;
}
.eye {
	color: #fff;
}
.group_3 {
	padding: 4rem 0;
	.text_2 {
		opacity: 0.76;
	}
	.text_3 {
	    color: #ffffff;
	    font-size: 1.88rem;
	    font-family: PingFangSC;
	    line-height: 1.72rem;
		margin-top: 1rem;
	}
	.font_1 {
	  font-size: 1.13rem;
	  font-family: PingFangSC;
	  line-height: 1.06rem;
	  color: #ffffff;
	  margin-top: 4rem;
	}
}	
.login-container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	// background: url(../../static/loginBg.png) no-repeat;
	// background-size: contain;
	.absolve-wrapper{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.background-img{
      width: 100%;
	  height: 100%;
	}
	.logo {
		text-align: center;
		margin-top: 12%;
		.logo-img {
			width: 100px;
			height: 100px;
		}
	}
	.text-title {
		font-size: 48rpx;
		margin-top: 5%;
		text-align: center;
		color: #fffefe;
	}
	.login-main {
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 10%;
		right: 10%;
		.input-wrapper {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid rgb(242, 242, 242);
			position: relative;
			.icon {
				margin-right: 10px;
				font-size: 16px;
			}
			.eye {
				float: right;
				position: absolute;
				right: 5px;
				font-size: 16px;
			}
		}
		.login-button {
			width: 100%;
			color: #fff;
			background: linear-gradient(90deg, rgba(5, 96, 232, 1) 0%, rgba(100, 158, 245, 1) 100%);			letter-spacing: 2px;
			height: 45px;
			margin-top: 75rpx !important;
		}
	}
	.other-login {
		position: absolute;
		bottom: 5%;
		left: 10%;
		right: 10%;
		.other-text {
			text-align: center;
			color: rgba(0, 0, 0, 0.4);
			font-size: 28rpx;
			position: relative;
			&::before,
			&::after {
				position: absolute;
				background: rgba(0, 0, 0, 0.15);
				content: '';
				height: 1px;
				top: 50%;
				width: 100px;
			}
			&::before {
				left: 5px;
			}
			&::after {
				right: 5px;
			}
		}
		.login-list{
			margin-top: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			.other-item{
				flex: 1;
				font-size: 40px;
				text-align: center;
				&.icon-weixin{
					color: #17d874;
				}
				&.icon-qq{
					color: #32d6f5;
				}
				&.icon-weibo{
					color: rgb(234,93,92);
				}

			}
		}
	}
	/deep/ {
		.input-placeholder {
			color: rgb(194, 194, 194);
			font-size: 30rpx;
		}
	}
}
</style>