refactor: optimize the code

zyronon · Apr 20, 2024 · 6976f58 · 6976f58
1 parent b8d8354
commit 6976f58
Show file tree

Hide file tree

Showing 24 changed files with 238 additions and 193 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "type-check": "vue-tsc --build --force",
     "report": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "lint": "eslint  --fix  . --ext .vue,.js,.ts,.tsx,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "prepare": "husky",
     "commit": "git-cz"

diff --git a/src/api/user.ts b/src/api/user.ts
@@ -1,29 +1,29 @@
-import request from '../utils/request'
+import { request } from '@/utils/request'
 
-export function userinfo(params, data) {
+export function userinfo(params?: any, data?: any) {
   return request({ url: '/user/userinfo', method: 'get', params, data })
 }
 
-export function userVideoList(params, data) {
+export function userVideoList(params?: any, data?: any) {
   return request({ url: '/user/video_list', method: 'get', params, data })
 }
 
-export function panel(params, data) {
+export function panel(params?: any, data?: any) {
   return request({ url: '/user/panel', method: 'get', params, data })
 }
 
-export function friends(params, data) {
+export function friends(params?: any, data?: any) {
   return request({ url: '/user/friends', method: 'get', params, data })
 }
 
-export function userCollect(params, data) {
+export function userCollect(params?: any, data?: any) {
   return request({ url: '/user/collect', method: 'get', params, data })
 }
 
-export function recommendedPost(params, data) {
+export function recommendedPost(params?: any, data?: any) {
   return request({ url: '/post/recommended', method: 'get', params, data })
 }
 
-export function recommendedShop(params, data) {
+export function recommendedShop(params?: any, data?: any) {
   return request({ url: '/shop/recommended', method: 'get', params, data })
 }
diff --git a/src/api/videos.ts b/src/api/videos.ts
@@ -1,28 +1,29 @@
-import request from '../utils/request'
+import { request } from '@/utils/request'
 
-export function historyOther(params, data) {
+export function historyOther(params?: any, data?: any) {
   return request({ url: '/video/historyOther', method: 'get', params, data })
 }
 
-export function historyVideo(params, data) {
+export function historyVideo(params?: any, data?: any) {
   return request({ url: '/video/history', method: 'get', params, data })
 }
 
-export function recommendedVideo(params, data) {
+export function recommendedVideo(params?: any, data?: any) {
   return request({ url: '/video/recommended', method: 'get', params, data })
 }
 
-export function myVideo(params, data) {
+export function myVideo(params?: any, data?: any) {
   return request({ url: '/video/my', method: 'get', params, data })
 }
 
-export function privateVideo(params, data) {
+export function privateVideo(params?: any, data?: any) {
   return request({ url: '/video/private', method: 'get', params, data })
 }
 
-export function likeVideo(params, data) {
+export function likeVideo(params?: any, data?: any) {
   return request({ url: '/video/like', method: 'get', params, data })
 }
-export function videoComments(params, data) {
+
+export function videoComments(params?: any, data?: any) {
   return request({ url: '/video/comments', method: 'get', params, data })
 }
diff --git a/src/components/slide/SlideAlbum.vue b/src/components/slide/SlideAlbum.vue
@@ -236,7 +236,6 @@ const props = defineProps({
     }
   }
 })
-const judgeValue = 20
 const wrapperEl = ref(null)
 
 //用于解决，touch事件触发startPlay,然后click事件又触发stopLoop的问题

diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
@@ -22,6 +22,14 @@ const props = defineProps({
     type: String,
     default: () => ''
   },
+  autoplay: {
+    type: Boolean,
+    default: () => false
+  },
+  indicator: {
+    type: Boolean,
+    default: () => false
+  },
   //改变index，是否使用动画
   changeActiveIndexUseAnim: {
     type: Boolean,
@@ -69,6 +77,16 @@ watch(
 onMounted(() => {
   slideInit(wrapperEl.value, state)
 
+  if (props.autoplay) {
+    setInterval(() => {
+      if (state.localIndex === state.wrapper.childrenLength - 1) {
+        emit('update:index', 0)
+      } else {
+        emit('update:index', state.localIndex + 1)
+      }
+    }, 3000)
+  }
+
   //观察子元素数量变动，获取最新数量
   //childrenLength用于canNext方法判断当前页是否是最后一页，是则不能滑动，不捕获事件
   ob = new MutationObserver(() => {
@@ -97,6 +115,15 @@ function touchEnd(e: TouchEvent) {
 
 <template>
   <div class="slide horizontal">
+    <div class="indicator-bullets" v-if="indicator && state.wrapper.childrenLength">
+      <div
+        class="bullet"
+        :class="{ active: state.localIndex === item - 1 }"
+        :key="i"
+        v-for="(item, i) in state.wrapper.childrenLength"
+      ></div>
+    </div>
+
     <div
       class="slide-list"
       ref="wrapperEl"
@@ -108,3 +135,28 @@ function touchEnd(e: TouchEvent) {
     </div>
   </div>
 </template>
+
+<style scoped lang="less">
+.indicator-bullets {
+  position: absolute;
+  bottom: 10rem;
+  z-index: 2;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  .bullet {
+    @width: 5rem;
+    width: @width;
+    height: @width;
+    margin: 0 3rem;
+    border-radius: 50%;
+    background: var(--second-btn-color);
+
+    &.active {
+      background: white;
+    }
+  }
+}
+</style>
diff --git a/src/config/index.ts b/src/config/index.ts
@@ -16,3 +16,4 @@ export const IS_SUB_DOMAIN = ['GITEE_PAGES', 'GP_PAGES'].includes(import.meta.en
 export const BASE_URL = BASE_URL_MAP[import.meta.env.VITE_ENV]
 export const IMG_URL = BASE_URL + '/images/'
 export const FILE_URL = BASE_URL + '/data/'
+export const IS_DEV = process.env.NODE_ENV !== 'production'
diff --git a/src/mock/index.ts b/src/mock/index.ts
@@ -3,7 +3,7 @@ import posts6 from '@/assets/data/posts6.json'
 import { _fetch, cloneDeep, random } from '@/utils'
 import { BASE_URL, FILE_URL } from '@/config'
 import { useBaseStore } from '@/store/pinia'
-import axiosInstance from '@/utils/request'
+import { axiosInstance } from '@/utils/request'
 import MockAdapter from 'axios-mock-adapter'
 
 const mock = new MockAdapter(axiosInstance, { delayResponse: 300 })

diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue
@@ -57,7 +57,7 @@
             品牌榜
           </div>
         </div>
-        <!--        TODO 滚动到下面的时候，应该禁止slide-move，因为第个slideitem的高度不一样，高的切到矮的，会闪屏-->
+        <!--        TODO 滚动到下面的时候，应该禁止slide-move，因为每个slideitem的高度不一样，高的切到矮的，会闪屏-->
         <SlideHorizontal v-model:index="data.slideIndex" :style="slideListHeight">
           <SlideItem>
             <div class="slide0" ref="slide0">
@@ -179,7 +179,7 @@
                 <div class="brands">
                   <div
                     class="brand"
-                    @click="toggleKey(key)"
+                    @click="toggleKey(key, i)"
                     :key="i"
                     :class="{ active: key === data.selectBrandKey }"
                     v-for="(key, i) in Object.keys(data.brandRankList)"
@@ -198,7 +198,6 @@
                       <div class="avatar-wrapper" :class="item.living ? 'living' : ''">
                         <div class="avatar-out-line"></div>
                         <img v-lazy="_checkImgUrl(item.logo)" alt="" class="avatar" />
-                        <!--                      <img :src="item.logo" class="avatar">-->
                       </div>
                       <div class="desc">{{ item.name }}</div>
                     </div>
@@ -211,7 +210,7 @@
                 <div class="more" @click="_no">查看完整品牌榜 ></div>
               </div>
 
-              <SlideRowList :autoplay="true" indicatorType="bullets">
+              <SlideHorizontal v-model:index="data.adIndex" :autoplay="true" indicator>
                 <SlideItem>
                   <div class="ad">AD1</div>
                 </SlideItem>
@@ -236,7 +235,7 @@
                 <SlideItem>
                   <div class="ad">AD8</div>
                 </SlideItem>
-              </SlideRowList>
+              </SlideHorizontal>
             </div>
           </SlideItem>
         </SlideHorizontal>
@@ -247,11 +246,8 @@
 <script setup lang="ts">
 import Search from '../../components/Search.vue'
 import Dom from '../../utils/dom'
-import { computed, nextTick, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, watch } from 'vue'
 import { _checkImgUrl, _formatNumber, _no, _showSimpleConfirmDialog, sampleSize } from '@/utils'
-
-import { useBaseStore } from '@/store/pinia'
-import { onMounted, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNav } from '@/utils/hooks/useNav'
 
@@ -261,9 +257,9 @@ defineOptions({
 
 const router = useRouter()
 const nav = useNav()
-const store = useBaseStore()
 const data = reactive({
   isExpand: false,
+  adIndex: 0,
   history: [
     '历史记录1',
     '历史记录2',
@@ -696,7 +692,7 @@ watch(
         } else {
           data.selectBrandKeyIndex++
         }
-        data.selectBrandKey = brandListKeys[data.selectBrandKeyIndex]
+        data.selectBrandKey = brandListKeys.value[data.selectBrandKeyIndex]
       }, 3000)
     } else {
       clearInterval(data.timer)
@@ -710,8 +706,9 @@ onMounted(() => {
   refresh()
 })
 
-function toggleKey(key) {
+function toggleKey(key: string, i: number) {
   data.selectBrandKey = key
+  data.selectBrandKeyIndex = i
   clearInterval(data.timer)
 }
 

diff --git a/src/pages/home/slide/SlideList.vue b/src/pages/home/slide/SlideList.vue
@@ -89,7 +89,7 @@ async function getData(refresh = false) {
   })
   // console.log('getSlide4Data-', 'refresh', refresh, res)
   baseStore.loading = false
-  if (res.code === 200) {
+  if (res.success) {
     state.totalSize = res.data.total
     if (refresh) {
       state.list = []

diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
@@ -382,10 +382,11 @@ import { $no, _checkImgUrl, _formatNumber, _getUserDouyinId } from '@/utils'
 import { likeVideo, myVideo, privateVideo } from '@/api/videos'
 import { useBaseStore } from '@/store/pinia'
 import { userCollect } from '@/api/user'
+import SlideRowList from '@/components/slide/SlideRowList.vue'
 
 export default {
   name: 'Me',
-  components: { Posters, Indicator, ConfirmDialog },
+  components: { SlideRowList, Posters, Indicator, ConfirmDialog },
   data() {
     return {
       previewImg: '',
@@ -473,7 +474,7 @@ export default {
     }
   },
   mounted() {
-    setTimeout(() => {
+    nextTick(() => {
       this.refs.header = this.$refs.header
       this.refs.headerHeight = this.$refs.header.offsetHeight
       this.refs.descHeight = this.$refs.desc.offsetHeight
@@ -537,7 +538,7 @@ export default {
           this.loadings['loading' + newVal] = true
           let res = await userCollect()
           console.log('res', res)
-          if (res.code === this.SUCCESS) this.videos.collect = res.data
+          if (res.success) this.videos.collect = res.data
         }
       } else {
         if (videoOb.total === -1) {
@@ -549,21 +550,21 @@ export default {
                 pageNo: this.videos.my.pageNo,
                 pageSize: this.pageSize
               })
-              if (res.code === this.SUCCESS) this.videos.my = res.data
+              if (res.success) this.videos.my = res.data
               break
             case 1:
               res = await privateVideo({
                 pageNo: this.videos.private.pageNo,
                 pageSize: this.pageSize
               })
-              if (res.code === this.SUCCESS) this.videos.private = res.data
+              if (res.success) this.videos.private = res.data
               break
             case 2:
               res = await likeVideo({
                 pageNo: this.videos.like.pageNo,
                 pageSize: this.pageSize
               })
-              if (res.code === this.SUCCESS) this.videos.like = res.data
+              if (res.success) this.videos.like = res.data
               break
           }
         }
@@ -627,7 +628,7 @@ export default {
             break
         }
         this.loadings['loading' + this.contentIndex] = false
-        if (res.code === this.SUCCESS) {
+        if (res.success) {
           videoOb.list = videoOb.list.concat(res.data.list)
         }
       }

diff --git a/src/pages/me/MyMusic.vue b/src/pages/me/MyMusic.vue
@@ -168,10 +168,8 @@ import IndicatorLight from '../../components/slide/IndicatorLight.vue'
 import GuessMusic from './components/GuessMusic.vue'
 import Loading from '../../components/Loading.vue'
 import { userCollect } from '@/api/user'
-import { useBaseStore } from '@/store/pinia'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useNav } from '@/utils/hooks/useNav'
 import { _checkImgUrl, _duration, _no } from '@/utils'
 
 defineOptions({

diff --git a/src/pages/me/components/SlideItemMusic.vue b/src/pages/me/components/SlideItemMusic.vue
@@ -214,7 +214,7 @@ export default {
       this.loading = true
       let res = await userCollect()
       this.loading = false
-      if (res.code === this.SUCCESS) {
+      if (res.success) {
         this.collectMusic = res.data.music.list.slice(0, 2)
         this.guessMusic = this.recommendMusic = res.data.music.list.slice(2, -1)
       }

diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue
@@ -16,7 +16,7 @@
         v-model:active-index="data.currentSlideItemIndex"
       >
       </Indicator>
-      <SlideHorizontal v-model:index="data.currentSlideItemIndex" class="SlideRowList">
+      <SlideHorizontal v-model:index="data.currentSlideItemIndex" class="SlideHorizontal">
         <SlideItem class="tab1" style="overflow: auto">
           <Scroll class="Scroll" @pulldown="getHistoryVideo">
             <Posters :list="data.historyVideo.list" v-if="data.historyVideo.total"></Posters>
@@ -150,7 +150,7 @@ function clear() {
   .content {
     padding-top: 60rem;
 
-    .SlideRowList,
+    .SlideHorizontal,
     .Scroll {
       height: calc(
         var(--vh, 1vh) * 100 - var(--indicator-height) - var(--common-header-height)