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.
332 lines
8.4 KiB
332 lines
8.4 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.avatarId" :src="base64Img" class="avatar-img"></image>
|
|
<image v-else src="@/static/images/logo.jpg" 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-UIsheji_menjinxitong-28" size="20"></uni-icons>
|
|
<text class="left-txt">解绑读者证</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/utils/config';
|
|
import { FetchFindAllReaderByOpenId } from '@/api/user';
|
|
import { getReaderCardList, STORAGE_KEYS } from '@/utils/storage';
|
|
|
|
const USER_KEY = 'user-info';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
cardNo: "",
|
|
isBindLibraryCard: false,
|
|
base64Img: "",
|
|
loading: false,
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.loadUserInfo();
|
|
},
|
|
onShow() {
|
|
this.loadUserInfo();
|
|
},
|
|
methods:{
|
|
toUserInfoPage() {
|
|
uni.navigateTo({
|
|
url: '/subpkg/pages/user-info/user-info'
|
|
});
|
|
},
|
|
|
|
async loadUserInfo() {
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
|
|
try {
|
|
const readerList = await getReaderCardList();
|
|
const openId = uni.getStorageSync(STORAGE_KEYS.WX_LOGIN_CODE);
|
|
|
|
if (openId) {
|
|
const res = await FetchFindAllReaderByOpenId({
|
|
libcode: '1201',
|
|
openId: openId
|
|
});
|
|
|
|
if (res.code === 200 && res.data) {
|
|
this.userInfo = {
|
|
nickname: res.data.nickname || '',
|
|
avatarId: res.data.avatar || ''
|
|
};
|
|
|
|
if (res.data.avatar) {
|
|
const imageUrl = config.baseUrl + '/api/fileRelevant/getImg?imgType=5&imgId=' + res.data.avatar;
|
|
try {
|
|
const base64 = await this.urlToBase64(imageUrl);
|
|
this.base64Img = base64;
|
|
} catch (err) {
|
|
console.error('[User] Failed to load avatar:', err);
|
|
}
|
|
}
|
|
|
|
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('[User] Failed to load user info:', err);
|
|
const readerList = uni.getStorageSync(STORAGE_KEYS.READER_CARD_LIST) || [];
|
|
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;
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async toCheckLogin(pageName) {
|
|
const readerList = await getReaderCardList();
|
|
|
|
if (readerList.length === 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请您绑定读者证',
|
|
confirmText: '去绑定',
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateTo({ url: "/pages/login/login" });
|
|
}
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
const routeMap = {
|
|
'收藏': '/subpkg/pages/collect-list/collect-list',
|
|
'借阅': () => {
|
|
uni.setStorageSync('switch_tab_index', 0);
|
|
uni.navigateTo({
|
|
url: '/subpkg/pages/myLending/myLending'
|
|
});
|
|
},
|
|
'我的留言': '/subpkg/pages/feedback-list/feedback-list',
|
|
'解绑读者证': '/subpkg/pages/reader-card/reader-card'
|
|
};
|
|
|
|
const target = routeMap[pageName];
|
|
if (typeof target === 'function') {
|
|
target();
|
|
} else if (target) {
|
|
uni.navigateTo({ url: target });
|
|
}
|
|
},
|
|
|
|
urlToBase64(url) {
|
|
return new Promise((resolve, reject) => {
|
|
uni.request({
|
|
url,
|
|
method: 'GET',
|
|
responseType: 'arraybuffer',
|
|
success: (res) => {
|
|
try {
|
|
const base64 = uni.arrayBufferToBase64(res.data);
|
|
const dataUri = 'data:image/jpeg;base64,' + base64;
|
|
resolve(dataUri);
|
|
} catch (e) {
|
|
reject(e);
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.error('[User] Failed to fetch image:', err);
|
|
reject(err);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
toLogOut() {
|
|
uni.showModal({
|
|
title: '确认退出',
|
|
content: '确定要退出当前账号吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.removeStorageSync(USER_KEY);
|
|
uni.removeStorageSync(STORAGE_KEYS.READER_CARD_LIST);
|
|
uni.removeStorageSync(STORAGE_KEYS.CURRENT_READER_CARD);
|
|
|
|
this.userInfo = {};
|
|
this.cardNo = "";
|
|
this.isBindLibraryCard = false;
|
|
this.base64Img = "";
|
|
|
|
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: 13px;
|
|
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>
|