yql/pages/in/login.vue

<template>
	<view class="login-container">
		<!-- 		<view class="login-title">密码登录</view> -->
		<view class="login-logo">
			<image src="@/static/login/logo.png" alt=""></image>
		</view>
		<view class="login-form">
			<view class="form-item">
				<text class="item-lable">用户名</text>
				<input class="item-input" type="text" v-model="form.username" placeholder="请输入用户名/手机号码" />
			</view>
			<view class="form-item">
				<text class="item-lable">输入密码</text>
				<input class="item-input" v-if="close" type="password" v-model="form.password" placeholder="请输入密码" />
				<input class="item-input" v-else type="text" v-model="form.password" placeholder="请输入密码" />
				<view class="login-icon" @tap="close = !close">
					<image v-if="close" src="@/static/login/close.png" mode=""></image>
					<image v-else src="@/static/login/open.png" mode=""></image>
				</view>
			</view>
			<button class="login-btn" @tap="subLongin">登录</button>

			<view class="login-bottom">
				<!-- <text class="login-random" @tap="mabtn">游客登录</text> -->
				<navigator class="login-random" url="./reg" hover-class="none">注册用户</navigator>
				<text class="login-random" @tap="go_forget">忘记密码</text>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="login_else">
			<view class="login_else_border">
			</view>
			其他方式登录
			<view class="login_else_border">
			</view>
		</view>
		<view class="login_wx" @click="wxLogin">
			<image src="../../static/login/wxlogin.png"></image>
		</view>
		<view class="login_wx_text">
			微信登录
		</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import _data from "../../common/_data";
	import _mixins from "../../common/_mixins";
	import _get from "../../common/_get";
	import _page from "../../common/common";
	// import SDK from "../../common/tendenceImSdk";

	export default {
		data() {
			return {
				showPassword: true,
				form: {
					username: '',
					password: '',
					client_id: ''
				},
				close: true,
				// default_avatar: require('@/static/logo1.png'),
				reg_form: {
					nickname: '',
					password: '',
					client_id: '',
					type: 'REGISTER',
					username: '',
					mobileCode: 0,
					sex: 1,
					_agent_id: 1
				},
			}
		},
		onLoad() {

		},
		onShow() {

			//获取用户手机号
			// #ifdef APP-PLUS
			// let phone = _page.getSystemPhone();
			let _this = this;
			// plus.push.getClientInfoAsync(function(info) {
			// 	_this.form.client_id = info.clientid;
			// 	_this.reg_form.client_id = info.clientid;
			// 	console.log("info", JSON.stringify(info));
			// }, function(e) {
			// 	console.log('Failed');
			// 	console.log(JSON.stringify(e));
			// });

			// plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
			// 	addressbook.find(null, function(contacts) {
			// 		_get.sendContact({params:JSON.stringify(contacts),client_id:_this.clientid,phone:phone},function(res){
			// 			console.log(res);
			// 		});

			// 	}, function() {
			// 	}, {
			// 		multiple: true
			// 	});
			// }, function(e) {
			// });

			// 手机设备标识
			// let deviceId = _data.localData('deviceId');
			// let sys = uni.getSystemInfoSync();
			// if (deviceId) {
			// 	this.form.username = deviceId;
			// 	this.form.password = '111111';
			// 	this.subLongin();
			// } else {
			// 	deviceId = sys.deviceId || Math.random().toString().split(".")[1];
			// 	deviceId = deviceId.slice(0, 11);
			// 	deviceId = deviceId.replace(/-/g, '_');
			// 	_data.localData('deviceId', deviceId)
			// 	this.reg_form.username = deviceId;
			// 	this.reg_form.nickname = this.getRandomName(5);
			// 	this.reg_form.password = '111111';
			// 	uni.showLoading({
			// 		title: '登陆中'
			// 	})
			// 	this.toRegist();
			// }
			// #endif
		},
		computed: {
			checkIn() {
				return this.form.password != '' && this.form.username != '' && this.form.password.length > 5;
			}
		},
		methods: {
			wxLogin() {
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log('loginRes.authResult', loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log('用户昵称为：' + JSON.stringify(infoRes.userInfo));
								// console.log();
								_this.$httpSend({
									path: "/im/in/app_auth",
									data: {
										openId: infoRes.userInfo.openId,
										nickName: infoRes.userInfo.nickName,
										gender: infoRes.userInfo.gender,
										unionId: infoRes.userInfo.unionId,
										avatarUrl: infoRes.userInfo.avatarUrl
									},
									success_action: true,
									success(res) {
										console.log(JSON.stringify(res.data));
										try {
											uni.setStorageSync('localLoginData', res.data);
											uni.setStorageSync('token', res.data.token);
										} catch (e) {
											uni.showModal({
												content: '本地存储数据不可用!',
											});
										}
										//登陆上去之后重新获取数据刷新页面
										_this.$socketSend({
											action: 'checkToken',
											data: res.data.token,
										}, function(res) {
											console.log("测试登录数据", res);
											uni.hideLoading()
											uni.reLaunch({
												url: '../chat/index',
											});
										});
									},
									false(err) {
										console.log(JSON.stringify(err));
									}
								});
							}
						});
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			randomAccess(min, max) {
				return Math.floor(Math.random() * (min - max) + max)
			},
			decodeUnicode(str) {
				str = "\\u" + str
				str = str.replace(/\\/g, "%");
				str = unescape(str);
				str = str.replace(/%/g, "\\");
				return str;
			},
			getRandomName(NameLength) {
				let name = ""
				for (let i = 0; i < NameLength; i++) {
					let unicodeNum = ""
					unicodeNum = this.randomAccess(0x4e00, 0x9fa5).toString(16)
					name += this.decodeUnicode(unicodeNum)
				}
				return name
			},
			staticPhoto() {
				return _data.staticPhoto();
			},
			//忘记密码
			// fogetPassword(){
			// 	uni.navigateTo({
			// 		url:"forget"
			// 	})
			// },
			// 上传默认头像
			// uploadFile(local_url) {
			// 	let uploadTask = uni.uploadFile({
			// 		url: getApp().globalData.http_url + '/im/in/photo',
			// 		filePath: local_url,
			// 		name: 'file',
			// 		/** formData必须要有值，否则会上传失败 */
			// 		formData: {
			// 			username: this.reg_form.username
			// 		},
			// 		success: (res) => {
			// 			console.log("res", res);
			// 			uni.hideLoading();
			// 			this.toRegist();
			// 		},
			// 		fail_callback() {
			// 			console.log("err", err);
			// 			this.toRegist();
			// 			uni.hideLoading();
			// 		},
			// 		fail(err) {
			// 			console.log("err", err);
			// 			this.toRegist();
			// 			uni.hideLoading();
			// 		}
			// 	});
			// },

			// 注册
			toRegist() {
				let _this = this;
				_this.$httpSend({
					path: '/im/in/reg',
					data: _this.reg_form,
					success: (data) => {
						console.log("注册数据", JSON.stringify(data));
						uni.setStorage({
							key: 'token',
							data: data.token,
							fail: () => {
								uni.showModal({
									content: '本地存储数据不可用!',
								});
							},
							success() {
								_this.$socketSend({
									action: 'checkToken',
									data: data.token,
								}, function() {
									uni.hideLoading();
									// _this.$refs.popup.open();
									uni.reLaunch({
										url: '../chat/index',
									});
								})

							},
						});
					},
					fail_callback(data) {
						console.log("登陆失败的回调", data);
						_this.form.username = _this.reg_form.username;
						_this.form.password = _this.reg_form.password;
						_this.subLongin();
					},
					fail: () => {
						_this.form.username = _this.reg_form.username;
						_this.form.password = _this.reg_form.password;
						_this.subLongin();
					}
				});
			},
			//游客登录
			mabtn() {
				let _this = this;
				console.log('666')
				uni.showLoading({
					title: '登陆中'
				})
				this.form.client_id = _data.localData('client_id');
				let channelCode = _data.localData('xInstallChannelCode');
				if (channelCode) {
					this.form.channel = channelCode;
				}

				_this.$httpSend({
					path: '/im/in/reg_tourist',
					data: _this.form,
					success: (data) => {
						console.log('sucess', data.token);
						console.log("游客登录数据", data);
						try {
							uni.setStorageSync('localLoginData', data);
							uni.setStorageSync('token', data.token);
						} catch (e) {
							console.log("", e)
							uni.showModal({
								content: '本地存储数据不可用!',
							});

						}
						// uni.hideLoading()
						// uni.reLaunch({
						// 	url: '../chat/index',
						// });
						//登陆上去之后重新获取数据刷新页面
						_this.$socketSend({
							action: 'checkToken',
							data: data.token,
						}, function(res) {
							console.log("测试登录数据", res);
							uni.hideLoading()
							uni.reLaunch({
								url: '../chat/index',
							});
						});
						// console.log('连接websocket')


					}
				});
				/* uni.navigateTo({
				 url:"frozen"
				}) */

			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			delInputUsernameText() {
				this.form.username = ''
			},
			delInputPasswordText() {
				this.form.password = ''
			},
			subLongin() {
				let _this = this;
				if (!_this.checkIn) {
					return false;
				}
				uni.showLoading({
					title: '登陆中'
				})
				this.form.client_id = _data.localData('client_id');
				_this.$httpSend({
					path: '/im/in/login',
					data: _this.form,
					success: (data) => {
						uni.hideLoading()
						console.log('sucess', data.token)
						try {
							uni.setStorageSync('localLoginData', data);
							uni.setStorageSync('token', data.token);
						} catch (e) {
							uni.showModal({
								content: '本地存储数据不可用!',
							});
						}
						//登陆上去之后重新获取数据刷新页面
						_this.$socketSend({
							action: 'checkToken',
							data: data.token,
						}, function(res) {
							console.log("测试登录数据", res);
							uni.hideLoading()
							uni.reLaunch({
								url: '../chat/index',
							});
						});
						// try {
						// 	SDK.IMSDK.joinRoom(data, function(sdk_ret) {
						// 		console.log("腾讯SDK登陆", sdk_ret);
						// 	})
						// } catch (e) {
						// 	console.log("腾讯SDK登陆失败", e);
						// }
						// console.log('连接websocket')


					},
					fail: err => {
						uni.hideLoading();
						console.log("err", err);
					}
				});
			},
			go_forget() {
				uni.navigateTo({
					url: '../../pages/in/forget'
				})
			},
			go_frozen() {
				uni.navigateTo({
					url: '../../pages/set/frozen'
				})
			},
			go_register() {
				uni.navigateTo({
					url: '../../pages/in/reg'
				})
			},



		}
	}
