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

<template>
	<view class="container login">
		<view class="login-main"> <image class="logo" :src="staticUrl + '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">
			<text class="h1">注意事项：</text>
			<text class="p"
				>邀请码是为了方便机构内成员互相邀请并快速注册【丽格集采联盟】小程序而推出的一项邀请机制。</text
			>
			<text class="p"
				>机构已注册了账号的成员，可在其个人中心添加其他机构成员，系统会自动为添加的每一个成员生成邀请码。其他成员使用邀请码可直接登录【丽格集采联盟】小程序。</text
			>
		</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 {
			staticUrl: this.global.staticUrl,
			params: {
				invitationCode: '', //获取用户登录的邀请码
				unionId: 0,
				nickName: '',
				avatarUrl: '',
				organizeId: 4
			}
		}
	},
	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.params.unionId = uni.getStorageSync('unionId')
			this.bindingWechat(this.params)
		},
		async bindingWechat(params) {
			//邀请码登录并绑定微信
			try{
				const res = await this.UserService.usrInvitationLogin(params)
				const data = res.data
				uni.setStorageSync('token', data.token)
				this.$store.commit('updateStatus', data)
				this.login(data)
				// 登录成功处理
				const url = uni.getStorageSync('LOGIN_REDIRECT_URL')
				if (url) {
				    if (url.indexOf('tabBar') > -1) {
				        uni.switchTabTo(url)
				    } else {
						this.$api.redirectTo(url)
				    }
				} else {
				   this.$api.switchTabTo('/pages/tabBar/user/user')
				}
				uni.removeStorageSync('LOGIN_REDIRECT_URL')
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		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.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: 206rpx;
		padding: 60rpx 0 40rpx 0;
		margin: 70rpx 0;
		.logo {
			width: 358rpx;
			height: 206rpx;
			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;
		.h1 {
			line-height: 44rpx;
			font-size: $font-size-24;
			color: #666666;
			text-align: justify;
			display: inline-block;
		}
		.p {
			line-height: 44rpx;
			font-size: $font-size-24;
			color: #999999;
			text-align: justify;
			margin-bottom: 20rpx;
			display: inline-block;
		}
	}
	.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, 0.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>