caimei-applets-caimei/pages/user-module/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' : '']" @click.stop="getEmailCodeFn">
				<button type="button" :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 { mapMutations } from 'vuex';
	import authorize from '@/common/config/authorize.js' 
	import { bindingEmail } from '@/api/use.js' 
	import { getEmailCode } from "@/api/utils.js"
	
	export default{
		data() {
			return{
				userID:'',			//用户ID
				bindEmail:'',  		//用户绑定邮箱
				bindEmailCode:'',  	//用户绑定邮箱验证码
				isEmialDisabled:false,	//获取验证码按钮
				count: '',				//倒计时
				emailCodeText: '获取验证码',
				codeTime: null,
				codeType:'',		//用户状态 为4状态的跳绑定微信
				getOption:'',			//储存上一级页面的option
				loginType:'',		//跳转类型
				alertText:'',
				listType: '',
				listVal: '',
				detilType:'',
				id:''//商品ID
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.data);
			this.getOption = data
			this.codeType = option.codeType
			this.loginType = data.type;
			this.id = data.id
			if(data.listType) {
				this.listType = data.listType;
				this.listVal = data.listVal;
			}
			console.log(this.codeType)
			console.log(this.loginType)
		},
		methods:{
			...mapMutations(['login']),
			bindEmailFrist(){
				 let params = {
						userID:this.userID,
						email:this.bindEmail,
						code:this.bindEmailCode
				}
				bindingEmail(params).then(res =>{
					this.$api.navigateTo(`/pages/user-module/bindwechat?data=${JSON.stringify(this.getOption)}&type=${this.loginType}`)
				})
			},
			bindEmailNone(){
				this.$api.navigateTo(`/pages/user-module/bindwechat?data=${JSON.stringify(this.getOption)}&type=${this.loginType}`)
			},
			getEmailCodeFn(){
				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.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( res =>{
					this.$util.msg(res.msg,2000);
				})
			}
		},
		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: 14rpx;
					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: 210rpx;
					float: left;
					background: $btn-confirm;
					.input{
						background: $btn-confirm;
						color: #FFFFFF;
					}
					&.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>