pages/sub_mine/bindEmail.vue

<template>
	<view class="bindEmail">
		<view class="bindEmail-field">
			<u-field v-model="email" label="邮箱" placeholder="请输入您的邮箱号" placeholder-style="color:#999999;font-family:PingFang-SC-Regular"
			 label-width="160" clear-size="40"></u-field>
			<u-field v-model="code" label="验证码" placeholder="请输入验证码" clear-size="40" placeholder-style="color:#999999"
			 label-width="160" maxlength="6" type="number">
				<u-button size="mini" slot="right" type="primary" @click="isHaveEmail?getcode('unbind'):getcode('bind')" shape="circle"
				 :custom-style="btn" :disabled="isChecked">{{codeText}}</u-button>
			</u-field>
		</view>
		<u-button class="bindEmail-btn" @click="isHaveEmail?unbind():bind()" :custom-style="isHaveEmail?cancel:confirm">{{isHaveEmail?'解除绑定':'绑定邮箱'}}</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email: '',
				confirm: {
					width: '600rpx',
					backgroundColor: '#2FA8E1',
					color: '#FFFFFF',
					fontFamily: "PingFang-SC-Medium",
					fontSize: '30rpx',
					marginTop: '100rpx',
					padding: '50rpx 0'
				},
				cancel: {
					width: '600rpx',
					backgroundColor: '#fa3534',
					color: '#FFFFFF',
					fontFamily: "PingFang-SC-Medium",
					fontSize: '30rpx',
					marginTop: '100rpx',
					padding: '50rpx 0'
				},
				isChecked: false,
				codeText: '获取验证码',
				btn: {
					color: '#2FA8E1',
					backgroundColor: '#FFFFFF',
					borderColor: '#2FA8E1',
					borderWidth: '1rpx',
					borderStyle: 'solid',
					fontFamily: "PingFang-SC-Regular"
				},
				code: '',
				isHaveEmail: false
			}
		},
		onLoad() {
			let isHaveEmail = !!uni.getStorageSync('email')
			this.email = uni.getStorageSync('email')
			this.isHaveEmail = isHaveEmail
		},
		methods: {
			bind() {
				let that = this
				let email = that.email
				let code = that.code
				let params = {
					email,
					code
				}
				if (!code || !email) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
					})
				}
				that.$u.post('/v1/email/bind', params).then(res => {
					uni.showToast({
						title: "绑定成功",
						icon: "none",
						duration: 800,
						complete(res) {
							uni.setStorageSync('email', email)
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
				})
			},
			unbind() {
				let that = this
				let code = that.code
				let params = {
					code
				}
				if (!code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
					})
				}
				that.$u.post('/v1/email/unbind', params).then(res => {
					uni.showToast({
						title: "解绑成功",
						icon: "none",
						duration: 800,
						complete(res) {
							uni.setStorageSync('email', '')
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
				})
			},
			getcode(type) {
				let that = this
				let reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
				let email = that.email
				if (!reg.test(email)) {
					uni.showToast({
						title: '请输入正确的邮箱号',
						icon: 'none',
					})
					return
				}
				let params = {
					email,
					type
				}
				that.$u.post('/v1/email/send', params).then(res => {
					uni.showToast({
						title: '发送成功,请去邮箱中获取验证码',
						icon: "none",
						duration: 800
					})
					let i = 120
					that.isChecked = true
					that.timer = setInterval(() => {
						if (i != 0) {
							i--
							that.codeText = i + "s"
						} else {
							clearInterval(that.timer)
							that.codeText = "重新获取"
							that.isChecked = false
						}
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bindEmail {
		&-field {
			margin-top: 30rpx;
			background-color: #FFFFFF;
		}
	}
</style>