移动端登录
This commit is contained in:
Paidax
@@ -164,9 +164,128 @@ layout("/mobile/platform.html"){
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.pwd_popup {
|
||||
width: 96%;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.menu_item_name {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.card {
|
||||
/*border: 1px solid #007bff;*/
|
||||
/*background: #fff;*/
|
||||
border-radius: 8px;
|
||||
/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.card-content {
|
||||
padding: 30px;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: #555;
|
||||
font-size: 16px;
|
||||
}
|
||||
input[type="password"],
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.3s;
|
||||
height: 40px;
|
||||
}
|
||||
input[type="password"]:focus,
|
||||
input[type="text"]:focus {
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
}
|
||||
button {
|
||||
background-color: #e0f0ff;
|
||||
color: #000;
|
||||
border: 1px solid #007bff;
|
||||
padding: 12px;
|
||||
font-weight: bold;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #87c4ed;
|
||||
}
|
||||
.note {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
padding: 30px;
|
||||
}
|
||||
.note ul {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.note li {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.card.modify-password {
|
||||
flex: 7;
|
||||
}
|
||||
.card.note {
|
||||
flex: 3;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #007bff;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-content h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.toggle-password {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 70%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 26px;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
@@ -182,6 +301,10 @@ layout("/mobile/platform.html"){
|
||||
<!--应用窗格-->
|
||||
<van-row class="first module">
|
||||
<div class="menu" style="border-radius: 10px">
|
||||
<div @click="updatePwd" class="menu_item">
|
||||
<img src="/assets/mobile/img/home/1民主管理.jpg" alt="" class="menu_item_img" />
|
||||
<span class="menu_item_name">修改密码</span>
|
||||
</div>
|
||||
<div @click="switchModuleMenus(item)" v-for="item in moduleMenus" class="menu_item">
|
||||
<img :src="CREATE_PREVIEW_URL(item.iconClass)" alt="" class="menu_item_img" />
|
||||
<span class="menu_item_name">{{item.moduleName}}</span>
|
||||
@@ -318,6 +441,39 @@ layout("/mobile/platform.html"){
|
||||
<mobile-sign-points></mobile-sign-points>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="updatePwdShow" class="pwd_popup">
|
||||
<div class="card modify-password">
|
||||
<div class="card-content">
|
||||
<h2>修改密码</h2>
|
||||
<form id="password-form">
|
||||
<div class="form-group">
|
||||
<label for="current-password">当前密码</label>
|
||||
<input type="password" id="current-password" name="current-password" maxlength="20" v-model="formData.sourcePwd" />
|
||||
<span class="toggle-password" data-target="current-password">🔒</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">新密码</label>
|
||||
<input type="password" id="new-password" name="new-password" maxlength="20" v-model="formData.newPwd" @blur="checkPwd" />
|
||||
<span class="toggle-password" data-target="new-password">🔒</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirm-password">确认新密码</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-password"
|
||||
name="confirm-password"
|
||||
maxlength="20"
|
||||
v-model="formData.confirmPwd"
|
||||
@blur="checkConfirmPwd"
|
||||
/>
|
||||
<span class="toggle-password" data-target="confirm-password">🔒</span>
|
||||
</div>
|
||||
</form>
|
||||
<button @click="updatePwdSubmit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-tabbar v-model="active" @change="tabbrChange">
|
||||
<van-tabbar-item icon="home-o" name="home">首页</van-tabbar-item>
|
||||
<van-tabbar-item :dot="needCount" icon="envelop-o" name="handle">我的办理</van-tabbar-item>
|
||||
@@ -353,10 +509,63 @@ layout("/mobile/platform.html"){
|
||||
integralViewData: [],
|
||||
totalIntegral: null,
|
||||
yearList: [],
|
||||
monthList: []
|
||||
monthList: [],
|
||||
|
||||
// 修改密码相关
|
||||
updatePwdShow: false,
|
||||
formData: {
|
||||
sourcePwd: "",
|
||||
newPwd: "",
|
||||
confirmPwd: ""
|
||||
},
|
||||
errorInfo: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updatePwd() {
|
||||
this.updatePwdShow = true
|
||||
},
|
||||
async updatePwdSubmit() {
|
||||
const resp = await $.post("/mobile/login/updatePwd", this.formData)
|
||||
if (resp.code === 0) {
|
||||
this.$toast("修改成功")
|
||||
this.updatePwdShow = false
|
||||
} else {
|
||||
this.$toast(resp.msg)
|
||||
}
|
||||
},
|
||||
checkPwd() {
|
||||
if (!this.formData.newPwd) {
|
||||
this.errorInfo = "请输入新密码"
|
||||
this.$toast("请输入新密码")
|
||||
return
|
||||
}
|
||||
if (this.formData.newPwd.length < 6) {
|
||||
this.errorInfo = "密码长度不能小于6位数"
|
||||
this.$toast("密码长度不能小于6位数")
|
||||
return
|
||||
}
|
||||
this.errorInfo = ""
|
||||
},
|
||||
checkConfirmPwd() {
|
||||
// 检验输入是否大于6位数
|
||||
if (!this.formData.confirmPwd) {
|
||||
this.errorInfo = "请输入确认新密码"
|
||||
this.$toast("请输入确认新密码")
|
||||
return
|
||||
}
|
||||
if (this.formData.confirmPwd.length < 6) {
|
||||
this.errorInfo = "密码长度不能小于6位数"
|
||||
this.$toast("密码长度不能小于6位数")
|
||||
return
|
||||
}
|
||||
if (this.formData.newPwd !== this.formData.confirmPwd) {
|
||||
this.errorInfo = "新密码与确认新密码不一致"
|
||||
this.$toast("新密码与确认新密码不一致")
|
||||
return
|
||||
}
|
||||
this.errorInfo = ""
|
||||
},
|
||||
switchModuleMenus(item) {
|
||||
this.clickMenu = item
|
||||
this.clickIndex = 2
|
||||
|
||||
Reference in New Issue
Block a user