web-retail-h5/pages/forgetEmail/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-18 14:42:53
-->
<template>
  <view class="main">
	 <view class="contents">
	 	<u-form ref="uForm" :model="emailObj"
	 	        class="paddings"
	 	        labelWidth="auto">
	 			<u-form-item :label="'邮箱'"
					label-width="60px"
					 prop="emailed">		  	 			
			<u-input v-model="emailObj.emailed" class="border-color"
			disabled
												placeholder=""
											   placeholder-class="place-class" />
		</u-form-item>
		<u-form-item :label="'验证码'"
					label-width="60px"
					 prop="code">		  	 			
			<u-input v-model="emailObj.code" class="border-color width-s"
					
												:placeholder="'请输入验证码'"
											   placeholder-class="place-class" />
																											  
									 <!-- <view class="yzm" @click="submit">
										  {{getCodeText}}
									  </view>	 -->
									  <button :disabled="disabled" class="yzm"  @click.stop="getCode()">
									  {{getCodeText}}
									  </button>
									  
		</u-form-item>
		<u-form-item label="新邮箱"
					label-width="60px"
					prop="email"
					 style="display: flex;">
			<u-input v-model="emailObj.email" class="border-color"
												:placeholder="'请输入新邮箱'"
											   placeholder-class="place-class" />
																												  
		</u-form-item>
	 	</u-form>
	 </view>
	  <u-button class="btn"
	            shape="circle"
	            type="success"
				@click="submit"
	        >{{'确定'}}</u-button>
			<view style="height: 20rpx;"></view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import address from '@/components/address.vue'
import store from '@/store'
import {getData} from "../../config/login";
export default {
  data() {
    return {
		getCodeText: '获取验证码',
		disabled:false,
		time:60,
		yzmCheck:false,
		userInfo:'',
		emailObj: {
		        emailed: '',
		        code: '',
		        email: '',
		},
		rules: {
			emailed:[
				{
					// 必填项
					required: false,
					// 提示内容（会出现在u-form-item内的底部）
					message: "邮箱不能为空",
					trigger: ["blur"],
				}
			],
			code:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: "验证码不能为空",
					trigger: ["blur"],
				}
			],
			email:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: "新邮箱不能为空",
					trigger: ["blur"],
				}
			],
			}
    }
  },
  onLoad(option) {
		this.getMemberInfo();
  },
  onReady() {
  	 this.$refs.uForm.setRules(this.rules);
  },
  methods: {
		getMemberInfo() {
			api.getData().then((res) => {
				//   safty: {
				//   loginPwd: 111111,
				//   payPwd: 111111,
				//   email: 111111,
				//   tel: 111111,
				// },
				this.emailObj.emailed = res.data.email || ''
			})
		},
	  submit() {
		  	this.$refs.uForm.validate().then((res) => {
				api.updateEmail(this.emailObj).then((res)=>{
					if(res.code=='200'){
						uni.showToast({
							title: res.msg,
							icon: "none",
							success() {
								setTimeout(()=>{
									uni.navigateTo({
										url:"/pages/login/index"
									})
								},2000)
							}						
						});
					}else{
						uni.showToast({
							icon:"none",
							title:res.msg
						})
					}
				})  
		})
	  },
	  getCode() {
	  	// this.disabled = true
	  	// this.getCodeText = "发送中..." //发送验证码
	  	// this.getCodeisWaiting = true;
	  	// this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
	  	this.getYzm()
	  },
	  getYzm() {
		api.verification().then((res)=>{
			if(res.code=='200'){
				setTimeout(() => {
					//this.$common.msg('验证码已发送')
					 uni.showToast({
					 	title: '验证码已发送',
					 	icon: "none"
					 }); //弹出提示框
					this.setTimer(); //调用定时器方法
				}, 1000)
			}
		})  
	  },
	setTimer() {
		this.disabled = true
		let holdTime = 60; //定义变量并赋值
		this.getCodeText = '重新获取' + "(60)"
		//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
		//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
		this.time = setInterval(() => {
			if (holdTime <= 0) {
				this.disabled = false
				this.getCodeisWaiting = false;
				this.getCodeBtnColor = "#ffffff";
				this.getCodeText = '获取验证码' 
				clearInterval(this.time); //清除该函数
				return; //返回前面
			}
			this.getCodeText = '重新获取' + "(" + holdTime + ")"
			holdTime--;
		}, 1000)
	}
  },
}
</script>

<style lang="scss" scoped>
	:v-deep uni-button:after{
		border: none;
	}
	:v-deep .u-form-item__body__right__message{
		margin-left: 170rpx !important;
	}
	.yzm{
		// width: 161rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		color: #fff;
		background: #2FBC42;
		border-radius: 40rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
	}
	:v-deep .u-form-item:nth-child(2){
		width: 670rpx;
	}
	.contents{
		background-color: #fff;
	}
	page{
		background-color: #f2f2f2;
	}
	:v-deep .width-s{
		width: 200rpx !important;
	}
	.paddings{
		padding: 30rpx 0rpx;
		margin: 0 40rpx;
	}
	.border-color{
		border-radius: 50rpx;
		padding-left: 50rpx !important;
		font-size: 28rpx;
		width: 400rpx;
		height: 60rpx;
		background: #F5F6F8;
		border: none;
	}
	.btn{
		background-color: #FB3024;
		border: none;
		height: 92rpx;
		line-height: 92rpx;
		font-size:30rpx;
		margin: 40rpx auto;
		width: 690rpx;
	}
</style>