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><!-- <view class='margin-tb-xl text-sm'><u-checkbox v-model="isReady" shape="circle" size='36'></u-checkbox>已阅读并同意<text @click.stop="jump('agreement')" class='text-blue' >《服务协议》</text>和<text @click.stop="jump('policy')"  class='text-blue' >《隐私政策》</text></view> --><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 class="otherwise"><view class="title">或通过以下方式登录</view><view class="" @click="loginByPhone('dx')"><image style="width: 88rpx;height: 88rpx;" src="@/static/login/duanx.png"></image><view class="text-gray" style="margin-top: 10rpx;">短信验证码</view></view></view> --></view></view>
</template>

2.script部分

<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-PLUSconst _this = thisuni.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_tokenopenid: 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.loginFormlet 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'})}})// }},}}
</script>

<style lang="scss">
// 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;}}
}
</style>