(十一)、用户中心页面【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

news2024/9/20 18:42:37

1,个人中心页面

1.1 新建个人中心页面

在这里插入图片描述

1.2 纯净版个人中心页面代码：

<template>
  <view class="user">
    <view class="top">
      <view class="group">
        <view class="userinfo">
          <!-- 顶部 左侧 头像 -->
          <view class="pic">
            <image src="../../static/images/user-default.jpg" mode="aspectFill"></image>
          </view>
          <!-- 顶部 左侧 昵称和时间 已登录 -->
          <view class="text" v-if="true">
            <view class="nickname">匿名</view>
            <view class="year">
              <uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>
              注册
            </view>
          </view>
          <!-- 顶部 左侧 昵称和时间 未登录 -->
          <view class="text" v-else>
            <view class="nickname">点击登录</view>
          </view>

        </view>
        <!-- 顶部 右侧右箭头 -->
        <view class="more">
          <text class="iconfont icon-a-10-you"></text>
        </view>
      </view>
      <!-- 顶部 背景图 -->
      <view class="bg">
        <image src="../../static/images/user-default.jpg" mode="aspectFill"></image>
      </view>
    </view>



    <view class="main">
      <view class="info">
        <view class="item"><text>33</text>获赞</view>
        <view class="item"><text>11</text>评论</view>
        <view class="item"><text>5</text>发文</view>
      </view>

      <view class="list">
        <view class="group">
          <view class="item">
            <view class="left"><text class="iconfont icon-a-24-bianji"></text><text class="text">我的长文</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
          <view class="item">
            <view class="left"><text class="iconfont icon-a-106-xihuan"></text><text class="text">我的点赞</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
          <view class="item">
            <view class="left"><text class="iconfont icon-a-21-xiugai"></text><text class="text">评论过的</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
        </view>

        <view class="group">
          <view class="item">
            <view class="left"><text class="iconfont icon-a-32-wenjian"></text><text class="text">关于</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
          <view class="item">
            <view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
        </view>

        <view class="group">
          <view class="item">
            <view class="left"><text class="iconfont icon-a-73-tuichu"></text><text class="text">退出登录</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .user {

    .top {
      height: 300rpx;
      background: #bbb;
      padding: 0 30rpx;
      padding-top: var(--status-bar-height);
      position: relative;
      display: flex;
      align-items: center;

      .group {
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: #fff;

        .userinfo {
          display: flex;
          width: 100%;
          align-items: center;

          .pic {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #fff;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .text {
            padding-left: 20rpx;

            .nickname {
              font-size: 44rpx;
              font-weight: 600;
            }

            .year {
              font-size: 26rpx;
              opacity: 0.6;
              padding-top: 5rpx;
            }
          }
        }

        .more {
          .iconfont {
            font-size: 40rpx;
          }
        }

      }

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          filter: blur(20px);
          transform: scale(2);
          opacity: 0.5;
        }
      }
    }

    .main {
      width: 100%;
      min-height: 200rpx;
      background: #fff;
      border-radius: 30rpx;
      transform: translateY(-30rpx);
      padding: 30rpx 0;

      .info {
        padding: 10rpx 30rpx;
        display: flex;
        font-size: 30rpx;

        .item {
          padding-right: 20rpx;
          color: #888;

          text {
            font-weight: 600;
            color: #333;
          }
        }
      }

      .list {
        .group {
          padding: 15rpx 30rpx;
          border-bottom: 15rpx solid #f4f4f4;

          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25rpx 0;
            font-size: 36rpx;
            color: #555;
            border-bottom: 1rpx solid #f8f8f8;

            .left {
              display: flex;
              align-items: center;

              .iconfont {
                font-size: 38rpx;
                margin-right: 10rpx;
              }
            }

            .right {
              .iconfont {
                font-size: 26rpx;
              }
            }
          }

          .item:last-child {
            border: none;
          }
        }

        .group:last-child {
          border: none;
        }
      }
    }

  }
