vue.js项目实战运用篇之抖音视频APP-第十二节： 用户信息页面功能

Posted 2021-05-29 enjsky.G

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第十二节： 用户信息页面功能

页面分析

用户信息页面是底部导航我的跳转到用户信息，其中包含了个人资料编辑、个人信息展示、作品管理区能功能。
实现步骤：
1.页面布局及样式
2.资料编辑

功能实现

页面布局及样式

1.页面布局，代码如下：

<template>
  <!-- 我的页面内容 -->
  <div class="me">
    <!-- 背景图内容 -->
    <div class="me-top" :style="bgPic">
      <!-- 右侧菜单栏 -->
      <div class="menu-box">
        <i class="iconfont icon-update"></i>
      </div>
       <div class="menu-box">
        <div class="menu-icon"></div>
      </div>
    </div>
    <!-- 信息内容 -->
    <div class="me-wrap">
      <!-- 个人信息 -->
      <div class="me-content">
        <div class="info">
          <!-- 头像 -->
          <img class="info_img" src="../../assets/images/avatar-1.jpg" alt />
          <button class="btn" @click="editInfo">编辑资料</button>
          <button class="btn">+朋友</button>
        </div>
        <!-- 标签内容 -->
        <div class="des">
          <span class="dy_name">enjsky</span>
          <span class="span_dy">私密账号 · 抖音号：xxxxxx <i class="iconfont icon-erweima"></i></span>
        </div>
        <div class="user-tag">
          <p>你还没有填写个人简介，点击添加...</p>
          <span>23岁</span>
          <span>深圳</span>
          <span>+添加学校等标签</span>
        </div>
        <!-- 人气信息 -->
        <div class="user-tag2">
          <span>
            <a>5200</a>获赞
          </span>
          <span>
            <a>150</a>关注
          </span>
          <span>
            <a>520W</a>+粉丝
          </span>
        </div>
        <div class="me-ab">
          <div class="me_ab_i"><i class="iconfont icon-gouwuche"></i></div>
          <div class="me_ab_span">
            <span class="span_title">抖音商城</span>
            <span class="span_tab">发现超值好物</span>
          </div>
        </div>
      </div>
      <!-- 个人作品收藏信息 -->
      <div class="me-tab">
        <!-- 导航栏 -->
        <div class="me-navbar">
          <div class="item" @click="changeTab(0)" :class="indexTab === 0? 'active' :'' ">作品</div>
          <div class="item" @click="changeTab(1)" :class="indexTab === 1? 'active' :'' ">私密</div>
          <div class="item" @click="changeTab(2)" :class="indexTab === 2 ? 'active' :'' ">喜欢</div>
          <div class="item" @click="changeTab(3)" :class="indexTab === 3 ? 'active' :'' ">相册</div>
        </div>
        <!-- 导航内容 -->
        <div class="tab-wrap">
          <div class="tab-con" v-show="indexTab === 0">
            <div class="tab-img">
              <img src="../../assets/images/1.jpg" />
              <img src="../../assets/images/2.jpg" />
              <img src="../../assets/images/3.jpg" />
            </div>
          </div>
          <div class="tab-con" v-show="indexTab === 1">
            <div class="tab-img">
              <img src="../../assets/images/4.jpg" />
              <img src="../../assets/images/5.jpg" />
              <img src="../../assets/images/6.jpg" />
            </div>
          </div>
          <div class="tab-con" v-show="indexTab === 2">
            <div class="tab-img">
              <img src="../../assets/images/7.jpg" />
              <img src="../../assets/images/8.jpg" />
              <img src="../../assets/images/9.jpg" />
            </div>
          </div>
          <div class="tab-con" v-show="indexTab === 3">
            <div class="tab-img">
              <img src="../../assets/images/10.jpg" />
              <img src="../../assets/images/11.jpg" />
              <img src="../../assets/images/12.jpg" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

2.样式，代码如下：

