web-retail-h5/pages/password/payPassword.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="$t('MN_F_28')"
					label-width="100px"
					prop="email"
					 style="display: flex;">
			<u-input v-model="emailObj.oldPassword" class="border-color"
												:placeholder="$t('w_0348')"
												 :password="true"
											   placeholder-class="place-class" />
																												  
		</u-form-item>
		<u-form-item :label="$t('MN_F_29')"
					label-width="100px"
					prop="email"
					 style="display: flex;">
			<u-input v-model="emailObj.payPassword" class="border-color"
												 :password="true"
												 :placeholder="$t('w_0048')"
											   placeholder-class="place-class" />
																												  
		</u-form-item>
		<u-form-item :label="$t('w_0050')"
					label-width="100px"
					prop="email"
					 style="display: flex;">
			<u-input v-model="emailObj.loginPassword" class="border-color"
			 :password="true"
												:placeholder="$t('w_0050')"
											   placeholder-class="place-class" />
																												  
		</u-form-item>
	 	</u-form>
	 </view>
	  <u-button class="btn"
	            shape="circle"
	            type="success"
				@click="upLoginPwd"
	        >{{$t('w_0035')}}</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: this.$t('w_0055'),
		disabled:false,
		time:60,
		yzmCheck:false,
		userInfo:'',
		emailObj: {
				oldPassword: '',
			   loginPassword: '',
			   payPassword: '',
		},
		rules: {
			oldPassword:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: this.$t('w_0346'),
					trigger: ["blur"],
				}
			],
			loginPassword:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: this.$t('w_0346'),
					trigger: ["blur"],
				}
			],
			payPassword:[
				{
					// 必填项
					required: true,
					// 提示内容（会出现在u-form-item内的底部）
					message: this.$t('w_0346'),
					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(this.$t('MY_WAL_49'))
					 uni.showToast({
					 	title: this.$t('MY_WAL_49'),
					 	icon: "none"
					 }); //弹出提示框
					this.setTimer(); //调用定时器方法
				}, 1000)
			}
		})  
	  },
	setTimer() {
		this.disabled = true
		let holdTime = 60; //定义变量并赋值
		this.getCodeText = this.$t('w_0347') + "(60)"
		//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
		//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
		this.time = setInterval(() => {
			if (holdTime <= 0) {
				this.disabled = false
				this.getCodeisWaiting = false;
				this.getCodeBtnColor = "#ffffff";
				this.getCodeText = this.$t('w_0055') 
				clearInterval(this.time); //清除该函数
				return; //返回前面
			}
			this.getCodeText = this.$t('w_0347') + "(" + holdTime + ")"
			holdTime--;
		}, 1000)
	}
  },
}
</script>

<style lang="scss" scoped>
	/deep/ uni-button:after{
		border: none;
	}
	/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;
	}
	/deep/ .u-form-item:nth-child(2){
		width: 670rpx;
	}
	.contents{
		background-color: #fff;
	}
	page{
		background-color: #f2f2f2;
	}
	/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>