</style>

1.3 页面效果

在这里插入图片描述

2,使用uni-id-pages中的vuex状态管理

2.1 self页面中，script中引入store.js：

store.js位置：
在这里插入图片描述

  import {
    store,
    mutations
  } from '@/uni_modules/uni-id-pages/common/store.js'

在计算属性中定义两个方法（在当前页面拿到store中的登录用户信息和登录状态）：

    computed: {
      userInfo() {
        return store.userInfo
      },
      hasLogin() {
        return store.hasLogin
      }
    },

测试一下，在onload中打印输出：

    onLoad() {
      console.log(this.userInfo)
      console.log(this.hasLogin)
    }

结果：
在这里插入图片描述

2.2 渲染顶部self页面

          <!-- 顶部 左侧 头像 -->
          <view class="pic">
            <image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"
              mode="aspectFill"></image>
            <image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image>
          </view>
          <!-- 顶部 左侧 昵称和时间 已登录 -->
          <view class="text" v-if="hasLogin">
            <view class="nickname">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view>

            <view class="year">
              <uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>
              注册
            </view>
          </view>

3,个人中心页面中的退出功能

3.1 修改一下store.js中的logout方法

三目运算符–修改点击退出是跳转的url页面地址
store.js

	async logout() {
		// 1. 已经过期就不需要调用服务端的注销接口	2.即使调用注销接口失败，不能阻塞客户端
		if(uniCloud.getCurrentUserInfo().tokenExpired > Date.now()){
			try{
				await uniIdCo.logout()
			}catch(e){
				console.error(e);
			}
		}
		uni.removeStorageSync('uni_id_token');
		uni.setStorageSync('uni_id_token_expired', 0)
		uni.redirectTo({
			url: `/${pagesJson.uniIdRouter?.loginPage ?? 'pages/self/self'}`, //uni_modules/uni-id-pages/pages/login/login-withoutpwd
		});
		uni.$emit('uni-id-pages-logout')
		this.setUserInfo({},{cover:true})
	},

3.2 self个人中心页面中使用退出方法

      //退出登录
      logout() {
        if (this.goLoginPage()) return;
        uni.showModal({
          title: "是否确认退出?",
          success: res => {
            console.log(res);
            if (res.confirm) {
              mutations.logout()
            }
          }
        })
      },
      //判断是否登录的方法
      goLoginPage() {
        if (!this.hasLogin) {
          uni.showToast({
            title: "未登录",
            icon: "none"
          })
          return true;
        }
        return false
      }

4,uniidrouter路由配置限制用户登录

uniIdRouter自动路由参考链接

4.1 在pages.json中配置

  "uniIdRouter": {
    "loginPage": "uni_modules/uni-id-pages/pages/login/login-withpwd", // 登录页面路径
    "needLogin": [
      "pages/edit/edit", // 需要登录才可访问的页面列表，可以使用正则语法
      "uni_modules/uni-id-pages/pages/userinfo/userinfo"
    ],
    "resToLogin": true // 自动解析云对象及clientDB的错误码，如果是客户端token不正确或token过期则自动跳转配置的登录页面，配置为false则关闭此行为，默认true
  }

4.2 跳转到个人资料页面

个人资料页面位置：/uni_modules/uni-id-pages/pages/userinfo/userinfo
修改页面：

<view class="group" @click="toUserInfo">

点击跳转方法：

      //跳转到编辑个人资料
      toUserInfo() {
        if (this.hasLogin) {
          uni.navigateTo({
            url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
          })
        } else {
          let route = this.$mp.page.route;
          uni.navigateTo({
            url: '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=/' + route
          })
        }
      },

如果没有登录，就跳转到登录页面，如果登录了，点击跳转到个人资料页面。
个人资料页面：
在这里插入图片描述

4.3 设置头像区域背景

      <!-- 顶部 背景图 -->
      <view class="bg">
        <image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"
          mode="aspectFill"></image>
        <image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image>
      </view>