uniapp环信IM自定义登录注册页面

默认效果

自定义效果

登录

template

<template>
	<view class="container">
		<view class="login">
			<view class="title">登录</view>
			<view class="from">
				<view class="item" :class="'login_user ' + nameFocus">
					<u--input
					    placeholder="用户ID"
					    border="surround"
					    clearable
						@input="bindUsername" @focus="onFocusName" @blur="onBlurName"
					  ></u--input>
				</view>
				<view class="item" :class="'login_pwd ' + psdFocus">
					<u--input
						placeholder="用户密码"
						
						:type="type == 'password' ? 'text' : type" :password="!showPassword"
						@input="bindPassword" @focus="onFocusPsd" @blur="onBlurPsd"
						></u--input>
						<view class="showPwd">
							<image :src="showPassword ? '/static/images/eye.png' : '/static/images/eye-fill.png'" @tap="showPassword = !showPassword"></image>
						</view>
				</view>
			</view>
			<u-button type="primary" @tap="login">登录</u-button>
		</view>
		
		<view class="goRegister">
			<navigator url="/pages/im/register">注册</navigator>
		</view>
	</view>
</template>

script

import cache from '../../common/cache.js';
let __test_account__, __test_psword__;
let runAnimation = true;
export default{
	data(){
		return{
			name: "",
			psd: "",
			grant_type: "password",
			nameFocus: "",
			psdFocus: "",
			showPassword:false,
			type:"text"
		}
	},
	onLoad() {
		
	},
	onShow() {
		
	},
	methods:{
		bindUsername: function (e) {
			this.setData({
				name: e
			});
		},
		bindPassword: function (e) {
			this.setData({
				psd: e
			});
		},
		onFocusPsd: function () {
		    this.setData({
		        psdFocus: 'psdFocus'
		    });
		},
		onBlurPsd: function () {
		    this.setData({
		        psdFocus: ''
		    });
		},
		onFocusName: function () {
		    this.setData({
				nameFocus: 'nameFocus'
		    });
		},
		onBlurName: function () {
		    this.setData({
		        nameFocus: ''
		    });
		},
		login:function(){
			runAnimation = !runAnimation;
			if (!__test_account__ && this.name == "") {
		        uni.showToast({title: "请输入用户名！",icon:'none'});
		        return;
		    } else if (!__test_account__ && this.psd == "") {
		        uni.showToast({title: "请输入密码！",icon:'none'});
		        return;
		    }
			
			// console.log('login', {
			// 	apiUrl: uni.WebIM.config.apiURL,
			// 	user: __test_account__ || this.name.toLowerCase(),
			// 	pwd: __test_psword__ || this.psd,
			// 	grant_type: this.grant_type,
			// 	appKey: uni.WebIM.config.appkey
			// })
			
			uni.WebIM.conn.open({
			    apiUrl: uni.WebIM.config.apiURL,
			    user: __test_account__ || this.name.toLowerCase(),
			    pwd: __test_psword__ || this.psd,
			    grant_type: this.grant_type,
			    appKey: uni.WebIM.config.appkey,
				success:function(res){
					
					console.log(res)
					const { access_token } = res;
					if(access_token){		
						uni.showToast({title: "登录成功",icon:'none'});
						cache.setCache('token',access_token)
						cache.setCache('uuid',res.user.uuid)
						cache.setCache('username',res.user.username)
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},1500)
					}		  
				},
				error:function(res){
					console.log('----error----')
					// console.log(res)
					// console.log(res.data.data.error_description)
					if(res.data.data.error_description == 'user not found'){
						uni.showToast({title: "账号错误",icon:'none'});
					}
					if(res.data.data.error_description == 'invalid password'){
						uni.showToast({title: "密码错误",icon:'none'});
					}
					console.log('----error----')
				}
			});
		}
	}
}

style

<style lang="scss" scoped>
.container{
	padding: 0 30upx;
	.login{
		padding: 20upx 0 40upx;
		.title{
			font-size: 52upx;
			text-align: center;
			padding: 30upx 0 30upx;
		}
		.from{
			padding-top: 20vh;
			margin-bottom: 30upx;
			.item{
				width: 100%;
				margin-bottom: 20upx;
				position: relative;
				.showPwd{
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 76upx;
					height: 76upx;
					image{
						width: 36upx;
						height: 36upx;
					}
				}
			}
		}
	}
}
.nameFocus{
	box-shadow: 0 3px 11px 4px rgb(225,246,254);
	.u-border{
		border-color: #3c9cff !important;
	}
}
.psdFocus{
	box-shadow: 0 3px 11px 4px rgb(225,246,254);
	.u-border{
		border-color: #3c9cff !important;
	}
}
.goRegister{
	position: fixed;
	bottom: 10vh;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 28upx;
	color: #3c9cff;
}
</style>

