caimei-applets-caimei/pages/login/logincode.vue

<template>
	<view class="container login">
		<view class="login-main">
			<image class="logo" src="../../static/login-logo@3x.png" mode=""></image>
			<text class="logo-text">生美/医美采购服务平台</text>
		</view>
		<view class="login-input">
			<input type="number" 
				   v-model="invitationCode"  
				   maxlength="6" 
				   class="input" 
				   placeholder="请输入邀请码"
			/>
		</view>
		<view class="login-btn"  @click="goLogin">登录</view>
	</view>
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	import authorize from '@/common/config/authorize.js' 
	import { invitationCodeLogin  } from '@/api/use.js'
	export default{
		data() {
			return{
				invitationCode:'',  //获取用户登录的邀请码
				loginType:'',		//跳转类型
				alertText:'',
				listType: '',
				listVal: '',
				detilType:'',
				id:''//商品ID
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.data);
			this.getOption = data
			this.loginType = option.type;
			this.id = option.id
			if(option.listType) {
				this.listType = option.listType;
				this.listVal = option.listVal;
			}
		},
		methods:{
			...mapMutations(['login']),
			goLogin() {
				if( this.invitationCode == ''){
					this.$util.msg('请输入邀请码',2000)
					return
				}
				wx.getUserInfo({
					success: res => {
						this.isUserInfo = false
						this.userInfo = res.userInfo;
						let params ={
								invitationCode:this.invitationCode,
								nickName:res.userInfo.nickName,
								headimgurl:res.userInfo.avatarUrl,
						}							
						invitationCodeLogin(params).then(response =>{
							this.login(response.data)
							this.$api.switchTabTo('/pages/tabBar/home/home')
						}).catch(error =>{
							this.$util.msg(error.msg,2000)
							this.isUserInfo = false
						})
					}
				})
			},
			goUserLogininit(){
				let url;
				if(this.loginType) {
					if(this.loginType=='detilType'){
						this.$api.redirectTo(`/pages/goods/product?id=${this.id}&page=2`);
					}else if(this.loginType=='search'){
						this.$api.redirectTo('/pages/search/search');
					}else if(this.loginType == 1){
						url ='/pages/tabBar/cart/cart'
					}else if(this.loginType == 4){
						url ='/pages/tabBar/user/user'
					}else {
						url ='/pages/tabBar/home/home'
					}
					uni.switchTab({
						url
					})
				} else if(this.listType) {
					this.$api.navToListPage({type:this.listType,value:this.listVal,lType:'4'});
				}
			}
		}
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		height: auto;
		.model-warp.none{
			display: none;			
		}
		.model-warp.show{
			display: block;
		}
		.login-main{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 198rpx;
			padding: 170rpx 0 60rpx 0;
			.logo{
				width: 138rpx;
				height: 118rpx;
				display: block;
			}
			.logo-text{
				font-size: 30rpx;
				line-height: 44rpx;
				color: $color-system;
				font-weight: 600;
				margin-top: 20rpx;
			}
		}
		.login-input{
			width: 654rpx;
			height: 40rpx;
			padding: 24rpx;
			margin: 0 auto;
			margin-bottom: 60rpx;
			background: #F7F7F7;
			border-radius: 14rpx;
			.input{
				width: 100%;
				height: 100%;
				background: #F7F7F7;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #333333;
				border-radius: 14rpx;
			}
		}
		.login-btn{
			width: 702rpx;
			height: 88rpx;
			border-radius: 14rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #FFFFFF;
			margin: 0 auto;
			text-align: center;
			background: $btn-confirm;
		}
		.model-authorization{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.authorization{
				width: 518rpx;
				height: 320rpx;
				position: absolute;
				background: rgba(255,255,255,.7);
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				.to-btn{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 70%;
					height: 88rpx;
					font-size: $font-size-28;
					line-height: 88rpx;
					color: #FFFFFF;
					text-align: center;
					border-radius: 44rpx;
				}
			}
		}
	}
</style>