准备本地数据

src/main.js

@@ -2,7 +2,7 @@ import * as Vue from 'vue'
 import App from './App.vue'
 import mitt from 'mitt'
 import './assets/scss/index.less'
-// import './mock'// 导入 mock 数据处理
+import './mock'// 导入 mock 数据处理
 import api from './api'
 import router from "./router";
 import store from "./store";

src/mock/index.js

@@ -2,6 +2,20 @@ import Mock from 'mockjs'
 import globalMethods from '../utils/global-methods'
 import resource from "../assets/data/resource.js";
 
+function getParams(options) {
+  let params = globalMethods.$parseURL(options.url).params
+  params.pageNo = ~~params.pageNo
+  params.pageSize = ~~params.pageSize
+  return params
+}
+
+function getPage(options) {
+  let params = getParams(options)
+  let offset = params.pageNo * params.pageSize
+  let limit = params.pageNo * params.pageSize + params.pageSize
+  return {limit, offset, pageNo: params.pageNo}
+}
+
 Mock.setup({
   timeout: '500-1000'
 })
@@ -10,17 +24,12 @@ let allRecommendVideos = []
 for (let i = 0; i < 10; i++) {
   allRecommendVideos = allRecommendVideos.concat(resource.videos)
 }
-
 Mock.mock(/recommended/, options => {
-    let params = globalMethods.$parseURL(options.url).params
+    let page = getPage(options)
-    params.pageNo = ~~params.pageNo
-    params.pageSize = ~~params.pageSize
-    let offset = params.pageNo * params.pageSize
-    let limit = params.pageNo * params.pageSize + params.pageSize
     return Mock.mock({
       data: {
         total: allRecommendVideos.length,
-        list: allRecommendVideos.slice(offset, limit),
+        list: allRecommendVideos.slice(page.offset, page.limit),
       }, code: 200, msg: '',
     })
   }
@@ -69,41 +78,52 @@ Mock.Random.extend({
   Mock.mock('me', data)
 }())
 
+
 Mock.mock(/my/, options => {
-  let params = globalMethods.$parseURL(options.url).params
+  let page = getPage(options)
-  params.pageNo = ~~params.pageNo
-  params.pageSize = ~~params.pageSize
-  let offset = params.pageNo * params.pageSize
-  let limit = params.pageNo * params.pageSize + params.pageSize
   return Mock.mock({
     data: {
-      pageNo: params.pageNo,
+      pageNo: page.pageNo,
       total: resource.my.length,
-      list: resource.my.slice(offset, limit),
+      list: resource.my.slice(page.offset, page.limit),
+    }, code: 200, msg: '',
+  })
+})
+Mock.mock(/like/, options => {
+  let page = getPage(options)
+  return Mock.mock({
+    data: {
+      pageNo: page.pageNo,
+      total: resource.my.length,
+      list: resource.like.slice(page.offset, page.limit),
+    }, code: 200, msg: '',
+  })
+})
+Mock.mock(/private1/, options => {
+  let page = getPage(options)
+  return Mock.mock({
+    data: {
+      pageNo: page.pageNo,
+      total: resource.my.length,
+      list: resource.private1.slice(page.offset, page.limit),
     }, code: 200, msg: '',
   })
 })
 
+Mock.mock(/collect/, options => {
+  let page = getPage(options)
+  return Mock.mock({
+    data: {
+      pageNo: page.pageNo,
+      video: {
+        total: 0,
+        list: [],
+      },
+      audio: {
+        total: 0,
+        list: [],
+      }
+    }, code: 200, msg: '',
+  })
+})
 
-!(function private1() {
-  // let data = {total: Mock.Random.natural(1, 20)}
-  // data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  let data = {total: 4}
-  data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  Mock.mock(/private/, Mock.mock({data, code: 200, msg: '',}))
-}())
-
-!(function like() {
-  // let data = {total: Mock.Random.natural(1, 20)}
-  // data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  let data = {total: 11}
-  data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  Mock.mock(/like/, Mock.mock({data, code: 200, msg: '',}))
-}())
-!(function collect() {
-  // let data = {total: Mock.Random.natural(1, 20)}
-  // data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  let data = {total: 5}
-  data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}]
-  Mock.mock(/collect/, Mock.mock({data, code: 200, msg: '',}))
-}())

src/pages/me/Me.less

