开发用户主页

api/user.js

@@ -1,24 +1,26 @@
 import {
-    request
+  request
 } from "../utils/request";
 
 module.exports = {
-    // 用户登录
-    userLogin: data => request('/user/openId', 'get', data),
-    //获取用户信息
-    getUserInfo: data => request('/v3/user/my', 'get', data),
-    // 设置用户信息
-    setUserInfo: (data, method = 'post') => request('/user', method, data),
-    //获取是否vip及过期时间
-    getVipInfo: data => request('/auth', 'get', data),
-    //获取自己朗读的作品
-    getSelfRead: data => request('/userRead/my', 'get', data),
-    //获取其他用户朗读的作品
-    getUserRead: data => request('/userRead', 'get', data),
-    // 获取用户关注列表
-    getFansList: data => request('/fans', 'get', data),
-    // 加关注
-    setFans: data => request('/fans', 'post', data),
-    // 获取收藏列表
-    getFavoritesList: data => request('/favorites', 'get', data),
+  // 用户登录
+  userLogin: data => request('/user/openId', 'get', data),
+  //获取用户信息
+  getMyInfo: data => request('/v3/user/my', 'get', data),
+  //获取他人用户信息,
+  getUserInfo: data => request('/user/info', 'get', data),
+  // 设置用户信息
+  setUserInfo: (data, method = 'post') => request('/user', method, data),
+  //获取是否vip及过期时间
+  getVipInfo: data => request('/auth', 'get', data),
+  //获取自己朗读的作品
+  getSelfRead: data => request('/userRead/my', 'get', data),
+  //获取其他用户朗读的作品
+  getUserRead: data => request('/userRead', 'get', data),
+  // 获取用户关注列表
+  getFansList: data => request('/fans', 'get', data),
+  // 加关注请求类型为post,取消关注为put
+  setFans: (data, method = 'post') => request('/fans', method, data),
+  // 获取收藏列表
+  getFavoritesList: data => request('/favorites', 'get', data),
 }

app.js

