unicloud云开发进阶43-项目27用户中心页面HTML与css布局

44 阅读2分钟

tocken过期

tocken过期,会报错,要求登陆,原因是登录验证要求用户id 在登陆时没有拿到用户id报的错

let likeTemp = db.collection("quanzi_like").where(`article_id=="${this.artId}" && user_id==$cloudEnv_uid`).getTemp();

这里走不通,就走了下面的弹出报错信息代码,这块以后在学完个人中心之后再解决

在控制台应用里,保存的时间戳就是过期时间,复制到时间戳转换时间的网页小工具里看需要删掉后三位,只执行前10位 image.png

过期时间 image.png

个人中心页面

image.png

个人中心页面分两大部分,上面的头像部分,和下面的内容部分

image.png

这里的列表样式是自己写的,也可以使用uview的样式

个人页面结构

image.png

顶部背景是上下两层,后面是背景,给图片做高斯模糊覆盖上去,可以根据不同的头像背景色,显示不同的颜色

然后内容是一个容器,做的左右布局 这里如果没有登陆就是默认头像,如果登陆了,就是用户头像+用户名加登陆时间

image.png

用户名这里,如果没登录,点击会进入一个新页面个人资料页面

image.png

顶部的结构

分两块,group部分就是文字部分,背景部分是图片部分

image.png

group部分是文字和图标组成,使用弹性盒模型展示在一行

image.png

用户信息部分是三块组成,左边是头像,右边是文字,文字分两部分,登陆了的显示用户名和登陆时间,没登录的提示登陆

image.png

image.png

下面的列表部分分成了三个组 image.png

image.png

全部的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像素

image.png

	.main{
		width: 100%;
		min-height: 200rpx;
		background: #fff;
    // 给下放大盒子加圆角
		border-radius: 30rpx;
    // 使下方大盒子向上移动30像素,压住上面的背景图才显示的出圆角效果
		transform:translateY(-30rpx);

还有每一个group因为下面加了一个边框,所以要给最后一个清除掉底部边框

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