Retired/pages/mine/edit-pwd.vue

57 lines
1.5 KiB
Vue

<template>
<!-- 我的/设置/修改密码 -->
<view class="edit-pwd wrap-card">
<u--input prefixIcon="lock-open" class="mb-20" v-model="form.oldPwd" placeholder="请输入旧密码"></u--input>
<u--input prefixIcon="lock" class="mb-20" v-model="form.newPwd" placeholder="请输入新密码"></u--input>
<u--input prefixIcon="checkbox-mark" class="mb-20" v-model="form.reNewPwd" placeholder="请输入确认密码"></u--input>
<!-- 底部操作 -->
<view class="wrap-bottom-bar">
<view class="bar-placeholder"></view>
<view class="bar-content">
<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="submit">确定</u-button>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
form:{
oldPwd:'',
newPwd:'',
reNewPwd:''
},
// 按钮配置
btnStyle: {
width: "90%",
height: "75rpx",
background: "linear-gradient(-45deg,#01906c,#34D399)",
color: "#FFFFFF",
fontSize: "30rpx",
},
}
},
computed:{
// 禁用按钮
disabled() {
return this.form.oldPwd === '' || this.form.newPwd === '' || this.form.reNewPwd === ''
}
},
methods:{
// 提交
submit() {
// 验证
if(this.form.oldPwd === '' || this.form.newPwd === '') return uni.$u.toast('请输入旧密码和新密码')
if(this.form.newPwd !== this.reNewPwd) return uni.$u.toast('两次密码不一致')
}
}
}
</script>
<style lang="scss" scoped>
.edit-pwd {
}
</style>