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

<template>
	<view class="container login">
		<!-- logo区域 -->
		<view class="login-main">
			<image class="logo" src="/static/ws/logo.png" mode="widthFix"></image>
		</view>
		<!-- 邀请码标题 -->
		<view class="login-title">
			<image src="/static/ws/invitation_code.png" mode="widthFix"></image> <text>邀请码</text>
		</view>
		<!-- 邀请码 -->
		<view class="login-input">
			<vcode-input
				borderValueColor="#e8e8e8"
				borderActiveColor="#e8e8e8"
				ref="vcodeInputRef"
				@vcodeInput="vcodeInput"
				@vcodeChange="vcodeChangeHandle"
				sum="6"
			></vcode-input>
		</view>
		<!-- 提示信息 -->
		<view class="logo-message" v-if="hasError"
			><text>{{ loginMessage }}</text>
		</view>
		<button class="login-btn" @click="goLogin" :disabled="isCodeEmpty">登录</button>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import VcodeInput from '@/components/vcode-input/vcode-input'
import { mapState, mapMutations } from 'vuex'
import { invitationCodeLogin } from '@/services/use.js'
export default {
	components: { VcodeInput },
	data() {
		return {
			invitationCode: '', //获取用户登录的邀请码
			loginMessage: '' ,//登录信息反馈
		}
	},
	onLoad(option) {},
	computed: {
		...mapState(['isWxAuthorize', 'isLoginType', 'isLoginProductId', 'isLoginOrderId']),
		// 邀请码长度是否符合要求
		isCodeEmpty() {
			return this.invitationCode.trim().length < 6
		},
		hasError(){
			return this.loginMessage.length>0
		}
	},
	methods: {
		...mapMutations(['login']),
		// 登录
		goLogin() {
			// 获取用户微信信息
			wx.getUserInfo({
				success: res => {
					this.isUserInfo = false
					this.userInfo = res.userInfo
					// 验证邀请码
					this.UserService.userInvitation({
						invitationCode: this.invitationCode,
						nickName: res.userInfo.nickName,
						openid: uni.getStorageSync('openid')
					})
					.then(response => {
						console.log(response)
						// 保存用户信息
						this.login(response.data)
						this.$store.commit('updateStatus', response.data)
						// 登录成功提示
						this.$util.msg('登录成功', 1500, false, 'success')
						setTimeout(() => {
							this.$api.navigateTo(`/pages/index/index`)
						}, 1500)
					})
					.catch(error => {
						this.loginMessage = error.msg
						this.isUserInfo = false
						setTimeout(()=>{
							this.loginMessage = ''
						},2000)
					})
				}
			})
		},
		// 输入框输入介绍
		vcodeInput(val) {
			// this.invitationCode = val
			console.log(val)
		},
		// 输入框输入事件
		vcodeChangeHandle(val) {
			this.invitationCode = val
			// console.log(val)
		},
		// 控制组件获取焦点
		setFocus() {
			this.$refs.VcodeInput.setFocus()
		},
		// 控制组件失去焦点
		setBlur() {
			this.$refs.VcodeInput.setBlur()
		},
		// 清除已输入
		clearValue() {
			this.$refs.VcodeInput.clearValue()
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
.login {
	display: flex;
	align-items: center;
	flex-direction: column;
	.login-main,
	.login-title,
	.logo-message {
		width: 590rpx;
	}
	.login-main {
		display: flex;
		justify-content: center;
		margin: 180rpx 0 60rpx;
		image {
			width: 151rpx;
			height: 151rpx;
			border-radius: 50%;
		}
	}
	.login-title {
		display: flex;
		justify-content: flex-start;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 6rpx;
		}
	}
	.login-btn {
		width: 600rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background-color: #000;
		border-radius: 45rpx;
		color: #fff;
		margin-top: 40rpx;
	}
	.login-input {
		margin: 30rpx 0;
	}
	.logo-message {
		margin-bottom: 64rpx;
		font-size: 24rpx;
		line-height: 33rpx;
		color: #ff2a2a;
		display: flex;
		justify-content: center;
		align-items: center;
		&::before {
			content: '!';
			display: block;
			width: 22rpx;
			height: 22rpx;
			border: 1px solid #ff2a2a;
			border-radius: 50%;
			color: #ff2a2a;
			text-align: center;
			line-height: 22rpx;
			margin-right: 6rpx;
		}
	}
}
</style>