cqcarbonwxapp/pages/login/loginType.vue

<template>
	<view class="pages">
		<view class="page-bg-wrap">
			<image :src="$getimg+'loginType-bg.png'" 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>
			<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,
				backUrl:'',
				havePhone:false,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onShow() {
			console.log('this.hasLogin',this.hasLogin);
			if(this.hasLogin){
				uni.switchTab({
					url:'../index/index',
					fail: (err) => {
						console.log(err)						
					}
				})				
			}	
		},
		onLoad(options) {
			this.backUrl = options.backUrl;
		},
		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();
							uni.getStorage({
							    key: 'userInfo',
							    success: function (res) {
							        // console.log('userInfo',res.data);
									if(res.data.phone){
										serf.havePhone = true;
									}else{
										return;
									}
							    }
							});
							
							if(serf.backUrl == '' || !serf.backUrl){
								uni.switchTab({
									url: '/pages/usercenter/usercenter'
								})
							}else{
								uni.navigateTo({
									url:serf.backUrl
								})
							}
						})
					},
				})
				
			},
			onGetPhoneNumber(e){
				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=>{
							serf.upInfo();
							let userKey = uni.getStorageSync('userInfo');
							if(serf.backUrl == '' || !serf.backUrl){
								uni.switchTab({
									url: '/pages/usercenter/usercenter'
								})
							}else{
								uni.navigateTo({
									url:serf.backUrl
								})
							}
						})
					}
				})				
			},
			companyLogin(){
				uni.navigateTo({
					url:'/pages/login/companyLogin'
				})
			}

		}
	}
</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;}
.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>