You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
8.8 KiB
329 lines
8.8 KiB
<template>
|
|
<view style="padding-bottom: 20px;">
|
|
<view class="top-user-bar">
|
|
<image class="top-bar-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image>
|
|
<view class="user-info">
|
|
<view class="avatar-btn" @click="toUserInfoPage">
|
|
<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="avatar-img"></image>
|
|
<image v-else src="@/static/images/avatar.png" class="avatar-img"></image>
|
|
</view>
|
|
|
|
<view class="user-info-text">
|
|
<text class="user-name" @click="toUserInfoPage">{{ userInfo.nickName || '未登录' }}</text>
|
|
<text class="user-card" v-if="cardNo">读者证：{{ cardNo }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="user-menu">
|
|
<view class="menu-item" @click="toCheckLogin('收藏')">
|
|
<image class="menu-icon" src="@/static/images/menu-sc.png" mode="scaleToFill" />
|
|
<text class="menu-txt">收藏</text>
|
|
</view>
|
|
<view class="menu-item" @click="toCheckLogin('借阅')">
|
|
<image class="menu-icon" src="@/static/images/menu-jy.png" mode="scaleToFill" />
|
|
<text class="menu-txt">借阅</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="submenu-box">
|
|
<view class="submenu-item" @click="toCheckLogin('我的留言')">
|
|
<uni-icons custom-prefix="iconfont" type="icon-liuyan" size="20"></uni-icons>
|
|
<text class="left-txt">我的留言</text>
|
|
</view>
|
|
<view class="submenu-item" @click="toUserInfoPage">
|
|
<uni-icons custom-prefix="iconfont" type="icon-shezhi" size="20"></uni-icons>
|
|
<text class="left-txt">个人资料</text>
|
|
</view>
|
|
<!-- <view class="submenu-item" @click="toCheckLogin('修改密码')">
|
|
<uni-icons custom-prefix="iconfont" type="icon-xiugai" size="20"></uni-icons>
|
|
<text class="left-txt">修改密码</text>
|
|
</view> -->
|
|
<view class="submenu-item" @click="toCheckLogin('解绑读者证')">
|
|
<uni-icons custom-prefix="iconfont" type="icon-UIsheji_menjinxitong-28" size="20"></uni-icons>
|
|
<text class="left-txt">解绑读者证</text>
|
|
</view>
|
|
<!-- <view v-if="isBindLibraryCard" class="submenu-item" @click="toLogOut()">
|
|
<uni-icons custom-prefix="iconfont" type="icon-tuichu" size="20"></uni-icons>
|
|
<text class="left-txt">退出账号</text>
|
|
</view> -->
|
|
</view>
|
|
|
|
<view>
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|
<uni-popup-dialog
|
|
type="info" cancelText="取消" confirmText="确定"
|
|
title="提示" content="请您绑定读者证!"
|
|
@confirm="dialogConfirm" @close="dialogClose">
|
|
</uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/utils/config'
|
|
import { FetchBindRead, FetchFindAllReaderByOpenId } from '@/api/user';
|
|
|
|
const USER_KEY = 'user-info';
|
|
const READLIST = 'reader-card-list';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
cardNo: "",
|
|
isBindLibraryCard: false,
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.loadUserInfo();
|
|
},
|
|
onShow() {
|
|
this.loadUserInfo();
|
|
},
|
|
methods:{
|
|
toUserInfoPage() {
|
|
uni.navigateTo({
|
|
url: '/subpkg/pages/user-info/user-info'
|
|
});
|
|
},
|
|
|
|
// 调用接口：头像+昵称 → 成功后统一保存缓存
|
|
async bindUserInfo(avatar, nickname) {
|
|
const openId = uni.getStorageSync('wx_login_code') || '';
|
|
const params = {
|
|
avatar,
|
|
libcode: "1201",
|
|
nickname,
|
|
openid: openId
|
|
};
|
|
const res = await FetchBindRead(params);
|
|
const userInfo = {
|
|
nickName: nickname,
|
|
avatarUrl: avatar
|
|
};
|
|
uni.setStorageSync(USER_KEY, userInfo);
|
|
this.userInfo = userInfo;
|
|
},
|
|
|
|
// 加载用户信息（从接口获取）
|
|
async loadUserInfo() {
|
|
try {
|
|
const openId = uni.getStorageSync('wx_login_code');
|
|
const readerList = uni.getStorageSync(READLIST) || [];
|
|
|
|
// 从接口获取用户信息（昵称、头像）
|
|
if (openId) {
|
|
const res = await FetchFindAllReaderByOpenId({
|
|
libcode: '1201',
|
|
openId: openId
|
|
});
|
|
|
|
if (res.code === 200 && res.data) {
|
|
// 只赋值用户信息，不处理读者证
|
|
this.userInfo = {
|
|
nickName: res.data.nickName || res.data.nickname || '',
|
|
avatarUrl: res.data.avatarUrl || res.data.avatar || ''
|
|
};
|
|
uni.setStorageSync(USER_KEY, this.userInfo);
|
|
} else {
|
|
this.userInfo = uni.getStorageSync(USER_KEY) || {};
|
|
}
|
|
} else {
|
|
this.userInfo = uni.getStorageSync(USER_KEY) || {};
|
|
}
|
|
|
|
// 找到默认读者证
|
|
const defaultCard = readerList.find(item => item.bindDefault === true);
|
|
this.cardNo = defaultCard ? defaultCard.bindValue : (readerList[0]?.bindValue || '');
|
|
this.isBindLibraryCard = readerList.length > 0;
|
|
|
|
} catch (err) {
|
|
// 异常降级：读缓存
|
|
console.error('加载用户信息失败:', err)
|
|
const readerList = uni.getStorageSync(READLIST) || [];
|
|
this.userInfo = uni.getStorageSync(USER_KEY) || {};
|
|
const defaultCard = readerList.find(item => item.bindDefault === true);
|
|
this.cardNo = defaultCard ? defaultCard.bindValue : (readerList[0]?.bindValue || '');
|
|
this.isBindLibraryCard = readerList.length > 0;
|
|
}
|
|
},
|
|
|
|
// 校验登录：只根据 有没有读者证 判断
|
|
toCheckLogin(pageName) {
|
|
const readerList = uni.getStorageSync(READLIST) || [];
|
|
|
|
// 没有绑定读者证 → 弹窗
|
|
if (readerList.length === 0) {
|
|
this.dialogToggle();
|
|
return;
|
|
}
|
|
|
|
// 已绑定 → 正常跳转
|
|
const routeMap = {
|
|
'借阅': '/subpkg/pages/myLending/myLending',
|
|
'我的留言': '/subpkg/pages/feedback-list/feedback-list',
|
|
// '修改密码': '/subpkg/pages/change-password/change-password',
|
|
'收藏': '/subpkg/pages/collect-list/collect-list',
|
|
// '个人资料': '/subpkg/pages/user-info/user-info',
|
|
'解绑读者证': '/subpkg/pages/reader-card/reader-card'
|
|
}
|
|
const url = routeMap[pageName]
|
|
if (url) {
|
|
uni.navigateTo({ url })
|
|
}
|
|
},
|
|
|
|
dialogToggle() {
|
|
this.$refs.alertDialog.open();
|
|
},
|
|
dialogConfirm() {
|
|
uni.navigateTo({ url: "/pages/login/login" });
|
|
},
|
|
dialogClose() {},
|
|
|
|
// 退出登录
|
|
toLogOut() {
|
|
uni.showModal({
|
|
title: '确认退出',
|
|
content: '确定要退出当前账号吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 清空缓存
|
|
uni.removeStorageSync(USER_KEY);
|
|
uni.removeStorageSync(READLIST);
|
|
|
|
// 重置
|
|
this.userInfo = {};
|
|
this.cardNo = "";
|
|
this.isBindLibraryCard = false;
|
|
|
|
uni.showToast({ title: '退出成功', icon: 'success' });
|
|
uni.switchTab({ url: "/pages/home/home" });
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top-user-bar{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 150px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: $uni-white;
|
|
.top-bar-bg{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
.user-info{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.avatar-btn {
|
|
background: transparent;
|
|
margin-top: 19px;
|
|
margin-left: 28px;
|
|
&::after{ border: none !important; }
|
|
.avatar-img {
|
|
width: 62px;
|
|
height: 62px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
.user-info-text{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
margin: 26px 16px 0 16px;
|
|
.user-name{
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
line-height: 28px;
|
|
}
|
|
.user-card{
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 40;
|
|
color: #fff;
|
|
line-height: 17px;
|
|
}
|
|
}
|
|
}
|
|
.user-menu{
|
|
position: absolute;
|
|
bottom: -60px;
|
|
left: 0;
|
|
background-color: #fff;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: calc(100% - 40px);
|
|
margin: 0 20px;
|
|
border-radius: 6px;
|
|
box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, .1);
|
|
.menu-item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 30px;
|
|
height: 100px;
|
|
.menu-icon{
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.menu-txt{
|
|
color: #636365;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.submenu-box{
|
|
margin-top: 80px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.submenu-item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: calc(100% - 40px);
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #f4f4f4;
|
|
height: 45px;
|
|
padding: 0 20px;
|
|
::v-deep .uni-icons{
|
|
color: #343434 !important;
|
|
}
|
|
.left-txt{
|
|
color: #343434;
|
|
font-size: 14px;
|
|
width: calc(100% - 50px);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|