CBB3/pages/user/userinfo/security/mobileFind.vue

<template>
	<view class="app">
		
		<view class="check-user fx-r fx-ac fx-bc">
			<view class="user-icon fx-h fx-bc fx-ac">
				<image src="/static/img/wall-idcard.png" mode="widthFix"></image>
				<view class="text">身份验证</view>
			</view>
			
			<view class="check-hr"></view>
			
			<view class="user-icon fx-h fx-bc fx-ac">
				<image src="/static/img/wall-message-btn.png" mode="widthFix"></image>
				<view class="text">短信验证</view>
			</view>
		</view>  
		
		<view class="info-line">
			<view class="il-top">
				<text>验证码</text>
			</view>
			<view class="il-code">
				<input placeholder="原手机验证码" type="number" v-model="verify_code" />
				<view class="ilc-btn" v-if="verifyCount == 0" @click="getverifyPhone">获取验证码</view>
				<view class="ilc-no-show" v-else>{{verifyCount}} s</view>
			</view>
		</view>
		
		<view class="sub-info" @tap="formSubmit">完成</view>
		
	</view>
</template>


<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		computed: mapState(['user']),
		data() {
			return {
				verifyCount: 0,
				verify_code: ""
				
			}
		},
		onLoad(options) {	
		},
		methods: {
			getverifyPhone: function() {
				if (this.verifyCount > 0) return;
				uni.showLoading({
					title: "获取中..."
				});
				this
					.request
					.post("userYzm", { type: "payment"})
					.then(res => {
						console.log(res);
						uni.hideLoading();
						if (res.code == 200) {
							if (res.data.status == 2) {
								this.utils.CountDowm(res.data.time, (e, s) => {
									this.verifyCount = e;
								});
							}
			
							if (res.data.status == 1) {
								this.utils.CountDowm(120, (e, s) => {
									this.verifyCount = e;
								});
							}
			
						} else {
							this.utils.showAlert({
								title: res.msg,
								mask: true,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						this.utils.showAlert({
							title: '获取失败',
							mask: true,
							icon: 'none'
						});
						uni.hideLoading();
					});
			},
			
			formSubmit:function(){
				if(!this.utils.isDefine(this.verify_code)){
					this.utils.Tip("请输入验证码");
					return;
				}
				
				this.utils.loadIng("提交中..")
				this
					.request
					.post("paymentCkYzm",{verify_code:this.verify_code})
					.then(res=>{
						uni.hideLoading();
						console.log(res);
						if(res.code == 200) {
							uni.redirectTo({ url:"./newPass?token=" +res.data.token});
						}else{
							this.utils.Tip(res.msg);
						}
					}).catch(()=>{
						this.utils.Tip("网络错误，请稍后尝试");
					});
			}
			
			
		},
	}
</script>


<style>
	.check-user{padding: 20px;}
	.check-user .user-icon{width: 50%;}
	.check-user image{width: 40px;}
	.check-user .text{font-size: 12px;margin-top: 10px;}
	.idcar-info{padding:20px 15px;background: #fff;}
	.idcar-info .label{width: 100px;}
	.idcar-info input{width: calc(100% - 100px);font-size: 14px;}
	.sub-info{width:calc(100% - 40px);margin-left: 20px;text-align: center;height:40px;line-height: 40px; background:#db292b;border-radius:20px;font-size:15px;font-weight:500;color:#ffffff;margin-top: 50px;}
	.check-hr{width: 20%;border-top: 1px dashed #ccc;height: 1px;position: absolute;}
	.info-line {height: 80px;padding: 0 15px;background-color: #fff;border-top: 1px #f5f5f5 solid;}
	.il-top { color: #db292b;font-size: 14px;margin-top: 10px;}
	.il-code {display: flex;align-items: center;margin-top: 10px;}
	.il-code input {width: 50%;height: 100%;font-size: 13px;}
	.ilc-btn {width: 90px;height: 30px;text-align: center;line-height: 30px;margin-left: auto;font-size: 12px;background: #db292b;color: #fff;border-radius: 100px;}
	.ilc-no-show {width: 90px;height: 30px;text-align: center;line-height: 30px;margin-left: auto;font-size: 12px;background: #eee;color: #999;border-radius: 100px;}
</style>