tocken过期
tocken过期,会报错,要求登陆,原因是登录验证要求用户id 在登陆时没有拿到用户id报的错
let likeTemp = db.collection("quanzi_like").where(`article_id=="${this.artId}" && user_id==$cloudEnv_uid`).getTemp();
这里走不通,就走了下面的弹出报错信息代码,这块以后在学完个人中心之后再解决
在控制台应用里,保存的时间戳就是过期时间,复制到时间戳转换时间的网页小工具里看需要删掉后三位,只执行前10位
过期时间
个人中心页面
个人中心页面分两大部分,上面的头像部分,和下面的内容部分
这里的列表样式是自己写的,也可以使用uview的样式
个人页面结构
顶部背景是上下两层,后面是背景,给图片做高斯模糊覆盖上去,可以根据不同的头像背景色,显示不同的颜色
然后内容是一个容器,做的左右布局 这里如果没有登陆就是默认头像,如果登陆了,就是用户头像+用户名加登陆时间
用户名这里,如果没登录,点击会进入一个新页面个人资料页面
顶部的结构
分两块,group部分就是文字部分,背景部分是图片部分
group部分是文字和图标组成,使用弹性盒模型展示在一行
用户信息部分是三块组成,左边是头像,右边是文字,文字分两部分,登陆了的显示用户名和登陆时间,没登录的提示登陆
下面的列表部分分成了三个组
全部的DOM结构:
<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>
下面是css部分 兼容H5端和小程序端的顶部标题栏高度问题,相当于在小程序端加高一个标题栏的高度
css变量 uniapp.dcloud.net.cn/tutorial/sy…
下方的圆角部分就是给整个下方大盒子加一个圆角,但是看不出来,因为下方的部分和背景色一样都是白色的,和要下方模块压在背景图上面才有效果,所以又加了一个向上移动-30像素
.main{
width: 100%;
min-height: 200rpx;
background: #fff;
// 给下放大盒子加圆角
border-radius: 30rpx;
// 使下方大盒子向上移动30像素,压住上面的背景图才显示的出圆角效果
transform:translateY(-30rpx);
还有每一个group因为下面加了一个边框,所以要给最后一个清除掉底部边框
.group:last-child{
border:none;
}