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

<template>
	<view class="container login">
		<view class="login-main">
			<text class="logo-text">您的账号尚未绑定机构邮箱，请填写机构邮箱地址进行绑定。邮箱可用于登录和修改密码。</text>
		</view>
		<view class="login-form clearfix">
			<view class="login-input">
				<input type="text" 
					   v-model="bindEmail"  
					   maxlength="30" 
					   class="input" 
					   placeholder="请输入邮箱地址"
				/>
			</view>
		</view>
		<view class="login-form clearfix">
			<view class="login-input code">
				<input type="number" 
					   v-model="bindEmailCode"  
					   maxlength="4" 
					   class="input" 
					   placeholder="请输入邮箱验证码"
				/>
			</view>
			<view class="login-input btn" :class="[isEmialDisabled  ? 'disabled' : '']">
				<button type="button"  
						@click.stop="getEmailCodeFn"
						:disabled="isEmialDisabled" 
						class="input" >
						{{ emailCodeText }}
				</button>
			</view>
		</view>
		<view class="login-form btns clearfix">
			<view class="login-btn none"  @click="bindEmailNone">暂不绑定</view>
			<view class="login-btn"  @click="bindEmailFrist">绑定</view>
		</view>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js' 
	import { bindingEmail } from '@/services/use.js' 
	import { getEmailCode } from "@/services/public.js"
	import wxLogin from "@/common/config/wxLogin.js"
	
	export default{
		data() {
			return{
				userID:'',			//用户ID
				bindEmail:'',  		//用户绑定邮箱
				bindEmailCode:'',  	//用户绑定邮箱验证码
				isEmialDisabled:false,	//获取验证码按钮
				count: '',				//倒计时
				emailCodeText: '获取验证码',
				codeTime: null,
				codeType:'',		//用户状态 为4状态的跳绑定微信
				getOption:'',			//储存上一级页面的option
				loginType:'',		//跳转类型
				loginPath:'',		//从哪个页面跳的
				alertText:'',
				id:''//商品ID
			}
		},
		onLoad(option) {
			if(option.data){
				let data = JSON.parse(option.data);
				this.getOption = data
				this.loginType = data.type;
			}
			this.loginPath = option.pathType
			this.codeType = option.codeType
		},
		methods:{
			bindEmailFrist(){
				 let params = {
						userID:this.userID,
						email:this.bindEmail,
						code:this.bindEmailCode
				}
				bindingEmail(params).then(response =>{
					if(this.loginPath == 1){
						wxLogin.wxLoginAuthorize()
						this.$api.switchTabTo('/pages/tabBar/user/user')
					}else{
						this.$api.navigateTo(`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&type=${this.loginType}`)
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			bindEmailNone(){
				if(this.loginPath == 1){
					wxLogin.wxLoginAuthorize()
					this.$api.switchTabTo('/pages/tabBar/user/user')
				}else{
					this.$api.navigateTo(`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&type=${this.loginType}`)
				}
			},
			getEmailCodeFn(){
				if( this.bindEmail == ''){
					this.$util.msg('请输入邮箱地址',2000);
					return
				}
				if(!this.$reg.isEmail(this.bindEmail)){
					this.$util.msg('请输入正确的邮箱地址',2000);
					return
				}
				this.isEmialDisabled = true;	
				getEmailCode({email:this.bindEmail,status:1}).then(res =>{
					this.$util.msg('邮箱验证码已发送',2000)
					const TIME_COUNT = 60;
			     	if (!this.codeTime) {
			       		this.count = TIME_COUNT;
						this.isEmialDisabled = true;
			       		this.codeTime = setInterval(() => {
			       			if (this.count > 1 && this.count <= TIME_COUNT) {
			         			this.count--
			         			this.emailCodeText = this.count +'s重新发送'
			        		} else {
				         		this.isEmialDisabled = false;
				         		clearInterval(this.codeTime)
				         		this.codeTime = null
								this.emailCodeText = '获取验证码'
			        		}
			       		},1000)
			      	}
				}).catch( error =>{
					this.$util.msg(error.msg,2000);
					this.isEmialDisabled = false;
				})
			}
		},
		onShow() {
			this.$api.getStorage().then((resolve) => {
				this.userID = resolve.userID
			})
		}
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		height: auto;
		border-top: 1px solid #F7F7F7;
		.model-warp.none{
			display: none;			
		}
		.model-warp.show{
			display: block;
		}
		.login-main{
			width: 702rpx;
			background: rgba(225, 86, 22, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 68rpx;
			padding: 20rpx 24rpx;
			margin: 24rpx 0 118rpx 0;
			.logo-text{
				font-size: 24rpx;
				line-height: 34rpx;
				color: $color-system;
			}
		}
		.login-form{
			width: 702rpx;
			height: auto;
			padding: 0 24rpx;
			&.btns{
				display: flex;
				margin-top: 80rpx;
				.login-btn{
					flex:1;
					width: 303rpx;
					height: 88rpx;
					margin: 0 24rpx;
					border-radius: 44rpx;
					font-size: $font-size-28;
					line-height: 88rpx;
					color: #FFFFFF;
					text-align: center;
					background: $btn-confirm;
					&.none{
						background: #999999;
						color: #FFFFFF;
					}
				}
			}
			.login-input{
				width: 654rpx;
				height: 40rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;
				background: #F7F7F7;
				border-radius: 14rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				&.code{
					width: 377rpx;
					float: left;
					margin-right: 20rpx;
				}
				&.btn{
					width: 258rpx;
					height: 88rpx;
					padding: 0;
					float: left;
					background: $btn-confirm;
					.input{
						width: 258rpx;
						height: 88rpx;
						line-height: 88rpx;
						padding: 0;
						border-radius: 14rpx;
						color: #FFFFFF;
						background: $btn-confirm;
						
					}
					&.disabled{
						background: #F7F7F7;
						.input{
							background: #F7F7F7;
							color: #999999;
						}
					}
				}
				.input{
					width: 100%;
					height: 100%;
					background: #F7F7F7;
					font-size: $font-size-28;
					line-height: 40rpx;
					color: #333333;
					border-radius: 14rpx;
				}
			}
		}
	}
</style>