注销账号，账号安全页面功能开发
This commit is contained in:
fengerli
@ -59,4 +59,21 @@ export function forgetPassword(data) {
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改密码
|
||||
export function updatePassword(data) {
|
||||
return request({
|
||||
url: '/app/userCenter/updatePassword',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 用户注销
|
||||
export function cancelAccount(data) {
|
||||
return request({
|
||||
url: '/app/userCenter/cancelAccount',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
21
pages.json
21
pages.json
@ -72,6 +72,27 @@
|
||||
"navigationBarTitleText": "关于我们"
|
||||
}
|
||||
},
|
||||
// 账号安全
|
||||
{
|
||||
"path": "pages/common/account/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "账户安全"
|
||||
}
|
||||
},
|
||||
// 注销账号
|
||||
{
|
||||
"path": "pages/common/account/deleteAccount/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "注销账号"
|
||||
}
|
||||
},
|
||||
// 修改密码
|
||||
{
|
||||
"path": "pages/common/account/changepassword/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改密码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/6170/deviceControl/index",
|
||||
"style": {
|
||||
|
||||
145
pages/common/account/changepassword/index.vue
Normal file
145
pages/common/account/changepassword/index.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="pageContent">
|
||||
<view class="content">
|
||||
<view class='ver_item'>
|
||||
<input type="password" v-model="password" placeholder="请输入密码" class="input" />
|
||||
</view>
|
||||
<view class='ver_item'>
|
||||
<input type="password" v-model="surePassword" placeholder="请输入确认密码" class="input" />
|
||||
</view>
|
||||
<button class="login-btn" @click="handleLogin">
|
||||
确认
|
||||
</button>
|
||||
</view>
|
||||
<!-- 成功提示弹框 -->
|
||||
<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage"
|
||||
icon="/static/images/common/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
|
||||
@confirm="onPopupConfirm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
|
||||
import md5 from 'blueimp-md5'
|
||||
import {
|
||||
updatePassword
|
||||
} from '@/api/common/login.js';
|
||||
export default {
|
||||
components: {
|
||||
CustomPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
password: "",
|
||||
surePassword: "",
|
||||
showPopupFlag: false,
|
||||
popupTitle: '',
|
||||
popupMessage: '修改成功！',
|
||||
popupConfirmText: '确认',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 确认
|
||||
async handleLogin() {
|
||||
if (!this.password.trim()) {
|
||||
return uni.showToast({
|
||||
title: "请输入密码",
|
||||
icon: "none",
|
||||
duration: 1500
|
||||
});
|
||||
return false
|
||||
}
|
||||
if (!this.surePassword.trim()) {
|
||||
return uni.showToast({
|
||||
title: "请输入确认密码",
|
||||
icon: "none",
|
||||
duration: 1500
|
||||
});
|
||||
return false
|
||||
}
|
||||
if (this.password.trim() !== this.surePassword.trim()) {
|
||||
return uni.showToast({
|
||||
title: "两次密码输入不一致",
|
||||
icon: "none",
|
||||
duration: 1500
|
||||
});
|
||||
return false
|
||||
}
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
// 调用忘记密码接口
|
||||
const res = await updatePassword({
|
||||
password: md5(this.password)
|
||||
})
|
||||
if (res.code == 200) {
|
||||
uni.hideLoading()
|
||||
this.showPopupFlag = true
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: error.msg || '登录失败',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
// 确认
|
||||
onPopupConfirm(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pageContent {
|
||||
background-color: rgb(18, 18, 18);
|
||||
height: 100vh;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.content_con {
|
||||
position: absolute;
|
||||
top: 220rpx;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
left: 30rpx;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
height: 80rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.ver_item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.switch-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.switch-login {
|
||||
color: rgb(187, 230, 0);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 200rpx;
|
||||
background-color: rgb(187, 230, 0);
|
||||
color: rgb(35, 35, 35);
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
</style>
|
||||
122
pages/common/account/deleteAccount/index.vue
Normal file
122
pages/common/account/deleteAccount/index.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="cancel-account-page">
|
||||
<view class="content">
|
||||
<view class="warning-icon">
|
||||
<text class="icon-text">!</text>
|
||||
</view>
|
||||
|
||||
<view class="tip-text">
|
||||
注销账号后账号将永久失效且不可恢复，并将放弃以下权益与服务
|
||||
</view>
|
||||
<view class="rights-list">
|
||||
<view class="right-item">1. 账号将无法登录；</view>
|
||||
<view class="right-item">2. 设备数据将全部清除；</view>
|
||||
<view class="right-item">3. 个人资料等内容永久失效；</view>
|
||||
</view>
|
||||
|
||||
<!-- 确认注销按钮 -->
|
||||
<button class="confirm-btn" @click="confirmBtn">确认注销</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
cancelAccount
|
||||
} from '@/api/common/login.js'
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
confirmBtn() {
|
||||
let data = {}
|
||||
cancelAccount(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '注销成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/login/index'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.cancel-account-page {
|
||||
background: rgba(18, 18, 18, 1);
|
||||
min-height: 94vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60rpx 30rpx;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: rgba(224, 52, 52, 1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
color: #333;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
color: #fff;
|
||||
font-size: 27rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
padding: 40rpx 60rpx;
|
||||
line-height: 40rpx;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.rights-list {
|
||||
width: 100%;
|
||||
background: rgba(26, 26, 26, 1);
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.right-item {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.right-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 80%;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
border-radius: 91px;
|
||||
background: rgba(224, 52, 52, 1);
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
85
pages/common/account/index.vue
Normal file
85
pages/common/account/index.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="pageContent">
|
||||
<view class="content">
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" @click="changePassword">
|
||||
<text class="title">修改登录密码</text>
|
||||
<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
|
||||
</view>
|
||||
<view class="menu-item" @click="deleteAccount">
|
||||
<view class="title">注销账号</view>
|
||||
<view class="menu_zx"> 注销后无法恢复，请谨慎操作</view>
|
||||
<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
// 修改密码
|
||||
changePassword() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/account/changepassword/index'
|
||||
})
|
||||
},
|
||||
// 注销账号
|
||||
deleteAccount() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/account/deleteAccount/index'
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pageContent {
|
||||
background-color: rgb(18, 18, 18);
|
||||
height: 100vh;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
font-size: 32rpx;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid rgba(255, 255, 255, 0.04);
|
||||
align-items: center;
|
||||
background: rgba(26, 26, 26, 1);
|
||||
position: relative;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 20rpx;
|
||||
padding-top: -8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.uniIcon {
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.user-right {
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.menu_zx {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 28rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@ -66,8 +66,8 @@
|
||||
data() {
|
||||
return {
|
||||
showView: false,
|
||||
phone: '13800138002', //手机号码
|
||||
code: "123456", //验证码
|
||||
phone: '', //手机号码
|
||||
code: "", //验证码
|
||||
password: '', //密码
|
||||
agreed: false,
|
||||
isCounting: false,
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
data() {
|
||||
return {
|
||||
showView: false,
|
||||
phone: '13800138006', //手机号码
|
||||
phone: '', //手机号码
|
||||
code: "", //验证码
|
||||
password: '', //密码
|
||||
agreed: false,
|
||||
|
||||
@ -27,6 +27,11 @@
|
||||
<text class="title">关于我们</text>
|
||||
<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
|
||||
</view>
|
||||
<view class="menu-item" @click="account">
|
||||
<image src="/static/images/common/wm.png" class="icon"></image>
|
||||
<text class="title">账号安全</text>
|
||||
<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
|
||||
</view>
|
||||
<view class="btn_footer">
|
||||
<button class="logout" @click="logout">退出登录</button>
|
||||
</view>
|
||||
@ -110,6 +115,12 @@
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/aboutUs/index'
|
||||
})
|
||||
},
|
||||
// 账户安全
|
||||
account(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/account/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user