web-store-retail-h5/pages/password/payPassword.vue

<template>
  <view class="main">
	 <view class="contents">
	 	<u-form ref="uForm" :model="emailObj"
	 	        class="paddings"
	 	        labelWidth="auto">
		<u-form-item :label="'旧密码'"
					label-width="100px"
					prop="email"
					 style="display: flex;">
			<u-input v-model="emailObj.oldPassword" class="border-color"
												:placeholder="'请输入旧密码'"
												 :password="true"
											   placeholder-class="place-class" />
																												  
		</u-form-item>
		<u-form-item :label="'新密码'"
					label-width="100px"
					prop="email"
					 style="display: flex;">
			<u-input v-model="emailObj.payPassword" class="border-color"
												 :password="true"
												 :placeholder="'请输入新密码'"
											   placeholder-class="place-class" />
																												  
		</u-form-item>
		<u-form-item :label="'请确认密码'"
					label-width="100px"
					prop="email"
					 style="display: flex;">
			<u-input v-model="emailObj.loginPassword" class="border-color"
			 :password="true"
												:placeholder="'请确认密码'"
											   placeholder-class="place-class" />
																												  
		</u-form-item>
	 	</u-form>
	 </view>
	  <u-button class="btn"
	            shape="circle"
	            type="success"
				@click="upLoginPwd"
	        >{{'确定'}}</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'
export default {
  data() {
    return {
		getCodeText: '获取验证码',
		disabled:false,
		time:60,
		yzmCheck:false,
		userInfo:'',
		emailObj: {
				oldPassword: '',
			   loginPassword: '',
			   payPassword: '',
		},
		rules: {
			oldPassword:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: '密码不能为空',
					trigger: ["blur"],
				}
			],
			loginPassword:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: '密码不能为空',
					trigger: ["blur"],
				}
			],
			payPassword:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: '密码不能为空',
					trigger: ["blur"],
				}
			],
			}
    }
  },
  onLoad(option) {
  },
  onReady() {
  	 this.$refs.uForm.setRules(this.rules);
  },
  methods: {
	  upLoginPwd(index) {
	        if (this.emailObj.payPassword != this.emailObj.loginPassword) {
						uni.showToast({
							title: '密码不一致',
							icon: 'none',
							duration: 1500,
						})
						return
	        }

					let data = JSON.parse(JSON.stringify(this.emailObj))

					delete data.loginPassword
	  
	        // loginObj
	        api.updatePassword(data).then((res) => {
	          if (res.code == '200') {
				   uni.showToast({
					title: res.msg,
					icon: "none"
				   }); 
				   setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/userSecure/index'
						})
				   },2000)
	          }else{
				  uni.showToast({
					title: res.msg,
					icon: "none"
				  }); 
			  }
	        })
	      },
	  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: #005BAC;
		border: none;
		height: 92rpx;
		line-height: 92rpx;
		font-size:30rpx;
		margin: 40rpx auto;
		width: 690rpx;
	}
</style>