zc_saas_h5/pages4/login/pcLogin.vue

<template>
	<view class="pcLogins">
		<u-navbar :is-back="false" title="登录" :border-bottom="false" title-color="#333333" back-icon-color="#ffffff">
		</u-navbar>
		<u-line color="#D6D6DB" />
		<view class="contents">
			<!-- 正文内容 -->
			<image class="logo" :src="SCAN_LOGO" style="width: 360rpx; height: 72rpx"></image>
			<text>登录后您可在网页端继续浏览课程</text>
			<!-- #ifdef H5 -->
			<view class="login_box" v-show="showinput">
				<u-form :model="form" ref="uForm1">
					<u-form-item prop="account"><u-input type="idcard" v-model="form.account"
							placeholder-style="color:#999999" placeholder="手机号/学员身份证" /></u-form-item>
					<u-form-item prop="pwd"><u-input class="password" v-model="form.pwd"
							placeholder-style="color:#999999" type="password" placeholder="登录密码" /></u-form-item>

				</u-form>
			</view>
			<view class="login_bt" @click="pcLogin()">微信登录</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button type="default" open-type="getPhoneNumber" @getphonenumber="wxLogin" class="login_bt">
				微信登录
			</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import configjs from "@/common/config";
	import {
		getCode
	} from "@/utils/authority";
	import {
		mapGetters,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				SCAN_LOGO: configjs.SCAN_LOGO,
				scanCode: "", // 获取扫码的路径最后面的6位标识码
				code: "sss",
				gzhOpenid: "",
				showinput: false,
				isUse: false,
				form: {
					account: "",
					pwd: "",
				},
				rules: {
					account: [{
						required: true,
						message: "请输入手机号/学员身份证",
						trigger: ["change"],
					}, ],
					pwd: [{
						required: true,
						message: "请输入密码",
						// 可以单个或者同时写两个触发验证方式
						trigger: ["change"],
					}, ],
				},
			};
		},
		onLoad(query) {
			console.log("扫描后得1：", query);
			const q = decodeURIComponent(query.q);
			if (query.acc && query.pwd) {
				const acc = decodeURIComponent(query.acc);
				const pwd = decodeURIComponent(query.pwd);
				this.form.account = acc;
				this.form.pwd = pwd;
			}
			this.scanCode = q.substring(q.length - 6);
			console.log("扫描后得：", q, this.scanCode, this.form.account);
			// 扫描二维码后调用，小程序已扫码
			if (this.scanCode) {
				this.$api.scanhasCode({
					scanCode: this.scanCode
				}).then((res) => {
					console.log("调用扫码接口返回的:", res);
					if (res.data.code == 200) {
						console.log();
					}
				});
			}
			// 获取code
			// #ifdef MP-WEIXIN
			this.getwxCode();
			// #endif
			// #ifdef H5 
			this.getWXCodeh5(1);

			// #endif
		},
		onShow() {},
		computed: {
			...mapGetters(["config"]),
		},
		methods: {
			topclogin() {
				this.$api
					.check_gzh_openId({
						code: this.code,
						account: this.form.account,
						password: this.form.pwd,
						gzhOpenid: this.gzhOpenid,
					})
					.then((res) => {
						if (res.data.code == 200) {
							if (res.data.data.gzhStatus == 1) {
								this.loginCallback(res);
							} else {
								this.$u.toast("请输入账号密码绑定微信登录");
								this.showinput = true;
								if (res.data.data.gzhOpenid) {
									this.gzhOpenid = res.data.data.gzhOpenid;
								}
								// this.getWXCodeh5(0);A
							}
						} else {
							this.$u.toast(res.data.msg);
							// this.getWXCodeh5(0);
						}
					});
			},
			pcLogin() {
				let that = this;
				if (this.showinput) {
					if (!this.form.account) {
						this.$u.toast("请输入手机号码/身份证号");
						return;
					}
					if (!this.form.pwd) {
						this.$u.toast("请输入密码");
						return;
					}
				}
				if (this.gzhOpenid) {
					this.topclogin();
				} else {
					this.getWXCodeh5(0);
				}
			},
			// 获取code并登录   
			getWXCodeh5(totype) {
				var code = this.getUrlCode().code; //是否存在code
				if (code == this.code) {
					code = '';
				}
				let url = location.href //授权后重定向的回调链接地址
				let url2 = 'https://' + window.location.host + "/pages4/login/pcLogin?q=" + this.scanCode;
				if (totype == 0) {
					url2 = url2 + "&acc=" + this.form.account + "&pwd=" + this.form.pwd
				}
				console.log("dasdsada1", url2);
				// let code =getCode(url2);
				if (code == null || code === "") {
					this.$api.mobileConfig().then((res0) => {
						// console.log("res0",res0);
					  	var gzhSelfLicense=false;
						let data = res0.data.rows.find((e) => e.configKey == "home.mobile");
						if (data) {
							var config1 = JSON.parse(data.configValue) || {}
							gzhSelfLicense=config1.gzhSelfLicense;
							console.log('gzhSelfLicense',config1.gzhSelfLicense,gzhSelfLicense)
						}
					if (gzhSelfLicense) {
						this.$api.getWxConfig().then((res) => {
							console.log("res", res);
							let appid = res.data.data.gzhAppId //公众号的唯一标识
							window.location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
								appid + '&redirect_uri=' + encodeURIComponent(url2) +
								'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect')
						});
					} else {
						url2 = url2.split("//")[1];
						location.replace("https://www.xyyxt.net/home/index2?ask_type=" + url2);
					}
					});

				} else {
					this.code = code;
					console.log("dasdsada2", this.code);
					//此处调用后端提供的接口，传入获取到的code换取access_token
					if (totype == 1) {
						this.topclogin();
					} else if (totype == 0) {
						this.topclogin();
					}
				}
				// this.$api.getWxConfig().then((res) => {
				// 	console.log("res", res);
				// 	let appid = res.data.data.gzhAppId //公众号的唯一标识

				// });


			},

			// 截取url中的code方法
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			getwxCode() {
				uni.login({
					provider: "weixin",
					success: (loginRes) => {
						this.code = loginRes.code;
						console.log("获取的code:", this.code);
					},
					fail: (err) => {
						// this.code = 'fff';
						console.log(this.code)
					},
					complete: (com) => {
						// this.code = 'ccc';
						console.log(this.code)
					},
				});
			},
			wxLogin(e) {
				this.$api
					.wxLogin({
						code: this.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.loginCallback(res);
						} else {
							if (res.data.code == 666) {
								this.$u.toast(res.data.msg);
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages2/register/register",
									});
								}, 500);
								return;
							}
							this.getwxCode(); // code用完一次就会过期，防止用户点击取消后再点微信登录后code过期
						}
					});
			},
			// 微信登录成功的回调
			loginCallback(res) {
				// console.log('登录后的回调',res)
				// if(res.data.data && res.data.data.full_info){
				//信息完善，直接进入页面
				uni.setStorageSync("user_account", res.data.data.user_account);
				uni.setStorageSync("token", res.data.data.token);
				// /app/user/getInfo 登录用户信息// fromPlat来源平台 1小程序 2PC网站
				this.$api.getInfo({
					fromPlat: 1
				}).then((resdata) => {
					if (resdata.data.code == 200) {
						this.$store.state.userInfo = resdata.data.data;

						this.submitCode();
					}
				});
				// } else {
				// 	//未完善信息,存为临时信息
				// 	uni.setStorageSync('user_account_temp', res.data.data.user_account);
				// 	uni.setStorageSync('token_temp', res.data.data.token);
				//     this.$navTo.togo('/pages2/register/bind', {scanCode: this.scanCode})
				// }
			},
			// scanLoginCheck小程序校验PC登录二维码,执行登录获取到令牌，然后把扫码的路径最后面的6位标识码提交给后台就行
			submitCode() {
				this.$api
					.scanLoginCheck({
						scanCode: this.scanCode,
					})
					.then((res) => {
						if (res.data.code == 200) {
							uni.navigateTo({
								url: "/pages4/login/pcLoginSuccess",
							});
						} else {
							this.$u.toast(res.data.msg);
						}
					});
			},
			pwlogin() {
				let that = this;
				if (!this.form.account) {
					this.$u.toast("请输入手机号码/身份证号");
					return;
				}
				if (!this.form.pwd) {
					this.$u.toast("请输入密码");
					return;
				}


				//虚拟登录
				/* that.fakeLogin()
	return */
				that.isUse = true;
				let form = JSON.parse(JSON.stringify(this.form));
				form.pwd = this.encryptor(form.pwd);
				form["shareActivityCode"] = this.shareActivityCode;
				// 账号登录用户 /app/common/account_login
				that.$api.accountLogin(form).then(
					(res) => {
						that.isUse = false;
						if (res.data.code == 200) {
							this.loginCallback(res, "pwlogin");
						} else if (res.data.code == 699) {
							uni.showModal({
								title: '温馨提示',
								content: "系统升级中，请点击按钮 “复制” 链接，打开手机浏览器，粘贴登录即可学习",
								confirmText: "复制",
								success: (result) => {
									if (result.confirm) {
										uni.setClipboardData({
											data: res.data.msg,
											success: function() {
												uni.showToast({
													title: '链接已复制成功',
													icon: 'none',
													duration: 2000
												});
											}
										})
									} else if (result.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							that.$u.toast(res.data.msg);
						}
					},
					(err) => {
						that.isUse = false;
					}
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.contents {
		width: 100%;
		height: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			margin: 90rpx 0rpx 250rpx;
		}

		>text {
			font-size: 22rpx;
			color: #666;
		}

		.login_bt {
			width: 400rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #09ba08;
			color: #fff;
			font-size: 28rpx;
			border-radius: 35rpx;
			margin-top: 20rpx;
		}
	}

	.login_box {
		width: 80%;
		height: 360rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(1, 99, 235, 0.1);
		border-radius: 24rpx;
		margin-top: 30rpx;
		padding: 40rpx 35rpx;

		.password {
			/deep/.uicon-eye-fill {
				&::before {
					color: #007aff;
					content: "\e613";
				}
			}
		}
	}
</style>