美文网首页
用户功能

用户功能

作者: amanohina | 来源:发表于2021-03-17 19:25 被阅读0次

布局处理

首先,整体是分为上下两部份的,顶部为用户信息与操作列表,底部为导航
首先我们导入LayoutFooter组件

// user/index.vue
<template>
  <div class="user">
    <!-- 顶部功能 -->
    <!-- 底部导航 -->
    <layout-footer></layout-footer>
  </div>
</template>
...
<script>
import LayoutFooter from '@/components/LayoutFooter'
export default {
  name: 'User',
  components: {
    LayoutFooter
  }
}

整体布局我们使用Vant的Cell单元格,使用之外整体布局代码为:

<template>
  <div class="user">
    <!-- 顶部功能 -->
      <van-cell-group>
        <!-- 用户信息区域 -->
        <van-cell class="user-info">
          <!-- 头像 -->
          <van-image
          width="50px"
          height="50px"
          src="https://s0.lgstatic.com/i/image6/M01/1F/6B/Cgp9HWBR1z2AB8UTAAG87bdA0lA648.jpg"
          ></van-image>
          <!-- 用户信息内容区域 -->
          <div class="user-info-content">
            <h3>昵称</h3>
            <span>
              <van-icon name="edit">
                编辑个人资料
              </van-icon>
            </span>
          </div>
        </van-cell>
      </van-cell-group>
    <!-- 底部导航 -->
    <layout-footer></layout-footer>
  </div>
</template>

<script>
// import { getUserInfo } from '@/services/user'
import LayoutFooter from '@/components/LayoutFooter'
export default {
  name: 'User',
  components: {
    LayoutFooter
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  padding: 30px 20px;
  background-color: rgb(248, 150, 3);
}
.van-cell__value {
  display: flex;
}
.user-info-content {
  margin-left: 15px;
}
.user-info-content h3 {
  margin: 5px;
  font-size: 18px;
}
</style>

账户信息

除了基本信息之外,还有账户信息
这里使用的是Vant的Gird宫格
将其设置到页面中,同时还要注意一下组件之间的空隙处理

<van-cell-group>
  <!-- 用户信息区域 -->
  <van-cell class="user-info" :border="false">
        ...
  </van-cell>
  <!-- 账户信息 -->
  <van-cell class="account-info">
    <van-grid :border="false">
      <van-grid-item>
        <span class="grid-item-value">14.05</span>
        <span>学习时长</span>
      </van-grid-item>
      <van-grid-item>
        <span class="grid-item-value">200</span>
        <span>钱包/勾豆</span>
      </van-grid-item>
      <van-grid-item>
        <span class="grid-item-value">1</span>
        <span>优惠券</span>
      </van-grid-item>
      <van-grid-item>
        <span class="grid-item-value">213</span>
        <span>学分</span>
      </van-grid-item>
    </van-grid>
  </van-cell>
  ...
<style>
...
// 账户信息
.account-info {
  background-color: rgb(248, 150, 3);
  margin-top: -1px;
}

.account-info .van-cell__value{
  border-radius: 15px;
}

.account-info .grid-item-value{
  font-size: 22px;
  font-weight: 700;
}
</style>

底部菜单列表

  • icon图标
  • title标题
  • is-link右侧箭头
  • value右侧箭头前的文字
<van-cell-group>
  ...
  <!-- 底部菜单 -->
  <van-cell icon="user-o" title="分销中心" is-link value="收益200元"></van-cell>
  <van-cell icon="setting-o" title="个性化设置" is-link></van-cell>
  <van-cell icon="down" title="我的下载" is-link></van-cell>
  <van-cell icon="question-o" title="帮助与反馈" is-link></van-cell>
  <van-cell icon="info-o" title="关于拉勾教育" is-link value="v2.0.0"></van-cell>
</van-cell-group>

逻辑处理

用户信息接口封装

// services/user.js
...
// 用户信息
export const getUserInfo = () => {
  return request({
    method: 'GET',
    url: '/front/user/getInfo'
  })
}

引入到User组件中进行请求发送

// user/index.vue
...
import { getInfo } from '@/services/user'
...
  data () {
    return {
      // 存储用户信息
      userInfo: {}
    }
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    async loadUserInfo () {
      // 请求用户信息,并存储到 data 中
      const { data } = await getInfo()
      this.userInfo = data.content
    }
  }
}
...

将数据绑定到页面中


暂且只有这两个地方需要绑定数

用户功能结束!

相关文章

  • ssh相关

    crm练习 课程内容 课程目标 用户模块 功能一:用户注册功能 功能二:用户登录功能 功能三:用户退出功能 客户模...

  • 用户功能

    布局处理 首先,整体是分为上下两部份的,顶部为用户信息与操作列表,底部为导航首先我们导入LayoutFooter组...

  • "Time In Place"拆分里程碑

    程序功能分析 它具有以下功能: 用户功能:用户可以注册、登录、退出系统;发布问题:用户可以发布自己的问题;回复功能...

  • 用户注册功能

    一、设计接口思路 1.分析业务逻辑,明确在这个业务中需要涉及到的几个相关子业务,将每个子业务当做一个接口来设计 2...

  • 用户登录功能

    1.登录功能后端实现 1.1 创建数据库db_jianyue ,创建表t_userimage.png 自行添几个数...

  • UEESHOP选项(选定:专业+SEO)

    UEESHOP成本列表 标准用户 高级用户 专业用户 功能对比 ( n 表示不提供该功能 )考察1~6功能的必要性...

  • SpringMVC学习day-69:网盘项目整合

    一、需要实现的功能: (1)实现用户的登录功能;并将用户信息存放到session中。(2)实现用户的注册功能;并为...

  • 2018-04-08 python中创建一个名片管理系统

    1:打印功能 2:判断用户输入 3:执行用户功能 代码如下 1. 打印功能提示 print("="50)print...

  • 功能点的优化和设计流程

    一、功能点优化 1. 分析产品功能的现状与逻辑 用户:都有哪些用户会用到这个页面/功能 流程:用户使用流程是怎样的...

  • django项目--用户管理功能

    用户管理功能 一、业务功能分析 1. 业务需求分析 用户的增删改查,权限分组的控制。 2.功能分析 用户列表 修改...

网友评论

      本文标题:用户功能

      本文链接:https://www.haomeiwen.com/subject/emuecltx.html