<template>
|
<el-container class="user-center">
|
<el-header class="user-header">
|
<home-header></home-header>
|
</el-header>
|
<div class="usercot">
|
<el-container class="main-wrapper">
|
<el-aside width="178px">
|
<menu-box></menu-box>
|
</el-aside>
|
<el-main>
|
<div data-v-5d396ccb class="user-center-title"
|
style="text-align: left;margin: 15px 10px 10px 10px;">
|
<span data-v-5d396ccb class="iconfont icon-you"
|
style="color: rgb(193, 24, 21); font-size: 18px; margin-right: 10px;"></span>
|
修改密码
|
</div>
|
<div class="wrapper yhk-cont">
|
<div class="box page-part transaction">
|
|
<div class="box-contain clearfix">
|
<div class="img-cont">
|
<div class="box-img"></div>
|
</div>
|
<div class="auth-box">
|
<el-form :hide-required-asterisk='true' :model="form" label-width="100px"
|
ref="ruleForm" :rules="rule" class="demo-form-inline">
|
<el-form-item prop="oldPwd">
|
<el-input type='password' class="chongzhi-input" v-model="form.oldPwd"
|
placeholder="请输入旧密码">
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="newPsd">
|
<el-input type='password' class="chongzhi-input" v-model="form.newPsd"
|
placeholder="请输入新密码">
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="newPsdQr">
|
<el-input type='password' class="chongzhi-input" v-model="form.newPsdQr"
|
placeholder="请再次输入新密码">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" :loading="isloading" @click="submit('ruleForm')">修改
|
</el-button>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
<!-- <home-footer :siteInfo="siteInfo"></home-footer> -->
|
</el-main>
|
</el-container>
|
</div>
|
</el-container>
|
|
</template>
|
|
<script>
|
import HomeHeader from '../../../../components/HeaderOrder'
|
import HomeFooter from '../../../../components/Footer'
|
import MenuBox from '../menu'
|
import * as api from '../../../../axios/api'
|
|
export default {
|
components: {
|
HomeHeader,
|
HomeFooter,
|
MenuBox
|
},
|
props: {},
|
data() {
|
// let validatePass = (rule, value, callback) => {
|
// if (value === '') {
|
// callback(new Error('请输入银行卡号'))
|
// } else {
|
// let myreg = /^([1-9]{1})(\d{14,18})$/ // 卡号校验
|
// if (!myreg.test(value)) {
|
// callback(new Error('请输入正确的银行卡号'))
|
// }
|
// callback()
|
// }
|
// }
|
return {
|
hasAuth: false,
|
isloading: false,
|
form: {
|
oldPwd: '',
|
newPsd: '',
|
newPsdQr: ''
|
},
|
rule: {
|
newPsd: [{
|
required: true,
|
message: '请输入密码',
|
trigger: 'blur'
|
},
|
{
|
min: 6,
|
message: '密码最少为6位数',
|
trigger: 'blur'
|
}
|
]
|
}
|
}
|
},
|
watch: {},
|
computed: {},
|
created() { },
|
mounted() {
|
this.$store.state.userMenu = '2-11'
|
},
|
methods: {
|
submit(formName) {
|
if (this.form.newPsd !== this.form.newPsdQr) {
|
this.$message.error('两次密码不一致')
|
return
|
}
|
// 提交
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
// 修改密码
|
let opts = {
|
oldPwd: this.form.oldPwd,
|
newPwd: this.form.newPsd
|
}
|
let data = await api.changePassword(opts)
|
if (data.status === 0) {
|
this.$message.success(data.msg)
|
} else {
|
this.$message.error(data.msg)
|
}
|
} else {
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
/deep/ .el-input__inner {
|
border-radius: 50px;
|
}
|
|
|
.wrapper .demo-form-inline[data-v-62d7d9d4] {
|
margin: 0;
|
}
|
|
.wrapper[data-v-62d7d9d4] {
|
padding: 0;
|
}
|
|
.transaction {
|
width: 100%;
|
}
|
|
.wrapper .demo-form-inline[data-v-62d7d9d4] {
|
width: 90%;
|
}
|
|
.wrapper .auth-box .dialog-footer[data-v-62d7d9d4] {
|
width: 90%;
|
margin: 0;
|
}
|
|
.wrapper .auth-box .dialog-footer .el-button[data-v-62d7d9d4] {
|
width: 89%;
|
border-radius: 50px;
|
}
|
|
.red-bg {
|
|
.yhk-cont {
|
|
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.img-cont {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.box-img {
|
|
width: 100px;
|
height: 100px;
|
background: url("../../../../assets/image/suo2.png") no-repeat center center;
|
}
|
}
|
|
|
.yhk-list {
|
padding: 30px;
|
width: 100%;
|
margin: 0 60px;
|
border-bottom: 1px solid #ccc;
|
}
|
}
|
|
.yanzeng-cont {
|
|
display: flex;
|
|
.tongguo,
|
.renzheng {
|
border-radius: 3px;
|
padding: 2px 5px;
|
display: inline-block;
|
background-color: rgb(4, 130, 62);
|
margin: 0 5px;
|
color: #fff;
|
}
|
|
.renzheng {
|
background-color: rgb(230, 0, 62);
|
}
|
|
.yanzeng-left {
|
height: 60px;
|
width: 60px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.yanzeng-right {
|
margin-left: 10px;
|
}
|
|
.yanzeng-right>div {
|
margin-bottom: 20px;
|
// margin-left: 10px;
|
}
|
|
.zfz {
|
display: flex;
|
|
.fan {
|
margin-left: 30px;
|
}
|
}
|
}
|
|
.youyi {
|
color: #000;
|
}
|
|
.chongzhi-bizhi {
|
.right {
|
width: 106px;
|
height: 134px;
|
|
background: url("../../../../assets/image/youqingtishi1.png") no-repeat;
|
}
|
|
margin-top: 50px;
|
|
background-color: #e5e5e5;
|
display: flex;
|
padding: 40px;
|
justify-content: space-between;
|
|
.chongzhi-bizhi-cont .chongzhi-item {
|
margin: 15px 0;
|
color: #000;
|
|
.circle {
|
display: inline-block;
|
width: 15px;
|
text-align: center;
|
height: 15px;
|
border: 1px solid rgb(121, 121, 121);
|
border-radius: 50%;
|
line-height: 15px;
|
}
|
}
|
}
|
|
.chongzhi-cont {
|
position: relative;
|
|
.left {
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.xianshi-cont {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.chongzhi-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.chongzhi-type {
|
display: flex;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
|
.chongzhi-type-item {
|
margin-right: 20px;
|
}
|
}
|
|
.chongzhi-type>span {
|
display: inline-block;
|
width: 85px;
|
}
|
|
.chongzhi-btn-cont {
|
display: flex;
|
justify-content: center;
|
margin-top: 10px;
|
|
.chongzhi-btn {
|
width: 80%;
|
border-radius: 50px;
|
text-align: center;
|
height: 40px;
|
background-color: #c11815;
|
color: #fff;
|
line-height: 40px;
|
font-size: 14px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
margin-top: 20px;
|
}
|
}
|
|
.chongzhi-input {
|
display: flex;
|
align-items: center;
|
width: 90%;
|
background: none;
|
}
|
|
.chongzhi-input>span {
|
display: inline-block;
|
width: 100px;
|
}
|
}
|
}
|
|
.black-bg {
|
.yhk-cont {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.img-cont {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.box-img {
|
|
width: 100px;
|
height: 100px;
|
background: url("../../../../assets/image/suo.png") no-repeat center center;
|
}
|
}
|
|
|
.yhk-list {
|
padding: 30px;
|
width: 100%;
|
margin: 0 60px;
|
border-bottom: 1px solid #383838;
|
}
|
}
|
|
.el-button--primary {
|
border: none;
|
background-color: rgb(2, 77, 161) !important;
|
}
|
|
.yanzeng-cont {
|
display: flex;
|
|
.tongguo,
|
.renzheng {
|
padding: 2px 5px;
|
display: inline-block;
|
background-color: rgb(4, 130, 62);
|
border-radius: 2px;
|
margin: 0 5px;
|
}
|
|
.renzheng {
|
background-color: rgb(230, 0, 62);
|
}
|
|
.yanzeng-left {
|
height: 60px;
|
width: 60px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.yanzeng-right {
|
margin-left: 10px;
|
}
|
|
.yanzeng-right>div {
|
margin-bottom: 20px;
|
// margin-left: 10px;
|
}
|
|
.zfz {
|
display: flex;
|
|
.fan {
|
margin-left: 30px;
|
}
|
}
|
}
|
|
.youyi {
|
color: #fff;
|
}
|
|
.chongzhi-bizhi {
|
.right {
|
width: 106px;
|
height: 134px;
|
|
background: url("../../../../assets/image/youqingtishi.png") no-repeat;
|
}
|
|
margin-top: 50px;
|
|
background-color: #191e2b;
|
display: flex;
|
padding: 40px;
|
justify-content: space-between;
|
|
.chongzhi-bizhi-cont .chongzhi-item {
|
margin: 15px 0;
|
color: #7e8086;
|
|
.circle {
|
display: inline-block;
|
width: 15px;
|
text-align: center;
|
height: 15px;
|
border: 1px solid rgb(121, 121, 121);
|
border-radius: 50%;
|
line-height: 15px;
|
}
|
}
|
}
|
|
.chongzhi-cont {
|
position: relative;
|
|
.left {
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.xianshi-cont {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.chongzhi-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.chongzhi-type {
|
display: flex;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
|
.chongzhi-type-item {
|
margin-right: 20px;
|
}
|
}
|
|
.chongzhi-type>span {
|
display: inline-block;
|
width: 85px;
|
}
|
|
.chongzhi-btn-cont {
|
display: flex;
|
justify-content: center;
|
margin-top: 10px;
|
|
.chongzhi-btn {
|
width: 80%;
|
border-radius: 50px;
|
text-align: center;
|
height: 40px;
|
background-color: #c11815;
|
color: #fff;
|
line-height: 40px;
|
font-size: 14px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
margin-top: 20px;
|
}
|
}
|
|
.chongzhi-input {
|
display: flex;
|
align-items: center;
|
width: 90%;
|
background: none;
|
}
|
|
.chongzhi-input>span {
|
display: inline-block;
|
width: 100px;
|
}
|
}
|
}
|
|
|
|
|
.code {
|
font-size: 12px;
|
color: #999;
|
}
|
|
.auth-box {
|
margin-top: 20px;
|
|
.el-row {
|
margin-bottom: 10px;
|
}
|
}
|
|
.authed-box {
|
.el-row {
|
padding-top: 40px;
|
width: 400px;
|
margin: 0 auto;
|
}
|
}
|
|
.wrapper {
|
padding: 40px 100px 80px 0;
|
|
.demo-form-inline {
|
width: 400px;
|
margin: 20px auto;
|
}
|
|
.auth-box {
|
.dialog-footer {
|
width: 400px;
|
margin: 0 auto;
|
|
.el-button {
|
margin-left: 100px;
|
width: 300px;
|
}
|
}
|
}
|
|
.prompt-box {
|
padding-bottom: 20px;
|
color: #f44336;
|
|
p {
|
line-height: 24px;
|
}
|
}
|
|
.rule-box {
|
margin-top: 30px;
|
line-height: 26px;
|
margin-left: 120px;
|
}
|
}
|
</style>
|
