hengmei-two/pages/login/login.vue

<template>
	<view>
		<status-nav :titleVal="'登录'" :tabcolor="'rgba(244, 244, 244,1)'" :whereCome="1" :statusTitle="true" :backgroudColor="'rgba(244, 244, 244,1)'"></status-nav>
		<view class='login-header'>
			<image class="infoImg" :style="{boxShadow: '0px 0px 20px '+ publicColor}" mode="aspectFit" :src="userInfo.avatarUrl || imgSrc"></image>
			<view class="logo-name">恒美植发</view>
		</view>
		<view class="login-box">
			<button class='login-btn' :style="{background:publicColor}" type='primary' @click="bindGetUserInfo">微信授权</button>
			<!--新版登录方式-->
			<!-- <button v-if="canIGetUserProfile" class='login-btn' type='primary' @click="bindGetUserInfo">授权登录</button> -->
			<!--旧版登录方式-->
			<!-- <button v-else class='login-btn' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="bindGetUserInfo">授权登录</button> -->
			<view class="xie-box">登录代表您已同意<text @tap="goXie" class="xieCon">《用户服务协议》</text></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {},//用户信息
				publicColor:uni.getStorageSync('publicColor'),
				canIGetUserProfile: false,
				imgSrc: '/static/public/logo.png',//默认logo头像
				invite_code:'',//用户邀请码（选填）(恒美)
				channel:'',//来源渠道，二维码或分享链接中携带的来源渠道参数(恒美)
				invite_source:''//邀请码来源[def默认|link分享注册|qr扫码注册]
			};
		},
		onLoad(options) {
			let ya = this;
			// 微信扫码后会自动编码,所以需要解码
			if (options && options.q) {
				let arr = decodeURIComponent(options.q).split('?')[1].split('&')
				let obj = {}
				arr.forEach(item => {
					let brr = item.split('=')
					obj[brr[0]] = brr[1]
				})
				// console.log(obj) //得到参数组成的对象
				ya.invite_code = obj.invite_code
			}
			if (uni.getUserProfile) {
				this.canIGetUserProfile = true;
			}
		},
		methods: {
			goXie(){
				uni.navigateTo({
					url:'/pages/login/xiey'
				})
			},
			//调起登录授权
			bindGetUserInfo(e) {
				let ya = this;
				//新版登录方式
				uni.getUserProfile({
					desc: '登录',
					lang: 'zh_CN',
					success: (res) => {
						ya.userInfo = res.userInfo;
						console.log('可用用户信息：',ya.userInfo);
						try {
							ya.login();
						} catch (e) {}
					},
					fail: (res) => {}
				});
			},
			login() {
				let ya = this;
				// 获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res.code) {
							let code = res.code;
							ya.updateUserInfo(code);
						} else {
							uni.showToast({
								title: '登录失败！',
								duration: 2000
							});
						}
					},
				});
			},
			//调用登录接口
			updateUserInfo(code) {
				let ya = this;
				uni.showToast({
					title: '登录中...',
					icon:'loading',
				})
				var params = {
					code:code,
					nickname: ya.userInfo.nickName,//用户昵称
					headimgurl: ya.userInfo.avatarUrl,//用户头像
					country: ya.userInfo.country,//用户所在国家
					province: ya.userInfo.province,//用户所在省份
					city: ya.userInfo.city,//用户所在城市
					gender: ya.userInfo.gender,//用户性别
					language:ya.userInfo.language,//语言
					invite_code:ya.invite_code,//用户邀请码
					invite_source:ya.invite_source,//邀请码来源[def默认|link分享注册|qr扫码注册]
					channel:ya.channel//来源渠道，二维码或分享链接中携带的来源渠道参数
				}
				this.$requst.post('user/login',params).then(res => {
					// console.log(res);
					if(res.data.token!=''){
						let comeOn = {
							nickname: ya.userInfo.nickName,//用户昵称
							headimgurl: ya.userInfo.avatarUrl,//用户头像
							country: ya.userInfo.country,//用户所在国家
							province: ya.userInfo.province,//用户所在省份
							city: ya.userInfo.city,//用户所在城市
							language:ya.userInfo.language,//语言
						}
						uni.setStorageSync('comeOn',comeOn)
						uni.setStorageSync('token',res.data.token)//缓存token
						ya.$toolAll.tools.showToast('登录成功','success')
						setTimeout(()=>{
						    uni.reLaunch({
						        url:'/pages/tabbar/pagehome/pagehome'
						    })
						},1000)
					}
				},error => {})
			}
		}
	}
</script>
<style lang="less">
	@tcolor:#333333;
	@tcolorp:#3875F6;
	.login-header {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 40%;}
	.infoImg {width: 192rpx;height: 192rpx;border-radius: 100%;}
	.logo-name {font-size: 30rpx;font-weight: bold;margin-top: 20rpx;color: @tcolor;}
	.login-box {margin-top: 60rpx;text-align: center;}
	.login-btn {width: 80%;margin-top: 50%;}
	.xie-box{display: flex;justify-content: center;align-items: center;color: @tcolor;margin-top: 30rpx;}
	.xieCon{color: @tcolorp;}
</style>