H5_module/pages/applogin/index.vue

<template>
	<view class="content" :style="[mainStyle]">
		<view class="title">
			<view>手机验证登录</view>
			<text>首次登录将自动注册为用户</text>
		</view>
		<view class="form"><input v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号码"
				placeholder-class="placeholder" class="ipt" /></view>
		<view class="form ddflex">
			<input v-model="code" type="number" maxlength="6" placeholder="请输入短信验证码" placeholder-class="placeholder"
				class="ipt flex" />
			<view class="yzm" @click="getCode()" v-text="sendMsg"></view>
		</view>
		<view class="btn" @click="submitLogin">登录</view>

		<view class="agree ddflex" @click="agree">
			<image :src="'../../static/pages/images/' + (isAgree ? 'gou1_h.png' : 'gou1.png')" class="gou"></image>
			已阅读并同意
			<text @click.stop="jumpUrl('/mine/page/page?title=服务协议&isXieyi=true')">《服务协议》</text>
			与
			<text @click.stop="jumpUrl('/mine/page/page?title=隐私政策&isYinsi=true')">《隐私政策》</text>
		</view>

		<!-- ios app存在第三方授权登录的必须接入苹果登录，故先屏蔽该功能；只在安卓上做-->
		<view class="other" v-if="is_weixn()">
			<view class="tits ddflex">其他方式登录</view>
			<view class="wechat" @click="watchLogin()">
				<image src="../../static/pages/images/wechat.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require('../../utils/request.js');
	const api = require('../../utils/api.js');
	const util = require('../../utils/util.js');
	const jump = require('../../utils/jump.js');
	export default {
		data() {
			return {
				mainStyle: app.globalData.mainStyle,
				isAgree: false,
				isGetCodeDisabled: false,
				mobile: '', //手机号
				code: '', //code
				sendMsg: '获取验证码',
				typeRole: '',
				userInfo: {},
				platform: '', //android、ios
				iosPassed: 0, //IOSAPP应用市场是否过审开关 0否  1是
				isShowWXView: false //是否显示微信授权登录控件
			};
		},
		onLoad() {
			req.removeStorage('authorize_jump');
			this.platform = uni.getSystemInfoSync().platform;
			this.iosPassed = JSON.parse(req.getStorage('configRes')).iosPassed;
			this.checkShowView();
			
			var pages = getCurrentPages();
			console.log('页面的栈>>>>',pages);
			// switch () {
			// 	case 'android':
			// 		console.log('运行Android上');
			// 		break;
			// 	case 'ios':
			// 		console.log('运行iOS上');
			// 		break;
			// 	default:
			// 		console.log('运行在开发者工具上');
			// 		break;
			// }
		},

		methods: {
			
			// 是微信浏览器
			is_weixn() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				});
			},

			//校验是否可显示vip控件
			checkShowView() {
				if (this.platform == 'android') {
					this.isShowWXView = true;
				} else if (this.platform == 'ios' && this.iosPassed == 1) {
					this.isShowWXView = true;
				}
			},

			agree() {
				this.isAgree = !this.isAgree;
			},

			getCode() {
				if (this.isGetCodeDisabled == true) return false;
				if (!this.mobile) {
					req.msg('请输入手机号');
					return;
				}
				if (!util.isMobile(this.mobile)) {
					req.msg('请输入11位有效手机号');
					return;
				}
				req.postRequest(
					api.sms_login, {
						mobile: this.mobile
					},
					data => {
						req.msg('验证码获取成功');
						let time = 60;
						let interval = setInterval(() => {
							time--;
							if (time == 0) {
								this.isGetCodeDisabled = false;
								this.sendMsg = '获取验证码';
								clearInterval(interval);
							} else {
								this.isGetCodeDisabled = true;
								this.sendMsg = time + '秒后再获取';
							}
						}, 1000);
					},
					true
				);
			},

			submitLogin: function() {
				var dataP = {};
				var apiUrl = '';
				if (!this.mobile) {
					req.msg('请输入手机号');
					return;
				}
				if (!this.code) {
					req.msg('请输入验证码');
					return;
				}
				if (!this.isAgree) {
					return req.msg('请勾选协议');
				}
				// dataP.loginMethod = 'me';
				dataP = {
					mobile: this.mobile,
					code: this.code
				};

				console.log('数据>>>>', dataP);
				req.postRequest(
					api.mobile_login,
					dataP,
					data => {
						console.log('登录完成》》》》', data);
						this.userInfo = data;
						req.setStorage('AUTH_TOKEN', data.token);
						req.setStorage('userInfo', data);
						this.savePushCid();
						// if (data.hasOwnProperty('isNewRegister')) {
						// 	if (data.isNewRegister) {
						// 		util.onEventRegister('phone');
						// 	}
						// } else {
						// 	util.onEventRegister('phone');
						// }
						// util.onEventLogin('phone');
						jump.loginToNext(this.userInfo);
					},
					true
				);
			},

			/**
			 * 用户关联个推的设备cid
			 */
			savePushCid() {
				var cid = req.getStorage('pushCid');
				if (cid) {
					req.postRequest('/api/equipmentCode/save', {
						userType: 1,
						equipmentCode: cid
					}, data => {});
				}
			},

			watchLogin() {
				var tha = this;
				if (!this.isAgree) {
					return req.msg('请勾选协议');
				}
				// #ifdef APP-PLUS
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log('登录数据>>>>', loginRes);
						var dataP = {
							accessToken: loginRes.authResult.access_token,
							openId: loginRes.authResult.openid,
							unionId: loginRes.authResult.unionid
						};
						console.log('微信登录数据>>>>', dataP);
						req.postRequest(
							api.wechat_login,
							dataP,
							data => {
								tha.userInfo = data;
								req.setStorage('AUTH_TOKEN', data.token);
								req.setStorage('userInfo', data);
								tha.savePushCid();
								// util.onEventLogin('wechat');
								jump.loginToNext(tha.userInfo);
								console.log('微信返回>>>>', data);
							},
							true
						);
					}
				});
				// #endif
				// #ifdef H5
				//公众号
				getApp().wxOauth('', '','snsapi_userinfo');
				
				// var url =
				// 	'https://open.weixin.qq.com/connect/oauth2/authorize' +
				// 	'?appid=' +
				// 	req.public.WX_GZH_APPID +
				// 	'&redirect_uri=' +
				// 	encodeURIComponent(req.public.WX_GZH_URI) +
				// 	'&response_type=code' +
				// 	'&scope=snsapi_userinfo' +
				// 	'&state=STATE#wechat_redirect';
				// window.location.href = url;
				// #endif

			}
		}
	};
</script>

<style>
	@import './index.css';
</style>