@@ -316,7 +316,7 @@
 
         .number {
           color: @second-text-color;
-          padding-bottom: 2rem;
+          padding-bottom: 1rem;
           border-bottom: 1px solid @line-color;
           display: flex;
           align-items: center;
@@ -339,6 +339,10 @@
           height: 1.2rem;
           margin-left: .6rem;
         }
+
+        .text{
+          white-space: pre-wrap;
+        }
       }
 
       .more {

src/pages/me/Me.vue

@@ -37,22 +37,22 @@
                     <span>获赞</span>
                     <span class="num">18</span>
                   </div>
-                  <div class="text">
-                    <span>粉丝</span>
-                    <span class="num">62</span>
-                  </div>
                   <div class="text">
                     <span>关注</span>
                     <span class="num">8</span>
                   </div>
+                  <div class="text">
+                    <span>粉丝</span>
+                    <span class="num">62</span>
+                  </div>
                 </div>
 
               </div>
               <div class="description">
-                <p class="name f22 mt1r mb1r">ttentau</p>
+                <p class="name f22 mt1r mb1r">{{ userinfo.nickname }}</p>
                 <div class="number mb1r">
-                  <span class="mr1r">私密账号</span>
+                  <span class="mr1r" v-if="userinfo.is_private">私密账号</span>
-                  <span>抖音号：605128307</span>
+                  <span>抖音号：{{ userinfo.unique_id }}</span>
                   <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
                 </div>
                 <div class="signature f12" @click="$nav('/edit-userinfo-item',{type:3})">
@@ -60,16 +60,20 @@
                     <span>点击添加介绍，让大家认识你...</span>
                     <img src="../../assets/img/icon/me/write-gray.png" alt="">
                   </template>
-                  <span v-else class="text">{{ userinfo.desc }}</span>
+                  <div v-else class="text" v-html="userinfo.desc"></div>
                 </div>
                 <div class="more">
                   <div class="age item" v-if="userinfo.birthday">
-                    <img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
+                    <img v-if="userinfo.sex == 0" src="../../assets/img/icon/me/woman.png" alt="">
-                    <img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
+                    <img v-if="userinfo.sex == 1" src="../../assets/img/icon/me/man.png" alt="">
                     <span>{{ filterAge(userinfo.birthday) }}岁</span>
                   </div>
-                  <div class="item" v-if="userinfo.location">
+                  <div class="item" v-if="userinfo.province || userinfo.city">
-                    {{ userinfo.location }}
+                    {{ userinfo.province }}
+                    <template v-if="userinfo.province &&  userinfo.city">
+                      -
+                    </template>
+                    {{ userinfo.city }}
                   </div>
                   <div class="item" v-if="userinfo.school.name">
                     {{ userinfo.school.name }}
@@ -389,7 +393,34 @@ export default {
       tempScroll: false,
       acceleration: 1.2,
       sprint: 15,
-      canScroll: true
+      canScroll: true,
+      localAuthor: {
+        "id": "93864497380",
+        "unique_id_modify_time": "1630393144",
+        "unique_id": "10040050",
+        "favoriting_count": 143,
+        "avatar": require('../../assets/img/icon/avatar/1.png'),
+        "city": "北京",
+        "school": "中央戏剧学院",
+        "province": null,
+        "country": "",
+        "location": "",
+        "birthday": "2002-01-01",
+        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+        "following_count": 66,
+        "follower_count": 235000,
+        "aweme_count": 1796000,
+        "nickname": "我是小睿耶",
+        "phone": "",
+        "sex": "",
+        "last_login_time": "1630423555",
+        "create_time": "1630423555",
+        "status": 1,
+        "desc": `一个普普通通学表演的
+        看到的人都能开开心心
+        `,
+        "is_private": 0
+      }
     }
   },
   computed: {

src/pages/me/Uploader.less

@@ -349,9 +349,9 @@
           color: white;
           transform: translateY(-2rem);
 
-          .number {
+          .number, .certification {
-            color: @second-text-color;
+            margin-bottom: 1rem;
-            padding-bottom: 2rem;
+            padding-bottom: 1rem;
             border-bottom: 1px solid @line-color;
             display: flex;
             align-items: center;
@@ -362,6 +362,20 @@
             }
           }
 
+          .number {
+            color: @second-text-color;
+
+            img {
+              margin-left: .5rem;
+            }
+          }
+
+          .certification {
+            img {
+              width: 1.6rem;
+              margin-right: .5rem;
+            }
+          }
         }
 
         .signature {
@@ -374,6 +388,10 @@
             height: 1.2rem;
             margin-left: .6rem;
           }
