web-base-h5/pages/password/payPassword.vue

263 lines
5.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @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>
: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>