开始

主页信息这块。
image.png
先来构建UI布局
有点内边距 ，所以需要用view包裹起来。
image.png

image.png

  1. <!-- 主页 -->
  2.         <view class="user-space-userinfo">
  3.             <view class="user-space-userinfo-item">
  4.                 <view>账号信息</view>
  5.                 <view>糗龄：XXXX</view>
  6.                 <view>糗百ID: 1231</view>
  7.             </view>
  8.         </view>

左右加点内边距。
image.png
上下内边距，最下面边框线。
image.png

  1. .user-space-userinfo{
  2.     padding: 0 30upx;
  3. }
  4. .user-space-userinfo-item{
  5.     padding: 20upx 0;
  6.     border-bottom: 1upx solid #EEEEEE;
  7. }

image.png

  1. .user-space-userinfo-item>view{
  2.     color: #AAAAAA;
  3. }
  4. .user-space-userinfo-item>view:first-child{
  5.     color: #333333;
  6.     font-size: 35upx;
  7.     padding: 15upx 0;
  8. }

第一行 字体大小，字要大一些，上下边距。
image.png

image.png
复制上面代码，进行修改。
image.png

  1. <view class="user-space-userinfo-item">
  2.                 <view>个人信息</view>
  3.                 <view>星座：天秤座</view>
  4.                 <view>职业: IT</view>
  5.                 <view>故乡: 广东广州</view>
  6.                 <view>情感: 已婚</view>
  7.             </view>

image.png

  1. <!-- 主页 -->
  2.         <view class="user-space-userinfo">
  3.             <view class="user-space-userinfo-item">
  4.                 <view>账号信息</view>
  5.                 <view>糗龄：150天23小时</view>
  6.                 <view>糗百ID: 1231</view>
  7.             </view>
  8.             <view class="user-space-userinfo-item">
  9.                 <view>个人信息</view>
  10.                 <view>星座：天秤座</view>
  11.                 <view>职业: IT</view>
  12.                 <view>故乡: 广东广州</view>
  13.                 <view>情感: 已婚</view>
  14.             </view>
  15.         </view>

image.png

构建data数据

糗龄是注册时间计算出来的
image.png

  1. regtime:'2019-04-11'

image.png

  1. regtime:'2019-04-11',
  2.                     id:1213,
  3.                     birthday: '1987-02-07',
  4.                     job: 'IT',
  5.                     path: '广东广州',
  6.                     qg: '已婚'

image.png

  1.     <!-- 主页 -->
  2.         <view class="user-space-userinfo">
  3.             <view class="user-space-userinfo-item">
  4.                 <view>账号信息</view>
  5.                 <view>糗龄：{{userinfo.regtime}}</view>
  6.                 <view>糗百ID: {{userinfo.id}}</view>
  7.             </view>
  8.             <view class="user-space-userinfo-item">
  9.                 <view>个人信息</view>
  10.                 <view>星座：{{userinfo.birthday}}</view>
  11.                 <view>职业: {{userinfo.job}}</view>
  12.                 <view>故乡: {{userinfo.path}}</view>
  13.                 <view>情感: {{userinfo.qg}}</view>
  14.             </view>
  15.         </view>

封装好的方法 计算糗龄。记得替换成最新的time.js
image.png
使用计算属性。糗龄和星座。
image.png

  1. import t from "../../common/time.js";
  3. // 计算属性
  4. computed: {
  5.             getRegAge() {
  6.                 return t.gettime.sumAge(this.userinfo.regtime)
  7.             },
  8.             getXingZuo() {
  9.                 return t.gettime.getHoroscope(this.userinfo.birthday)
  10.             }
  11.         },

image.png

  1. <view>糗龄：{{getRegAge}}</view>
  4. <view>星座：{{getXingZuo}}</view>

image.png

image.png

image.png

封装成组件

image.png

  1. <view class="user-space-userinfo">
  2.             <view class="user-space-userinfo-item">
  3.                 <view>账号信息</view>
  4.                 <view>糗龄：{{getRegAge}}</view>
  5.                 <view>糗百ID: {{userinfo.id}}</view>
  6.             </view>
  7.             <view class="user-space-userinfo-item">
  8.                 <view>个人信息</view>
  9.                 <view>星座：{{getXingZuo}}</view>
  10.                 <view>职业: {{userinfo.job}}</view>
  11.                 <view>故乡: {{userinfo.path}}</view>
  12.                 <view>情感: {{userinfo.qg}}</view>
  13.             </view>
  14.         </view>

image.png

image.png

image.png

  1. <style scoped>
  2.     .user-space-data {
  3.         background: #FFFFFF;
  4.         position: relative;
  5.         z-index: 10;
  6.         border-top-left-radius: 20upx;
  7.         border-top-right-radius: 20upx;
  8.         margin-top: -15upx;
  9.     }
  11.     .user-space-userinfo {
  12.         padding: 0 30upx;
  13.     }
  15.     .user-space-userinfo-item {
  16.         padding: 20upx 0;
  17.         border-bottom: 1upx solid #EEEEEE;
  18.     }
  20.     .user-space-userinfo-item>view {
  21.         color: #AAAAAA;
  22.     }
  24.     .user-space-userinfo-item>view:first-child {
  25.         color: #333333;
  26.         font-size: 35upx;
  27.         padding: 15upx 0;
  28.     }
  29. </style>

