邀请码登录界面已完成

components/vcode-input/vcode-input.vue

@@ -0,0 +1,164 @@
+<template>
+	<view class="vcode-input-body">
+		<text class="vcode-input-item" 
+		:class="isBorderLine?'vcode-input-line':'vcode-input-border'"
+		v-for="(v,index) in sum" 
+		:key="index"
+		@tap.stop="setFocus"
+		:style="{
+			borderColor:text.length===index&&focus?borderActiveColor:(text.length>index?borderValueColor:borderColor),
+			color:text.length>index?borderValueColor:borderColor}"
+		>
+			{{ text[index]?text[index]:'' }}
+		</text>
+		<view class="hidden-input">
+			<input
+			id="vcodeInput"
+			ref="vcodeInput"
+			type="number" 
+			:show-confirm-bar="false"
+			auto-blur
+			:focus="focus"
+			:maxlength="sum"
+			v-model="value"
+			@blur="setBlur"
+			:password="isPassword"
+			placeholder="验证码"/>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:'VcodeInput',
+		props: {
+			sum:{
+				type: Number,
+				default: 6
+			},
+			isBorderLine:{
+				type:Boolean,
+				default:false
+			},
+			borderColor:{
+				type:String,
+				default:'#e8e8e8'
+			},
+			borderValueColor:{
+				type:String,
+				default:'#e8e8e8'
+			},
+			borderActiveColor:{
+				type:String,
+				default:'#e8e8e8'
+			},
+			isAutoComplete:{
+				type: Boolean,
+				default: true
+			},
+			isPassword:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				focus:false,
+				text:[],
+				value:''
+			};
+		},
+		watch:{
+			value(value,oldVal){
+				if(this.isAutoComplete){
+					if(value.length>=this.sum){
+						this.focus=false;
+						this.$emit('vcodeInput', value);
+					}
+				}else{
+					this.$emit('vcodeInput', value);
+				}
+				if(this.isPassword){
+					let val='';
+					for (let i = 0; i < value.length; i++) {
+						val+='●';
+					}
+					this.text=val;
+				}else{
+					this.text=value.split("");
+				}
+				
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.initInput()
+			})
+		},
+		methods:{
+			initInput(){
+				this.focus=true;
+				// #ifdef H5
+				this.$refs.vcodeInput.$refs.input.setAttribute('type','number');
+				this.$refs.vcodeInput.$refs.input.setAttribute('pattern','[0-9]*')
+				// #endif
+			},
+			setBlur(){
+				this.$nextTick(() => {
+					this.focus=false;
+				})
+			},
+			setFocus(){
+				this.focus= !this.focus;
+			},
+			clearValue(){
+				this.value='';
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.vcode-input-body{
+	margin-left: -36rpx;
+	margin-right: -36rpx;
+	position: relative;
+	overflow: hidden;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+.vcode-input-item{
+	width: 76rpx;
+	height: 76rpx;
+	margin-left: 12rpx;
+	margin-right: 12rpx;
+	line-height: 76rpx;
+	text-align: center;
+	font-weight: 500;
+	color: #c4761f !important;
+	border-radius: 4rpx;
+}
+.vcode-input-border{
+	border-style: solid;
+	border-width: 2rpx;
+	border-color: $uni-border-color;
+	border-radius: 4rpx;
+}
+.vcode-input-line{
+	border-bottom-style: solid;
+	border-bottom-width: 2rpx;
+	border-color: $uni-border-color;
+}
+.hidden-input{
+	width: 0px;
+	height: 0px;
+	position: absolute;
+	left: -1px;
+	top: -1px;
+	overflow: hidden;
+}
+</style>

pages.json

@@ -1,6 +1,11 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录"
+			}
+		}, {
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "维沙采购商城",
@@ -13,11 +18,6 @@
 			}
 		},
 		{
-			"path": "pages/login/login",
-			"style": {
-				"navigationBarTitleText": "登录"
-			}
-		}, {
 			"path": "pages/authorization/authorization",
 			"style": {
 				"navigationBarTitleText": "微信授权",

pages/login/login.vue

@@ -1,198 +1,171 @@
-
 <template>
 	<view class="container login">
-		<view class="login-main">
-			<image class="logo" src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/logo.png" mode=""></image>
-		</view>
-		<view class="login-input">
-			<input type="number" 
-				   v-model="invitationCode"  
-				   maxlength="6" 
-				   class="input" 
-				   placeholder="请输入邀请码"
-			/>
-		</view>
-		<view class="login-row" @click.stop="this.$api.navigateTo('/pages/login/register-select')"><text>免费注册</text></view>
-		<view class="login-btn"  @click.stop="goLogin">登录</view>
-		<view class="login-btn-last" @click.stop="this.$api.navigateTo('/pages/login/login')">账号登录</view>
+		<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 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:'',  //获取用户登录的邀请码
-			}
+import VcodeInput from '@/components/vcode-input/vcode-input'
+export default {
+	components: {
+		VcodeInput
+	},
+	data() {
+		return {}
+	},
+	onLoad() {},
+	methods: {
+		// 用户输入的值
+		vcodeInput(val) {
+			console.log(val)
 		},
-		onLoad(option) {
-
+		// 控制组件获取焦点
+		setFocus() {
+			this.$refs.VcodeInput.setFocus()
 		},
-		computed: {
-			...mapState(['isWxAuthorize','isLoginType','isLoginProductId','isLoginOrderId'])
+		// 控制组件失去焦点
+		setBlur() {
+			this.$refs.VcodeInput.setBlur()
 		},
-		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
-						})
-					}
-				})
+		// 清除已输入
+		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{
-		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: 189rpx;
-			padding:60rpx 0 40rpx 0;
-			margin-bottom: 70rpx;
-			.logo{
-				width:467rpx;
-				height: 189rpx;
-				display: block;
-			}
-		}
-		.login-input{
-			width: 600rpx;
-			height: 88rpx;
-			padding: 24rpx 0;
-			margin: 0 auto;
-			margin-bottom: 30rpx;
-			background: #FFFFFF;
-			position: relative;
-			box-sizing: border-box;
-			border-bottom: 1px solid #E1E1E1;
-			.input{
-				width: 100%;
-				height: 100%;
-				background: #FFFFFF;
-				font-size: $font-size-28;
-				line-height: 88rpx;
-				color: #333333;
-			}
-		}
-		.login-row{
-			padding: 0 75rpx;
-			font-size: $font-size-28;
-			line-height: 40rpx;
-			color: #E15616;
-			margin-bottom: 48rpx;
-			text-align: right;
+.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-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;
+	}
+	.login-title {
+		display: flex;
+		justify-content: flex-start;
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin-right: 6rpx;
 		}
-		.login-btn-last{
-			width: 600rpx;
-			height: 86rpx;
-			border-radius: 44rpx;
-			font-size: $font-size-28;
-			line-height: 88rpx;
-			color: $color-system;
-			margin: 0 auto;
+	}
+	.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;
-			border: 1px solid $color-system;
-			margin-top: 20rpx;
-		}
-		.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;
-				}
-			}
+			line-height: 22rpx;
+			margin-right: 6rpx;
 		}
 	}
+}
 </style>