save

2024-03-18 14:53:17 +08:00 · 2024-03-18 14:53:17 +08:00 · 945bc46984
commit 945bc46984
parent 39802f1bd9
27 changed files with 131618 additions and 107 deletions
--- a/README-en-US.md
+++ b/README-en-US.md
@ -1,7 +1,7 @@
 ### English | [简体中文](README.md)

 ## Preview Demo
-[Online Demo](http://douyin.ttentau.top/)
+[Online Demo](http://dy.ttentau.top/)

 ### Note: Please use mobile mode of Chrome browser to access the PC side. To switch Chrome to mobile mode, press F12 to bring up the console, then Ctrl+Shift+M
 ### Note: For Android phones please use [Via mobile browser](https://viayoo.com/zh-cn/) or Chrome mobile version preview. When other browsers detect a video on the page, they force the video to be in full screen and display the control button. As a result, both css and js are invalid
--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 ## 预览

-[在线预览DEMO](http://douyin.ttentau.top/)
+[在线预览DEMO](http://dy.ttentau.top/)

 #### 注意：电脑端请用Chrome浏览器的手机模式访问。Chrome切换成手机模式快捷键，先按F12调出控制台，再按Ctrl+Shift+M

--- a/index.html
+++ b/index.html
@ -45,7 +45,7 @@
          integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
          src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js"></script>
-  <script>eruda.init();</script>
+<!--  <script>eruda.init();</script>-->
 </head>
 <body>
 <div id="app"></div>
--- a/public/data/user-04074747..json
+++ b/public/data/user-04074747..json
--- a/public/data/user-12345xiaolaohu.json
+++ b/public/data/user-12345xiaolaohu.json
--- a/public/data/user-13632088.json
+++ b/public/data/user-13632088.json
--- a/public/data/user-71158770.json
+++ b/public/data/user-71158770.json
--- a/public/data/user-81069823274.json
+++ b/public/data/user-81069823274.json
--- a/public/data/user-8357999.json
+++ b/public/data/user-8357999.json
--- a/public/data/user-Dashalove.json
+++ b/public/data/user-Dashalove.json
--- a/public/data/user-LL991221.z.json
+++ b/public/data/user-LL991221.z.json
--- a/public/data/user-Lsy0508.json
+++ b/public/data/user-Lsy0508.json
--- a/public/data/user-SUNMENG333.json
+++ b/public/data/user-SUNMENG333.json
--- a/public/data/user-elfin16.json
+++ b/public/data/user-elfin16.json
--- a/public/data/user-jingyiziran.json
+++ b/public/data/user-jingyiziran.json
--- a/public/data/user-shmumu.json
+++ b/public/data/user-shmumu.json
--- a/src/assets/less/color.less
+++ b/src/assets/less/color.less
@ -1,6 +1,6 @@
@main-bg: rgb(21, 23, 36);
@active-main-bg: rgb(31, 37, 52);
-@second-text-color: rgb(143, 143, 158);
+@second-text-color: rgb(186, 186, 187);
@second-btn-color: rgb(58, 58, 70);
@second-btn-color-tran: rgba(58, 58, 70, .4);
@line-color: rgb(37, 45, 66);
--- a/src/components/Posters.vue
+++ b/src/components/Posters.vue
@ -2,10 +2,10 @@
  <div class="posters">
    <div class="poster-item" v-for="(i,index) in list" @click="$no">
      <!--       @click="$nav('/video-detail')"-->
-      <img class="poster" v-lazy="$imgPreview(i.cover)" alt="">
+      <img class="poster" v-lazy="$checkImgUrl(i.video.cover.url_list[0])" alt="">
      <div class="num" v-if="mode === 'normal'">
-        <img class="love" src="../assets/img/icon/love.svg" alt="">
-        <span>{{ formatNumber(i.digg_count) }}</span>
+        <Icon icon="icon-park-outline:like" />
+        <span>{{ formatNumber(i.statistics.digg_count) }}</span>
      </div>
      <div class="date" v-if="mode === 'date'">
        <div class="day">{{ getDay(i.create_time) }}</div>
@ -21,6 +21,8 @@
 </template>

 <script>
+import {$checkImgUrl, $no} from "@/utils";
+
 export default {
  /*@click="$nav('/video-detail')"*/
  name: "Posters",
@ -37,6 +39,8 @@ export default {
    }
  },
  methods: {
+    $no,
+    $checkImgUrl,
    getDay(time) {
      let date = new Date(time * 1000)
      return date.getDate()
@ -91,6 +95,7 @@ export default {
    width: 100%;
    height: 100%;
    display: block;
+    object-fit: cover;
  }

  .music {
@ -112,6 +117,7 @@ export default {
    display: flex;
    align-items: center;
    font-size: 14rem;
+    gap: 3rem;

    .love {
      width: 14rem;
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@ -4,24 +4,25 @@
       ref="page">
    <div ref="float" class="float" :class="state.floatFixed?'fixed':''">
      <div class="left" @click="$emit('back')">
-        <img class="back" src="@/assets/img/icon/next.svg" alt="">
+        <Icon class="icon" icon="eva:arrow-ios-back-fill"/>
        <transition name="fade">
          <div class="float-user" v-if="state.floatFixed">
-            <img v-lazy="Utils.$imgPreview(props.currentItem.user.avatar_thumb.url_list[0])" class="avatar"/>
-            <img v-if="!props.currentItem.user.follow_status" src="@/assets/img/icon/add-light.png" alt="" class="add">
-            <span @click="followButton">{{ props.currentItem.user.follow_status ? '私信' : '关注' }}</span>
+            <img v-lazy="Utils.$imgPreview(props.currentItem.author.avatar_168x168.url_list[0])" class="avatar"/>
+            <img v-if="!props.currentItem.author.follow_status" src="@/assets/img/icon/add-light.png" alt=""
+                 class="add">
+            <span @click="followButton">{{ props.currentItem.author.follow_status ? '私信' : '关注' }}</span>
          </div>
        </transition>
      </div>
      <div class="right">
        <transition name="fade">
-          <div class="request" v-if="!state.floatFixed && props.currentItem.user.is_follow">
+          <div class="request" v-if="!state.floatFixed && props.currentItem.author.is_follow">
            <img @click="$nav('/me/request-update')" src="@/assets/img/icon/me/finger-right.png" alt="">
            <span>求更新</span>
          </div>
        </transition>
-        <img class="menu" src="@/assets/img/icon/search-light.png" alt="">
-        <img class="menu" src="@/assets/img/icon/more.svg" alt="" @click.stop="$emit('showFollowSetting')">
+        <Icon class="icon" icon="ion:search"/>
+        <Icon class="icon" icon="ri:more-line" @click.stop="$emit('showFollowSetting')"/>
      </div>
    </div>
    <div class="main"
@ -32,24 +33,25 @@
      <!--   src="@/assets/img/header-bg.png"   -->
      <header>
        <img
-            :style="{opacity:props.currentItem.user.cover_url[0].url_list.length?1:0}"
+            :style="{opacity:props.currentItem.author.cover_url[0].url_list.length?1:0}"
            ref="cover"
-            :src="props.currentItem.user.cover_url[0].url_list[0]"
-            @click="state.previewImg = props.currentItem.user.cover_url[0].url_list[0]"
+            :src="$checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])"
+            @click="state.previewImg = $checkImgUrl(props.currentItem.author.cover_url[0].url_list[0])"
            alt=""
            class="cover">
        <div class="avatar-wrapper">
-          <img v-lazy="Utils.$imgPreview(props.currentItem.user.avatar_thumb.url_list[0])" class="avatar"
-               @click="state.previewImg = props.currentItem.user.avatar_thumb.url_list[0]">
+          <img v-lazy="$checkImgUrl(props.currentItem.author.avatar_168x168.url_list[0])" class="avatar"
+               @click="state.previewImg = $checkImgUrl(props.currentItem.author.avatar_300x300.url_list[0])">
          <div class="description">
-            <div class="name f22 mb1r">{{ props.currentItem.user.nickname }}</div>
-            <div class="certification" v-if="props.currentItem.user.certification ">
+            <div class="name f22 mb1r">{{ props.currentItem.author.nickname }}</div>
+            <div class="certification" v-if="props.currentItem.author.certification ">
              <img src="@/assets/img/icon/me/certification.webp">
-              {{ props.currentItem.user.certification }}
+              {{ props.currentItem.author.certification }}
            </div>
            <div class="number" v-else>
-              <span>抖音号：{{ props.currentItem.user.short_id }}</span>
-              <img src="@/assets/img/icon/me/copy.png" alt="" @click.stop="Utils.copy">
+              <span>抖音号：{{ props.currentItem.author.unique_id || props.currentItem.author.short_id }}</span>
+              <img src="@/assets/img/icon/me/copy.png" alt=""
+                   @click.stop="Utils.copy(props.currentItem.author.unique_id || props.currentItem.author.short_id)">
            </div>
          </div>
        </div>
@ -57,49 +59,47 @@
      <div class="info">
        <div class="heat">
          <div class="text">
-            <span class="num">{{ Utils.formatNumber(props.currentItem.user.total_favorited) }}</span>
+            <span class="num">{{ Utils.formatNumber(props.currentItem.author.total_favorited) }}</span>
            <span>获赞</span>
          </div>
          <div class="text">
-            <span class="num">{{ Utils.formatNumber(props.currentItem.user.following_count) }}</span>
+            <span class="num">{{ Utils.formatNumber(props.currentItem.author.following_count) }}</span>
            <span>关注</span>
          </div>
          <div class="text">
-            <span class="num">{{ Utils.formatNumber(props.currentItem.user.mplatform_followers_count) }}</span>
+            <span class="num">{{ Utils.formatNumber(props.currentItem.author.mplatform_followers_count) }}</span>
            <span>粉丝</span>
          </div>
        </div>

-        <div class="signature f12" v-if="props.currentItem.user.signature">
-          <div class="text" v-html="props.currentItem.user.signature"></div>
+        <div class="signature f12" v-if="props.currentItem.author.signature">
+          <div class="text" v-html="props.currentItem.author.signature"></div>
        </div>
        <div class="more">
-          <div class="age item" v-if="props.currentItem.user.user_age !== -1">
-            <img v-if="props.currentItem.user.gender" src="@/assets/img/icon/me/man.png" alt="">
-            <img v-else src="@/assets/img/icon/me/woman.png" alt="">
-            <span>{{ props.currentItem.user.user_age }}岁</span>
+          <div class="age item" v-if="props.currentItem.author.user_age !== -1">
+            <img v-if="props.currentItem.author.gender == 1" src="@/assets/img/icon/me/man.png" alt="">
+            <img v-if="props.currentItem.author.gender == 2" src="@/assets/img/icon/me/woman.png" alt="">
+            <span>{{ props.currentItem.author.user_age }}岁</span>
          </div>
-          <div class="item" v-if="props.currentItem.user.ip_location">
-            {{ props.currentItem.user.ip_location }}
+          <div class="item" v-if="props.currentItem.author.ip_location">
+            {{ props.currentItem.author.ip_location }}
          </div>
-          <template v-else>
-            <div class="item" v-if="props.currentItem.user.province || props.currentItem.user.city">
-              {{ props.currentItem.user.province }}
-              <template v-if="props.currentItem.user.province &&  props.currentItem.user.city">
-                ·
-              </template>
-              {{ props.currentItem.user.city }}
-            </div>
-          </template>
-          <div class="item" v-if="props.currentItem.user.school?.name">
-            {{ props.currentItem.user.school?.name }}
+          <div class="item" v-if="props.currentItem.author.province || props.currentItem.author.city">
+            {{ props.currentItem.author.province }}
+            <template v-if="props.currentItem.author.province &&  props.currentItem.author.city">
+              ·
+            </template>
+            {{ props.currentItem.author.city }}
+          </div>
+          <div class="item" v-if="props.currentItem.author.school?.name">
+            {{ props.currentItem.author.school?.name }}
          </div>
        </div>
      </div>
      <template v-if="props.currentItem.isRequest">
        <div class="other">
          <div class="scroll-x" @touchmove="stop">
-            <div class="item" v-for="item in props.currentItem.user.card_entries">
+            <div class="item" v-for="item in props.currentItem.author.card_entries">
              <img :src="item.icon_dark.url_list[0]" alt="">
              <div class="right">
                <div class="top">{{ item.title }}</div>
@ -111,8 +111,9 @@

        <div class="my-buttons">
          <div class="follow-display">
-            <div class="follow-wrapper" :class="props.currentItem.user.follow_status ? 'follow-wrapper-followed' : ''">
-              <div class="no-follow" @click="props.currentItem.user.follow_status = 1">
+            <div class="follow-wrapper"
+                 :class="props.currentItem.author.follow_status ? 'follow-wrapper-followed' : ''">
+              <div class="no-follow" @click="props.currentItem.author.follow_status = 1">
                <img src="@/assets/img/icon/add-white.png" alt="">
                <span>关注</span>
              </div>
@ -144,7 +145,7 @@
          <div class="friends"
               @touchmove="stop">
            <div class="friend" v-for="item in friends.all">
-              <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
+              <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$checkImgUrl(item.avatar)" alt="">
              <span class="name">{{ item.name }}</span>
              <span class="tips">可能感兴趣的人</span>
              <dy-button type="primary">关注</dy-button>
@ -162,11 +163,11 @@
        </div>

        <div class="total" ref="total">
-          作品 {{ props.currentItem.user.aweme_count }}
+          作品 {{ props.currentItem.author.aweme_count }}
          <img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
        </div>
        <div class="videos">
-          <Posters v-if="props.currentItem.post.length" :list="props.currentItem.post"></Posters>
+          <Posters v-if="props.currentItem.aweme_list.length" :list="props.currentItem.aweme_list"></Posters>
        </div>
      </template>
    </div>
@ -175,7 +176,7 @@

 <script setup>
 import {computed, onMounted, reactive, ref, watch} from "vue";
-import Utils from "@/utils";
+import Utils, {$checkImgUrl} from "@/utils";
 import {useNav} from "@/utils/hooks/useNav";
 import {useStore} from "vuex";
 import resource from "@/assets/data/resource";
@ -191,9 +192,9 @@ const props = defineProps({
  currentItem: {
    type: Object,
    default: {
-      user: DefaultUser,
+      author: DefaultUser,
      isRequest: false,
-      post: [],
+      aweme_list: [],
    }
  },
  active: {
@ -286,7 +287,7 @@ watch(() => props.active,
        let res = await api.user.profile()
        console.log('res', res)
        if (res.code === 200) {
-          res.data.post = res.data.post.map(v => {
+          res.data.aweme_list = res.data.aweme_list.map(v => {
            return {
              cover: v.video.cover.url_list[0],
              digg_count: v.statistics.digg_count,
@ -294,7 +295,7 @@ watch(() => props.active,
            }
          })
          //去年保存的老数据有id。现在去网页版复制数据没id了。。。
-          res.data.user.unique_id = props.currentItem.user.unique_id
+          res.data.user.unique_id = props.currentItem.author.unique_id
          emit('update:currentItem', merge(props.currentItem, {...res.data, isRequest: true}))
        }
      }
@ -993,21 +994,21 @@ function touchEnd(e) {
      }
    }

+    .icon {
+      color: white;
+      border-radius: 50%;
+      background: rgba(82, 80, 80, 0.5);
+      padding: 6rem;
+      font-size: 16rem;
+    }
+
    .left {
      display: flex;
      align-items: center;

-      .back {
-        transform: rotate(180deg);
-        border-radius: 50%;
-        background: rgba(82, 80, 80, 0.5);
-        padding: 6rem;
-        width: 18rem;
-      }
-
      .float-user {
        display: inline-flex;
-        margin-left: 32rem;
+        margin-left: 22rem;
        color: white;
        font-size: 12rem;
        align-items: center;
@ -1034,6 +1035,7 @@ function touchEnd(e) {
      color: white;
      align-items: center;
      position: relative;
+      gap: 15rem;

      .request {
        font-size: 12rem;
@ -1051,13 +1053,6 @@ function touchEnd(e) {
        }
      }

-      .menu {
-        margin-left: 15rem;
-        border-radius: 50%;
-        background: rgba(82, 80, 80, 0.5);
-        padding: 6rem;
-        width: 18rem;
-      }
    }
  }
 }
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@ -2,7 +2,6 @@
  <div class="video-wrapper" ref="videoWrapper" :class="positionName">
    <Loading v-if="loading" style="position: absolute"/>
    <!--    <video :src="item.video + '?v=123'"-->
-
    <video
        :src="item.video.play_addr.url_list[0]"
        :poster="$checkImgUrl(item.video.cover.url_list[0])"
@ -61,7 +60,7 @@
        </div>
        <div class="bg"></div>
        <div class="progress-line" :style="durationStyle"></div>
-        <div class="point"></div>
+        <div class="point" v-if="duration > 15 || isMove"></div>
      </div>
    </div>
  </div>
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@ -77,10 +77,12 @@ watch(
        if (oldVal.length === 0) {
          insertContent()
        } else {
-          let endIndex = oldVal.length + 3
-          let top = $(wrapperEl.value).find(`.${itemClassName}:last`).css('top')
-          newVal.slice(oldVal.length, endIndex).map((item, index) => {
-            let el = getInsEl(item, oldVal.length + index)
+          let lastSlideItem = $(wrapperEl.value).find(`.${itemClassName}:last`)
+          let top = lastSlideItem.css('top')
+          let lastIndex = Number(lastSlideItem.attr('data-index')) + 1
+          console.log('lastIndex', lastIndex)
+          newVal.slice(lastIndex, lastIndex + 3).map((item, index) => {
+            let el = getInsEl(item, lastIndex + index)
            //这里必须要设置个top值，不然会把前面的条目给覆盖掉
            //2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
            //因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还
@ -121,7 +123,7 @@ watch(
      if (newVal && !props.list.length) {
        return emit('refresh')
      }
-      console.log('active', 'newVal', newVal, 'oldVal', oldVal)
+      // console.log('active', 'newVal', newVal, 'oldVal', oldVal)
      if (newVal) {
        bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[state.localIndex])
      }
--- a/src/components/slide/common.js
+++ b/src/components/slide/common.js
@ -29,7 +29,7 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
    if (Math.abs(state.move.x) > judgeValue || Math.abs(state.move.y) > judgeValue) {
      let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10)
      state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1;
-      console.log('angle', angle, state.next)
+      // console.log('angle', angle, state.next)
      state.needCheck = false
    } else {
      return false
--- a/src/mock/index.js
+++ b/src/mock/index.js
@ -80,7 +80,7 @@ let t = [
 // }

 Mock.mock(/recommended/, options => {
-  console.log('recommended', options)
+  // console.log('recommended', options)
  let page = getPage(options)
  return Mock.mock({
    data: {
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@ -128,7 +128,7 @@
            v-model:currentItem="state.currentItem"
            :active="state.baseIndex === 1"
            @toggleCanMove="e => state.canMove = e"
-            @back="state.baseIndex = 0"
+            @back="state.baseIndex = 1"
            @showFollowSetting="state.showFollowSetting = true"
            @showFollowSetting2="state.showFollowSetting2 = true"
        />
@ -262,9 +262,9 @@ const state = reactive({
  commentVisible: false,
  fullScreen: false,
  currentItem: {
-    user: DefaultUser,
+    author: DefaultUser,
    isRequest: false,
-    post: [],
+    aweme_list: [],
  }
 })

@ -275,23 +275,25 @@ function delayShowDialog(cb) {
 }

 function setCurrentItem(item) {
-  if (state.currentItem.user.unique_id !== item.author.unique_id) {
+  if (state.currentItem.author.uid !== item.author.uid) {
+    let id = item.author.unique_id || item.author.short_id
+    console.log('item', id)
    state.currentItem = {
      ...item,
-      user: {
-        ...DefaultUser,
-        desc: item.author.desc,
-        nickname: item.author.nickname,
-        unique_id: item.author.unique_id,
-      },
-      isRequest: false,
-      post: [],
+      isRequest: true,
+      aweme_list: [],
    }
+    fetch(`/data/user-${id}.json`).then(r => {
+      r.json().then(l => {
+        // console.log('k', l)
+        state.currentItem.aweme_list = l
+      })
+    })
+
  }
-  console.log('item', item)
+  // console.log('item', item)
 }

-bus.once(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
 onMounted(() => {
  bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => state.fullScreen = true)
  bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => state.fullScreen = false)
@ -308,7 +310,7 @@ onMounted(() => {
  })
  bus.on(EVENT_KEY.NAV, ({path, query}) => nav(path, query))
  bus.on(EVENT_KEY.GO_USERINFO, () => {
-    state.baseIndex = 1
+    state.baseIndex = 2
  })
  bus.once(EVENT_KEY.CURRENT_ITEM, setCurrentItem)
 })
--- a/src/pages/home/slide/SlideList.vue
+++ b/src/pages/home/slide/SlideList.vue
@ -94,7 +94,7 @@ async function getData(refresh = false) {
  if (loading.value) return
  store.commit('setLoading', true)
  let res = await props.api({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize})
-  console.log('getSlide4Data-', 'refresh', refresh, res)
+  // console.log('getSlide4Data-', 'refresh', refresh, res)
  store.commit('setLoading', false)
  if (res.code === 200) {
    state.totalSize = res.data.total
--- a/src/utils/const_var.js
+++ b/src/utils/const_var.js
@ -76,7 +76,10 @@ export const DefaultUser = {
      "url_list": []
    }
  ],
-  avatar_thumb: {
+  avatar_168x168: {
+    "url_list": []
+  },
+  avatar_300x300: {
    "url_list": []
  }
 }
--- a/src/utils/index.jsx
+++ b/src/utils/index.jsx
@ -411,16 +411,17 @@ const Utils = {
    bus.emit(EVENT_KEY.UPDATE_ITEM, {position: props.position, item: old})
  },
  copy(val) {
-    const input = document.createElement('input');
-    input.setAttribute('readonly', 'readonly');
-    input.setAttribute('value', val);
-    document.body.appendChild(input);
-    input.setSelectionRange(0, 9999);
-    if (document.execCommand('copy')) {
-      document.execCommand('copy');
+    let textarea = document.createElement('textarea');
+    document.body.appendChild(textarea);
+    textarea.style.position = 'absolute';
+    textarea.style.clip = 'rect(0 0 0 0)';
+    textarea.value = val;
+    textarea.select();
+    if (document.execCommand) {
+      document.execCommand('copy', true);
      this.$notice('已复制')
    }
-    document.body.removeChild(input);
+    document.body.removeChild(textarea);
  }
 }