Browse Source

feat(user): 添加登录状态检查并重构用户页面

- 在用户页面添加登录状态检查功能
- 重构用户页面区分登录/未登录状态显示
- 添加统一的登录验证方法checkLoginAndNavigate
- 优化退出登录逻辑,清除更多本地存储数据
- 在登录页面添加头像选择调试日志
- 修复OSS配置URL缺少斜杠的问题
master
前端-胡立永 1 month ago
parent
commit
219dda73d8
3 changed files with 128 additions and 55 deletions
  1. +1
    -1
      config.js
  2. +6
    -2
      pages/login/index.vue
  3. +121
    -52
      pages/user/index.vue

+ 1
- 1
config.js View File

@ -26,7 +26,7 @@ const config = {
const defaultConfig = { const defaultConfig = {
mapKey : 'XMBBZ-BCPCV-SXPPQ-5Y7MY-PHZXK-YFFVU', mapKey : 'XMBBZ-BCPCV-SXPPQ-5Y7MY-PHZXK-YFFVU',
aliOss : { aliOss : {
url : 'https://image.hhlm1688.com',
url : 'https://image.hhlm1688.com/',
config : { config : {
//桶的地址 //桶的地址
region: 'oss-cn-shenzhen', region: 'oss-cn-shenzhen',


+ 6
- 2
pages/login/index.vue View File

@ -12,8 +12,11 @@
<view class="se-mx-40 se-py-100"> <view class="se-mx-40 se-py-100">
<view class="se-b-t se-b-b se-flex se-h-140 se-lh-140 se-flex-h-sb"> <view class="se-b-t se-b-b se-flex se-h-140 se-lh-140 se-flex-h-sb">
<text>头像</text> <text>头像</text>
<button class="se-w-100 se-h-100 se-p-0 se-m-0" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image v-if="imagUrl" class="se-w-100 se-h-100" :src="imagUrl"></image>
<button class="se-w-100 se-h-100 se-p-0 se-m-0"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar">
<image v-if="imagUrl" class="se-w-100 se-h-100"
:src="imagUrl"></image>
<image v-else class="se-w-100 se-h-100" src="@/static/image/header.png" mode=""></image> <image v-else class="se-w-100 se-h-100" src="@/static/image/header.png" mode=""></image>
</button> </button>
@ -65,6 +68,7 @@
this.nameUser = event.target.value this.nameUser = event.target.value
}, },
onChooseAvatar(res) { onChooseAvatar(res) {
console.log(res);
let self = this let self = this
self.$Oss.ossUpload(res.target.avatarUrl).then(url => { self.$Oss.ossUpload(res.target.avatarUrl).then(url => {
self.imagUrl = url self.imagUrl = url


+ 121
- 52
pages/user/index.vue View File

@ -1,8 +1,9 @@
<template> <template>
<view class="u-page"> <view class="u-page">
<view class="se-pt-30 se-pb-60 se-px-40 se-bgc-green se-c-white se-pos">
<!-- 已登录状态 -->
<view v-if="isLoggedIn" class="se-pt-30 se-pb-60 se-px-40 se-bgc-green se-c-white se-pos">
<view class="se-flex"> <view class="se-flex">
<image @click="onHead" :src="user.headImage" class="se-br-p-50 se-bgc-f9 se-w-120 se-h-120" mode="">
<image @click="onHead" :src="userInfo.headImage" class="se-br-p-50 se-bgc-f9 se-w-120 se-h-120" mode="">
</image> </image>
<view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs"> <view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs">
<view class="se-flex" style="align-items: center;"> <view class="se-flex" style="align-items: center;">
@ -17,12 +18,6 @@
padding: 4rpx 10rpx;"> padding: 4rpx 10rpx;">
{{vipInfo.title}} {{vipInfo.title}}
</view> </view>
<!-- <view class="se-flex se-flex-ai-c se-ml-20">
<image class="se-a-25 se-mr-10" src="@/static/image/pencil.png" mode=""></image>
<text class="se-fs-22">修改资料</text>
</view> -->
</view> </view>
<view class="se-fs-24 se-display-ib" v-if="userInfo.phone"> <view class="se-fs-24 se-display-ib" v-if="userInfo.phone">
<text>手机号:</text> <text>手机号:</text>
@ -30,6 +25,21 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 未登录状态 -->
<view v-else class="se-pt-30 se-pb-60 se-px-40 se-bgc-green se-c-white se-pos">
<view class="se-flex se-flex-v-c se-flex-h-c se-py-60">
<view class="se-ta-c">
<image class="se-w-120 se-h-120 se-br-p-50 se-bgc-f9" src="@/static/image/header.png" mode=""></image>
<view class="se-mt-20 se-fs-30 se-fw-6">未登录</view>
<view class="se-mt-10 se-fs-24">登录后享受更多服务</view>
<view @click="goToLogin" class="se-mt-30 se-br-40 se-bgc-white se-c-green se-py-15 se-px-40 se-fs-28 se-fw-6">
立即登录
</view>
</view>
</view>
</view>
<!-- <view class="se-pos-cb se-flex se-flex-h-sb se-w-vw-82 se-br-10 se-bgc-white se-py-30 se-px-20" <!-- <view class="se-pos-cb se-flex se-flex-h-sb se-w-vw-82 se-br-10 se-bgc-white se-py-30 se-px-20"
style="bottom: -90rpx;"> style="bottom: -90rpx;">
<view class="se-flex se-flex-v-c se-flex-1"> <view class="se-flex se-flex-v-c se-flex-1">
@ -57,35 +67,40 @@
</view> </view>
</view> </view>
</view> --> </view> -->
</view>
<view class="se-m-30 se-mt-30 se-pl-30 se-pr-20 se-br-20 se-bgc-white"> <view class="se-m-30 se-mt-30 se-pl-30 se-pr-20 se-br-20 se-bgc-white">
<!-- <view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onBrokerAccount">
<view class="se-flex se-flex-ai-c">
<image class="se-a-30" src="@/static/image/home4734.png" mode=""></image>
<text class="se-ml-20 se-fs-24 se-fw-5">经纪人账号</text>
</view>
<view class="se-flex se-flex-ai-c">
<uv-icon name="arrow-right"></uv-icon>
</view>
</view>
<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onLandlord">
<view class="se-flex se-flex-ai-c">
<image class="se-a-30" src="@/static/image/home4734.png" mode=""></image>
<text class="se-ml-20 se-fs-24 se-fw-5">房东中心</text>
</view>
<view class="se-flex se-flex-ai-c">
<uv-icon name="arrow-right"></uv-icon>
</view>
</view>
<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onBrokerCenter">
<view class="se-flex se-flex-ai-c">
<image class="se-a-30" src="@/static/image/47100.png" mode=""></image>
<text class="se-ml-20 se-fs-24 se-fw-5">经纪人中心</text>
<!-- 需要登录的功能 -->
<template v-if="isLoggedIn">
<!-- <view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onBrokerAccount">
<view class="se-flex se-flex-ai-c">
<image class="se-a-30" src="@/static/image/home4734.png" mode=""></image>
<text class="se-ml-20 se-fs-24 se-fw-5">经纪人账号</text>
</view>
<view class="se-flex se-flex-ai-c">
<uv-icon name="arrow-right"></uv-icon>
</view>
</view> </view>
<view class="se-flex se-flex-ai-c">
<uv-icon name="arrow-right"></uv-icon>
<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onLandlord">
<view class="se-flex se-flex-ai-c">
<image class="se-a-30" src="@/static/image/home4734.png" mode=""></image>
<text class="se-ml-20 se-fs-24 se-fw-5">房东中心</text>
</view>
<view class="se-flex se-flex-ai-c">
<uv-icon name="arrow-right"></uv-icon>
</view>
</view> </view>
</view> -->
<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onBrokerCenter">
<view class="se-flex se-flex-ai-c">
<image class="se-a-30" src="@/static/image/47100.png" mode=""></image>
<text class="se-ml-20 se-fs-24 se-fw-5">经纪人中心</text>
</view>
<view class="se-flex se-flex-ai-c">
<uv-icon name="arrow-right"></uv-icon>
</view>
</view> -->
</template>
<!-- 通用功能 -->
<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onCustomerService"> <view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onCustomerService">
<view class="se-flex se-flex-ai-c"> <view class="se-flex se-flex-ai-c">
<image class="se-a-30" src="@/static/image/user49384.png" mode=""></image> <image class="se-a-30" src="@/static/image/user49384.png" mode=""></image>
@ -104,7 +119,9 @@
<uv-icon name="arrow-right"></uv-icon> <uv-icon name="arrow-right"></uv-icon>
</view> </view>
</view> </view>
<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-t" @click="onLogOut">
<!-- 退出登录按钮 - 仅登录时显示 -->
<view v-if="isLoggedIn" class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-t" @click="onLogOut">
<view class="se-flex se-flex-ai-c"> <view class="se-flex se-flex-ai-c">
<text class="se-fs-24 se-fw-5">退出登录</text> <text class="se-fs-24 se-fw-5">退出登录</text>
</view> </view>
@ -117,36 +134,74 @@
</template> </template>
<script> <script>
import configList from '@/mixins/configList.js'
export default { export default {
mixins: [configList],
data() { data() {
return {}
return {
token: '',
}
},
computed: {
//
isLoggedIn() {
return this.token && this.token.length > 0
}
}, },
onLoad() { onLoad() {
this.checkLoginStatus()
}, },
onShow() { onShow() {
this.$store.commit('getUserInfo')
this.checkLoginStatus()
if (this.isLoggedIn) {
this.$store.commit('getUserInfo')
}
}, },
methods: { methods: {
//
checkLoginStatus() {
this.token = uni.getStorageSync('token') || ''
},
//
goToLogin() {
uni.navigateTo({
url: "/pages/auth/index"
})
},
//
onHead() { onHead() {
if (!this.isLoggedIn) {
this.goToLogin()
return
}
uni.navigateTo({ uni.navigateTo({
url: "/pages/login/index?back=" + 1 url: "/pages/login/index?back=" + 1
}) })
}, },
openMemberPage() {
//
checkLoginAndNavigate(url, title = '该功能') {
if (!this.isLoggedIn) {
uni.showToast({
title: title + '需要登录',
icon: 'none'
})
setTimeout(() => {
this.goToLogin()
}, 1500)
return
}
uni.navigateTo({ uni.navigateTo({
url: "/pages_subpack/member/index"
url: url
}) })
}, },
openMemberPage() {
this.checkLoginAndNavigate("/pages_subpack/member/index", "会员中心")
},
onLandlord() { onLandlord() {
uni.navigateTo({
url: "/pages_subpack/landlord-center/index"
})
this.checkLoginAndNavigate("/pages_subpack/landlord-center/index", "房东中心")
}, },
onBrokerCenter() { onBrokerCenter() {
uni.navigateTo({
url: "/pages_subpack/broker-center/index"
})
this.checkLoginAndNavigate("/pages_subpack/broker-center/index", "经纪人中心")
}, },
onVersion() { onVersion() {
uni.navigateTo({ uni.navigateTo({
@ -154,11 +209,16 @@
}) })
}, },
onBrokerAccount() { onBrokerAccount() {
uni.navigateTo({
url: "/pages_subpack/broker-account/index"
})
this.checkLoginAndNavigate("/pages_subpack/broker-account/index", "经纪人账号")
}, },
onLogOut() { onLogOut() {
if (!this.isLoggedIn) {
uni.showToast({
title: '您还未登录',
icon: 'none'
})
return
}
uni.showModal({ uni.showModal({
title: "温馨提示", title: "温馨提示",
content: "确定退出当前登录", content: "确定退出当前登录",
@ -170,13 +230,22 @@
uni.removeStorageSync("userInfo") uni.removeStorageSync("userInfo")
uni.removeStorageSync("token") uni.removeStorageSync("token")
uni.removeStorageSync("sessionKey") uni.removeStorageSync("sessionKey")
uni.navigateTo({
url: "/pages/auth/index"
uni.removeStorageSync("vipInfo")
//
this.token = ''
this.userInfo = {}
this.vipInfo = {}
uni.showToast({
title: '退出成功',
icon: 'success'
}) })
//
// uni.navigateTo({
// url: "/pages/auth/index"
// })
} }
} }
}) })
}, },
onCustomerService() { onCustomerService() {
let that = this let that = this


Loading…
Cancel
Save