<style lang="less" scoped>
.me {
  position: relative;
  .me-top {
    height: 160px;
    display: flex;
    justify-content: flex-end;
    padding: 20px;

    .menu-box {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 4px;
      .iconfont{
        font-size: 25px;
        color: #ffffff;
      }
      .menu-icon {
        background: #ffffff;
        border-top: 2px solid #ffffff;
        background-clip: content-box;
        border-bottom: 2px solid #ffffff;
        width: 16px;
        height: 2px;
        padding: 5px 0;
      }
    }
  }
  .me-wrap {
    position: absolute;
    top: 140px;
    width: 100%;
    background-color: #101821;
    color: #ffffff;
    .me-content {
      padding: 0 10px;

      .info {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .info_img {
          height: 100px;
          width: 100px;
          border-radius: 50%;
          margin-right: 20px;
          position: relative;
          bottom: 25px;
        }
        button {
          height: 35px;
          width: 120px;
          margin: 15px 4px;
          background-color: #393842;
          border: none;
          color: #ffffff;
          border-radius: 5px;
        }

        button:nth-child(2) {
        }
      }

      .des {
        padding: 10px 0 0 0;
        flex-direction: column;
        display: flex;
        border-bottom: 1px solid #686868;
        .dy_name {
          font-size: 15px;
          font-weight: bold;
        }
        .span_dy{
          padding: 10px 0 10px 0;
          display: block;
          color: #686868;
          .iconfont{
            font-size: 10px;
            color: #686868;
          }
        }
      }
      .user-tag p{
        font-size: 15px;
        padding: 10px 0;
      }
      .user-tag span {
        font-size: 10px;
        color: #686868;
        margin-right: 5px;
        background: rgba(0, 0, 0, 0.6);
        padding: 5px 8px;
      }

      .user-tag2 {
        padding: 20px 0;
        color: #686868;

        span {
          font-size: 14px;
          margin-right: 15px;
        }

        a {
          margin-right: 5px;
        }
      }
      .me-ab {
        display: flex;
        .me_ab_i{
          width: 35px;
          height: 35px;
          background: #25252F;
          border-radius: 2px;
          margin: 2px 0;
          .iconfont{
            font-size: 30px;
          }
        }
        .me_ab_span{
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin: 2px 5px;
          .span_title{
            font-size: 15px;
          }
          .span_tab{
            color: #686868;
            margin: 5px 0;
          }
        }
      }
    }
    .me-tab {
      height: 300px;
      .me-navbar {
        display: flex;
        padding: 0 20px;
        justify-content: center;
        align-items: center;
        .item {
          padding: 10px 25px;
          color: #686868;
          font-size: 16px;
        }
        .active {
          border-bottom: 2px solid #0563a1;
          color: #ffffff;
        }
      }
      .tab-wrap {
        .tab-con img {
          width: 30%;
          padding: 5px;
          border-radius: 7px;
        }
      }
    }
  }
}
</style>

3.完成效果

资料编辑

1.页面布局及样式
首先在me文件夹中创建一个Edit页面，路径如下图：

代码如下：

<template>
  <div class="edit">
    <Header hasLeft="true" title="编辑资料"></Header>
    <div class="edit-wrap">
      <div class="avatar-box">
        <div class="avatar">
          <img src="../../assets/images/avatar-1.jpg" alt=""/>
          <span class="iconfont icon-xiangji"></span>
          <input type="file">
          <p>点击更换头像</p>
        </div>
      </div>
      <div class="edit-box">
        <div class="edit-item">
          <span class="label">名称</span>
          <span>昵称<span class="iconfont icon-arrow-left"></span></span>
        </div>
        <div class="edit-item">
          <span class="label">抖音号</span>
          <span>63807476<span class="iconfont icon-arrow-left"></span></span>
        </div>
        <div class="edit-item">
          <span class="label">抖音号</span>
          <span>填写个人简介更容易获取别人关注哦<span class="iconfont icon-arrow-left"></span></span>
        </div>
        <div class="edit-item">
          <span class="label">生日</span>
          <span>点击设置<span class="iconfont icon-arrow-left"></span></span>
        </div>
        <div class="edit-item">
          <span class="label">地区</span>
          <span>中国.辽宁.沈阳<span class="iconfont icon-arrow-left"></span></span>
        </div>
        <div class="edit-item">
          <span class="label">学校</span>
          <span>点击设置<span class="iconfont icon-arrow-left"></span></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../common/components/header/Header.vue';

export default {
  name: 'Edit',
  components: {
    Header,
  },

};
</script>

<style lang="less" scoped>
  .edit {
    background-color: #101821;
    height: 670px;
    .edit-wrap {
      padding: 0 10px;
      box-sizing: border-box;

      .avatar-box {
        color: #686868;
        text-align: center;
        padding: 20px;

        .avatar {
          position: relative;

          .iconfont {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 26px;
            color: #686868;
          }

          input {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
          }

          img {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            margin-bottom: 16px;
            opacity: .5;
          }
        }
      }

      .edit-box {
        border-top: 1px solid #292831;
        color: #686868;

        .edit-item {
          display: flex;
          justify-content: space-between;
          line-height: 60px;

          .label {
            color: #ffffff;
          }

          .icon-arrow-left {
            margin-left: 10pxvue.js项目实战运用篇之抖音视频APP-第十节：  评论列表功能

 vue.js项目实战运用篇之抖音视频APP-第十节：  评论列表功能
 vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能
 vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能
 vue.js项目实战运用篇之抖音视频APP-第十四节： 消息页面功能
 vue.js项目实战运用篇之抖音视频APP-第十四节： 消息页面功能