GEKE_PHONE/pages/wages/wages.vue

<template>
	<div>
		<!-- <div class="top" @click="ret()">
			<div style="width: 10%;height: 5px;"></div>
			<div style="margin-left: 10px;">
			<span style="float: left;width: 20px;height: 20px;">
				<image src="../../static/icon/fanhui3.png" style="width: 18px;height: 18px;"></image>
			</span>	
			<div style="margin-top: 5px;">
			<span style="color: #FFFFFF;">返回</span>
			</div>
			</div>
			<div style="text-align: center;margin-top: -22px;">
			<span style="color: #FFFFFF;">薪资查询</span>
			</div>
		</div> -->
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">薪资查询</block>
		</cu-custom>
		<br>
		
		<div class="dt">
			<ul style="margin-left: -45px;">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
				<li >
					<view class="cu-form-group" >
					    <view class="title" style="margin-top: 10px;"><image src="../../static/eml.png" class="imgs"></image></view>
					    <input placeholder="请输入邮箱" v-model="name" ></input>
					</view>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				</li>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<li >
					<view class="cu-form-group" >
					    <view class="title" style="margin-top: 10px;"><image src="../../static/yzm.png" class="imgs"></image></view>
					    <input placeholder="邮箱验证码" v-model="code" ></input>
						<span style="float: right;color: #0081FF;font-size: 15px;" @click="getCode" v-if="show">获取验证码</span>
						<span v-if="!show" style="color: #D7D9E0;float: right;font-size: 15px;">已发送({{ times }})</span>
					</view>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;"></div>
				</li>
				</view>
				
				
			</ul>
		</div>
		<br>
		<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
		<button style="background-color: #3C7AD8;color: #FFFFFF; width: 90%;" @click="save()">确定</button>
		<br>
		</view>
		</div>
</template>

<script>
	export default {
		data() {
			return {
				name: null,
				code: null,
				times: 60,
				show: true,
				userUrl: '/sys/user/sendEamilCode',
				emlCode: '/sys/user/GetEamilCode'
			}
		},
		methods: {
			getCode() {

				let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
				 if (this.name == "" || this.name == null) {
					this.$tip.alert("邮箱不能为空");
					return false;
				}
				/*if (!checkEmail.test(this.name)) {
					this.$tip.alert('请输入正确的邮箱地址');
					return false
				} */

				this.$http.get(this.userUrl, {
					params: {
						email: this.name
					}
				}).then(res => {
					console.log(res)
					if (res.data!="0"&&res.data!=0) {
						this.$tip.success('发送成功!')
						this.times = 60;
						this.show = false
						this.timer = setInterval(() => {
							this.times--
							if (this.times === 0) {
								this.show = true
								clearInterval(this.timer)
							}
						}, 1000)
					} else {
						this.$tip.alert('发送失败!')
					}

				}).catch(err => {
					console.log(err);
				});

			},
			save() {
				// this.$router.push({
				// 	name: 'wagesdetail'
				// });
				if (this.name == "" || this.name == null) {
					this.$tip.alert("邮箱不能为空");
					return false;
				}
				if (this.code == null || this.code == "") {
					this.$tip.alert("验证码不能为空");
					return false;
				}

				this.$http.get(this.emlCode, {
					params: {
						email: this.name,
						emailCode: this.code
					}
				}).then(res => {
					console.log(res)
					if (res.data == "ok"||res.data ==ok) {
						this.$router.push({
							name: 'wagesdetails'
						});
						
					}else{
						this.$tip.alert('邮箱或验证码错误!')
					}

				}).catch(err => {
					console.log(err);
				});
			}

		}
	}
</script>

<style>
	.dt{
		background-color: #FFFFFF;
		width: 90%;
		margin: 0 auto;
		margin-top: 20px;
		
	}
	.top {
		background-color: #5677AC;
		width: 100%;
		height: 40px;

	}

	ul li {
		list-style-type: none;

	}

	/* .img {
		width: 25px;
		height: 25px;
		background-size: 100% 100%;
	} */
	
	.img{
		width: 25px;
		height: 25px;
		background-size:100% 100%; 
	}
	.imgs{
		width: 20px;
		height: 20px;
		background-size:100% 100%; 
	}
</style>