布局處理

首先摄悯，整體是分為上下兩部份的诵冒，頂部為用戶信息與操作列表，底部為導(dǎo)航
首先我們導(dǎo)入LayoutFooter組件

// user/index.vue
<template>
  <div class="user">
    <!-- 頂部功能 -->
    <!-- 底部導(dǎo)航 -->
    <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>
        <!-- 用戶信息區(qū)域 -->
        <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>
          <!-- 用戶信息內(nèi)容區(qū)域 -->
          <div class="user-info-content">
            <h3>昵稱</h3>
            <span>
              <van-icon name="edit">
                編輯個(gè)人資料
              </van-icon>
            </span>
          </div>
        </van-cell>
      </van-cell-group>
    <!-- 底部導(dǎo)航 -->
    <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宮格
將其設(shè)置到頁(yè)面中，同時(shí)還要注意一下組件之間的空隙處理

<van-cell-group>
  <!-- 用戶信息區(qū)域 -->
  <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>學(xué)習(xí)時(shí)長(zhǎng)</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>優(yōu)惠券</span>
      </van-grid-item>
      <van-grid-item>
        <span class="grid-item-value">213</span>
        <span>學(xué)分</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圖標(biāo)
• title標(biāo)題
• is-link右側(cè)箭頭
• value右側(cè)箭頭前的文字

<van-cell-group>
  ...
  <!-- 底部菜單 -->
  <van-cell icon="user-o" title="分銷中心" is-link value="收益200元"></van-cell>
  <van-cell icon="setting-o" title="個(gè)性化設(shè)置" 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="關(guān)于拉勾教育" 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組件中進(jìn)行請(qǐng)求發(fā)送

// user/index.vue
...
import { getInfo } from '@/services/user'
...
  data () {
    return {
      // 存儲(chǔ)用戶信息
      userInfo: {}
    }
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    async loadUserInfo () {
      // 請(qǐng)求用戶信息首装，并存儲(chǔ)到 data 中
      const { data } = await getInfo()
      this.userInfo = data.content
    }
  }
}
...

將數(shù)據(jù)綁定到頁(yè)面中

暫且只有這兩個(gè)地方需要綁定數(shù)

用戶功能結(jié)束创夜！