fix: 优化未认证用户的体验 1. 修改登录成功后的状态判断逻辑 2. 隐藏未认证用户的错误提示 3. 优化页面跳转逻辑
This commit is contained in:
davy
parent
ec92a8b7ce
commit
a3d7f3002c
@ -151,27 +151,28 @@
|
||||
// 获取用户信息
|
||||
getUserInfoFun() {
|
||||
getUserInfo().then(res => {
|
||||
if (res.user && res.user.barId) {
|
||||
if (res.user) {
|
||||
this.userInfo = res.user
|
||||
uni.setStorageSync('userInfo', res.user)
|
||||
this.$emit('loginSuccess')
|
||||
} else {
|
||||
// 移除自动关闭弹窗的逻辑
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您还未认证门店，请先认证',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('确定')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration?openId=' + this.openId
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 如果没有barId，提示去认证
|
||||
if (!res.user.barId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您还未认证门店，请先认证',
|
||||
showCancel: true,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('确定')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration?openId=' + this.openId
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="page-content">
|
||||
<view v-if="userInfo" class="user-box flex" :style="{'padding-top': statusBaeHeight + 60 + 'px'}">
|
||||
<view v-if="userStatus === 'verified'" class="user-box flex" :style="{'padding-top': statusBaeHeight + 60 + 'px'}">
|
||||
<image v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-img"></image>
|
||||
<image v-else-if="barInfo.barLogo" :src="barInfo.barLogo" class="avatar-img"></image>
|
||||
<view v-else class="avatar-placeholder flex align-center justify-center">
|
||||
@ -17,7 +17,19 @@
|
||||
<image src="/static/default-avatar.svg" class="default-avatar"></image>
|
||||
</view>
|
||||
<view class="login-text flex align-center">
|
||||
<text style="color: #333333; font-size: 36rpx; margin-right: 12rpx;">{{loginText}}</text>
|
||||
<view class="flex-col status-text">
|
||||
<block v-if="userStatus === 'guest'">
|
||||
<text>登录/认证</text>
|
||||
</block>
|
||||
<block v-else-if="userStatus === 'unverified'">
|
||||
<text>您的门店未认证</text>
|
||||
<text>请点击认证门店信息</text>
|
||||
</block>
|
||||
<block v-else-if="userStatus === 'verifying'">
|
||||
<text>正在认证审核中</text>
|
||||
<text>请耐心等待</text>
|
||||
</block>
|
||||
</view>
|
||||
<text class="cuIcon-right" style="color: #999999; font-size: 32rpx;"></text>
|
||||
</view>
|
||||
</view>
|
||||
@ -125,19 +137,6 @@
|
||||
if (!this.barInfo || this.barInfo.authState === 0) return 'unverified' // 未认证
|
||||
if (this.barInfo.authState === 1) return 'verifying' // 认证中
|
||||
return 'verified' // 认证通过
|
||||
},
|
||||
// 登录/认证文字
|
||||
loginText() {
|
||||
switch (this.userStatus) {
|
||||
case 'guest':
|
||||
return '登录/认证'
|
||||
case 'unverified':
|
||||
return '您的门店还未认证，请点击认证门店信息'
|
||||
case 'verifying':
|
||||
return '您的门店正在认证中，请耐心等待'
|
||||
default:
|
||||
return '登录/认证'
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@ -424,6 +423,20 @@
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
margin-right: 12rpx;
|
||||
|
||||
text {
|
||||
color: #0B0E26;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,45 @@
|
||||
<template>
|
||||
<view class="activitypage">
|
||||
<!-- 已登录用户显示内容 -->
|
||||
<template v-if="userInfo">
|
||||
<!-- 主导航栏 -->
|
||||
<view class="main-nav">
|
||||
<view class="nav-item" :class="{'nav-active': tabCur == 0}" @tap="tabSelect" :data-id="0">
|
||||
累计活动
|
||||
<view class="nav-line" v-if="tabCur == 0"></view>
|
||||
</view>
|
||||
<view class="nav-item" :class="{'nav-active': tabCur == 1}" @tap="tabSelect" :data-id="1">
|
||||
啤酒币换购
|
||||
<view class="nav-line" v-if="tabCur == 1"></view>
|
||||
</view>
|
||||
<!-- 主导航栏 -->
|
||||
<view class="main-nav">
|
||||
<view class="nav-item" :class="{'nav-active': tabCur == 0}" @tap="tabSelect" :data-id="0">
|
||||
累计活动
|
||||
<view class="nav-line" v-if="tabCur == 0"></view>
|
||||
</view>
|
||||
<view class="nav-item" :class="{'nav-active': tabCur == 1}" @tap="tabSelect" :data-id="1">
|
||||
啤酒币换购
|
||||
<view class="nav-line" v-if="tabCur == 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态提示区域 -->
|
||||
<view class="status-tip" v-if="!isLoggedIn || userStatus !== 'verified'">
|
||||
<view class="flex-col status-text">
|
||||
<block v-if="userStatus === 'guest'">
|
||||
<text class="text-lg">暂无法查看信息</text>
|
||||
<text class="sub-text">您还没有登录，请登录后查看信息</text>
|
||||
<button class="login-btn" @click="toLogin">
|
||||
<image src="@/static/send-2.svg" class="btn-icon"></image>
|
||||
登录/认证
|
||||
</button>
|
||||
</block>
|
||||
<block v-else-if="userStatus === 'unverified'">
|
||||
<text class="text-lg">您的门店还未完成认证</text>
|
||||
<text class="sub-text">请点击认证门店信息</text>
|
||||
<button class="login-btn" @click="toLogin">
|
||||
<image src="@/static/send-2.svg" class="btn-icon"></image>
|
||||
去认证
|
||||
</button>
|
||||
</block>
|
||||
<block v-else-if="userStatus === 'verifying'">
|
||||
<text class="text-lg">正在认证审核中</text>
|
||||
<text class="sub-text">请耐心等待</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<template v-if="isLoggedIn && userStatus === 'verified'">
|
||||
<!-- 状态标签栏 -->
|
||||
<scroll-view scroll-x class="status-nav" :scroll-left="0">
|
||||
<view class="status-nav-content">
|
||||
@ -134,19 +160,6 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 未登录用户显示内容 -->
|
||||
<template v-else>
|
||||
<view class="flex justify-center align-center" style="height: 100vh;background-color: #FDFDFD;">
|
||||
<view class="flex-direction flex align-center">
|
||||
<text class="text-lg margin-top" style="color: #3D3D3D;font-weight: 600;;">暂无法查看信息</text>
|
||||
<text class="margin-top" style="color: #979797;font-size: 28rpx;">您还没有登录，请登录后查看信息</text>
|
||||
<button class="cu-btn margin-top" style="width: 306rpx;height: 88rpx;background-color: #4E63E0;font-family: Roboto;font-size: rpx;font-weight: 500;line-height: 20rpx;color: #FFFFFF;" @click="toLogin">
|
||||
<image src="@/static/send-2.svg" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;"></image>
|
||||
登录/认证</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 登录弹窗组件 -->
|
||||
<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
|
||||
</view>
|
||||
@ -155,6 +168,7 @@
|
||||
<script>
|
||||
import loginPopup from '@/components/loginPopup.vue';
|
||||
import { myJoinListApi, getMyExchangeOrder } from "@/api/user.js"
|
||||
import { getBarInfo } from "@/api/bar.js"
|
||||
export default {
|
||||
components: {
|
||||
loginPopup
|
||||
@ -163,6 +177,9 @@
|
||||
return {
|
||||
loading: true,
|
||||
userInfo: null, // 用户信息
|
||||
barInfo: null, // 门店信息
|
||||
isLoggedIn: false, // 登录状态
|
||||
isVerified: false, // 认证状态
|
||||
tabCur: 0, // 当前选中的标签页
|
||||
curTag: 0, // 累积活动当前选中的标签
|
||||
curCoinTag: 0, // 啤酒币换购当前选中的标签
|
||||
@ -183,6 +200,15 @@
|
||||
isRefreshing: false, // 是否正在刷新
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 用户状态
|
||||
userStatus() {
|
||||
if (!this.isLoggedIn) return 'guest' // 游客
|
||||
if (!this.barInfo || this.barInfo.authState === 0) return 'unverified' // 未认证
|
||||
if (this.barInfo.authState === 1) return 'verifying' // 认证中
|
||||
return 'verified' // 认证通过
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.initData()
|
||||
},
|
||||
@ -190,58 +216,196 @@
|
||||
this.checkUserInfo()
|
||||
},
|
||||
methods: {
|
||||
// 检查登录状态
|
||||
async checkLoginStatus() {
|
||||
try {
|
||||
const token = uni.getStorageSync('token')
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
// 检查token和userInfo是否有效
|
||||
if (!token || token.startsWith('temp_') || !userInfo) {
|
||||
this.isLoggedIn = false
|
||||
this.isVerified = false
|
||||
this.userInfo = null
|
||||
this.barInfo = null
|
||||
return false
|
||||
}
|
||||
|
||||
this.isLoggedIn = true
|
||||
this.userInfo = userInfo
|
||||
|
||||
// 获取门店信息
|
||||
await this.getBarInfoFun()
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('检查登录状态失败:', error)
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
// 获取门店信息
|
||||
async getBarInfoFun() {
|
||||
console.log('【getBarInfoFun】开始获取门店信息')
|
||||
console.log('【getBarInfoFun】当前登录状态:', this.isLoggedIn)
|
||||
|
||||
if (!this.isLoggedIn) {
|
||||
console.log('【getBarInfoFun】用户未登录，不获取门店信息')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('【getBarInfoFun】调用getBarInfo接口')
|
||||
const res = await getBarInfo()
|
||||
console.log('【getBarInfoFun】接口返回数据:', res)
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
console.log('【getBarInfoFun】获取门店信息成功')
|
||||
console.log('【getBarInfoFun】门店信息:', res.data)
|
||||
console.log('【getBarInfoFun】认证状态(authState):', res.data.authState)
|
||||
|
||||
this.barInfo = res.data
|
||||
this.isVerified = res.data.authState === 2 // 2表示认证通过
|
||||
console.log('【getBarInfoFun】更新后的认证状态(isVerified):', this.isVerified)
|
||||
|
||||
uni.setStorageSync('barInfo', res.data)
|
||||
console.log('【getBarInfoFun】门店信息已存储到本地')
|
||||
} else {
|
||||
console.log('【getBarInfoFun】获取门店信息失败，接口返回异常')
|
||||
this.isVerified = false
|
||||
this.barInfo = null
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('【getBarInfoFun】获取门店信息出错:', error)
|
||||
this.isVerified = false
|
||||
this.barInfo = null
|
||||
// 只在已认证状态下显示错误提示
|
||||
if (this.userStatus === 'verified') {
|
||||
uni.showToast({
|
||||
title: '获取门店信息失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
console.log('【getBarInfoFun】方法执行完成')
|
||||
console.log('【getBarInfoFun】最终状态 - barInfo:', this.barInfo)
|
||||
console.log('【getBarInfoFun】最终状态 - isVerified:', this.isVerified)
|
||||
console.log('【getBarInfoFun】当前userStatus:', this.userStatus)
|
||||
},
|
||||
|
||||
// 初始化数据
|
||||
async initData() {
|
||||
try {
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
if (this.userInfo) {
|
||||
this.loading = false
|
||||
this.loading = true
|
||||
const isLoggedIn = await this.checkLoginStatus()
|
||||
|
||||
if (isLoggedIn) {
|
||||
await this.getMyJoinList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化数据失败:', error)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
// 只在已认证状态下显示错误提示
|
||||
if (this.userStatus === 'verified') {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 检查用户信息变化
|
||||
async checkUserInfo() {
|
||||
try {
|
||||
const newToken = uni.getStorageSync('token')
|
||||
const newUserInfo = uni.getStorageSync('userInfo')
|
||||
if (newUserInfo !== this.userInfo) {
|
||||
this.userInfo = newUserInfo
|
||||
if (this.userInfo) {
|
||||
this.loading = false
|
||||
|
||||
// 检查token和userInfo是否有变化
|
||||
if (newToken !== this.userInfo?.token ||
|
||||
JSON.stringify(newUserInfo) !== JSON.stringify(this.userInfo)) {
|
||||
|
||||
this.loading = true
|
||||
const isLoggedIn = await this.checkLoginStatus()
|
||||
|
||||
if (isLoggedIn) {
|
||||
await this.getMyJoinList()
|
||||
} else {
|
||||
this.myJoinList = []
|
||||
this.myExchangeOrder = []
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查用户信息失败:', error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 登录成功回调
|
||||
async loginSuccess() {
|
||||
try {
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
if (this.userInfo) {
|
||||
this.loading = false
|
||||
await this.getMyJoinList()
|
||||
console.log('【loginSuccess】开始处理登录成功')
|
||||
this.loading = true
|
||||
|
||||
// 获取token和openId
|
||||
const token = uni.getStorageSync('token')
|
||||
const openId = uni.getStorageSync('openId')
|
||||
console.log('【loginSuccess】获取到的token:', token)
|
||||
console.log('【loginSuccess】获取到的openId:', openId)
|
||||
|
||||
if (token && openId) {
|
||||
// 更新登录状态
|
||||
this.isLoggedIn = true
|
||||
this.userInfo = {
|
||||
token,
|
||||
openId
|
||||
}
|
||||
console.log('【loginSuccess】更新登录状态:', this.isLoggedIn)
|
||||
|
||||
// 获取门店信息
|
||||
await this.getBarInfoFun()
|
||||
|
||||
// 重置页面状态
|
||||
this.queryForm.pageNum = 1
|
||||
this.orderQuery.pageNum = 1
|
||||
this.myJoinList = []
|
||||
this.myExchangeOrder = []
|
||||
|
||||
// 重新加载数据
|
||||
if (this.userStatus === 'verified') {
|
||||
await this.getMyJoinList()
|
||||
}
|
||||
} else {
|
||||
console.log('【loginSuccess】token或openId不存在')
|
||||
this.isLoggedIn = false
|
||||
this.userInfo = null
|
||||
this.barInfo = null
|
||||
this.isVerified = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登录成功处理失败:', error)
|
||||
uni.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('【loginSuccess】登录成功处理失败:', error)
|
||||
// 只在已认证状态下显示错误提示
|
||||
if (this.userStatus === 'verified') {
|
||||
uni.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 获取我的兑换订单
|
||||
async getMyExchangeOrderFun() {
|
||||
// 如果用户未认证，直接返回
|
||||
if (this.userStatus !== 'verified') {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.isLoading) return
|
||||
|
||||
try {
|
||||
@ -258,10 +422,13 @@
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取兑换订单失败:', error)
|
||||
uni.showToast({
|
||||
title: '获取订单失败',
|
||||
icon: 'none'
|
||||
})
|
||||
// 只在已认证状态下显示错误提示
|
||||
if (this.userStatus === 'verified') {
|
||||
uni.showToast({
|
||||
title: '获取订单失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
@ -286,6 +453,11 @@
|
||||
|
||||
// 获取我参与的活动列表
|
||||
async getMyJoinList() {
|
||||
// 如果用户未认证，直接返回
|
||||
if (this.userStatus !== 'verified') {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.isLoading) return
|
||||
|
||||
try {
|
||||
@ -330,10 +502,13 @@
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取活动列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '获取活动列表失败',
|
||||
icon: 'none'
|
||||
})
|
||||
// 只在已认证状态下显示错误提示
|
||||
if (this.userStatus === 'verified') {
|
||||
uni.showToast({
|
||||
title: '获取活动列表失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
}
|
||||
@ -429,7 +604,16 @@
|
||||
|
||||
// 跳转登录
|
||||
toLogin() {
|
||||
this.$refs.loginRef.open()
|
||||
// 如果是未认证状态，直接跳转到认证页面
|
||||
if (this.userStatus === 'unverified') {
|
||||
const openId = uni.getStorageSync('openId')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/registration?openId=' + openId
|
||||
})
|
||||
} else {
|
||||
// 其他状态打开登录弹窗
|
||||
this.$refs.loginRef.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -646,6 +830,55 @@
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
position: fixed;
|
||||
top: 88rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FDFDFD;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.status-text {
|
||||
text-align: center;
|
||||
|
||||
.text-lg {
|
||||
color: #3D3D3D;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
color: #979797;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 306rpx;
|
||||
height: 88rpx;
|
||||
background-color: #4E63E0;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 44rpx;
|
||||
|
||||
.btn-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.word-all {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user