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="loginMessage !== ''"><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
		}
	},
	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)
							wxLogin.wxLoginAuthorize()
							if (response.data.userIdentity === 3) {
								setTimeout(() => {
									this.$api.navigateTo('/supplier/pages/index/index')
								}, 1000)
							} else {
								setTimeout(() => {
									switch (this.isLoginType) {
										case 9:
											this.$api.navigateTo(`/h5/pages/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')
									}
								}, 1000)
							}
						})
						.catch(error => {
							// this.$util.msg(error.msg, 2000)
							this.loginMessage = error.msg
							this.isUserInfo = false
						})
				}
			})
		},
		// 输入框输入介绍
		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()
		}
	}
}
</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;
	}
	.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>