cqcarbonwxapp/pages/login/loginType.vue

<template>
	<view class="pages">
		<view class="hold-status-bar">
			<!-- 占据了状态栏位置 -->
		</view>
		<view class="page-bg-wrap">
			<image :src="$getimg+pageBg" class="page-bg" mode="widthFix"></image>
		</view>
		<view class="login-out">
			<view class="login-wrap" v-if="!hasLogin">
				<view class="login-item" open-type="getUserInfo" @getuserinfo="personLogin">
					<view class="login-item-icon">
						<text class="iconfont icon-gerenyonghu"></text>
					</view>
					<view class="login-item-text">个人用户</view>
					<button type="default" class="wxlogin-btn" open-type="getUserInfo" @getuserinfo="personLogin">登录</button>
				</view>
				<view class="login-item" @click="companyLogin">
					<view class="login-item-icon">
						<text class="iconfont icon-qiyeyonghu"></text>
					</view>
					<view class="login-item-text">企业用户</view>
				</view>
				<view class="cancel-login-wrap">
					<view class="cancel-login"  @click="cancelLogin">取消登录</view>
				</view>				
			</view>
			<view class="getphone" v-if="hasLogin&&havePhone==false">
				<button type="default" class="getPhoneNumber" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">绑定手机号</button>
				<view class="tip">
					为获取更好的服务,请绑定手机号
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				$getimg:this.$getimg,
				pageBg:'loginType-bg.jpg',
				backUrl:'',
				havePhone:true,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onShow() {
			console.log('this.hasLogin',this.hasLogin);
			console.log('this.$store.state.token',this.$store.state.token);
			if(this.hasLogin){
				uni.switchTab({
					url:'../index/index',
					fail: (err) => {
						console.log(err)						
					}
				})				
			};
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			if(prevPage.route!='pages/product/product'){
				uni.setStorage({
					key:'beforeLoginPage',
					data:prevPage.$page.fullPath
				});
			}
			// console.log('prevPage',prevPage.$page.fullPath);
		},
		onLoad(options) {
			let self = this;
			this.backUrl = options.backUrl;
			uni.getSystemInfo({
			    success: function (res) {
					if(res.windowHeight>800){
						self.pageBg = 'loginType-bg.png'
					}
			    }
			});
		},
		methods: {
			...mapMutations(['login','upInfo']),
			personLogin(e){
				let serf = this;
				let userinfo = e.detail;
				// console.log('e',e);
				uni.login({
					provider:'weixin',
					success(res){
						let code = res.code;
						// console.log('loginres',res);
						let params = {
							code:code,							
							encryptedData:userinfo.encryptedData,
							iv:userinfo.iv,
							rawData:userinfo.rawData,
						};						
						serf.$api.http.post(serf.config.apiBaseurl+"/carbon-h5/wechat/app/login",params).then(res=>{
							console.log('res',res)
							if(res.data.code == 1){
								serf.$api.msg(res.data.msg);
								return false;
							};
							serf.login(res.data.retBody);
							serf.upInfo();
							setTimeout(getInfo,1000);
							function getInfo(){
								uni.getStorage({
								    key: 'userInfo',
								    success: function (res) {
								        console.log('userInfo',res.data);
										if(res.data.phone){										
											serf.havePhone = true;
											serf.loginSuccess();										
										}else{
											serf.havePhone = false;
											return;
										}
								    },
									fail:function(err){
										serf.$api.msg('本次获取手机信息失败,将在下次检查!',2000);
										setTimeout(()=>{
											serf.loginSuccess();
										},2000);
										console.log('getStorage err',err);
									}
								});
							}				
							
							
						})
					},
				})
				
			},
			onGetPhoneNumber(e){
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){
					this.$api.msg('拒绝授权,可以下次绑定哟!',2000);
					setTimeout(()=>{
						this.loginSuccess();
					},2000);
					return;
				};
				let serf = this;
				let userinfo = e.detail;
				let token = uni.getStorageSync('accessToken').accessToken;
				// console.log('token',token);
				console.log('e',e);
				uni.login({
					provider:'weixin',
					success(res){
						let code = res.code;
						console.log('loginres',res);
						let params = {
							code:code,
							encryptedData:userinfo.encryptedData,
							iv:userinfo.iv,
							rawData:userinfo.rawData,
						}
						serf.$api.http.post(serf.config.apiBaseurl+"/carbon-h5/wechat/app/login/phone",params,{
							header: {
							Accept:'application/json',
							Authorization: 'Bearer '+ token, //注意Bearer后面有一空格
						},
						}).then(res=>{
							console.log('res11',res);
							serf.upInfo();
							let userKey = uni.getStorageSync('userInfo');
							if(serf.backUrl == '' || !serf.backUrl){
								uni.switchTab({
									url: '/pages/index/index'
								})
							}else{
								uni.navigateTo({
									url:serf.backUrl
								})
							}
						})
					}
				})				
			},
			companyLogin(){
				uni.navigateTo({
					url:'/pages/login/companyLogin'
				})
			},
			loginSuccess(){
				let serf = this;
				if(serf.backUrl == '' || !serf.backUrl){
					uni.switchTab({
						url: '/pages/index/index'
					})
				}else{
					uni.navigateTo({
						url:serf.backUrl
					})
				}
			},
			cancelLogin(){
				uni.switchTab({
				    url: '/pages/usercenter/usercenter',
					fail(err) {
						// console.log(err)
					}
				});
			}

		}
	}
</script>

<style scoped>
	/* @import url("./index.css"); */
.login-out{position: fixed;left: 0;right: 0;bottom: 144rpx;}
.login-wrap{display: flex;align-items: center;text-align: center;flex-wrap: wrap;}
.cancel-login-wrap{margin-top: 40rpx;width: 100%;}
.cancel-login{position: fixed;left: 0;right: 0;bottom: 24rpx;color: #666;}
.login-item{flex: 1;position: relative;}
.login-item-icon{display: flex;margin: 0 auto 14rpx;align-items: center;justify-content: center;width: 151rpx;height: 151rpx;border-radius: 50%;background: linear-gradient(139deg, #43D394 0%, #18C197 100%);}
.login-item-icon .iconfont{color: #fff;font-size: 64rpx;}
.login-item-text{font-size: 28rpx;color: #666;line-height: 40rpx;}
.wxlogin-btn{position: absolute;left: 0;top: 0;right: 0;bottom: 0;opacity: 0;}
.getPhoneNumber{margin: 0 24rpx;}
.getphone .tip{text-align: center;margin: 24rpx;font-size: 24rpx;color: #666;}
</style>