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>
		</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>
			<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,
      base64Img: "",
		};
	},
	onLoad() {
		// this.loadUserInfo();
	},
	onShow() {
		this.loadUserInfo();
	},
	methods:{
    toUserInfoPage() {
      uni.navigateTo({
        url: '/subpkg/pages/user-info/user-info'
      });
    },

		// 加载用户信息（从接口获取）
		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 || '',
							avatarId:  res.data.avatar || ''
						};
            const imageUrl = config.baseUrl + '/api/fileRelevant/getImg?imgType=5&imgId=' + res.data.avatar;
            const base64 = await this.urlToBase64(imageUrl);
            this.base64Img = base64;

						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/collect-list/collect-list',
        // 借阅：自动存 switch_tab_index = 0
        '借阅': () => {
          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 })
      }
    },

		dialogToggle() {
			this.$refs.alertDialog.open();
		},
		dialogConfirm() {
			uni.navigateTo({ url: "/pages/login/login" });
		},
    urlToBase64(url) {
      return new Promise((resolve, reject) => {
        uni.request({
          url,
          method: 'GET',
          responseType: 'arraybuffer',
          success: (res) => {
            try {
              const buffer = new Uint8Array(res.data);
              let binary = '';
              for (let i = 0; i < buffer.length; i++) {
                binary += String.fromCharCode(buffer[i]);
              }
              const base64 = uni.arrayBufferToBase64(res.data);
              const dataUri = 'data:image/jpeg;base64,' + base64;
              resolve(dataUri);
            } catch (e) {
              reject(e);
            }
          },
          fail: reject
        });
      });
    },

		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: 13px;
        // font-weight: bold;
        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>