342 lines
9.1 KiB
Vue
342 lines
9.1 KiB
Vue
|
<template>
|
|||
|
|
<view class="home">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="top-div">
|
|||
|
|
<image src="../../static/images/yonghu.png"></image>
|
|||
|
|
<view class="top-right">
|
|||
|
|
<view class="top-name">
|
|||
|
|
<view style="margin-right: 30rpx;font-weight: bold;">{{userName}}</view>
|
|||
|
|
<view>{{phone}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="yy-list">
|
|||
|
|
<view class="yy-one" v-for="(item,index) in myApp" :key="index">
|
|||
|
|
<view class="yy-img">
|
|||
|
|
<image :src="item.base64Url"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="yy-name">{{item.appName}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-bar" @click="restPwd">
|
|||
|
|
<image src="../../static/images/edit.png"></image>
|
|||
|
|
<view>修改密码</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-bar" @click="logout1()">
|
|||
|
|
<image src="../../static/images/logout.png"></image>
|
|||
|
|
<view>退出登录</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-bar" @click="deleteUser1()">
|
|||
|
|
<image src="../../static/images/zhuxiao.png"></image>
|
|||
|
|
<view>注销账号</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view>
|
|||
|
|
<!-- 普通弹窗 -->
|
|||
|
|
<uni-popup ref="popup" background-color="#fff">
|
|||
|
|
<view style="text-align: center;font-size: 40rpx;padding-top: 30rpx;">密码修改</view>
|
|||
|
|
<view class="popup-content">
|
|||
|
|
<u--form :model="restForm" ref="uForm3" :rules="rules3" labelWidth="60">
|
|||
|
|
<u-form-item label="新密码" prop="password">
|
|||
|
|
<u-input class="login-input" :type="isOpen?'text':'password'" placeholder="请输入密码" prefixIcon="lock"
|
|||
|
|
v-model="restForm.password" save="false" autocomplete="new-password">
|
|||
|
|
<template slot="suffix">
|
|||
|
|
<image @click="isOpen=!isOpen"
|
|||
|
|
style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
|
|||
|
|
:src="isOpen?'../../static/images/design_ic_visibility.png':'../../static/images/design_ic_visibility_off.png'">
|
|||
|
|
</image>
|
|||
|
|
</template>
|
|||
|
|
</u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label="再次确认" prop="passwordA">
|
|||
|
|
<u-input class="login-input" :type="isOpen2?'text':'password'" placeholder="请再次输入密码" prefixIcon="lock"
|
|||
|
|
v-model="restForm.passwordA" save="false" autocomplete="new-password">
|
|||
|
|
<template slot="suffix">
|
|||
|
|
<image @click="isOpen2=!isOpen2"
|
|||
|
|
style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
|
|||
|
|
:src="isOpen2?'../../static/images/design_ic_visibility.png':'../../static/images/design_ic_visibility_off.png'">
|
|||
|
|
</image>
|
|||
|
|
</template>
|
|||
|
|
</u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<view style="color: red;line-height: 30rpx;font-size: 24rpx;padding-top: 20rpx;">
|
|||
|
|
注：密码必须至少包含一个大写字母、一个小写字母、一个数字和一个特殊符号，并且长度在8到16个字符之间
|
|||
|
|
</view>
|
|||
|
|
<view style="display: flex;">
|
|||
|
|
<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;color: black;"
|
|||
|
|
@click="closePwd" color="#d0d2d5">退出</u-button>
|
|||
|
|
<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;" @click="submit"
|
|||
|
|
color="#00367a">确认</u-button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</u--form>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<!-- 普通弹窗 -->
|
|||
|
|
<uni-popup ref="popup2" background-color="#fff">
|
|||
|
|
<view>
|
|||
|
|
<view style="width: 400rpx;height: 140rpx;padding: 40rpx;">
|
|||
|
|
<view style="font-size: 24rpx;margin-bottom: 10rpx;">
|
|||
|
|
确定要退出登录吗？
|
|||
|
|
</view>
|
|||
|
|
<view style="display: flex;">
|
|||
|
|
<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;color: black;"
|
|||
|
|
@click="closePwd" color="#d0d2d5">取消</u-button>
|
|||
|
|
<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;" @click="logout"
|
|||
|
|
color="#00367a">确定</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<!-- 普通弹窗 -->
|
|||
|
|
<uni-popup ref="popup3" background-color="#fff">
|
|||
|
|
<view>
|
|||
|
|
<view style="width: 400rpx;height: 140rpx;padding: 40rpx;">
|
|||
|
|
<view style="font-size: 24rpx;margin-bottom: 10rpx;">
|
|||
|
|
确定要注销账号吗？
|
|||
|
|
</view>
|
|||
|
|
<view style="display: flex;">
|
|||
|
|
<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;color: black;"
|
|||
|
|
@click="closePwd" color="#d0d2d5">取消</u-button>
|
|||
|
|
<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;" @click="deleteUser"
|
|||
|
|
color="#00367a">确定</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
<u-toast ref="uToast"></u-toast>
|
|||
|
|
<m-tabbar fixed fill :current="3" :tabbar="tabbar"></m-tabbar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import TabbarConfig from '@/totalTabbar.js'
|
|||
|
|
import {
|
|||
|
|
getMyAppByUser,
|
|||
|
|
updatePwdByApp
|
|||
|
|
} from "@/api/index.js"
|
|||
|
|
|
|||
|
|
import {setDeleteUser,getDeleteUser} from "@/utils/auth.js"
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
const equalToPassword = (rule, value, callback) => {
|
|||
|
|
if (this.restForm.password !== value) {
|
|||
|
|
callback(new Error("两次输入的密码不一致"));
|
|||
|
|
} else {
|
|||
|
|
callback();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 密码校验 长度不能小于8位且不能大于16位字符,必须包含大写字母、小写字母、数字和特殊符号
|
|||
|
|
var ISPWD =
|
|||
|
|
/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,16}$/;
|
|||
|
|
// 密码校验
|
|||
|
|
const validatePassword = (rule, value, callback) => {
|
|||
|
|
if (!ISPWD.test(this.restForm.password)) {
|
|||
|
|
callback(new Error("用户密码必须包含大写字母、小写字母、数字和特殊符号"));
|
|||
|
|
} else {
|
|||
|
|
callback();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
tabbar: TabbarConfig,
|
|||
|
|
userName: this.$store.state.user.userName,
|
|||
|
|
phone: this.$store.state.user.phone,
|
|||
|
|
myApp: [],
|
|||
|
|
restForm: {
|
|||
|
|
password: "",
|
|||
|
|
passwordA: ""
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
rules3: {
|
|||
|
|
password: [{
|
|||
|
|
required: true,
|
|||
|
|
trigger: "blur",
|
|||
|
|
message: "请输入您的密码"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
min: 8,
|
|||
|
|
max: 16,
|
|||
|
|
message: '用户密码长度必须介于 8 和 16 之间',
|
|||
|
|
trigger: 'blur'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
validator: validatePassword,
|
|||
|
|
trigger: 'blur'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
passwordA: [{
|
|||
|
|
required: true,
|
|||
|
|
message: '请再次输入新密码',
|
|||
|
|
trigger: ['blur', 'change']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
validator: equalToPassword,
|
|||
|
|
trigger: "blur"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
isOpen:false,
|
|||
|
|
isOpen2:false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getMyAppByUser()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getMyAppByUser() {
|
|||
|
|
getMyAppByUser({}).then(response => {
|
|||
|
|
console.log(response);
|
|||
|
|
if (response.code == 200) {
|
|||
|
|
this.myApp = response.data
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast('获取我的应用失败');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
deleteUser1(){
|
|||
|
|
this.$refs.popup3.open("center")
|
|||
|
|
},
|
|||
|
|
deleteUser(){
|
|||
|
|
var user= getDeleteUser()||[]
|
|||
|
|
user.push(this.$store.state.user.phone)
|
|||
|
|
setDeleteUser(user)
|
|||
|
|
this.logout()
|
|||
|
|
},
|
|||
|
|
logout1() {
|
|||
|
|
this.$refs.popup2.open("center")
|
|||
|
|
},
|
|||
|
|
logout() {
|
|||
|
|
this.$store.dispatch('LogOut').then(res => {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: "/pages/login"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
restPwd() {
|
|||
|
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
|||
|
|
this.$refs.popup.open("center")
|
|||
|
|
},
|
|||
|
|
closePwd() {
|
|||
|
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
|||
|
|
this.$refs.popup.close("center")
|
|||
|
|
this.$refs.popup2.close("center")
|
|||
|
|
this.$refs.popup3.close("center")
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
let _this = this
|
|||
|
|
this.$refs.uForm3.validate().then(res => {
|
|||
|
|
let form = {
|
|||
|
|
id: this.$store.state.user.userId,
|
|||
|
|
pd: this.restForm.password
|
|||
|
|
}
|
|||
|
|
updatePwdByApp(form).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.closePwd()
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
type: 'success',
|
|||
|
|
message: "密码修改成功",
|
|||
|
|
})
|
|||
|
|
// setTimeout(_this.logout(), 50000);
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(res.msg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}).catch(errors => {
|
|||
|
|
// uni.$u.toast('校验失败')
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: #eef3fa !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-content {
|
|||
|
|
@include flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 15px;
|
|||
|
|
height: 480rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
max-width: 600rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.home {
|
|||
|
|
.top {
|
|||
|
|
background-color: white;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
padding-top: 50rpx;
|
|||
|
|
|
|||
|
|
.top-div {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 50rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-right {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
|
|||
|
|
.top-name {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yy-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: start;
|
|||
|
|
padding: 0 45rpx;
|
|||
|
|
|
|||
|
|
.yy-one {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
width: calc(100% / 3);
|
|||
|
|
height: 200rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
|
|||
|
|
.yy-img image {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center-bar {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
padding-left: 50rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|