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">
			<!-- 点击选择头像 -->
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-btn">
			  <image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="avatar-img"></image>
			  <image v-else src="@/static/images/avatar.png" class="avatar-img"></image>
			</button>

			<view class="user-info-text">
			  <text class="user-name">{{ userInfo.nickName || '未登录' }}</text>
			  <text class="user-card">{{ 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="toCheckLogin('个人资料')">
			<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: {
		// 选择微信头像
		async onChooseAvatar(e) {
			const tempFilePath = e.detail.avatarUrl;
			try {
				// 1. 上传头像
				const uploadRes = await new Promise((resolve, reject) => {
					uni.uploadFile({
						url: config.baseUrl + '/api/fileRelevant/uploadWxAvatarImg',
						filePath: tempFilePath,
						name: 'file',
						success: resolve,
						reject: reject
					})
				})
				const resData = JSON.parse(uploadRes.data);
				const imgId = resData.data;
				if (!imgId) {
					uni.showToast({ title: '头像上传失败', icon: 'none' });
					return;
				}
				const avatarUrl = config.baseUrl + '/api/fileRelevant/getImg?imgType=5&imgId=' + imgId;

				// 2. 调用接口保存（头像+昵称）
				await this.bindUserInfo(avatarUrl, this.userInfo.nickName || '小图');
				
				uni.showToast({ title: '头像更新成功', icon: 'success' });

			} catch (err) {
				console.error('头像处理失败：', err);
				uni.showToast({ title: '头像更新失败', icon: 'none' });
			}
		},

		// 调用接口：头像+昵称 → 成功后统一保存缓存
		async bindUserInfo(avatar, nickname) {
			const openId = uni.getStorageSync('wx_login_code') || '';
			const params = {
				avatar,
				libcode: "1201",
				nickname,
				openid: openId
			};

			// 1. 调用接口
			const res = await FetchBindRead(params);
			
			// 2. 接口成功 → 统一保存到缓存（整体缓存）
			const userInfo = {
				nickName: nickname,
				avatarUrl: avatar
			};
			uni.setStorageSync(USER_KEY, userInfo);

			// 3. 刷新页面数据
			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) {
				// 异常降级：读缓存
				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;
			}

			// 已绑定 → 正常跳转
			if(pageName === '借阅'){
				uni.navigateTo({ url: '/subpkg/pages/myLending/myLending' });
			}else if(pageName === '我的留言'){
				uni.navigateTo({ url: '/subpkg/pages/feedback-list/feedback-list' });
			}else if(pageName === '修改密码'){
				uni.navigateTo({ url: '/subpkg/pages/change-password/change-password' });
			}else if(pageName === '收藏'){
				uni.navigateTo({ url: '/subpkg/pages/collect-list/collect-list' });
			}else if(pageName === '个人资料'){
				uni.navigateTo({ url: '/subpkg/pages/user-info/user-info' });
			}else if(pageName === '解绑读者证'){
				uni.navigateTo({ url: '/subpkg/pages/unbind-card/unbind-card' });
			}
		},

		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%;
      }
    }
    .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: 400;
        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>