@@ -1,7 +1,7 @@
 // app.js
 import {
   userLogin,
-  getUserInfo
+  getMyInfo
 } from '~/api/user'
 import {
   createStoreBindings
@@ -23,7 +23,7 @@ App({
     let shareUid = options.query.uid
     let uid = wx.getStorageSync('uid')
     if (uid) {
-      let userInfo = await getUserInfo()
+      let userInfo = await getMyInfo()
       this.setUser(userInfo.user)
       if (getApp().callBack) {
         getApp().callBack();

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/personal/index",
     "pages/index/index",
     "pages/childClassify/index",
     "pages/pkResult/index",

pages/my/index.js

@@ -1,5 +1,5 @@
 import {
-    getUserInfo,
+  getMyInfo,
     getVipInfo
 } from '~/api/user'
 import {
@@ -39,7 +39,7 @@ Page({
     },
     // 设置用户信息及vip状态和任务完成情况
     async setUserInfo() {
-        let userInfo = await getUserInfo()
+        let userInfo = await getMyInfo()
         let vipTime = await getVipInfo()
         this.getTasks()
         this.setData({

pages/personal/index.js

@@ -0,0 +1,44 @@
+import {
+  getUserInfo,
+  setFans
+} from '~/api/user'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    userInfo: {}
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.getUserInfo()
+  },
+  async getUserInfo() {
+    let res = await getUserInfo({
+      uid: '16c02342a44f45d78bb25b52ae6082ae'
+    })
+    console.log(res);
+    this.setData({
+      userInfo: res
+    })
+  },
+  // 关注
+  async setFans() {
+    let newLike = !this.data.userInfo.like
+    console.log(newLike);
+    await setFans({
+      uid: this.data.userInfo.user.uid
+    }, 'put')
+    this.setData({
+      ['userInfo.like']: newLike
+    })
+    wx.showToast({
+      title: newLike ? '已关注' : '取消关注',
+      icon: 'none'
+    })
+  },
+})

pages/personal/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "TA的主页"
+}

pages/personal/index.less

@@ -0,0 +1,113 @@
+.personalBox {
+  padding: 12rpx 20rpx;
+
+  .userBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: white;
+    padding: 20rpx 12rpx 0rpx;
+    border-radius: 20rpx;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+
+    .identity {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+
+      .avatar {
+        width: 106rpx;
+        height: 106rpx;
+        border-radius: 50%;
+        position: relative;
+      }
+
+      .identityText {
+        width: 80rpx;
+        margin-top: 6rpx;
+        font-size: 24rpx;
+        color: white;
+        background-color: #10CA61;
+        border-radius: 25rpx;
+      }
+    }
+
+    .userRight {
+      flex: 1;
+      margin-left: 30rpx;
+      padding: 0px 10rpx;
+
+      .uRtop {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .uRtopleft {
+          .nickName {
+            max-width: 340rpx;
+            color: #333;
+            font-size: 32rpx;
+          }
+
+          .gradeText {
+            margin: 18rpx 0rpx 12rpx;
+            font-size: 24rpx;
+            color: #989A9C;
+          }
+        }
+
+        .follow {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 140rpx;
+          height: 52rpx;
+          font-size: 24rpx;
+          border-radius: 50rpx;
+          border: 1rpx solid #1BC665;
+          color: #1BC665;
+
+          .character {
+            width: 22rpx;
+            height: 22rpx;
+            margin-right: 6rpx;
+          }
+        }
+
+        .isFans {
+          border: 1rpx solid #969696;
+          color: #969696;
+        }
+      }
+
+      .uRBtm {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 18rpx 0rpx;
+
+        .count {
+          width: 33%;
+          font-size: 28rpx;
+          color: rgba(0, 0, 0, 0.6);
+          text-align: center;
+
+          .countNum {
+            margin-left: 10rpx;
+          }
+        }
+
+        .countFirst {
+          text-align: left;
+        }
+
+        .countEnd {
+          text-align: right;
+          border: none;
+        }
+      }
+    }
+  }
+}

pages/personal/index.wxml

@@ -0,0 +1,34 @@
+<view class="personalBox">
+  <view class="userBox">
+    <view class="identity">
+      <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
+      <view class="identityText">{{ userInfo.user.profession}}</view>
+    </view>
+    <view class="userRight">
+      <view class="uRtop">
+        <view class="uRtopleft">
+          <view class="nickName textOver">{{userInfo.user.nickName||'请输入昵称' }}</view>
+          <view class="gradeText textOver">学号：{{userInfo.user.eid}}</view>
+        </view>
+        <view class="follow {{userInfo.like?'isFans':''}}" bindtap="setFans">
+          <image src="{{userInfo.like?'/static/follow_2.png':'/static/follow_1.png'}}" class="character" mode="" />
+          <text>{{userInfo.like?'已关注':'关注'}}</text>
+        </view>
+      </view>
+      <view class="uRBtm">
+        <view class="count countFirst">
+          总场<text class="countNum textOver">{{filters.numFilter(userInfo.readAmount)|| 0}}</text>
+        </view>
+        <view class="count countFirst">
+          胜<text class="countNum textOver">{{filters.numFilter(userInfo.readAmount)|| 0}}</text>
+        </view>
+        <view class="count">
+          平<text class="countNum textOver">{{filters.numFilter(userInfo.fansAmount)|| '0'}}</text>
+        </view>
+        <view class="count countEnd">
+          负<text class="countNum textOver">{{filters.numFilter(userInfo.playAmount) || 0}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

pages/personal/index.wxss

@@ -0,0 +1,95 @@
+.personalBox {
+  padding: 12rpx 20rpx;
+}
+.personalBox .userBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  padding: 20rpx 12rpx 0rpx;
+  border-radius: 20rpx;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+}
+.personalBox .userBox .identity {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.personalBox .userBox .identity .avatar {
+  width: 106rpx;
+  height: 106rpx;
+  border-radius: 50%;
+  position: relative;
+}
+.personalBox .userBox .identity .identityText {
+  width: 80rpx;
+  margin-top: 6rpx;
+  font-size: 24rpx;
+  color: white;
+  background-color: #10CA61;
+  border-radius: 25rpx;
+}
+.personalBox .userBox .userRight {
+  flex: 1;
+  margin-left: 30rpx;
+  padding: 0px 10rpx;
+}
+.personalBox .userBox .userRight .uRtop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.personalBox .userBox .userRight .uRtop .uRtopleft .nickName {
+  max-width: 340rpx;
+  color: #333;
+  font-size: 32rpx;
+}
+.personalBox .userBox .userRight .uRtop .uRtopleft .gradeText {
+  margin: 18rpx 0rpx 12rpx;
+  font-size: 24rpx;
+  color: #989A9C;
+}
+.personalBox .userBox .userRight .uRtop .follow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140rpx;
+  height: 52rpx;
+  font-size: 24rpx;
+  border-radius: 50rpx;
+  border: 1rpx solid #1BC665;
+  color: #1BC665;
+}
+.personalBox .userBox .userRight .uRtop .follow .character {
+  width: 22rpx;
+  height: 22rpx;
+  margin-right: 6rpx;
+}
+.personalBox .userBox .userRight .uRtop .isFans {
+  border: 1rpx solid #969696;
+  color: #969696;
+}
+.personalBox .userBox .userRight .uRBtm {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 18rpx 0rpx;
+}
+.personalBox .userBox .userRight .uRBtm .count {
+  width: 33%;
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.6);
+  text-align: center;
+}
+.personalBox .userBox .userRight .uRBtm .count .countNum {
+  margin-left: 10rpx;
+}
+.personalBox .userBox .userRight .uRBtm .countFirst {
+  text-align: left;
+}
+.personalBox .userBox .userRight .uRBtm .countEnd {
+  text-align: right;
+  border: none;
+}