复制两个计算属性。
image.png

  1.     getRegAge() {
  2.                 return t.gettime.sumAge(this.userinfo.regtime)
  3.             },
  4.             getXingZuo() {
  5.                 return t.gettime.getHoroscope(this.userinfo.birthday)
  6.             }

image.png

  1. import t from "../../common/time.js";

image.png

  1. import userSpaceUserinfo from '@/components/user-space/user-space-userinfo.vue';
  4. userSpaceUserinfo

image.png

  1.     <user-space-userinfo :userinfo="userinfo"></user-space-userinfo>

image.png

本节代码

user-space-userinfo组件

  1. <template>
  2.     <view class="user-space-userinfo">
  3.         <view class="user-space-userinfo-item">
  4.             <view>账号信息</view>
  5.             <view>糗龄：{{getRegAge}}</view>
  6.             <view>糗百ID: {{userinfo.id}}</view>
  7.         </view>
  8.         <view class="user-space-userinfo-item">
  9.             <view>个人信息</view>
  10.             <view>星座：{{getXingZuo}}</view>
  11.             <view>职业: {{userinfo.job}}</view>
  12.             <view>故乡: {{userinfo.path}}</view>
  13.             <view>情感: {{userinfo.qg}}</view>
  14.         </view>
  15.     </view>
  16. </template>
  18. <script>
  19.     import t from "../../common/time.js";
  20.     export default{
  21.         props:{
  22.             userinfo: Object
  23.         },
  24.         computed:{
  25.             getRegAge() {
  26.                 return t.gettime.sumAge(this.userinfo.regtime)
  27.             },
  28.             getXingZuo() {
  29.                 return t.gettime.getHoroscope(this.userinfo.birthday)
  30.             }
  31.         }
  32.     }
  33. </script>
  35. <style scoped>
  36.     .user-space-data {
  37.         background: #FFFFFF;
  38.         position: relative;
  39.         z-index: 10;
  40.         border-top-left-radius: 20upx;
  41.         border-top-right-radius: 20upx;
  42.         margin-top: -15upx;
  43.     }
  45.     .user-space-userinfo {
  46.         padding: 0 30upx;
  47.     }
  49.     .user-space-userinfo-item {
  50.         padding: 20upx 0;
  51.         border-bottom: 1upx solid #EEEEEE;
  52.     }
  54.     .user-space-userinfo-item>view {
  55.         color: #AAAAAA;
  56.     }
  58.     .user-space-userinfo-item>view:first-child {
  59.         color: #333333;
  60.         font-size: 35upx;
  61.         padding: 15upx 0;
  62.     }
  63. </style>

user-spce页面

  1. <template>
  2.     <view>
  3.         <!-- 背景图 + 用户基本信息 -->
  4.         <user-space-head :userinfo="userinfo"></user-space-head>
  5.         <!-- 统计 -->
  6.         <view class="user-space-data">
  7.             <home-data :homedata="spacedata"></home-data>
  8.         </view>
  9.         <view class="height:20upx;background:F4F4F4;"></view>
  11.         <!-- tabbar切换 -->
  12.         <swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollStyle="border-bottom:0;"
  13.             scrollItemStyle="width:33%;">
  14.         </swiper-tab-head>
  16.         <!-- 主页 -->
  17.         <user-space-userinfo :userinfo="userinfo"></user-space-userinfo>
  19.     </view>
  20. </template>
  22. <script>
  23.     import userSpaceHead from '@/components/user-space/user-space-head.vue';
  24.     import swiperTabHead from '@/components/index/swiper-tab-head.vue';
  25.     import homeData from '@/components/home/home-data.vue';
  26.     import userSpaceUserinfo from '@/components/user-space/user-space-userinfo.vue';
  27.     export default {
  28.         components: {
  29.             userSpaceHead,
  30.             homeData,
  31.             swiperTabHead,
  32.             userSpaceUserinfo
  33.         },
  34.         data() {
  35.             return {
  36.                 tabIndex: 0,
  37.                 tabBars: [{
  38.                         name: "主页",
  39.                         id: "zhuye"
  40.                     },
  41.                     {
  42.                         name: "糗事",
  43.                         id: "qiushi"
  44.                     }, {
  45.                         name: "动态",
  46.                         id: "dongtai"
  47.                     },
  48.                 ],
  49.                 userinfo: {
  50.                     bgimg: 1,
  51.                     userpic: '../../static/demo/userpic/11.jpg',
  52.                     username: '昵称',
  53.                     sex: 0,
  54.                     age: 20,
  55.                     isguanzhu: false,
  56.                     regtime: '2019-04-11',
  57.                     id: 1213,
  58.                     birthday: '1987-02-07',
  59.                     job: 'IT',
  60.                     path: '广东广州',
  61.                     qg: '已婚'
  62.                 },
  63.                 spacedata: [{
  64.                         name: "获赞",
  65.                         num: '10k'
  66.                     },
  67.                     {
  68.                         name: "关注",
  69.                         num: 0
  70.                     },
  71.                     {
  72.                         name: "粉丝",
  73.                         num: 0
  74.                     }
  75.                 ]
  76.             }
  77.         },
  78.         computed: {
  80.         },
  81.         methods: {
  82.             // tabbar点击事件
  83.             tabtap(index) {
  84.                 // console.log(index);
  85.                 this.tabIndex = index;
  86.             }
  87.         }
  88.     }
  89. </script>
  91. <style>
  92.     .user-spaace-margin {
  93.         margin: 15upx 0;
  94.     }
  97. </style>

结束