+
+          .text {
+            white-space: pre-wrap;
+          }
         }
 
         .more {

src/pages/me/Uploader.vue

@@ -41,26 +41,30 @@
               <div class="heat">
                 <div class="text">
                   <span>获赞</span>
-                  <span class="num">{{ localAuthor.favoriting_count }}</span>
+                  <span class="num">{{ $likeNum(localAuthor.aweme_count) }}</span>
-                </div>
-                <div class="text">
-                  <span>粉丝</span>
-                  <span class="num">{{ localAuthor.follower_count }}</span>
                 </div>
                 <div class="text">
                   <span>关注</span>
                   <span class="num">{{ localAuthor.following_count }}</span>
                 </div>
+                <div class="text">
+                  <span>粉丝</span>
+                  <span class="num">{{ $likeNum(localAuthor.follower_count) }}</span>
+                </div>
               </div>
             </div>
             <div class="description">
               <p class="name f22 mt1r mb1r">{{ localAuthor.nickname }}</p>
-              <div class="number mb1r">
+              <div class="certification" v-if="localAuthor.certification ">
+                <img src="../../assets/img/icon/me/certification.webp">
+                {{ localAuthor.certification }}
+              </div>
+              <div class="number" v-else>
                 <span>抖音号：{{ localAuthor.unique_id }}</span>
                 <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
               </div>
               <div class="signature f12" v-if="localAuthor.desc">
-                <span class="text">{{ localAuthor.desc }}</span>
+                <div class="text" v-html="localAuthor.desc"></div>
               </div>
               <div class="more">
                 <div class="age item" v-if="localAuthor.birthday">
@@ -68,8 +72,12 @@
                   <img v-if="localAuthor.sex === '1'" src="../../assets/img/icon/me/man.png" alt="">
                   <span>{{ filterAge(localAuthor.birthday) }}岁</span>
                 </div>
-                <div class="item" v-if="localAuthor.location">
+                <div class="item" v-if="localAuthor.province || localAuthor.city">
-                  {{ localAuthor.location }}
+                  {{ localAuthor.province }}
+                  <template v-if="localAuthor.province &&  localAuthor.city">
+                    -
+                  </template>
+                  {{ localAuthor.city }}
                 </div>
                 <div class="item" v-if="localAuthor.school?.name">
                   {{ localAuthor.school?.name }}
@@ -362,7 +370,7 @@ export default {
     },
     isOnThisPage(newVal) {
       if (newVal) {
-        this.getAuthor()
+        // this.getAuthor()
       }
     }
   },
@@ -374,7 +382,7 @@ export default {
       this.refs.maxSlideHeight = this.$refs.videoSlideRowList.wrapperHeight
       this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight
       this.canTransformY = this.refs.descHeight - this.floatHeight
-      this.getAuthor()
+      // this.getAuthor()
     })
     this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
     bus.on('baseSlide-moved', () => this.canScroll = false)

src/store/index.js

@@ -11,20 +11,34 @@ const store = Vuex.createStore({
     maskDialogMode: 'dark',
     version: '17.1.0',
     userinfo: {
-      id: 1,
-      name: '',
-      account: '',
-      desc: '',
-      sex: '男',
-      birthday: '1992-03-09',
-      location: "中国-四川-成都",
       school: {
-        name: '西南交通大学',
+        name: '中央戏剧学院',
         department: null,
         joinTime: null,
         education: null,
         displayType: enums.DISPLAY_TYPE.ALL,
-      }
+      },
+      "id": "93864497380",
+      "unique_id_modify_time": "1630393144",
+      "unique_id": "10040050",
+      "favoriting_count": 143,
+      "avatar": require('../assets/img/icon/avatar/1.png'),
+      "city": "成都",
+      "province": '四川',
+      "country": "中国",
+      "birthday": "2002-01-01",
+      "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
+      "following_count": 66,
+      "follower_count": 235000,
+      "aweme_count": 1796000,
+      "nickname": "我是小睿耶",
+      "phone": "",
+      "sex": "",
+      "last_login_time": "1630423555",
+      "create_time": "1630423555",
+      "status": 1,
+      "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
+      "is_private": 0
     },
     friends: {
       "all": [