MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: optimize the code

Browse Source
This commit is contained in:
zyronon 2024-04-20 22:34:45 +08:00
parent b8d8354c2d
commit 6976f58757
24 changed files with 238 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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"

16
src/api/user.ts
View File

@ -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 })
}

17
src/api/videos.ts
View File

@ -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 })
}

1
src/components/slide/SlideAlbum.vue
View File

@ -236,7 +236,6 @@ const props = defineProps({
}
}
})
const judgeValue = 20
const wrapperEl = ref(null)
//用于解决，touch事件触发startPlay,然后click事件又触发stopLoop的问题

52
src/components/slide/SlideHorizontal.vue
View File

@ -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>

1
src/config/index.ts
View File

@ -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'

2
src/mock/index.ts
View File

@ -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 })

21
src/pages/home/SearchPage.vue
View File

@ -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)
}

2
src/pages/home/slide/SlideList.vue
View File

@ -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 = []

15
src/pages/me/Me.vue
View File

@ -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)
}
}

2
src/pages/me/MyMusic.vue
View File

@ -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({

2
src/pages/me/components/SlideItemMusic.vue
View File

@ -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)
}

4
src/pages/me/rightMenu/LookHistory.vue
View File

@ -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)

4
src/pages/message/RedPacketDetail.vue
View File

@ -21,8 +21,6 @@
<script setup lang="ts">
import { useBaseStore } from '@/store/pinia'
import { _checkImgUrl, _no } from '@/utils'
import { useRouter } from 'vue-router'
import { useNav } from '@/utils/hooks/useNav'
defineOptions({
name: 'RedPacketDetail'
@ -36,8 +34,6 @@ defineProps({
}
}
})
const router = useRouter()
const nav = useNav()
const store = useBaseStore()
</script>

5
src/pages/message/Share2Friend.vue
View File