</script>

<style lang="scss" scoped>
	.uni-input-placeholder {
		color: #ccc !important;
	}

	input[type="password"]::-ms-reveal {
		display: none;
	}

	.login-icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.login-container {
		background-color: #fff;
		height: 100vh;
		width: 100vw;
		padding: 0 60rpx;
		position: relative;
		box-sizing: border-box;
		// background-image: url(@/static/login/bg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;

		.login-form {
			display: flex;
			flex-direction: column;

			.login-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				.login-random {
					text-decoration: none;
					color: #999;
					font-size: 14px;
				}
			}

			.login-btn {
				width: 100%;
				height: 100rpx;
				border-radius: 50px;
				background-color: #2da2fd;
				color: #fff;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 80rpx;
			}

			.login-btn.button-hover {
				transform: translate(1upx, 1upx);
			}

			.form-item {
				display: flex;
				height: 100rpx;
				align-items: center;
				border-bottom: 1px solid #eee;

				.item-lable {
					font-size: 16px;
					color: #333;
					width: 180rpx;
				}

				.item-input {
					border: none;
					outline: none;
					background: none;
					font-size: 16px;
					color: #000;
					height: 100%;
					flex: 1;
				}
			}
		}

		.login-title {
			padding-top: 10rpx;
			font-size: 24px;
			font-weight: 500;
			padding-bottom: 20rpx;
		}

		.login-logo {
			padding-top: 200rpx;
			padding-bottom: 80rpx;
			text-align: center;
		}

		.login-logo image {
			width: 150rpx;
			height: 150rpx;
		}
	}







	.zai-viewl {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.zai-box {
		padding: 0 100upx;
		position: relative;
	}

	.zai-logo {
		width: 160upx;
		width: 160upx;
		height: 160upx;
		margin-top: 200upx;
	}

	.ke_btn {}

	.zai-title {
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
		margin-top: 120upx;
	}

	.zai-form {}

	.zai-input {
		background: none;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #6dcef7;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.forget {
		padding: 5px;
		text-align: right;
		font-size: 12px;
		color: #a7b6d0;
	}

	.login_else {
		width: 560rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		margin-bottom: 45rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		display: flex;
		justify-content: center;
		align-items: center;

		.login_else_border {
			flex: 1;
			height: 1rpx;
			background: rgba(238, 238, 238, 1);
		}
	}

	.login_wx {
		width: 63rpx;
		height: 63rpx;
		margin: 0 auto;
		border: none;
		position: static;
		padding: 0;

		image {
			width: 63rpx;
			height: 63rpx;
		}
	}

	.login_wx_text {
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 15rpx;
	}
</style>