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

<template>
	<view class="container login">
		<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 ref="VcodeInput" @vcodeInput="vcodeInput"></vcode-input>
		</view>
		<view class="logo-message"><text>邀请码错误，请联系采美客服获取最新邀请码</text> </view> <button class="login-btn">登录</button>
	</view>
</template>

<script>
import VcodeInput from '@/components/vcode-input/vcode-input'
export default {
	components: {
		VcodeInput
	},
	data() {
		return {}
	},
	onLoad() {},
	methods: {
		// 用户输入的值
		vcodeInput(val) {
			console.log(val)
		},
		// 控制组件获取焦点
		setFocus() {
			this.$refs.VcodeInput.setFocus()
		},
		// 控制组件失去焦点
		setBlur() {
			this.$refs.VcodeInput.setBlur()
		},
		// 清除已输入
		clearValue() {
			this.$refs.VcodeInput.clearValue()
		}
	}
}
/*
import authorize from '@/common/config/authorize.js'
import wxLogin from "@/common/config/wxLogin.js"
import {mapState,mapMutations } from 'vuex';
import { invitationCodeLogin  } from '@/services/use.js'
export default{
	data() {
		return{
			invitationCode:'',  //获取用户登录的邀请码
		}
	},
	onLoad(option) {

	},
	computed: {
		...mapState(['isWxAuthorize','isLoginType','isLoginProductId','isLoginOrderId'])
	},
	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.isUserInfo = false
					})
				}
			})
		}
	}
}*/
</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;
			background: #ff2a2a;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			line-height: 22rpx;
			margin-right: 6rpx;
		}
	}
}
</style>