注册

template

<template>
	<view class="container">
		<view class="register">
			<view class="title">注册</view>
			<view class="from">
				<view class="item" :class="'register_user ' + nameFocus">
					<u--input
					    placeholder="用户ID (字母或数字)"
					    border="surround"
					    clearable
						@input="bindUsername" @focus="onFocusName" @blur="onBlurName"
					  ></u--input>
				</view>
				<view class="item" :class="'register_pwd ' + psdFocus">
					<u--input
						placeholder="用户密码"
						
						:type="type == 'password' ? 'text' : type" :password="!showPassword"
						@input="bindPassword" @focus="onFocusPsd" @blur="onBlurPsd"
						></u--input>
						<view class="showPwd">
							<image :src="showPassword ? '/static/images/eye.png' : '/static/images/eye-fill.png'" @tap="showPassword = !showPassword"></image>
						</view>
				</view>
			</view>
			<u-button type="primary" @tap="register">注册</u-button>
		</view>
		
		<view class="goLogin">
			<navigator url="/pages/im/login">登录</navigator>
		</view>
	</view>
</template>

script

export default{
	data(){
		return{
			username: "",
			password: "",
			nameFocus: "",
			psdFocus: "",
			type:"text",
			showPassword:false
		}
	},
	methods:{
		bindUsername: function (e) {
		    this.setData({
		        username: e
		    });
		},
		bindPassword: function (e) {
			
		    this.setData({
		        password: e
		    });
		},
		onFocusName: function () {
		    this.setData({
		        nameFocus: 'nameFocus'
		    });
		},
		onFocusPsd: function () {
		    this.setData({
		        psdFocus: 'psdFocus'
		    });
		},
		onBlurPsd: function () {
		    this.setData({
		        psdFocus: ''
		    });
		},
		onBlurName: function () {
		    this.setData({
		        nameFocus: ''
		    });
		},
		register:function(){
			const that = this;
			
			if (that.username == "") {
			    return uni.showToast({title: "请输入用户名！",icon:'none'});
			} else if (that.password == "") {
			    return uni.showToast({title: "请输入密码！",icon:'none'});
			} else {
				var options = {
					apiUrl: uni.WebIM.config.apiURL,
					username: that.username.toLowerCase(),
					password: that.password,
					nickname: "",
					appKey: uni.WebIM.config.appkey,
					success: function (res) {
						uni.showToast({title: "注册成功"});
						var data = {
							apiUrl: uni.WebIM.config.apiURL,
							user: that.username.toLowerCase(),
							pwd: that.password,
							grant_type: "password",
							appKey: uni.WebIM.config.appkey
						};
						uni.setStorage({
							key: "myUsername",
							data: that.username
						});
					},
					error: function (res) {

						if (res.statusCode !== "200") {
							if (res.statusCode == '400' && res.data.error == 'illegal_argument') {
								return uni.showToast({title: "用户名非法",icon:'none'});
							}

							uni.showToast({title: "用户名已被占用",icon:'none'});
						}
					  }
					};
					uni.WebIM.conn.registerUser(options);
			}
			
		}
	}
}

style

<style lang="scss" scoped>
.container{
	padding: 0 30upx;
	.register{
		padding: 20upx 0 40upx;
		.title{
			font-size: 52upx;
			text-align: center;
			padding: 30upx 0 30upx;
		}
		.from{
			padding-top: 20vh;
			margin-bottom: 30upx;
			.item{
				width: 100%;
				margin-bottom: 20upx;
				position: relative;
				.showPwd{
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 76upx;
					height: 76upx;
					image{
						width: 36upx;
						height: 36upx;
					}
				}
			}
		}
	}
}
.nameFocus{
	box-shadow: 0 3px 11px 4px rgb(225,246,254);
	.u-border{
		border-color: #3c9cff !important;
	}
}
.psdFocus{
	box-shadow: 0 3px 11px 4px rgb(225,246,254);
	.u-border{
		border-color: #3c9cff !important;
	}
}
.goLogin{
	position: fixed;
	bottom: 10vh;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 28upx;
	color: #3c9cff;
}
</style>

main.js添加setDate

// 2.setData
Vue.mixin({
	methods: {
		setData: function(obj, callback) {
			let that = this;
			let keys = [];
			let val, data;
			Object.keys(obj).forEach(function(key) {
				keys = key.split('.');
				val = obj[key];
				data = that.$data;
				keys.forEach(function(key2, index) {
					if (index + 1 == keys.length) {
						that.$set(data, key2, val);
					} else {
						if (!data[key2]) {
							that.$set(data, key2, {});
						}
					}
					data = data[key2];
				})
			});
			callback && callback();
		} 
	}
});