《若依ruoyi》第四十八章：若依小程序 uniapp个人中心代码解析

1、界面效果展示

从界面上面设计，信息包含三部分，第一部分是顶部的用户信息，第二部分是中间主要功能，第三部份是菜单列表

2、顶部用户信息代码

<view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              用户名：{{ name }}
            </view>
          </view>
        </view>
        <view @click="handleToInfo" class="flex align-center">
          <text>个人信息</text>
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>           

上述代码通过编译后，生成如下图的html代码，

如上图header-section的样式设置内边距的左右和底部是15px，顶部空闲是45px

背景颜色是#3c96f3，文字颜色时白色。

.header-section {
  padding: 15px 15px 45px 15px;
  background-color: #3c96f3;
  color: white;
}           

<view class="flex padding justify-between">
   <view class="flex align-center">
    </view>
    <view @click="handleToInfo" class="flex align-center">
    </view>
</view>           

上述代码的说明：

flex：使用flex布局

padding，内边距固定空闲

justify-between：设置元素沿着容器主轴布局，且使每个元素之间的间距相等。如下图是代码显示的效果，

flex布局容器下面有两个项，一个是头像+名称的内容，另外一个是个人信息

头像+名称的容器下面有两个布局，分别是头像和用户名

头像+名称的容器也是flex布局，容器下的item居中，实现代码

<view class="flex align-center">，实现效果和代码如下

<view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              用户名：{{ name }}
            </view>
          </view>           

图片点击事件绑定handleToAvatar，修改头像处理@click="handleToLogin"

名称点击事件绑定handleToInfo，修改个人信息@click="handleToInfo"

3、中部按钮实现

<view class="content-section">
      <view class="mine-actions grid col-4 text-center">
        <view class="action-item" @click="handleJiaoLiuQun">
          <view class="iconfont icon-friendfill text-pink icon"></view>
          <text class="text">交流群</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-service text-blue icon"></view>
          <text class="text">在线客服</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-community text-mauve icon"></view>
          <text class="text">反馈社区</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-dianzan text-green icon"></view>
          <text class="text">点赞我们</text>
        </view>
      </view>           

实现第二个view的叠加功能，可以通过样式来实现，content-section的css样式代码如下：

.content-section {
  position: relative;
  top: -50px;           

position：相对位置

top：向上缩入50px

通过这两行样式，就可以将第二个view向上叠加效果。

上述界面按钮通过九宫格的显示，

实现的方式是

<view class="mine-actions grid col-4 text-center">           

grid：使用九宫格的样式。

col-4：每行4格。

text-center：文字剧中。

4、菜单列表实现

<view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <view class="iconfont icon-user menu-icon"></view>
            <view>编辑资料</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleHelp">
          <view class="menu-item-box">
            <view class="iconfont icon-help menu-icon"></view>
            <view>常见问题</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <view class="iconfont icon-aixin menu-icon"></view>
            <view>关于我们</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToSetting">
          <view class="menu-item-box">
            <view class="iconfont icon-setting menu-icon"></view>
            <view>应用设置</view>
          </view>
        </view>
      </view>

    </view>           

使用menu-list 和list-cell list-cell-arrow

上述的两个样式组件是uniapp的默认组件，可以参见uniapp

5、未来计划

1、ruoyi-vue-pro：讲解工作流

2、ruoyi-vue-pro：支付模块，电商模块

3、基于ruoyi-vue-pro项目开发

4、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。