feat: 添加退出登录与上传头像的逻辑
This commit is contained in:
parent
d38a578c05
commit
056ccd463e
@ -136,3 +136,12 @@ export function getWebUrlRequest(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
export function logoutRequest(data) {
|
||||
return request({
|
||||
url: '/v3/user/logout',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@ -56,9 +56,14 @@
|
||||
>切换环境</view
|
||||
>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<label for="changePhone">
|
||||
<view class="switch-account">切换账号</view>
|
||||
</label>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="switch-account !bg-red-500" @click="logout">退出</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="tips">因智能门锁与账号绑定,登录为手机号登录</view>
|
||||
@ -105,7 +110,7 @@
|
||||
import { useBasicStore } from '@/stores/basic'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useLockStore } from '@/stores/lock'
|
||||
import { phoneLoginRequest } from '@/api/user'
|
||||
import { phoneLoginRequest, logoutRequest } from '@/api/user'
|
||||
import env from '@/config/env'
|
||||
import { setStorage, getStorage, removeStorage } from '@/utils/storage'
|
||||
import { useNotificationStore } from '@/stores/notification'
|
||||
@ -260,6 +265,25 @@
|
||||
type
|
||||
}
|
||||
})
|
||||
},
|
||||
logout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定退出登录吗?',
|
||||
success: async res => {
|
||||
if (res.confirm) {
|
||||
await logoutRequest()
|
||||
removeStorage('token')
|
||||
removeStorage('openid')
|
||||
removeStorage('userInfo')
|
||||
removeStorage('lockList')
|
||||
this.routeJump({
|
||||
name: 'login',
|
||||
type: 'reLaunch'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -168,28 +168,27 @@
|
||||
}
|
||||
|
||||
.input-email {
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-left: 35rpx;
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 616rpx;
|
||||
padding-left: 32rpx;
|
||||
height: 108rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.button-verify {
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 265rpx;
|
||||
line-height: 108rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
height: 108rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
|
||||
background: #63b8af;
|
||||
font-size: 32rpx;
|
||||
line-height: 108rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #63b8af;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.view-top {
|
||||
@ -198,14 +197,14 @@
|
||||
}
|
||||
|
||||
.input-verify {
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-left: 35rpx;
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 316rpx;
|
||||
padding-left: 32rpx;
|
||||
height: 108rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
@ -216,15 +215,15 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
width: 680rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 96rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #63b8af;
|
||||
border-radius: 16rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -84,14 +84,14 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.input {
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-left: 35rpx;
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 616rpx;
|
||||
padding-left: 32rpx;
|
||||
height: 108rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
@ -102,15 +102,15 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
width: 680rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 96rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #63b8af;
|
||||
border-radius: 16rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -145,14 +145,14 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.input {
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-left: 35rpx;
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 616rpx;
|
||||
padding-left: 32rpx;
|
||||
height: 108rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
@ -163,23 +163,23 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
width: 680rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 96rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #63b8af;
|
||||
border-radius: 16rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.text-tips {
|
||||
text-align: center;
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #9b9b9b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.view-top {
|
||||
@ -188,27 +188,26 @@
|
||||
}
|
||||
|
||||
.input-verify {
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-left: 35rpx;
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 316rpx;
|
||||
padding-left: 32rpx;
|
||||
height: 108rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.button-verify {
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 265rpx;
|
||||
line-height: 108rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
height: 108rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
|
||||
background: #63b8af;
|
||||
font-size: 32rpx;
|
||||
line-height: 108rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #63b8af;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="view">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<label for="avatar">
|
||||
<view class="view-button">
|
||||
<view>头像</view>
|
||||
@ -14,6 +15,22 @@
|
||||
</view>
|
||||
</view>
|
||||
</label>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view @click="chooseImage">
|
||||
<view class="view-button">
|
||||
<view>头像</view>
|
||||
<view class="view-button" style="padding: 0">
|
||||
<image class="avatar" :src="userInfo.headUrl" mode="aspectFill"></image>
|
||||
<image
|
||||
class="icon-arrow"
|
||||
src="https://oss-lock.xhjcn.ltd/mp/icon_arrow.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="view-line"></view>
|
||||
<view class="view-button" @click="toUpdateName">
|
||||
<view>昵称</view>
|
||||
@ -146,13 +163,33 @@
|
||||
}
|
||||
this.pending = false
|
||||
},
|
||||
chooseImage() {
|
||||
const that = this
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['camera', 'album'],
|
||||
crop: {
|
||||
quality: 60,
|
||||
width: 108,
|
||||
height: 108
|
||||
},
|
||||
success: res => {
|
||||
const data = res.tempFiles[0]
|
||||
const list = data.path.split('/')
|
||||
const filename = list[list.length - 1]
|
||||
that.uploadRequest({
|
||||
...data,
|
||||
filename
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
chooseAvatar(e) {
|
||||
const that = this
|
||||
if (that.pending) {
|
||||
return
|
||||
}
|
||||
that.pending = true
|
||||
|
||||
const path = e.detail.avatarUrl
|
||||
const list = path.split('/')
|
||||
const filename = list[list.length - 1]
|
||||
@ -160,58 +197,65 @@
|
||||
filePath: path,
|
||||
async success(res) {
|
||||
const size = res.size
|
||||
const { code, data } = await getUploadParamsRequest({
|
||||
that.uploadRequest({
|
||||
size,
|
||||
module: 'avatar',
|
||||
userId: that.userInfo.userId,
|
||||
filename
|
||||
filename,
|
||||
path
|
||||
})
|
||||
if (code === 0) {
|
||||
uni.uploadFile({
|
||||
url: data.uploadUrl,
|
||||
filePath: path,
|
||||
name: 'file',
|
||||
formData: data.formData,
|
||||
async success() {
|
||||
const { code: updateCode } = await updateUserInfoRequest({
|
||||
headUrl: data.fileUrl
|
||||
})
|
||||
if (updateCode === 0) {
|
||||
that.updateUserInfo({
|
||||
...that.userInfo,
|
||||
headUrl: data.fileUrl
|
||||
})
|
||||
uni.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '头像更新失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
that.pending = false
|
||||
},
|
||||
fail(res) {
|
||||
console.log('上传失败', res)
|
||||
console.log(data.uploadUrl, path, data.formData)
|
||||
uni.showToast({
|
||||
title: '头像更新失败',
|
||||
icon: 'none'
|
||||
})
|
||||
that.pending = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async uploadRequest(params) {
|
||||
const that = this
|
||||
const { code, data } = await getUploadParamsRequest({
|
||||
size: params.size,
|
||||
module: 'avatar',
|
||||
userId: that.userInfo.userId,
|
||||
filename: params.filename
|
||||
})
|
||||
if (code === 0) {
|
||||
uni.uploadFile({
|
||||
url: data.uploadUrl,
|
||||
filePath: params.path,
|
||||
name: 'file',
|
||||
formData: data.formData,
|
||||
async success() {
|
||||
const { code: updateCode } = await updateUserInfoRequest({
|
||||
headUrl: data.fileUrl
|
||||
})
|
||||
} else {
|
||||
if (updateCode === 0) {
|
||||
that.updateUserInfo({
|
||||
...that.userInfo,
|
||||
headUrl: data.fileUrl
|
||||
})
|
||||
uni.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '头像更新失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
that.pending = false
|
||||
},
|
||||
fail(res) {
|
||||
console.log('上传失败', res)
|
||||
uni.showToast({
|
||||
title: '头像更新失败',
|
||||
icon: 'none'
|
||||
})
|
||||
that.pending = false
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '头像更新失败',
|
||||
icon: 'none'
|
||||
})
|
||||
that.pending = false
|
||||
}
|
||||
},
|
||||
toUpdateName() {
|
||||
this.routeJump({
|
||||
|
||||
@ -122,17 +122,16 @@
|
||||
}
|
||||
|
||||
.button-verify {
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 265rpx;
|
||||
line-height: 108rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
height: 108rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
|
||||
background: #63b8af;
|
||||
font-size: 32rpx;
|
||||
line-height: 108rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #63b8af;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.view-top {
|
||||
@ -141,14 +140,14 @@
|
||||
}
|
||||
|
||||
.input {
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
margin-left: 35rpx;
|
||||
margin-top: 48rpx;
|
||||
height: 108rpx;
|
||||
width: 316rpx;
|
||||
padding-left: 32rpx;
|
||||
height: 108rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-left: 32rpx;
|
||||
margin-top: 48rpx;
|
||||
margin-left: 35rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
@ -159,15 +158,15 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
width: 680rpx;
|
||||
height: 96rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-left: 35rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 96rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: #63b8af;
|
||||
border-radius: 16rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user