@ -181,10 +181,7 @@
<script setup lang="ts">
import Check from '../../components/Check.vue'
import { friends } from '@/api/user'
import { useBaseStore } from '@/store/pinia'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useNav } from '@/utils/hooks/useNav'
import { _checkImgUrl, cloneDeep } from '@/utils'
@ -192,9 +189,7 @@ defineOptions({
name: 'Share2Friend'
})
const router = useRouter()
const nav = useNav()
const store = useBaseStore()
const data = reactive({
isCreateChat: false,
searchKey: '',

3
src/pages/message/chat/Chat.vue
View File

@ -499,9 +499,6 @@ onUnmounted(() => {
const isExpand = computed(() => {
return data.showOption
})
const isTyping = computed(() => {
return data.typing || isExpand
})
function handleClick() {
data.recording = true

5
src/pages/message/chat/ChatDetail.vue
View File

@ -61,10 +61,7 @@ import Switches from '../components/swtich/switches.vue'
import People from '../../people/components/People.vue'
import BlockDialog from '../components/BlockDialog.vue'
import CONST_VAR from '../../../utils/const_var'
import { useBaseStore } from '@/store/pinia'
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useNav } from '@/utils/hooks/useNav'
import { _showConfirmDialog } from '@/utils'
@ -72,9 +69,7 @@ defineOptions({
name: 'ChatDetail'
})
const router = useRouter()
const nav = useNav()
const store = useBaseStore()
const data = reactive({
noMessage: false,
top: false,

8
src/pages/message/notice/NoticeSetting.vue
View File

@ -74,11 +74,8 @@
</template>
<script setup lang="ts">
import Switches from '../components/swtich/switches.vue'
import { useBaseStore } from '@/store/pinia'
import { onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useNav } from '@/utils/hooks/useNav'
import { useRoute } from 'vue-router'
defineOptions({
name: 'NoticeSetting'
@ -92,10 +89,7 @@ defineProps({
}
}
})
const router = useRouter()
const route = useRoute()
const nav = useNav()
const store = useBaseStore()
const data = reactive({
option: true,
option1: false,

3
src/pages/people/FollowAndFans.vue
View File

@ -62,14 +62,13 @@ import Search from '../../components/Search.vue'
import Indicator from '../../components/slide/Indicator.vue'
import { useBaseStore } from '@/store/pinia'
import { onMounted, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { useNav } from '@/utils/hooks/useNav'
defineOptions({
name: 'FindAcquaintance'
})
const router = useRouter()
const route = useRoute()
const nav = useNav()
const store = useBaseStore()

4
src/store/pinia.ts
View File

@ -1,5 +1,5 @@
import { defineStore } from 'pinia'
import { friends, panel } from '@/api/user.ts'
import { friends, panel } from '@/api/user'
import enums from '@/utils/enums'
import resource from '@/assets/data/resource'
@ -58,7 +58,7 @@ export const useBaseStore = defineStore('base', {
async init() {
const r = await panel()
if (r.success) {
this.userinfo = r.data
this.userinfo = Object.assign(this.userinfo, r.data)
}
const r2 = await friends()
if (r2.success) {

12
src/utils/dom.js → src/utils/dom.ts
View File

@ -1,7 +1,7 @@
export default class Dom {
els = []
constructor(arg) {
constructor(arg?: any) {
if (typeof arg === 'string') {
return this.find(arg)
}
@ -35,7 +35,7 @@ export default class Dom {
}
find(tag) {
let els = []
let els: any = []
if (this.els.length) {
els = this.els[0].querySelectorAll(tag)
} else {
@ -48,7 +48,7 @@ export default class Dom {
}
create(template) {
let tempNode = document.createElement('div')
const tempNode = document.createElement('div')
tempNode.innerHTML = template.trim()
this.els = [tempNode.firstChild]
return this
@ -101,7 +101,7 @@ export default class Dom {
}
on(eventName, fn) {
let eventArray = eventName.split(' ')
const eventArray = eventName.split(' ')
this.els.forEach((el) => {
eventArray.map((event) => {
el.addEventListener(event, fn)
@ -111,7 +111,7 @@ export default class Dom {
}
trigger(eventName) {
let eventArray = eventName.split(' ')
const eventArray = eventName.split(' ')
this.els.forEach((el) => {
eventArray.map((event) => {
el.dispatchEvent(new Event(event))
@ -129,7 +129,7 @@ export default class Dom {
}
getStyleValue(key, value) {
let whiteList = ['top', 'left', 'right', 'bottom']
const whiteList = ['top', 'left', 'right', 'bottom']
if (whiteList.find((v) => v === key)) {
if (typeof value === 'number') {
return value + 'px'

179
src/utils/index.jsx → src/utils/index.tsx
View File

@ -1,10 +1,10 @@
import * as Vue from 'vue'
import SelectDialog from '../components/dialog/SelectDialog'
import SimpleConfirmDialog from '../components/dialog/SimpleConfirmDialog'
import ConfirmDialog from '../components/dialog/ConfirmDialog'
import SelectDialog from '../components/dialog/SelectDialog.vue'
import SimpleConfirmDialog from '../components/dialog/SimpleConfirmDialog.vue'
import ConfirmDialog from '../components/dialog/ConfirmDialog.vue'
import Loading from '../components/Loading.vue'
import Config, { IMG_URL } from '../config'
import NoticeDialog from '../components/dialog/NoticeDialog'
import Config, { IMG_URL, IS_DEV } from '../config'
import NoticeDialog from '../components/dialog/NoticeDialog.vue'
import dayjs from 'dayjs'
import bus, { EVENT_KEY } from './bus'
import { ArchiveReader, libarchiveWasm } from 'libarchive-wasm'
@ -16,24 +16,24 @@ const Utils = {
return <Loading />
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn'])
document.body.append(parent)
app.mount(parent)
},
$hideLoading() {
let parent = document.querySelector('.dialog-ctn')
const parent = document.querySelector('.dialog-ctn')
parent.remove()
},
$showSelectDialog(sexList, cb) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempCb = (e) => {
const tempCb = (e) => {
remove()
cb(e)
}
@ -42,7 +42,7 @@ const Utils = {
return <SelectDialog onCancel={remove} list={sexList} onOk={tempCb} />
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
@ -51,18 +51,18 @@ const Utils = {
if (!cancelCb) {
cancelCb = () => {}
}
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempOkCb = (e) => {
const tempOkCb = (e) => {
remove()
okCb(e)
}
let tempCancelCb = (e) => {
const tempCancelCb = (e) => {
remove()
cancelCb(e)
}
@ -80,7 +80,7 @@ const Utils = {
)
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
@ -95,18 +95,18 @@ const Utils = {
cancelText,
cancelTextColor
) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempOkCb = (e) => {
const tempOkCb = (e) => {
remove()
okCb && okCb(e)
}
let tempCancelCb = (e) => {
const tempCancelCb = (e) => {
remove()
cancelCb && cancelCb(e)
}
@ -127,20 +127,20 @@ const Utils = {
)
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
},
$showNoticeDialog(title, subtitle, subtitleColor, cancelCb, cancelText) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempCancelCb = (e) => {
const tempCancelCb = (e) => {
remove()
cancelCb(e)
}
@ -158,13 +158,13 @@ const Utils = {
)
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
},
$notice(val) {
let div = document.createElement('div')
const div = document.createElement('div')
div.classList.add('global-notice')
div.textContent = val
document.body.append(div)
@ -294,7 +294,7 @@ const Utils = {
localStorage.setItem(key, JSON.stringify(value))
},
$storageGet(key, defaultValue = '') {
let res = localStorage.getItem(key)
const res = localStorage.getItem(key)
if (res) {
return JSON.parse(res)
}
@ -340,9 +340,9 @@ const Utils = {
if (String(time).length === 10) {
time = time * 1000
}
let date = new dayjs(time)
let now = new dayjs()
let d = now.valueOf() - date.valueOf()
const date = new dayjs(time)
const now = new dayjs()
const d = now.valueOf() - date.valueOf()
let str = ''
if (d < 1000 * 60) {
str = '刚刚'
@ -365,16 +365,16 @@ const Utils = {
},
$duration(v) {
if (!v) return '00:00'
let m = Math.floor(v / 60)
const m = Math.floor(v / 60)
// let s = v % 60
let s = Math.round(v % 60)
let str = ''
const s = Math.round(v % 60)
let str: string = ''
if (m === 0) {
str = '00'
} else if (m > 0 && m < 10) {
str = '0' + m
} else {
str = m
str = m + ''
}
str += ':'
if (s === 0) {
@ -406,13 +406,13 @@ const Utils = {
return Math.hypot(stop.x - start.x, stop.y - start.y)
},
updateItem(props, key, val, emit) {
let old = cloneDeep(props.item)
const old = cloneDeep(props.item)
old[key] = val
emit('update:item', old)
bus.emit(EVENT_KEY.UPDATE_ITEM, { position: props.position, item: old })
},
copy(val) {
let textarea = document.createElement('textarea')
const textarea = document.createElement('textarea')
document.body.appendChild(textarea)
textarea.style.position = 'absolute'
textarea.style.clip = 'rect(0 0 0 0)'
@ -433,7 +433,7 @@ export function _dateFormat(val, type) {
}
export function $no() {
Utils.$no(arguments)
Utils.$no()
}
export function $notice(val) {
@ -496,10 +496,10 @@ export function random(min, max) {
}
export function sampleSize(arr, num) {
let list = []
let indexs = []
const list = []
const indexs = []
while (list.length !== num) {
let j = random(0, arr.length - 1)
const j = random(0, arr.length - 1)
if (!indexs.includes(j)) {
list.push(arr[j])
indexs.push(j)
@ -514,26 +514,26 @@ export function _showLoading() {
return <Loading />
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn'])
document.body.append(parent)
app.mount(parent)
}
export function _hideLoading() {
let parent = document.querySelector('.dialog-ctn')
const parent = document.querySelector('.dialog-ctn')
parent.remove()
}
export function _showSelectDialog(sexList, cb) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempCb = (e) => {
const tempCb = (e) => {
remove()
cb(e)
}
@ -542,7 +542,7 @@ export function _showSelectDialog(sexList, cb) {
return <SelectDialog onCancel={remove} list={sexList} onOk={tempCb} />
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
@ -552,18 +552,18 @@ export function _showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelTe
if (!cancelCb) {
cancelCb = () => {}
}
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempOkCb = (e) => {
const tempOkCb = (e) => {
remove()
okCb(e)
}
let tempCancelCb = (e) => {
const tempCancelCb = (e) => {
remove()
cancelCb(e)
}
@ -581,7 +581,7 @@ export function _showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelTe
)
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
@ -597,18 +597,18 @@ export function _showConfirmDialog(
cancelText,
cancelTextColor
) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempOkCb = (e) => {
const tempOkCb = (e) => {
remove()
okCb && okCb(e)
}
let tempCancelCb = (e) => {
const tempCancelCb = (e) => {
remove()
cancelCb && cancelCb(e)
}
@ -629,21 +629,21 @@ export function _showConfirmDialog(
)
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
}
export function _showNoticeDialog(title, subtitle, subtitleColor, cancelCb, cancelText) {
let remove = () => {
let parent = document.querySelector('.dialog-ctn')
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
let tempCancelCb = (e) => {
const tempCancelCb = (e) => {
remove()
cancelCb(e)
}
@ -661,14 +661,14 @@ export function _showNoticeDialog(title, subtitle, subtitleColor, cancelCb, canc
)
}
})
let parent = document.createElement('div')
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
}
export function _notice(val) {
let div = document.createElement('div')
const div = document.createElement('div')
div.classList.add('global-notice')
div.textContent = val
document.body.append(div)
@ -682,34 +682,39 @@ export function _no() {
}
/**
* 逃避国内某pages，因为json文件被提示有违禁词，json压缩成7z文件，7z和zip文件被屏蔽了，所以7z重命名为md
* 逃避国内某pages审查，因为json文件被提示有违禁词，json压缩成7z文件，7z和zip文件被屏蔽了，所以7z重命名为md
* @param url
* @returns {Promise<unknown>}
* @private
* @returns Promise<{ json(): Promise<any> } | Response>
* @privateF
*/
export async function _fetch(url) {
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve) => {
let r = await fetch(url)
if (url.includes('.md')) {
// console.time()
const data = await r.arrayBuffer()
const mod = await libarchiveWasm()
const reader = new ArchiveReader(mod, new Int8Array(data))
for (const entry of reader.entries()) {
if (entry.getPathname().endsWith('.json')) {
let data = new TextDecoder().decode(entry.readData())
resolve({
json() {
return Promise.resolve(JSON.parse(data))
}
})
export async function _fetch(url: string): Promise<{ json(): Promise<any> } | Response> {
if (IS_DEV) {
url = url.replace('.md', '.json')
return fetch(url)
} else {
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve) => {
const r = await fetch(url)
if (url.includes('.md')) {
// console.time()
const data = await r.arrayBuffer()
const mod = await libarchiveWasm()
const reader = new ArchiveReader(mod, new Int8Array(data))
for (const entry of reader.entries()) {
if (entry.getPathname().endsWith('.json')) {
const data = new TextDecoder().decode(entry.readData())
resolve({
json() {
return Promise.resolve(JSON.parse(data))
}
})
}
// console.timeEnd()
}
// console.timeEnd()
reader.free()
} else {
resolve(r)
}
reader.free()
} else {
resolve(r)
}
})
})
}
}

42
src/utils/mixin.js → src/utils/mixin.ts
View File

@ -1,14 +1,13 @@
import globalMethods from './index'
import BaseHeader from '../components/BaseHeader'
import SlideRowList from '../components/slide/SlideRowList'
import SlideItem from '../components/slide/SlideItem'
import Indicator from '../components/slide/Indicator'
import BaseFooter from '../components/BaseFooter'
import BaseHeader from '../components/BaseHeader.vue'
import SlideItem from '../components/slide/SlideItem.vue'
import Indicator from '../components/slide/Indicator.vue'
import BaseFooter from '../components/BaseFooter.vue'
import BaseMask from '../components/BaseMask.vue'
import NoMore from '../components/NoMore'
import Back from '../components/Back'
import Loading from '../components/Loading'
import BaseButton from '../components/BaseButton'
import NoMore from '../components/NoMore.vue'
import Back from '../components/Back.vue'
import Loading from '../components/Loading.vue'
import BaseButton from '../components/BaseButton.vue'
import CONST_VAR from './const_var'
import Dom from './dom'
import bus, { EVENT_KEY } from './bus'
@ -20,7 +19,6 @@ export default {
components: {
BaseHeader,
SlideHorizontal,
SlideRowList,
SlideItem,
Indicator,
BaseFooter,
@ -58,7 +56,7 @@ export default {
let pressTimer = null
// 定义函数处理程序
// 创建计时器（ 1秒后执行函数 ）
let start = (e) => {
const start = (e) => {
if (e.type === 'click' && e.button !== 0) {
return
}
@ -70,7 +68,7 @@ export default {
}
}
// 取消计时器
let cancel = () => {
const cancel = () => {
// 检查计时器是否有值
if (pressTimer !== null) {
clearTimeout(pressTimer)
@ -115,16 +113,16 @@ export default {
let clickTimer = null
let dbClickTimer = null
let lastClickTime = null
let checkTime = 200
let dbCheckCancelTime = 500
const checkTime = 200
const dbCheckCancelTime = 500
let dbClick = (e) => {
const dbClick = (e) => {
// console.log('dbClick')
let id = 'a' + Date.now()
let elWidth = 80
let rotate = random(0, 1)
let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${new URL('../assets/img/icon/loved.svg', import.meta.url).href}">`
let el = new Dom().create(template)
const id = 'a' + Date.now()
const elWidth = 80
const rotate = random(0, 1)
const template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${new URL('../assets/img/icon/loved.svg', import.meta.url).href}">`
const el = new Dom().create(template)
el.css({ top: e.y - elWidth - 40, left: e.x - elWidth / 2 })
new Dom(`#${binding.value}`).append(el)
setTimeout(() => {
@ -132,14 +130,14 @@ export default {
}, 1000)
}
let check = (e) => {
const check = (e) => {
if (isDbClick) {
clearTimeout(dbClickTimer)
dbClick(e)
dbClickTimer = setTimeout(() => (isDbClick = false), dbCheckCancelTime)
return
}
let nowTime = new Date().getTime()
const nowTime = new Date().getTime()
if (nowTime - lastClickTime < checkTime) {
clearTimeout(clickTimer)
dbClick(e)

29
src/utils/request.ts
View File

@ -1,8 +1,8 @@
import axios from 'axios'
import axios, { type AxiosError, type AxiosRequestConfig, type AxiosResponse } from 'axios'
import config from '@/config'
import globalMethods from './index'
const axiosInstance = axios.create({
export const axiosInstance = axios.create({
baseURL: config.baseUrl,
timeout: 60000
})
@ -26,7 +26,7 @@ axiosInstance.interceptors.request.use(
* 如果有问题，拦截器里会进行提示，然后返回{ code: Xxx, data:xxx }这种数据。在then里面总是会接收到
* */
axiosInstance.interceptors.response.use(
(response) => {
(response: AxiosResponse) => {
// console.log('response',response)
/*
* 响应成功的拦截器，主要是对data作处理，如果没有返回data，那么会添加一个data字段，并把response.data的内容合并到data里面，然后返回
@ -66,7 +66,7 @@ axiosInstance.interceptors.response.use(
return data
}
},
(error) => {
(error: AxiosError) => {
console.log('error', error)
// console.log(error.response)
// console.log(error.response.status)
@ -89,7 +89,7 @@ axiosInstance.interceptors.response.use(
if (error.response.status === 401) {
return { success: false, code: 401, msg: '用户名或密码不正确', data: [] }
} else {
const { data } = error.response
const data: any = error.response.data
if (data === null || data === undefined) {
globalMethods.$notice('请求失败，请稍后重试！')
return { success: true, code: 200, data: [] }
@ -110,4 +110,21 @@ axiosInstance.interceptors.response.use(
}
)
export default axiosInstance
export interface ApiResponse<T = any> {
data: T
success: boolean
}
export async function request<T = any>(config: AxiosRequestConfig): Promise<ApiResponse<T>> {
/*
* then和catch里面返回的数据必须加as const，否则调用方无法推断出类型
* */
return axiosInstance
.request<T>(config)
.then(({ data }) => {
return { success: true, data } as const
})
.catch((err) => {
return { success: false, data: err } as const
})
}