You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

212 lines
5.3 KiB
Vue

<template>
<view class="container">
<view class="info-item" v-if="hasPassword == 'Y'">
<view class="contacts">
<text class="name">旧密码</text>
<input class="weui-input value" type="password" disabled="true" @click="inputPassword(1)" v-model="passwordOld" placeholder="请输入旧密码"/>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">新密码</text>
<input class="weui-input value" type="password" disabled="true" @click="inputPassword(2)" v-model="password" placeholder="请输入新密码"/>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">新密码确认</text>
<input class="weui-input value" type="password" disabled="true" @click="inputPassword(3)" v-model="passwordCopy" placeholder="请输入新密码确认"/>
</view>
</view>
<!-- 底部操作按钮 -->
<view class="footer-fixed">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" @click="doSubmit()"></view>
</view>
</view>
<!-- 设置密码对话框 -->
<key-words :mix="true" :title="title" :show_key="showPass" :price="0" @closeFuc="closeFuc" @getPassword="getPassword"></key-words>
</view>
</template>
<script>
import * as UserApi from '@/api/user'
import store from '@/store'
import keyWords from "@/components/bian-keywords/index.vue"
export default {
components: {
keyWords
},
data() {
return {
//当前页面参数
options: {},
// 正在加载
isLoading: false,
userInfo: {},
qrCode: "",
title: "",
showPass: false,
popType: 1,
password: "",
passwordCopy: "",
passwordOld: "",
hasPassword: ""
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.hasPassword = options.hasPassword;
},
methods: {
// 关闭密码对话框
closeFuc() {
this.showPass = false;
},
// 输入密码
inputPassword(type) {
if (type == 1) {
this.title = "请输入旧密码";
} else if (type == 2) {
this.title = "请输入新密码";
} else {
this.title = "请输入新密码确认";
}
this.popType = type;
this.showPass = true;
},
// 获取输入的密码
getPassword(password) {
if (this.popType == 1) {
this.passwordOld = password.password;
} else if (this.popType == 2) {
this.password = password.password;
} else {
this.passwordCopy = password.password;
}
this.closeFuc();
},
// 提交保存
doSubmit() {
const app = this;
app.isLoading = true;
if (app.hasPassword == 'Y' && (!app.password || !app.passwordOld)) {
return false;
}
if (app.password != app.passwordCopy) {
app.$error('新密码输入不一致!');
return false;
}
UserApi.save({"password": app.password, "passwordOld": app.passwordOld})
.then(result => {
app.isLoading = false;
if (result.code == 200) {
app.$success('保存成功!');
} else {
app.$error(result.message ? result.message : '保存失败!');
}
}).catch(err => {
app.isLoading = false;
})
}
}
}
</script>
<style lang="scss" scoped>
.info-list {
padding-bottom: 30rpx;
margin-top: 30rpx;
}
// 项目内容
.info-item {
margin: 20rpx auto 20rpx auto;
padding: 30rpx 40rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
.avatar-warp {
line-height: 120rpx;
}
}
.contacts {
font-size: 30rpx;
height: 40rpx;
.name {
margin-left: 0px;
float: left;
margin-right: 10rpx;
line-height: 40rpx;
}
.value {
float:right;
color:#999999;
text-align: right;
.second {
margin-left: .6rem;
}
}
.vcode {
float: left;
line-height: 40rpx;
}
.password {
text-align: right;
float: left;
padding-right: 5rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 120rpx;
border: solid 1px #cccccc;
float: right;
}
}
// 底部操作栏
.footer-fixed {
z-index: 11;
box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
margin-top: 80rpx;
.btn-wrapper {
height: 100%;
display: flex;
text-align: center;
align-items: center;
padding: 0 30rpx;
margin-bottom: 10rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
border-radius: 40rpx;
}
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
}
.btn-item-back {
margin-top: 20rpx;
background: #FFFFFF;
border: 1px solid $fuint-theme;
color: #666666;
}
}
</style>