library-wechat/pages/user/user.vue

<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 class="menu-item" @click="toBookingRecord">
					<image class="menu-icon" src="@/static/images/menu-rg.png" mode="scaleToFill" style="width: 30px; height: 30px; margin-bottom: 8px;" />
					<text class="menu-txt">入馆</text>
				</view>
        <view class="menu-item" @click="toActivityRecord">
					<image class="menu-icon" src="@/static/images/menu-hd.png" mode="scaleToFill" style="width: 30px; height: 30px; " />
					<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'
			});
		},

		toBookingRecord() {
			uni.navigateTo({
				url: '/subpkg/pages/seat-record/seat-record'
			});
		},
    toActivityRecord() {
			uni.navigateTo({
				url: '/subpkg/pages/activity-record/activity-record'
			});
		},
		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: config.LIB_CODE,
					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);
					}
				});
			});
		}
	}
}
</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{
      width: 25%;
      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>