1.登录页面实现
- <template>
- <view class="box">
- <view class="boxTop">
- <view class="title">欢迎登录view>
- <view class="topic">还没有账号,<span @click='getRegister'>立即注册span>view>
- view>
- <view class="padding-lr margin-top" style="padding-bottom: 100rpx; z-index: 0;">
- <u-form :model="loginForm" ref="uForm" class="loginForm">
- <u-form-item label="" prop="username" label-width='100'>
- <u-input v-model="loginForm.username" placeholder="输入手机号"
- placeholder-style="fontSize: 30rpx; color: #999" :adjust-position="false"/>
- u-form-item>
- <u-form-item label="" prop="password" label-width='100'>
- <u-input v-model="loginForm.password" type="password" placeholder="输入密码"
- placeholder-style="fontSize: 30rpx; color: #999" :adjust-position="false"/>
- u-form-item>
- u-form>
-
- <u-toast ref="uToast"/>
- <u-button class="margin-top-xl" type="primary" shape="circle" style="width:100%; font-size: 34rpx;"
- @click="loginbtn">登录
- u-button>
- <view class="forgotClass" @click="forget">忘记密码view>
-
- view>
- view>
- template>
2.script部分
-
- import Base64 from 'base-64';
-
- export default {
- data() {
- return {
- smallScreen: false,
- loginForm: {
- username: '',
- password: '',
- },
- rules: {
- username: [{
- required: true,
- message: '请输入账号',
- trigger: ['change', 'blur']
- }],
- password: [{
- required: true,
- message: '请输入密码',
- trigger: 'change'
- }]
- },
- }
- },
- // watch: {
- // 'loginForm.username': function(val, oldval) {
- // if (this.$u.test.mobile(val)) {
- // console.log('val', val)
- // // 校验当前用户名是否存在
- // // this.phoneIsExist(val);
- // }
- // }
- // },
- onReady() {
- this.$refs.uForm.setRules(this.rules);
- // let token = uni.getStorageSync('token');
- // console.log(token)
- // if(token){
- // uni.switchTab({
- // url: '/pages/index/index'
- // });
- // }
- },
- onLoad() {
- uni.getSystemInfo({
- success: res => {
- this.smallScreen = res.safeArea.height <= 530
- }
- });
- //手机号一键登录
- this.toUniverifyLogin()
- },
- mounted() {
- //页面加载完成,获取本地存储的账号及密码
- const userN = uni.getStorageSync('username'); //
- const userPwd = uni.getStorageSync('userPwd');
- if (userN && userPwd) {
- this.loginForm.username = userN;
- this.loginForm.password = userPwd;
- } else {
- this.loginForm.username = "";
- this.loginForm.password = "";
- }
- },
- computed: {
- loginSrc() {
- return '/static/login/loginbg.png';
- },
- title() {
- return 'uniapp';
- },
- projectId() {
- return this.$store.state.login.projectId
- }
- },
- methods: {
- // 一键登录
- toUniverifyLogin() {
- // #ifdef APP-PLUS
- const _this = this
- uni.preLogin({
- provider: 'univerify',
- success(res) {
- console.log(res);
- uni.login({
- provider: 'univerify',
- univerifyStyle: {
- fullScreen: true,
- icon: {
- path: 'static/logo.png'
- },
- phoneNum: {
- color: '#f00000' // 手机号文字颜色 默认值:#202020
- },
- authButton: {
- normalColor: '#2490fa',
- title: '本机号码一键登录',
- borderRadius: '24px'
- },
- privacyTerms: {
- termsColor: '#3479f5',
- privacyItems: [
- // 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效
- {
- url: 'https://xxxx.xxxx.com/hybrid/html/agreement.html', // 点击跳转的协议详情页面
- title: '用户服务协议' // 协议名称
- },
- {
- url: 'https://xxxx.xxxx.com/hybrid/html/policy.html', // 点击跳转的协议详情页面
- title: '隐私政策' // 协议名称
- }
- ]
- }
- },
- success(res) {
- console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
- uniCloud
- .callFunction({
- name: 'xxxx', // 你的云函数名称
- data: {
- access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
- openid: res.authResult.openid // 客户端一键登录接口返回的openid
- }
- })
- .then(res => {
- console.log('云函数返回的参数', res.result)
- const form = {
- phone: res.result.phoneNumber,
- type: '1',
- projectId:xx ,//登录项目id
- }
- _this.$store.dispatch('login/PhoneLogin', form).then(response => {
- console.log('登录信息', response);
- uni.showToast({
- icon: 'success',
- title: '登录成功'
- })
- // setTimeout(() => {
- // uni.switchTab({
- // url: '/pages/workSpace/main',
- // success: function () {
- // uni.closeAuthView()
- // }
- // })
- // }, 1000)
- }).catch(err => {
- console.log(err)
- uni.showToast({
- icon: 'error',
- title: '登录失败'
- })
- uni.closeAuthView()
- })
- })
- .catch(err => {
- console.log('云函数报错', err)
- uni.showToast({
- icon: 'error',
- title: err.errMsg
- })
- })
- },
- fail(res) {
- // 登录失败
- console.log(res.errCode);
- console.log(res.errMsg);
- uni.closeAuthView(); //关闭一键登录弹出窗口
- }
- });
- }
- });
- // #endif
- },
- forget() {
- // let _that = this;
- // _that.$refs.uToast.show({
- // title: '请联系管理员重置密码',
- // type: 'warning'
- // });
- uni.navigateTo({
- url: '/pages/login/forgotPassword'
- })
- },
- loginByPhone() {
- uni.navigateTo({
- url: '/pages/login/loginPhone'
- })
- },
- getRegister() {
- uni.navigateTo({
- url: '/pages/login/register'
- })
- },
- loginbtn() {
- // if(!this.isReady){
- // uni.showToast({
- // title: '请先勾选并同意用户协议',
- // duration: 2000,
- // icon: 'none'
- // })
- // return
- // }else{
- // console.log('同意用户登陆')
- this.$refs.uForm.validate(valid => {
- if (valid) {
- // let { username, password, projectId, captcha, checkKey } = this.loginForm
- let enUsername = Base64.encode(this.loginForm.username)
- let enPassword = Base64.encode(this.loginForm.password)
- this.$store.dispatch('login/mLogin', {username: enUsername, password: enPassword, projectId: this.projectId})
- // if (this.savePass) { //用户勾选“记住密码”
- // console.log("记住密码")
- // uni.setStorageSync('username', this.loginForm.username);
- // uni.setStorageSync('userPwd', this.loginForm.password);
- // } else { //用户没有勾选“记住密码”
- // console.log("没有记住密码")
- // uni.removeStorageSync('username');
- // uni.removeStorageSync('userPwd');
- // this.loginForm.username = "";
- // this.loginForm.password = "";
- // }
- } else {
- uni.showToast({
- title: '账号/密码不能为空',
- duration: 2000,
- icon: 'none'
- })
- }
- })
- // }
-
- },
-
- }
-
- }
-
- // page {
- // background-color: #fff;
- // }
- .box {
- .boxTop {
- padding: 100rpx 0 60rpx 40rpx;
-
- .title {
- font-weight: 600;
- font-size: 48rpx;
- }
-
- .topic {
- font-size: 30rpx;
- margin-top: 30rpx;
-
- span {
- color: #2490FA;
- }
- }
- }
-
- .forgotClass {
- margin-top: 24rpx;
- text-align: center;
- color: #2490FA;
- }
-
- .otherwise {
- margin-top: 180rpx;
- text-align: center;
-
- .title {
- margin-bottom: 50rpx;
- color: #11111166;
- }
- }
- }