caimei-applets-mcare/pages/login/login-code.vue

<template>
	<view class="container login">
		<view class="login-main">
			<image class="logo" src="https://static.caimei365.com/app/img/icon/logo@2x.png" mode=""></image>
		</view>
		<view class="login-input">
			<keyInput
				borderValueColor="#E1E1E1"
				borderActiveColor="#E1E1E1"
				ref="vcodeInputRef"
				@vcodeInput="keyInput"
				@vcodeChange="keyInputChangeHandle"
				sum="6"
			>
			</keyInput>
		</view>
		<button class="login-btn"  @click.stop="goLogin" :class="isDisabled ? 'disabled' : ''" :disabled="isDisabled">邀请码登录</button>
		<view class="login-tips">
			邀请码是为了方便机构内成员互相邀请并快速注册【丽格集采联盟】小程序而推出的一项邀请机制。
			机构已注册了账号的成员，可在其个人中心添加其他机构成员，系统会自动为添加的每一个成员生成邀请码。其他成员使用邀请码可直接登录【丽格集采联盟】小程序。
		</view>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import wxLogin from "@/common/config/wxLogin.js"
	import {mapState,mapMutations } from 'vuex';
	import keyInput from '@/components/uni-keyinput/uni-keyinput'
	
	export default{
		components: { 
			keyInput 
		},
		data() {
			return{
				params:{
					invitationCode:'',//获取用户登录的邀请码
					unionId:0,
					nickName:'',
					avatarUrl:'',
				},
			}
		},
		onLoad(option) {

		},
		computed: {
			...mapState(['isWxAuthorize','isLoginType','isLoginProductId','isLoginOrderId']),
			isDisabled() {// 邀请码长度是否符合要求
				return this.params.invitationCode.trim().length < 6
			},
		},
		methods:{
			...mapMutations(['login','wxLogin']),
			goLogin(){
				if( this.params.invitationCode == ''){
					this.$util.msg('请输入邀请码',2000)
					return
				}
				this.isUserInfo = false
				this.params.unionId = uni.getStorageSync('unionId')
				// 友盟埋点邀请码确认登录点击事件
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_InvitationCode', {
						Um_Key_PageName: '邀请码登录',
						Um_Key_SourcePage: '邀请码页面',
					})
				}
				this.GetUserProfile()
			},
			navigatorRegirst(url){
				// 友盟埋点注册入口点击事件
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_zhuce', {
						Um_Key_PageName: '立即注册',
						Um_Key_SourcePage: '个人中心',
					})
				}
				this.$api.navigateTo(url)
			},
			GetUserProfile(){//获取用户微信个人信息
				const self = this
				wx.getUserProfile({
					desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success(res) {
						console.log('微信获取用户信息新API',res)	
						self.wxLogin(res.userInfo)	
						self.params.nickName = res.userInfo.nickName
						self.params.avatarUrl = res.userInfo.avatarUrl
						self.BindingWechat(self.params)
					},
					fail() {
						self.$util.msg('授权失败', 2000)
					}
				})
			},
			BindingWechat(params){//邀请码登录并绑定微信
				this.UserService.InvitationCodeLogin(params)
				.then(response =>{
					wxLogin.wxLoginAuthorize()
					if(response.data.userIdentity === 3){
						setTimeout(()=>{
							this.$api.navigateTo('/pages/supplier/index/index')
						},1500)
					}else{
						setTimeout(()=>{
							switch(this.isLoginType){
								case 9:
									this.$api.navigateTo(`/pages/h5/activity/activity_mid`)
									break;
								case 8:
									this.$api.navigateTo(`/pages/goods/product?id=${this.isLoginProductId}`)
									break;
								case 7:
									this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderID=${this.isLoginOrderId}`)
									break;
								default:
									this.$api.switchTabTo('/pages/tabBar/user/user')
							}
						},1500)
					}
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
					this.isUserInfo = false
				})
			},
			keyInput(val) {// 输入框输入介绍
				// this.params.invitationCode = val
				console.log(val)
			},
			keyInputChangeHandle(val) {// 输入框输入事件
				this.params.invitationCode = val
				// console.log(val)
			},
			setFocus() {// 控制组件获取焦点
				this.$refs.VcodeInput.setFocus()
			},
			
			setBlur() {// 控制组件失去焦点
				this.$refs.VcodeInput.setBlur()
			},
			clearValue() {// 清除已输入
				this.$refs.VcodeInput.clearValue()
			},
			InitAuthorize(){ //是否已授权 0:为取消授权 1:为已授权 2:为未操作
				wxLogin.wxLoginQuick()
			}
		},
		onShow() {
			this.$api.getStorage().then((resolve) =>{
				this.params.unionId = resolve.unionId ? resolve.unionId : 0
			})
			this.InitAuthorize()
		}
	}
</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: 284rpx;
			padding:60rpx 0 40rpx 0;
			margin-bottom: 70rpx;
			.logo{
				width:611rpx;
				height: 284rpx;
				display: block;
			}
		}
		.login-input{
			width: 600rpx;
			height: 88rpx;
			padding: 24rpx 0;
			margin: 30rpx auto;
			margin-bottom: 30rpx;
			background: #FFFFFF;
			position: relative;
		}
		.login-row{
			padding: 0 75rpx;
			font-size: $font-size-28;
			line-height: 40rpx;
			color: #FF5B00;
			margin-bottom: 48rpx;
			text-align: right;
		}
		.login-btn{
			width: 600rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #FFFFFF;
			margin: 0 auto;
			text-align: center;
			background:$btn-confirm;
			&.disabled{
				background: #E1E1E1;
			}
		}
		.login-btn-last{
			width: 600rpx;
			height: 86rpx;
			border-radius: 44rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: $color-system;
			margin: 0 auto;
			text-align: center;
			border: 1px solid $color-system;
			margin-top: 20rpx;
		}
		.login-tips{
			width: 100%;
			height: auto;
			margin-top: 80rpx;
			box-sizing: border-box;
			padding: 0 75rpx;
			line-height: 44rpx;
			font-size: $font-size-20;
			color: #fea785;
			text-align: justify;
			text-indent: 40rpx;
		}
		.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>