point-app/pages/login/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<!-- <view class="one">
				<text>{{type==0?'短信验证码登录':'手机号密码登录'}}</text>
			</view>
			<view class="two">
				<uni-forms ref="form" :model="form" :rules="rules" label-width="auto">
					<uni-forms-item label="手机号" name="phone">
						<uni-easyinput type="number" v-model="form.phone" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code" v-if="type==0">
						<view class="yzm">
							<view class="l">
								<uni-easyinput type="number" v-model="form.code" placeholder="请输入验证码" />
							</view>
							<view class="r">
								<button type="default" size="mini" @tap="oneSms">{{sms_1==0?'验证码':sms_1}}</button>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="登录密码" name="password" v-if="type==1">
						<uni-easyinput type="text" v-model="form.password" placeholder="请输入登录密码" />
					</uni-forms-item>
					<view class="type">
						<button type="default" size="mini" @tap="passLogin">{{type==0?'密码登录':'短信登录'}}</button>
					</view>
					<view class="agree">
						<checkbox-group @change="changeAgree">
							<label>
								<checkbox :checked="agree" />
								<text @tap.stop="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
							</label>
						</checkbox-group>
					</view>
					<view class="btn">
						<button type="default" size="mini" @click="onSubmit('form')">登录</button>
					</view>
				</uni-forms>
			</view>
			<view class="thr">
				<view class="thr_1">
					<text>其他登录方式</text>
				</view>
				<view class="thr_2">
					<view class="thr_2_1" @tap="otherLogin('wx')">
						<text class="iconfont icon-weixin"></text>
					</view>
				</view>
			</view> -->
			<view class="wx">
				<view class="wx_1">
					<text class="iconfont icon-weixin"></text>
				</view>
				<view class="wx_2">
					<button size="mini" @tap="otherLogin('wx')">微信信任登录</button>
				</view>
				<view class="wx_3">
					<checkbox-group @change="changeAgree">
						<label>
							<checkbox :checked="agree" />
							<text @tap.stop="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<uni-popup ref="dialogShow" type="dialog">
			<uni-popup-dialog :title="dialog.title" mode="base" :before-close="true" @confirm="diaSubmit(dialog)" @close="diaReset(dialog)">
				<view class="dialog dialog_1" v-if="dialog.type=='1'">
					<uni-forms ref="phoneForm" :model="phoneForm" label-width="auto">
						<uni-forms-item label="方式">
							<uni-data-checkbox v-model="phoneForm.type" :localdata="typeList" />
						</uni-forms-item>
						<uni-forms-item label="微信" v-if="phoneForm.type==0">
							<button type="default" size="mini" open-type="getPhoneNumber" @getphonenumber="getUserPhone">获取微信绑定手机</button>
						</uni-forms-item>
						<uni-forms-item label="手机号" v-if="phoneForm.type==0">
							<uni-easyinput type="number" v-model="phoneForm.phone" disabled />
						</uni-forms-item>
						<uni-forms-item label="手机号" v-if="phoneForm.type==1">
							<view class="yzm">
								<view class="l">
									<uni-easyinput type="number" v-model="phoneForm.phone" placeholder="请输入手机号" />
								</view>
								<view class="r">
									<button type="default" size="mini" @tap="twoSms">{{sms_1==0?'验证码':sms_1}}</button>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="验证码" v-if="phoneForm.type==1">
							<uni-easyinput type="number" v-model="phoneForm.code" placeholder="请输入验证码" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				// 平台信息
				system: {},
				openid: '',
				// 登录类型
				type: 0,
				form: {},
				rules: {
					phone: {
						rules: [ //
							{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '账号长度在{maxLength}个字符',
							}
						]
					}
				},
				sms_1: 0,
				// 用戶协议
				agree: true,
				// 注册账号信息
				user: {},
				// 弹框
				dialog: {
					title: '绑定手机号',
					type: '1'
				},
				// 绑定手机号
				phoneForm: {
					type: 0,
				},
				typeList: [ //
					{
						text: '微信',
						value: 0
					}
					// {
					// 	text: '短信验证',
					// 	value: 1
					// }
				],
			};
		},
		onShow: function() {
			const that = this;
			// 查询平台信息
			that.searchSystem();
		},
		methods: {
			// 查询平台信息
			searchSystem() {
				const that = this;
				uni.getStorage({
					key: 'system',
					success: function(res) {
						that.$set(that, `system`, res.data);
						that.searchOpenid();
					},
					fail: function(err) {
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						})
					}
				})
			},
			// 查询openid
			searchOpenid() {
				const that = this;
				let system = that.system;
				if (system.uniPlatform == "mp-weixin") {
					uni.login({
						provider: 'weixin',
						success: async function(res) {
							const aee = await that.$api(`/wechat/api/login/app`, 'GET', {
								config: that.$config.wx_projectkey,
								js_code: res.code
							})
							if (aee.errcode == '0') {
								that.$set(that, `openid`, aee.data.openid);
							}
						}
					})
				} else if (system.uniPlatform == "app") {
					console.log('app');
				}
			},

			// 选择登录类型
			typeChange(e) {
				const that = this;
				that.$set(that, `type`, e.detail.value);
			},
			// 短信登录/密码登录
			passLogin() {
				const that = this;
				let type = 0;
				if (that.type == 0) type = 1;
				that.$set(that, `type`, type)
			},
			// 短信登录-发送验证码
			async oneSms() {
				const that = this;
				let form = that.form;
				if (form && form.phone) {
					let res = await that.$api(`/user/toLoginByCode`, 'POST', {
						phone: form.phone
					})
					if (res.errcode == '0') {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
						that.$set(that, `sms_1`, 60);
						that.timeDown();
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '输入错误，请重新输入!',
						icon: 'none'
					})
				}
			},
			// 登录
			onSubmit(ref) {
				const that = this;
				let agree = that.agree;
				let system = that.system;
				let type = that.type;
				that.$refs[ref].validate().then(async params => {
					if (agree) {
						if (type == 0 && system.uniPlatform == 'app') {
							// app,短信验证码登录
							that.appSmsLogin(params);
						} else if (type == 1 && system.uniPlatform == 'app') {
							// app,密码登录
							that.appPassLogin(params);
						} else if (type == 0 && system.uniPlatform == 'mp-weixin') {
							// wx,短信验证码登录
							that.wxSmsLogin(params)
						} else if (type == 1 && system.uniPlatform == 'mp-weixin') {
							// wx,密码登录
							that.wxPassLogin(params)
						}
					} else {
						uni.showToast({
							title: '请阅读并同意用户协议和隐私政策',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// app,短信验证码登录
			async appSmsLogin(e) {
				const that = this;
				if (e.code) {
					const res = await that.$api(`/user/checkLoginCode`, 'POST', e);
					if (res.errcode == '0') {
						uni.setStorage({
							key: 'token',
							data: res.data,
							success: function() {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					} else {
						if (res.errcode == '-5') {
							uni.showToast({
								title: '用户不存在',
								icon: 'none'
							})
							// todo:验证码登录用户不存在可自动注册账号,并跳转
						} else {
							uni.showToast({
								title: res.errmsg || '信息错误',
								icon: 'none'
							})
						}
					}
				} else {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				}
			},
			// app,密码登录
			async appPassLogin(e) {
				const that = this;
				if (e.password) {
					const res = await that.$api(`/user/login`, 'POST', e);
					if (res.errcode == '0') {
						uni.setStorage({
							key: 'token',
							data: res.data,
							success: function() {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					} else {
						uni.showToast({
							title: res.errmsg || '信息错误',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none'
					})
				}
			},
			// wx,短信验证码登录
			async wxSmsLogin(e) {
				const that = this;
				if (e.code) {
					const res = await that.$api(`/user/checkLoginCode`, 'POST', e);
					if (res.errcode == '0') {
						uni.setStorage({
							key: 'token',
							data: res.data,
							success: function() {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					} else {
						if (res.errcode == '-5') {
							uni.showModal({
								title: '提示',
								content: '用户不存在,是否注册新账号?',
								success: function(res) {
									if (res.confirm) {
										// 无账号,注册账号
										that.wxCreate();
									}
								}
							});
						} else {
							uni.showToast({
								title: res.errmsg || '信息错误',
								icon: 'none'
							})
						}

					}
				} else {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				}
			},
			// wx,密码登录
			async wxPassLogin(e) {
				const that = this;
				if (e.password) {
					const res = await that.$api(`/user/login`, 'POST', e);
					if (res.errcode == '0') {
						uni.setStorage({
							key: 'token',
							data: res.data,
							success: function() {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					} else {
						if (res.errcode == '-5') {
							uni.showModal({
								title: '提示',
								content: '用户不存在,是否注册新账号?',
								success: function(res) {
									if (res.confirm) {
										// 无账号,注册账号
										that.wxCreate();
									}
								}
							});
						} else {
							uni.showToast({
								title: res.errmsg || '信息错误',
								icon: 'none'
							})
						}
					}
				} else {
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none'
					})
				}
			},
			// 其他登录方式
			async otherLogin(e) {
				const that = this;
				let system = that.system;
				let agree = that.agree;
				if (agree) {
					if (system.uniPlatform == 'app') {
						uni.showToast({
							title: '暂无开通',
							icon: 'none'
						})
						// todo:app端,微信一键登录
					} else if (system.uniPlatform == 'mp-weixin') {
						if (e == 'wx') {
							const res = await that.$api(`/user/wxLogin`, 'POST', {
								openid: that.openid
							})
							if (res.errcode == '0') {
								uni.setStorage({
									key: 'token',
									data: res.data,
									success: function() {
										uni.navigateBack({
											delta: 1
										})
									}
								});
							} else {
								if (res.errcode == '-5') {
									uni.showModal({
										title: '提示',
										content: '用户不存在,是否注册新账号?',
										success: function(res) {
											if (res.confirm) {
												// 无账号,注册账号
												that.wxCreate();
											}
										}
									});
								} else {
									uni.showToast({
										title: res.errmsg || '信息错误',
										icon: 'none'
									})
								}
							}
						}
					}
				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私政策',
						icon: 'none'
					})
				}
			},
			// wx,注册账号
			wxCreate() {
				const that = this;
				uni.getUserProfile({
					desc: '用于展示',
					success: async function(res) {
						let parmas = {
							openid: that.openid,
							icon: [{
								url: res.userInfo.avatarUrl
							}],
							name: res.userInfo.nickName,
						}
						console.log(parmas);
						const arr = await that.$api(`/user`, 'POST', parmas);
						if (arr.errcode == '0') {
							that.$set(that, `user`, arr.data);
							// 打开弹框
							that.diaShow();
						} else {
							uni.showToast({
								title: arr.errmsg,
								icon: 'none'
							});
						}
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},
			// 打开弹框,绑定手机号
			diaShow() {
				const that = this;
				that.$refs.dialogShow.open();
			},
			async getUserPhone(e) {
				const that = this;
				let user = that.user;
				let detail = e.detail;
				let res = await that.$api(`/wechat/api/login/getPhone`, 'GET', {
					config: that.$config.wx_projectkey,
					code: detail.code
				})
				if (res.errcode == '0') {
					let phone = res.data && res.data.phone_info && res.data.phone_info.purePhoneNumber || '';
					that.$set(that.phoneForm, `phone`, phone);
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					})
				}
			},
			async twoSms() {
				const that = this;
				let user = this.user;
				let form = that.phoneForm;
				if (form && form.phone) {
					let res = await that.$api(`/user/toBindPhone`, 'POST', {
						id: user._id,
						phone: form.phone
					})
					if (res.errcode == '0') {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
						that.$set(that, `sms_1`, 60);
						that.timeDown();
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入手机号！',
						icon: 'none'
					})
				}
			},
			// 弹框确定
			async diaSubmit(e) {
				const that = this;
				let user = this.user;
				let form = that.phoneForm;
				if (e.type == '1') {
					if (form.type == 0) {
						if (form && form.phone) that.updatePhone(form.phone, 'wx');
					} else if (form.type == 1) {
						const res = await that.$api(`/user/checkBindPhone`, 'POST', {
							id: user._id,
							code: form.code,
							phone: form.phone
						});
						if (res.errcode == '0') {
							that.updatePhone(form.phone, 'wx');
						} else {
							uni.showToast({
								title: arr.errmsg,
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}
			},
			// 弹框取消(关闭)
			diaReset(e) {
				const that = this;
				if (e.type == '1') {
					that.otherLogin('wx');
				}
			},
			async updatePhone(e, type) {
				const that = this;
				let user = that.user;
				let arr = await that.$api(`/user/${user._id}`, 'POST', {
					phone: e
				})
				if (arr.errcode == '0') {
					that.otherLogin(type);
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					})
				}
			},
			// 倒计时
			timeDown() {
				const that = this;
				var times = setInterval(() => {
					that.sms_1--;
					if (that.sms_1 <= 0) {
						clearInterval(times);
					}
				}, 1000);
			},
			// 同意隐私协议
			changeAgree() {
				const that = this;
				let agree = true;
				if (that.agree) agree = false;
				that.$set(that, `agree`, agree);
			},
			// 查看隐私协议
			toAgree() {
				const that = this;
				uni.navigateTo({
					url: `/pages/other/agree`
				})
			},
		},
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 0.01;
			padding: 0 5vw;
			margin: 10vw 0;

			text {
				font-size: 30px;
				font-family: cursive;
				font-weight: bold;
			}
		}

		.two {
			position: relative;
			flex-grow: 0.3;
			padding: 0 5vw;

			.type {
				text-align: center;
				margin: 0 0 2vw 0;
			}

			.agree {
				text-align: center;
				font-size: 12px;
				margin: 0 0 2vw 0;
			}

			.btn {
				text-align: center;

				button {
					width: 80%;
					border-radius: 25px;
					font-size: 16px;
					color: #fff;
					background-color: green;
				}
			}
		}

		.thr {
			padding: 0 2vw;
			text-align: center;

			.thr_1 {
				font-size: 14px;
				margin: 0 0 2vw 0;
				color: #858585;
			}

			.thr_2 {
				display: flex;
				justify-content: center;

				.thr_2_1 {
					margin: 0 2vw;

					text {
						font-size: 40px;
					}
				}


			}
		}

		.wx {
			text-align: center;
			margin: 25vw 0 0 0;

			.wx_1 {
				margin: 0 0 5vw 0;

				text {
					font-size: 50px;
				}
			}

			.wx_2 {
				button {
					background: var(--f35BColor);
					color: var(--fffColor);
					font-size: var(--font16Size);
				}
			}

			.wx_3 {
				position: absolute;
				bottom: 10vw;
				width: 100vw;
				text-align: center;
				font-size: 12px;
			}

		}
	}

	.yzm {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.l {
			flex-grow: 1;
		}

		.r {
			width: 18vw;

			button {
				width: 100%;
				line-height: 2.8;
				padding: 0 1vw;
			}
		}
	}

	.dialog {
		width: 100vw;
	}

	.dialog_1 {
		.uni-forms {
			display: flex;

			form {
				width: 100%;
			}
		}

		.uni-data-checklist {
			border: 1px solid #E5E5E5;
			padding: 1vw;
			border-radius: 5px;
		}

		.uni-forms-item {
			margin-bottom: 2vw !important;
		}
	}
</style>