You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.5 KiB
109 lines
3.5 KiB
1 year ago
|
<template>
|
||
|
<view class="content passwordpage">
|
||
|
<uni-forms ref="form" :modelValue="formData" :rules="rules">
|
||
|
<uni-forms-item label="原密码" name="oldpassword" style="margin: 20rpx 0;">
|
||
|
<uni-easyinput type="password" v-model="formData.oldpassword" placeholder="请输入原来的密码" />
|
||
|
</uni-forms-item>
|
||
|
<uni-forms-item label="新密码" name="newpassword" style="border-bottom: 1px solid #eee;">
|
||
|
<uni-easyinput type="password" v-model="formData.newpassword" placeholder="请输入新密码" />
|
||
|
</uni-forms-item>
|
||
|
<uni-forms-item label="确认新密码" name="newpassword2">
|
||
|
<uni-easyinput type="password" v-model="formData.newpassword2" placeholder="请再次输入密码" />
|
||
|
</uni-forms-item>
|
||
|
</uni-forms>
|
||
|
<view class="new_btn_bot">
|
||
|
<button class="new_save_btn" @click="submit">确认修改</button>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import { updateUserPwd } from '@/api/request2.js';
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
// 表单数据
|
||
|
formData: {
|
||
|
oldpassword: '',
|
||
|
newpassword: '',
|
||
|
newpassword2:''
|
||
|
},
|
||
|
rules: {
|
||
|
oldpassword: {
|
||
|
rules: [{
|
||
|
required: true,
|
||
|
errorMessage: '请输入密码',
|
||
|
}
|
||
|
]
|
||
|
},
|
||
|
// 对name字段进行必填验证
|
||
|
newpassword: {
|
||
|
rules: [{
|
||
|
required: true,
|
||
|
errorMessage: '请输入密码',
|
||
|
},
|
||
|
{
|
||
|
minLength: 6,
|
||
|
maxLength: 20,
|
||
|
errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
|
||
|
}
|
||
|
]
|
||
|
},
|
||
|
// 对email字段进行必填验证
|
||
|
newpassword2: {
|
||
|
rules: [{
|
||
|
required: true,
|
||
|
errorMessage: '请输入密码',
|
||
|
},
|
||
|
{
|
||
|
minLength: 6,
|
||
|
maxLength: 20,
|
||
|
errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
|
||
|
},
|
||
|
{
|
||
|
validateFunction:function(rule,value,data,callback){
|
||
|
console.log(value !== data.newpassword)
|
||
|
if (value !== data.newpassword) {
|
||
|
callback('两次输入不同')
|
||
|
}
|
||
|
return true
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
/**
|
||
|
* 复写 binddata 方法,如果只是为了校验,无复杂自定义操作,可忽略此方法
|
||
|
* @param {String} name 字段名称
|
||
|
* @param {String} value 表单域的值
|
||
|
*/
|
||
|
// binddata(name,value){
|
||
|
// 通过 input 事件设置表单指定 name 的值
|
||
|
// this.$refs.form.setValue(name, value)
|
||
|
// },
|
||
|
// 触发提交表单
|
||
|
submit() {
|
||
|
this.$refs.form.validate().then(res=>{
|
||
|
console.log(res)
|
||
|
updateUserPwd(res.oldpassword,res.newpassword).then((ress)=>{
|
||
|
console.log('返回结果:', ress);
|
||
|
})
|
||
|
}).catch(err =>{
|
||
|
console.log('表单错误信息:', err);
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.content{
|
||
|
/* padding: 20rpx; */
|
||
|
/* background-color: #fff; */
|
||
|
}
|
||
|
|
||
|
</style>
|