hwnc/pagesC/pages/login/login.vue

<template>
	<view :class="[AppTheme]" class="all_box">
		<view class="loginstatus" v-if="logintype">
			<view class="sign_in_title">验证码登录</view>
			<!-- 登录信息 -->
			<view class="login_infon">
				<view class="inputline">
					<u-input placeholder="请输入手机号" v-model="loginphone" border="bottom" fontSize="22"></u-input>
				</view>
				<view class="inputline">
					<u-input placeholder="请输入验证码" :password="false" v-model="verificationcode" border="bottom"
						fontSize="22">
						<template slot="suffix">
							<u-button class="bg-primary" @tap="getCode" :disabled="!ifsend" :text="codemess"
								:type="ifsend?'success':'warning'" shape="circle"></u-button>
						</template>
					</u-input>
				</view>
			</view>
			<view class="consent_agreement">
				<view class="" @click="judgecheck()">
					<u-icon v-if="ifcheck" size="20" name="checkmark-circle-fill" :color="primary"></u-icon>
					<u-icon v-if="!ifcheck" size="20" name="checkmark-circle-fill" color="#606266"></u-icon>
				</view>
				<view class="agreement_details">
					未注册手机号登录将自动生成账号,且代表您已阅读并同意
					<text class="agreement_details_text" @click="ifshowpop('用户服务协议')">《用户服务协议》</text>
					和
					<text class="agreement_details_text" @click="ifshowpop('隐私政策')">《隐私政策》</text>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="login_button bg-linear-gradient" @click="gologin()">
				登录
			</view>
			<!-- 切换登录方式 -->
			<view class="switch_de">
				<view class="switch_de_text" @click="logintype=false">密码登录</view>
				<view class="switch_de_text" @click="gotoresin()">新用户注册</view>
			</view>
			<view class="other_methods" v-if="qqopen||wxopen">
				<!-- #ifdef APP-PLUS -->
				<u-divider fontSize="30" half-width="250" bg-color="#f7f7f7" text="其他登陆方式"></u-divider>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<u-divider fontSize="30" half-width="250" bg-color="#f7f7f7" text="其他登陆方式"></u-divider>
				<!-- #endif -->

				<view class="login_list">
					<!-- #ifdef APP-PLUS -->
					<!-- 	<image v-if="qqopen" @click="qqlogin()" :src="settingFile.root_img+'/static/app/imgs/farm/qq.png'"
						mode="scaleToFill" class="login_list_item" /> -->
					<image v-if="wxopen" @click="wxlogin()"
						:src="settingFile.root_img+'/static/app/imgs/farm/weixin.png'" mode="scaleToFill"
						class="login_list_item" />
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<image v-if="wxopen" @click="wxlogin()"
						:src="settingFile.root_img+'/static/app/imgs/farm/weixin.png'" mode="scaleToFill"
						class="login_list_item" />
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="loginstatus" v-if="!logintype">
			<view class="sign_in_title">密码登录</view>
			<!-- 登录信息 -->
			<view class="login_infon">
				<view class="inputline">
					<u-input placeholder="用户名或手机号" v-model="loginphone" border="bottom" fontSize="22"></u-input>
				</view>
				<view class="inputline">
					<u-input placeholder="密码" :password="true" v-model="loginpassword" border="bottom" fontSize="22">
					</u-input>
				</view>
			</view>
			<view class="consent_agreement">
				<view @click="judgecheck_in()">
					<u-icon v-if="fiarmej" size="20" name="checkmark-circle-fill" :color="primary"></u-icon>
					<u-icon v-if="!fiarmej" size="20" name="checkmark-circle-fill" color="#606266"></u-icon>
				</view>
				<view class="agreement_details">
					我已阅读并同意
					<text class="agreement_details_text" @click="ifshowpop('用户服务协议')">《用户服务协议》</text>
					和
					<text class="agreement_details_text" @click="ifshowpop('隐私政策')">《隐私政策》</text>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="login_button bg-linear-gradient" @click="gologinbypas()">
				登录
			</view>
			<!-- 切换登录方式 -->
			<view class="switch_de">
				<view class="switch_de_text" @click="logintype=true">验证码登录</view>
				<view class="switch_de_text" @click="gotoresin()">新用户注册</view>
				<navigator hover-class="none" url="/pagesC/pages/login/forgetpassword" class="switch_de_text">找回密码
				</navigator>
			</view>
			<view class="other_methods" v-if="qqopen||wxopen">
				<!-- #ifdef APP-PLUS -->
				<u-divider fontSize="30" half-width="250" bg-color="#f7f7f7" text="其他登陆方式"></u-divider>
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<u-divider fontSize="30" half-width="250" bg-color="#f7f7f7" text="其他登陆方式"></u-divider>
				<!-- #endif -->
				<view class="login_list">
					<!-- #ifdef APP-PLUS -->
					<!-- 	<image v-if="qqopen" @click="qqlogin()" src="../../../static/imgs/farm/qq.png" mode="scaleToFill"
							class="login_list_item" /> -->
					<image v-if="wxopen" @click="wxlogin()"
						:src="settingFile.root_img+'/static/app/imgs/farm/weixin.png'" mode="scaleToFill"
						class="login_list_item" />
					<!-- #endif -->

					<!-- #ifdef H5 -->
					<image v-if="wxopen" @click="wxlogin()"
						:src="settingFile.root_img+'/static/app/imgs/farm/weixin.png'" mode="scaleToFill"
						class="login_list_item" />
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import loginapi from "@/api/login/login.js"
	import until from "@/js/until.js"
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: this.$siteinfo,
				appid: '', //获取到的公众号appid
				code: '',
				//头部导航
				navbarhead: true,
				// 登录手机号
				loginphone: null,
				// 验证码
				verificationcode: null,
				//密码
				loginpassword: null,
				//验证码是否可以发送
				ifsend: true,
				// 验证码状态
				codemess: '获取验证码',
				// 是否同意注册协议
				ifcheck: false,
				// 是否同意隐私协议
				fiarmej: false,
				//true为验证码登录,false为密码登录
				logintype: true,
				contearticle: '',
				setting: null,
				wxopen: false,
				qqopen: false,
			}
		},
		onShow() {
			until.onNetworkStatusChange();
			this.$init_config();
		},
		onLoad() {
			let that = this
			let isWeixin = that.isWeiXin();
			that.$init_config(2, function(res) {
				if (res) {
					// #ifdef APP-PLUS
					if (res.app.open_wx_auth == 1) {
						that.wxopen = true;
					}
					// #endif
					// #ifdef H5
					if (res.app.gzh_wx_auth == 1 && isWeixin) {
						that.wxopen = true;
					}
					// #endif
					// #ifdef MP-WEIXIN
					if (res.app.open_wx_auth == 1) {
						that.wxopen = true;
					}
					// #endif

				}
			})
		},
		methods: {
			// 获取验证码
			getCode() {
				let that = this
				if (!that.ifcheck) {
					uni.showToast({
						icon: 'none',
						title: '请先同意协议'
					})
					return
				}
				if (that.loginphone !== null && that.loginphone !== undefined && that.loginphone.length === 11) {
					var myreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					if (myreg.test(that.loginphone)) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading()
							//获取验证码
							let params = {
								mobile: that.loginphone
							}
							loginapi.sendvecode(params).then(res => {
								if (parseInt(res.status) === 1) {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
									that.ifsend = false
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
							})
						}, 1000)
						let num = 60
						that.timeer = setInterval(function() {
							if (num > 0) {
								that.codemess = num + 's后重新获取'
								num = num - 1
							} else {
								clearInterval(that.timeer)
								that.ifsend = true
								that.codemess = '重新获取验证码'
							}
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入有效的手机号'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入有效的手机号'
					})
				}
			},
			// 根据密码登录
			gologinbypas() {
				let that = this
				if (!that.fiarmej) {
					uni.showToast({
						icon: 'none',
						title: '请先同意协议'
					})
					return
				}
				if (that.loginphone !== null && that.loginphone !== undefined) {
					if (that.loginpassword !== null && that.loginpassword !== undefined && that.loginpassword.length > 0) {
						//验证完毕，执行验证码登录
						let parms = {
							mobile: that.loginphone,
							password: that.loginpassword
						}
						loginapi.login(parms).then(res => {
							if (parseInt(res.status) === 200) {
								// 登陆成功
								uni.setStorage({
									key: 'userInfo',
									data: res.data.userinfo,
									success: function() {
										uni.setStorage({
											key: "token",
											data: res.data.token,
											success() {
												uni.setStorage({
													key: 'iflogin',
													data: true,
													success() {
														uni.showToast({
															icon: 'none',
															title: '登陆成功'
														})
													}
												})
												setTimeout(() => {
													until.beforeSwitch(0)
													uni.switchTab({
														url: '/pages/user/user'
													})
												}, 1000)
											}
										})
									},
									fail() {
										uni.showToast({
											icon: 'none',
											title: '请重新登录'
										})
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的密码'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的账号'
					})
				}
			},
			//验证码登录
			gologin() {
				let that = this
				if (!that.ifcheck) {
					uni.showToast({
						icon: 'none',
						title: '请先同意协议'
					})
					return
				}
				if (that.loginphone !== null && that.loginphone !== undefined && that.loginphone.length === 11) {
					var myreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					if (myreg.test(that.loginphone)) {
						if (that.verificationcode !== null && that.verificationcode !== undefined && that.verificationcode
							.length > 0) {
							//验证完毕，执行验证码登录
							let parms = {
								mobile: that.loginphone,
								code: that.verificationcode
							}
							loginapi.reg(parms).then(res => {
								if (parseInt(res.status) === 200) {
									// 登陆成功
									uni.setStorage({
										key: 'userInfo',
										data: res.data.userinfo,
										success: function() {
											uni.setStorage({
												key: "token",
												data: res.data.token,
												success: function() {
													uni.showToast({
														icon: 'none',
														title: "登陆成功"
													})
													setTimeout(() => {
														uni.switchTab({
															url: '/pages/user/user'
														})
													}, 500)
												},
												fail: function() {
													uni.showToast({
														title: "请重新登陆",
														icon: "none"
													})
												}
											})
										},
										fail() {
											uni.showToast({
												icon: 'none',
												title: '请重新登录'
											})
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: '登陆失败'
									})
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的验证码'
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
				}
			},
			//切换协议状态
			judgecheck() {
				this.ifcheck = !this.ifcheck
			},
			judgecheck_in() {
				this.fiarmej = !this.fiarmej
			},
			//注册新用户
			gotoresin() {
				uni.navigateTo({
					url: '/pagesC/pages/register/register'
				})
			},
			//协议
			ifshowpop(title) {
				this.$until.toarticle(title, 0, 2)
			},
			wxlogin() {
				let that = this
				if (!that.ifcheck) {
					uni.showToast({
						icon: 'none',
						title: '请先同意协议'
					})
					return
				}
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '登陆中'
				})
				uni.login({
					provider: 'weixin',
					success: res => {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								let formdata = {
									nickname: infoRes.userInfo.nickName,
									sex: infoRes.userInfo.gender,
									headimgurl: infoRes.userInfo.avatarUrl,
									openid: infoRes.userInfo.openId,
									pid: uni.getStorageSync('sys_pid'),
									unionid: infoRes.userInfo.unionId
								}
								loginapi.wxLogin(formdata).then(res => {
									uni.hideLoading()
									if (res.status == 200) {
										// 登陆成功
										uni.hideLoading()
										uni.showToast({
											icon: 'none',
											title: '登陆成功'
										})
										that.$store.commit('login', res.data.userinfo);
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/user/user'
											});
										}, 500)
										return true
									} else {
										uni.hideLoading()
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										return false
									}
								})

							},
							fail: function() {
								uni.hideLoading()
							},
							complete: function() {
								uni.hideLoading()
							}
						})
					},
					fail: function(err) {
						uni.hideLoading()
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						})
					}
				})
				// #endif
				// #ifdef H5
				that.h5_wx_auth();
				// #endif
			},
			qqlogin() {
				let that = this
				uni.showLoading({
					title: '登陆中'
				})
				uni.login({
					provider: 'qq',
					success: resp => {
						var access_token = resp.authResult.access_token
						uni.getUserInfo({
							provider: 'qq',
							success: function(infoRes) {
								console.log(infoRes, "infoRes")
								let formdata = {
									nickname: infoRes.userInfo.nickname,
									sex: infoRes.userInfo.gender == '男' ? 0 : 1,
									headimgurl: infoRes.userInfo.headimgurl,
									openid2: infoRes.userInfo.openId,
									access_token: access_token
								}
								uni.showLoading({
									title: '登陆中'
								})
								loginapi.qqlogin(formdata).then(res => {
									console.log(res, "res")
									if (res.status === 200) {
										// 登陆成功
										uni.hideLoading()
										uni.setStorage({
											key: 'userInfo',
											data: res.data.userinfo,
											success: function() {
												uni.setStorage({
													key: "token",
													data: res.data
														.token,
													success: function() {
														uni.showToast({
															icon: 'none',
															title: '登陆成功'
														})
														setTimeout
															(() => {
																	until
																		.beforeSwitch(
																			0
																		)
																	uni.switchTab({
																		url: '/pages/index/index'
																	})
																},
																1000
															)
													},
													fail() {
														uni.showToast({
															icon: 'none',
															title: '请重新登录'
														})
													}
												})
											},
											fail() {
												uni.showToast({
													icon: 'none',
													title: '请重新登录'
												})
											}
										})
										return true
									} else {
										uni.hideLoading()
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}

								})
							}
						})
					},
					fail: function(err) {
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						})
					}
				})
				// }
			},
			h5_wx_auth() {
				let that = this;
				let appid = that.$config.app.wxgzhappid;
				if (appid == '') {
					uni.showToast({
						title: '公众号参数配置错误',
						icon: 'none'
					});
					return;
				}
				let pid = uni.getStorageSync('sys_pid');
				let purl = that.$siteinfo.h5_siteroot + "/h5?uuid=" + that.$uuid + "&pid=" + pid +
					"#/pages/user/user";
				let redirect_uri = encodeURIComponent(purl);
				that.$until.h5_wx_auth(appid, redirect_uri);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.all_box {
		.loginstatus {
			.sign_in_title {
				padding: 240rpx 10% 0 10%;
				width: 80%;
				color: #000000;
				font-size: 45rpx;
				font-weight: 600;
			}

			.login_infon {
				padding: 60rpx 10%;
				width: 80%;

				.inputline {
					margin: 20rpx 0;
				}
			}

			.consent_agreement {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80%;
				margin: 0 10%;

				.agreement_details {
					margin-left: 15rpx;
					color: #999;
					font-size: 24rpx;

					.agreement_details_text {
						line-height: 40rpx;
						color: #3C9CFF;
					}
				}
			}

			.login_button {
				margin: 70rpx 10% 25rpx 10%;
				padding: 24rpx 0;
				width: 80%;
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				background-color: #FE7C0D;
				border-radius: 50rpx;
			}

			.switch_de {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 80%;
				margin: 0 10%;

				.switch_de_text {
					font-size: 28rpx;
					color: #4271A1;
				}
			}

			.other_methods {
				bottom: 100rpx;
				left: 10%;
				margin-top: 50rpx;

				.login_list {
					width: 270rpx;
					margin: 25rpx calc(50% - 135rpx) 0 calc(50% - 135rpx);
					justify-content: space-evenly;
					align-items: center;
					display: flex;

					.login_list_item {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		.agreement_content {
			margin: 0 15rpx;
			height: 100vh;

			.agreement_content_title {
				padding: 20rpx 0 25rpx 0;
				font-size: 36rpx;
				color: #000000;
				font-weight: 700;
				width: 100%;
				text-align: center;
				position: relative;

				.closepop_boton {
					position: absolute;
					right: 15rpx;
					top: 50%;
					transform: translate(0, -50%);
				}
			}

			.ementconte_content {
				width: 100%;
			}
		}
	}
</style>