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-23 23:46:18 +08:00
parent 325057d197
commit 85a5fefdf2
38 changed files with 316 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/assets/data/posts6.json
View File

@ -54,9 +54,7 @@
},
"cover": {
"uri": "tos-cn-i-0813/oYVDeaFZyENAAAAKXCYfxD6hI4zADNAURgtySl",
"url_list": [
"jwWCPZVTIA4IKM-8WipLF.png"
],
"url_list": ["jwWCPZVTIA4IKM-8WipLF.png"],
"width": 720,
"height": 720
},
@ -227,15 +225,11 @@
"cover_url": [
{
"uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
"url_list": [
"AiIEMkIA7Cb3s5c4e7e6g.png"
]
"url_list": ["AiIEMkIA7Cb3s5c4e7e6g.png"]
},
{
"uri": "c8510002be9a3a61aad2",
"url_list": [
"aHzLr77vcdBMUil15rXBa.png"
]
"url_list": ["aHzLr77vcdBMUil15rXBa.png"]
}
],
"district": "",
@ -258,9 +252,7 @@
"share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
"share_image_url": {
"uri": "tos-cn-p-0015/oge0HBDnlBbbZHjeDc4WtAI7AA0xb88gd9Ipjc",
"url_list": [
"5jTb5yW0_50o6UaLR5hvo.png"
]
"url_list": ["5jTb5yW0_50o6UaLR5hvo.png"]
},
"share_qrcode_url": {
"uri": "216a001823018b74cedd",
@ -283,15 +275,11 @@
"white_cover_url": [
{
"uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
"url_list": [
"N_SVO2HXIpaY04hgsXYDI.png"
]
"url_list": ["N_SVO2HXIpaY04hgsXYDI.png"]
},
{
"uri": "318f1000413827e122102",
"url_list": [
"Sfz4PgDDqyNYHkFyXub5g.png"
]
"url_list": ["Sfz4PgDDqyNYHkFyXub5g.png"]
}
]
}
@ -351,9 +339,7 @@
},
"cover": {
"uri": "tos-cn-p-0015/254cc2f4142c490697a3cedd195283ab_1659776667",
"url_list": [
"FL8H8KGmqTyGhOAFLQp14.png"
],
"url_list": ["FL8H8KGmqTyGhOAFLQp14.png"],
"width": 720,
"height": 720
},
@ -577,15 +563,11 @@
"cover_url": [
{
"uri": "douyin-user-image-file/cfea7d18adf05c6d1990071756b7445d",
"url_list": [
"aTnyHICCi-NMudWfVELeO.png"
]
"url_list": ["aTnyHICCi-NMudWfVELeO.png"]
},
{
"uri": "c8510002be9a3a61aad2",
"url_list": [
"IKCeBwXjtHdGf9WP9hfAc.png"
]
"url_list": ["IKCeBwXjtHdGf9WP9hfAc.png"]
}
],
"district": null,
@ -608,9 +590,7 @@
"share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
"share_image_url": {
"uri": "tos-cn-p-0015/oQf8CQFQnkRsZBmxgDb0AWAlQeb99lAAmEu9Kx",
"url_list": [
"7A-WGbNrabkqe51pdxTc6.png"
]
"url_list": ["7A-WGbNrabkqe51pdxTc6.png"]
},
"share_qrcode_url": {
"uri": "2e4fa00064dccedc33dae",
@ -633,15 +613,11 @@
"white_cover_url": [
{
"uri": "douyin-user-image-file/cfea7d18adf05c6d1990071756b7445d",
"url_list": [
"h7oEIs5JYXJ48lTJCPWTH.png"
]
"url_list": ["h7oEIs5JYXJ48lTJCPWTH.png"]
},
{
"uri": "318f1000413827e122102",
"url_list": [
"TX0D9ExiN7FRaAzaiBeu7.png"
]
"url_list": ["TX0D9ExiN7FRaAzaiBeu7.png"]
}
]
}
@ -701,9 +677,7 @@
},
"cover": {
"uri": "tos-cn-p-0015/o4zA2HNYFFXyyfbAnEDBAkNQhmIATEAgetYaSq",
"url_list": [
"sZtkmLJnK30efnC-WgFMn.png"
],
"url_list": ["sZtkmLJnK30efnC-WgFMn.png"],
"width": 720,
"height": 720
},
@ -824,15 +798,11 @@
"cover_url": [
{
"uri": "douyin-user-image-file/aff26fd8f33d7f743513e8f269e924cb",
"url_list": [
"T1II_ZahdXvCzRrth6Csg.png"
]
"url_list": ["T1II_ZahdXvCzRrth6Csg.png"]
},
{
"uri": "c8510002be9a3a61aad2",
"url_list": [
"jAGv0q0ZTObOtfdCP9FcU.png"
]
"url_list": ["jAGv0q0ZTObOtfdCP9FcU.png"]
}
],
"district": "",
@ -855,9 +825,7 @@
"share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
"share_image_url": {
"uri": "tos-cn-p-0015/owr8DIVInO9quB6lgDbqAlBVeenTnlAAITj9Ey",
"url_list": [
"fV_NMEobSXS4XFzzWrGjJ.png"
]
"url_list": ["fV_NMEobSXS4XFzzWrGjJ.png"]
},
"share_qrcode_url": {
"uri": "53070029f462e2e70d94",
@ -880,15 +848,11 @@
"white_cover_url": [
{
"uri": "douyin-user-image-file/aff26fd8f33d7f743513e8f269e924cb",
"url_list": [
"BGNqXhXX9rB0RZe2-Gh3g.png"
]
"url_list": ["BGNqXhXX9rB0RZe2-Gh3g.png"]
},
{
"uri": "318f1000413827e122102",
"url_list": [
"8bHhp2JU-9tMF9irmzEZj.png"
]
"url_list": ["8bHhp2JU-9tMF9irmzEZj.png"]
}
]
}
@ -948,9 +912,7 @@
},
"cover": {
"uri": "tos-cn-p-0015/9975a3ff7baf4c4391da36112920574a",
"url_list": [
"zE-I6gDNlO7OyVRN1Rl7T.png"
],
"url_list": ["zE-I6gDNlO7OyVRN1Rl7T.png"],
"width": 720,
"height": 720
},
@ -1086,15 +1048,11 @@
"cover_url": [
{
"uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
"url_list": [
"2eFwyUS9yN8r7wJCXHUvb.png"
]
"url_list": ["2eFwyUS9yN8r7wJCXHUvb.png"]
},
{
"uri": "c8510002be9a3a61aad2",
"url_list": [
"0yrHnPaNjbwpkaPNo7s4x.png"
]
"url_list": ["0yrHnPaNjbwpkaPNo7s4x.png"]
}
],
"district": "",
@ -1117,9 +1075,7 @@
"share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
"share_image_url": {
"uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu",
"url_list": [
"qnOWDz5lUek2B1I5MPHa-.png"
]
"url_list": ["qnOWDz5lUek2B1I5MPHa-.png"]
},
"share_qrcode_url": {
"uri": "216a0023aa35c71d4381",
@ -1142,15 +1098,11 @@
"white_cover_url": [
{
"uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
"url_list": [
"ejF34o5i413UeROTNoYFI.png"
]
"url_list": ["ejF34o5i413UeROTNoYFI.png"]
},
{
"uri": "318f1000413827e122102",
"url_list": [
"x9tjnPkC-OscQ480dZZAR.png"
]
"url_list": ["x9tjnPkC-OscQ480dZZAR.png"]
}
]
}
@ -1210,9 +1162,7 @@
},
"cover": {
"uri": "tos-cn-i-0813/dec79ae450c643f59e7ac007bffac735",
"url_list": [
"B6zqJFdOWWsbZqYtqCxbM.png"
],
"url_list": ["B6zqJFdOWWsbZqYtqCxbM.png"],
"width": 720,
"height": 720
},
@ -1369,9 +1319,7 @@
"cover_url": [
{
"uri": "c8510002be9a3a61aad2",
"url_list": [
"2uHX3U05JE9hy7W6loPDK.png"
]
"url_list": ["2uHX3U05JE9hy7W6loPDK.png"]
}
],
"district": null,
@ -1393,9 +1341,7 @@
"share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
"share_image_url": {
"uri": "tos-cn-p-0015/b01c417ab84c48a18151df6f4874c517_1651306670",
"url_list": [
"noPw6HHZHlcIQTKhc-Sr4.png"
]
"url_list": ["noPw6HHZHlcIQTKhc-Sr4.png"]
},
"share_qrcode_url": {
"uri": "330b002fd4ab5b64f36e",
@ -1418,9 +1364,7 @@
"white_cover_url": [
{
"uri": "318f1000413827e122102",
"url_list": [
"wqKmvIFifx1re2KR2VAXF.png"
]
"url_list": ["wqKmvIFifx1re2KR2VAXF.png"]
}
]
}
@ -1480,9 +1424,7 @@
},
"cover": {
"uri": "tos-cn-p-0015/9c5820418cbb49a9afac60b51bf63ee5_1667300317",
"url_list": [
"VYvXAcOWFGKsZg9TCDqlW.png"
],
"url_list": ["VYvXAcOWFGKsZg9TCDqlW.png"],
"width": 720,
"height": 720
},
@ -1634,15 +1576,11 @@
"cover_url": [
{
"uri": "douyin-user-image-file/215a5e084e4ef0fac70d54b5b6794760",
"url_list": [
"ugFWsFLtl37YDmOhdWVPP.png"
]
"url_list": ["ugFWsFLtl37YDmOhdWVPP.png"]
},
{
"uri": "c8510002be9a3a61aad2",
"url_list": [
"6BjX7F0tH7NR_Ivj97YH_.png"
]
"url_list": ["6BjX7F0tH7NR_Ivj97YH_.png"]
}
],
"district": "",
@ -1665,9 +1603,7 @@
"share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
"share_image_url": {
"uri": "tos-cn-p-0015/oMinDrDQQBALaq2bjjeaY3Pv4efApBAInCI7BR",
"url_list": [
"KjoYiM7SWjrqov4pC-xMm.png"
]
"url_list": ["KjoYiM7SWjrqov4pC-xMm.png"]
},
"share_qrcode_url": {
"uri": "f9be000540dadbec288f",
@ -1690,15 +1626,11 @@
"white_cover_url": [
{
"uri": "douyin-user-image-file/215a5e084e4ef0fac70d54b5b6794760",
"url_list": [
"dGAmnrwmsaQBEpOli1dGm.png"
]
"url_list": ["dGAmnrwmsaQBEpOli1dGm.png"]
},
{
"uri": "318f1000413827e122102",
"url_list": [
"Nuc00o5h98o_IqhHv6uL0.png"
]
"url_list": ["Nuc00o5h98o_IqhHv6uL0.png"]
}
]
}

4
src/components/Back.vue
View File

@ -2,6 +2,8 @@
<img class="close" ref="img" :src="src" />
</template>
<script>
import { _css } from '@/utils/dom'
export default {
name: 'Back',
props: {
@ -32,7 +34,7 @@ export default {
}
},
mounted() {
this.$setCss(
_css(
this.$refs.img,
'transform',
`rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`

3
src/components/BaseFooter.vue
View File

@ -47,6 +47,9 @@ export default {
bus.off(EVENT_KEY.EXIT_FULLSCREEN)
},
methods: {
$nav(path) {
this.$router.push(path)
},
tab(index) {
switch (index) {
case 1:

11
src/components/Share.vue
View File

@ -25,7 +25,7 @@
<img
:style="item.select ? 'opacity: .5;' : ''"
class="avatar"
:src="$imgPreview(item.avatar)"
:src="_checkImgUrl(item.avatar)"
alt=""
/>
<span>{{ item.name }}</span>
@ -144,7 +144,7 @@
import { mapState } from 'pinia'
import FromBottomDialog from './dialog/FromBottomDialog'
import { useBaseStore } from '@/store/pinia'
import { _copy, _no, _notice } from '@/utils'
import { _checkImgUrl, _copy, _hideLoading, _no, _notice, _showLoading, _sleep } from '@/utils'
export default {
name: 'Share',
@ -196,12 +196,13 @@ export default {
return {}
},
methods: {
_checkImgUrl,
_no,
async copyLink() {
this.closeShare()
this.$showLoading()
await this.$sleep(500)
this.$hideLoading()
_showLoading()
await _sleep(500)
_hideLoading()
_copy(this.item.share_info.share_link_desc + this.item.share_info.share_url)
//TODO 抖音样式改了
_notice('复制成功')

23
src/components/UserPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="UserPanel" @scroll="scroll" @dragstart="(e) => Utils.$stopPropagation(e)" ref="page">
<div id="UserPanel" @scroll="scroll" @dragstart="(e) => _stopPropagation(e)" ref="page">
<div ref="float" class="float" :class="state.floatFixed ? 'fixed' : ''">
<div class="left">
<Icon @click="emit('back')" class="icon" icon="eva:arrow-ios-back-fill" />
@ -76,7 +76,7 @@
<img
src="@/assets/img/icon/me/copy.png"
alt=""
@click.stop="Utils.copy(_getUserDouyinId(props.currentItem))"
@click.stop="_copy(_getUserDouyinId(props.currentItem))"
/>
</div>
</div>
@ -85,20 +85,16 @@
<div class="info">
<div class="heat">
<div class="text">
<span class="num">{{
Utils.formatNumber(props.currentItem.author.total_favorited)
}}</span>
<span class="num">{{ _formatNumber(props.currentItem.author.total_favorited) }}</span>
<span>获赞</span>
</div>
<div class="text">
<span class="num">{{
Utils.formatNumber(props.currentItem.author.following_count)
}}</span>
<span class="num">{{ _formatNumber(props.currentItem.author.following_count) }}</span>
<span>关注</span>
</div>
<div class="text">
<span class="num">{{
Utils.formatNumber(props.currentItem.author.mplatform_followers_count)
_formatNumber(props.currentItem.author.mplatform_followers_count)
}}</span>
<span>粉丝</span>
</div>
@ -234,7 +230,14 @@
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import Utils, { _checkImgUrl, _getUserDouyinId, _no } from '@/utils'
import {
_checkImgUrl,
_copy,
_formatNumber,
_getUserDouyinId,
_no,
_stopPropagation
} from '@/utils'
import { useNav } from '@/utils/hooks/useNav'
import Posters from '@/components/Posters.vue'
import { DefaultUser } from '@/utils/const_var'

5
src/components/dialog/FromBottomDialog.vue
View File

@ -30,6 +30,7 @@
<script>
import Dom, { _css } from '../../utils/dom'
import bus, { EVENT_KEY } from '@/utils/bus'
import { _stopPropagation } from '@/utils'
export default {
name: 'FromBottomDialog',
@ -73,6 +74,7 @@ export default {
watch: {
modelValue(newVal) {
let page = document.getElementById(this.pageId)
if (!page) return
if (newVal) {
this.pagePosition = _css(page, 'position')
page.style.position = 'absolute'
@ -83,12 +85,11 @@ export default {
let maskTemplate = `<div class="Mask fade-in ${this.maskMode}"></div>`
let mask = new Dom().create(maskTemplate)
mask.on('click', (e) => {
this.$stopPropagation(e)
_stopPropagation(e)
this.hide(false)
})
page.appendChild(mask.els[0])
} else {
let page = document.getElementById(this.pageId)
page.style.position = this.pagePosition || 'fixed'
document.body.style.position = 'static'
document.documentElement.scrollTop = this.scroll

35
src/components/slide/BVideo.vue
View File

@ -62,8 +62,8 @@
@touchend="touchend"
>
<div class="time" v-if="isMove">
<span class="currentTime">{{ LUtils.$duration(currentTime) }}</span>
<span class="duration"> / {{ LUtils.$duration(duration) }}</span>
<span class="currentTime">{{ _duration(currentTime) }}</span>
<span class="duration"> / {{ _duration(duration) }}</span>
</div>
<template v-if="duration > 15 || isMove || !isPlaying">
<div class="bg"></div>
@ -77,7 +77,7 @@
</template>
<script>
import Utils, { _checkImgUrl } from '../../utils'
import { _checkImgUrl, _duration, _stopPropagation } from '@/utils'
import Loading from '../Loading'
import ItemToolbar from './ItemToolbar'
import ItemDesc from './ItemDesc'
@ -85,6 +85,7 @@ import bus, { EVENT_KEY } from '../../utils/bus'
import { SlideItemPlayStatus } from '@/utils/const_var'
import { computed } from 'vue'
import { Icon } from '@iconify/vue'
import { _css } from '@/utils/dom'
export default {
name: 'BVideo',
@ -173,8 +174,7 @@ export default {
localItem: this.item,
progressBarRect: {},
videoScreenHeight: 0,
commentVisible: false,
LUtils: Utils
commentVisible: false
}
},
mounted() {
@ -258,6 +258,7 @@ export default {
bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
},
methods: {
_duration,
_checkImgUrl,
onOpenSubType() {
this.commentVisible = true
@ -267,33 +268,33 @@ export default {
},
onDialogMove({ tag, e }) {
if (this.commentVisible && tag === 'comment') {
Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`)
Utils.$setCss(this.$refs.video, 'height', `calc(var(--vh, 1vh) * 30 + ${e}px)`)
_css(this.$refs.video, 'transition-duration', `0ms`)
_css(this.$refs.video, 'height', `calc(var(--vh, 1vh) * 30 + ${e}px)`)
}
},
onDialogEnd({ tag, isClose }) {
if (this.commentVisible && tag === 'comment') {
console.log('isClose', isClose)
Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
_css(this.$refs.video, 'transition-duration', `300ms`)
if (isClose) {
this.commentVisible = false
Utils.$setCss(this.$refs.video, 'height', '100%')
_css(this.$refs.video, 'height', '100%')
} else {
Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
_css(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
}
}
},
onOpenComments(id) {
if (id === this.item.id) {
Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
Utils.$setCss(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
_css(this.$refs.video, 'transition-duration', `300ms`)
_css(this.$refs.video, 'height', 'calc(var(--vh, 1vh) * 30)')
this.commentVisible = true
}
},
onCloseComments() {
if (this.commentVisible) {
Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
Utils.$setCss(this.$refs.video, 'height', '100%')
_css(this.$refs.video, 'transition-duration', `300ms`)
_css(this.$refs.video, 'height', '100%')
this.commentVisible = false
}
},
@ -340,14 +341,14 @@ export default {
this.$refs.video.pause()
},
touchstart(e) {
Utils.$stopPropagation(e)
_stopPropagation(e)
this.start.x = e.touches[0].pageX
this.last.x = this.playX
this.last.time = this.currentTime
},
touchmove(e) {
// console.log('move',e)
Utils.$stopPropagation(e)
_stopPropagation(e)
this.isMove = true
this.pause()
let dx = e.touches[0].pageX - this.start.x
@ -358,7 +359,7 @@ export default {
},
touchend(e) {
// console.log('end', e)
Utils.$stopPropagation(e)
_stopPropagation(e)
if (this.isPlaying) return
setTimeout(() => (this.isMove = false), 1000)
this.$refs.video.currentTime = this.currentTime

19
src/components/slide/Indicator.vue
View File

@ -1,6 +1,7 @@
<script lang="jsx">
import bus from '../../utils/bus'
import { useBaseStore } from '@/store/pinia'
import { _css } from '@/utils/dom'
export default {
name: 'Indicator',
@ -91,8 +92,8 @@ export default {
this.currentSlideItemIndex = index
this.$attrs['onUpdate:activeIndex'] &&
this.$emit('update:active-index', this.currentSlideItemIndex)
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@ -103,7 +104,7 @@ export default {
this.indicatorRef = this.$refs.indicator
for (let i = 0; i < tabs.children.length; i++) {
let item = tabs.children[i]
this.tabWidth = this.$getCss(item, 'width')
this.tabWidth = _css(item, 'width')
this.tabIndicatorRelationActiveIndexLefts.push(
item.getBoundingClientRect().x -
tabs.children[0].getBoundingClientRect().x +
@ -112,15 +113,15 @@ export default {
}
this.indicatorSpace =
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `0ms`)
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
)
},
move(e) {
this.$setCss(
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
@ -131,14 +132,14 @@ export default {
end(index) {
// console.log(index)
this.currentSlideItemIndex = index
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
)
setTimeout(() => {
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
_css(this.indicatorRef, 'transition-duration', `0ms`)
}, 300)
}
}

21
src/components/slide/IndicatorLight.vue
View File

@ -1,6 +1,7 @@
<script lang="jsx">
import bus from '../../utils/bus'
import { useBaseStore } from '@/store/pinia'
import { _css } from '@/utils/dom'
export default {
name: 'IndicatorLight',
@ -85,8 +86,8 @@ export default {
this.currentSlideItemIndex = index
this.$attrs['onUpdate:activeIndex'] &&
this.$emit('update:active-index', this.currentSlideItemIndex)
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@ -95,10 +96,10 @@ export default {
initTabs() {
let tabs = this.$refs.tabs
this.indicatorRef = this.$refs.indicator
let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
let indicatorWidth = _css(this.indicatorRef, 'width')
for (let i = 0; i < tabs.children.length; i++) {
let item = tabs.children[i]
this.tabWidth = this.$getCss(item, 'width')
this.tabWidth = _css(item, 'width')
this.tabIndicatorRelationActiveIndexLefts.push(
item.getBoundingClientRect().x -
tabs.children[0].getBoundingClientRect().x +
@ -108,15 +109,15 @@ export default {
this.indicatorSpace =
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `0ms`)
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
)
},
move(e) {
this.$setCss(
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
@ -127,14 +128,14 @@ export default {
end(index) {
// console.log(index)
this.currentSlideItemIndex = index
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
)
setTimeout(() => {
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
_css(this.indicatorRef, 'transition-duration', `0ms`)
}, 300)
}
}

16
src/components/slide/ItemToolbar.vue
View File

@ -1,6 +1,6 @@
<script setup>
import BaseMusic from '../BaseMusic'
import Utils from '../../utils'
import { _formatNumber, _updateItem } from '@/utils'
import bus, { EVENT_KEY } from '@/utils/bus'
import { Icon } from '@iconify/vue'
@ -27,13 +27,13 @@ const props = defineProps({
const emit = defineEmits(['update:item', 'goUserInfo', 'showComments', 'showShare', 'goMusic'])
function loved() {
Utils.updateItem(props, 'isLoved', !props.item.isLoved, emit)
_updateItem(props, 'isLoved', !props.item.isLoved, emit)
}
function attention(e) {
e.currentTarget.classList.add('attention')
setTimeout(() => {
Utils.updateItem(props, 'isAttention', true, emit)
_updateItem(props, 'isAttention', true, emit)
}, 1000)
}
@ -64,24 +64,24 @@ function showComments() {
<img src="../../assets/img/icon/love.svg" class="love-image" v-if="!props.item.isLoved" />
<img src="../../assets/img/icon/loved.svg" class="love-image" v-if="props.item.isLoved" />
</div>
<span>{{ Utils.formatNumber(props.item.statistics.digg_count) }}</span>
<span>{{ _formatNumber(props.item.statistics.digg_count) }}</span>
</div>
<div class="message mb2r" @click.stop="showComments">
<Icon icon="mage:message-dots-round-fill" class="icon" style="color: white" />
<span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
<span>{{ _formatNumber(props.item.statistics.comment_count) }}</span>
</div>
<!--TODO -->
<div
class="message mb2r"
@click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)"
@click.stop="_updateItem(props, 'isCollect', !props.item.isCollect, emit)"
>
<Icon v-if="props.item.isCollect" icon="ic:round-star" class="icon" style="color: yellow" />
<Icon v-else icon="ic:round-star" class="icon" style="color: white" />
<span>{{ Utils.formatNumber(props.item.statistics.comment_count) }}</span>
<span>{{ _formatNumber(props.item.statistics.comment_count) }}</span>
</div>
<div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
<img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image" />
<span>{{ Utils.formatNumber(props.item.statistics.share_count) }}</span>
<span>{{ _formatNumber(props.item.statistics.share_count) }}</span>
</div>
<div v-else class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
<img src="../../assets/img/icon/menu-white.png" alt="" class="share-image" />

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

@ -1,15 +1,15 @@
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import GM from '../../utils'
import {
getSlideOffset,
slideInit,
slideTouchStart,
slideTouchMove,
slideReset,
slideTouchEnd
slideTouchEnd,
slideTouchMove,
slideTouchStart
} from '@/utils/slide'
import { SlideType } from '@/utils/const_var'
import { _css } from '@/utils/dom'
const props = defineProps({
index: {
@ -67,9 +67,9 @@ watch(
if (state.localIndex !== newVal) {
state.localIndex = newVal
if (props.changeActiveIndexUseAnim) {
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
_css(wrapperEl.value, 'transition-duration', `300ms`)
}
GM.$setCss(
_css(
wrapperEl.value,
'transform',
`translate3d(${getSlideOffset(state, wrapperEl.value)}px, 0, 0)`

41
src/components/slide/SlideRowList.vue
View File

@ -25,6 +25,8 @@
<script>
import bus from '../../utils/bus'
import { useBaseStore } from '@/store/pinia'
import { _css } from '@/utils/dom'
import { _stopPropagation } from '@/utils'
export default {
name: 'BaseSlideList',
@ -157,14 +159,14 @@ export default {
methods: {
changeIndex(init = false, index = null) {
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
this.$setCss(
!init && _css(this.slideList, 'transition-duration', `300ms`)
_css(
this.slideList,
'transform',
`translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`
)
if (this.isHome) {
this.$setCss(
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@ -178,7 +180,7 @@ export default {
this.indicatorRef = this.$refs.indicator
for (let i = 0; i < tabs.children.length; i++) {
let item = tabs.children[i]
this.tabWidth = this.$getCss(item, 'width')
this.tabWidth = _css(item, 'width')
//TODO 这里算得不对，两个字时正常，字一多就会出问题，修改参考IndicatorLight.vue
this.tabIndicatorRelationActiveIndexLefts.push(
item.getBoundingClientRect().x -
@ -190,8 +192,8 @@ export default {
this.indicatorSpace =
this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
if (this.isHome) {
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'
@ -201,16 +203,16 @@ export default {
async checkChildren() {
this.slideList = this.$refs.slideList
this.slideItems = this.slideList.children
this.wrapperWidth = this.$getCss(this.slideList, 'width')
this.wrapperHeight = this.$getCss(this.slideList, 'height')
this.wrapperWidth = _css(this.slideList, 'width')
this.wrapperHeight = _css(this.slideList, 'height')
for (let i = 0; i < this.slideItems.length; i++) {
let el = this.slideItems[i]
this.slideItemsWidths.push(this.$getCss(el, 'width'))
this.slideItemsWidths.push(_css(el, 'width'))
}
},
touchStart(e) {
this.$setCss(this.slideList, 'transition-duration', `0ms`)
this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
_css(this.slideList, 'transition-duration', `0ms`)
this.isHome && _css(this.indicatorRef, 'transition-duration', `0ms`)
this.toolbarStyleTransitionDuration = 0
this.startLocationX = e.touches[0].pageX
@ -218,7 +220,6 @@ export default {
this.startTime = Date.now()
},
touchMove(e) {
// this.$stopPropagation(e)
if (!this.canMove) return
this.moveXDistance = e.touches[0].pageX - this.startLocationX
this.moveYDistance = e.touches[0].pageY - this.startLocationY
@ -244,8 +245,8 @@ export default {
x: { distance: this.moveXDistance, isDrawRight: this.isDrawRight }
})
this.$stopPropagation(e)
this.$setCss(
_stopPropagation(e)
_css(
this.slideList,
'transform',
`translate3d(${
@ -256,7 +257,7 @@ export default {
)
this.isHome &&
this.$setCss(
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
@ -278,8 +279,8 @@ export default {
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
this.$setCss(this.slideList, 'transition-duration', `300ms`)
this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
_css(this.slideList, 'transition-duration', `300ms`)
this.isHome && _css(this.indicatorRef, 'transition-duration', `300ms`)
let endTime = Date.now()
let gapTime = endTime - this.startTime
@ -287,7 +288,7 @@ export default {
// this.$stopPropagation(e)//todo 如果是嵌套竖状的slide，会出问题,会到moveYDistance停下，不会移到
//this.getWidth(this.currentSlideItemIndex)位置，但是不禁示冒泡的话，又会出现划动过快，把父级也会移动。
if (this.moveXDistance !== 0) {
this.$stopPropagation(e)
_stopPropagation(e)
}
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
if (Math.abs(this.moveXDistance) > this.wrapperWidth / 3) gapTime = 100
@ -298,13 +299,13 @@ export default {
this.currentSlideItemIndex -= 1
}
}
this.$setCss(
_css(
this.slideList,
'transform',
`translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`
)
if (this.isHome) {
this.$setCss(
_css(
this.indicatorRef,
'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px'

6
src/components/slide/SlideVertical.vue
View File

@ -1,6 +1,5 @@
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import GM from '../../utils'
import {
getSlideOffset,
slideInit,
@ -10,6 +9,7 @@ import {
slideTouchStart
} from '@/utils/slide'
import { SlideType } from '@/utils/const_var'
import { _css } from '@/utils/dom'
const props = defineProps({
index: {
@ -58,9 +58,9 @@ watch(
if (state.localIndex !== newVal) {
state.localIndex = newVal
if (props.changeActiveIndexUseAnim) {
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
_css(wrapperEl.value, 'transition-duration', `300ms`)
}
GM.$setCss(
_css(
wrapperEl.value,
'transform',
`translate3d(0,${getSlideOffset(state, wrapperEl.value)}px, 0)`

4
src/components/slide/SlideVerticalInfinite.vue
View File

@ -1,6 +1,5 @@
<script setup lang="tsx">
import { createApp, onMounted, reactive, ref, render as vueRender, watch } from 'vue'
import GM from '../../utils'
import {
getSlideOffset,
slideInit,
@ -171,7 +170,7 @@ function insertContent(list = props.list) {
let el = getInsEl(item, start + index, start + index === state.localIndex)
wrapperEl.value.appendChild(el)
})
GM.$setCss(
_css(
wrapperEl.value,
'transform',
`translate3d(0px,${getSlideOffset(state, wrapperEl.value)}px, 0px)`
@ -281,7 +280,6 @@ function touchEnd(e) {
wrapperEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {
let index = Number(item.getAttribute('data-index'))
if (index < state.localIndex - 2) {
console.log(2, appInsMap.get(Number(index)))
appInsMap.get(index).unmount()
}
_css(item, 'top', (state.localIndex - 2) * state.wrapper.height)

6
src/pages/home/LivePage.vue
View File

@ -49,7 +49,7 @@
<img src="../../assets/img/icon/avatar/2.png" alt="" class="round" />
<img src="../../assets/img/icon/avatar/3.png" alt="" class="round" />
<div class="round count">107</div>
<dy-back class="round close" img="close" mode="light" @click="$back" />
<dy-back class="round close" img="close" mode="light" @click="$router.back()" />
</div>
<div class="more">
<div class="wrapper">
@ -117,7 +117,7 @@ import Dom from '../../utils/dom'
import { nextTick } from 'vue'
import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia'
import { _checkImgUrl, random } from '@/utils'
import { _checkImgUrl, _sleep, random } from '@/utils'
import Mock from 'mockjs'
export default {
@ -205,7 +205,7 @@ export default {
this.page = this.$refs.page
this.timer1 = setInterval(async () => {
this.sendGift()
await this.$sleep(300)
await _sleep(300)
this.sendGift()
this.joinUser()
}, 1000)

23
src/pages/home/components/IndicatorHome.vue
View File

@ -56,6 +56,7 @@ import Loading from '../../../components/Loading.vue'
import bus from '../../../utils/bus'
import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia'
import { _css } from '@/utils/dom'
export default {
name: 'IndicatorHome',
@ -179,16 +180,16 @@ export default {
this.open = false
}
this.$emit('update:index', index)
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(this.indicatorRef, 'left', this.lefts[index] + 'px')
},
initTabs() {
let tabs = this.$refs.tabs
this.indicatorRef = this.$refs.indicator
let indicatorWidth = this.$getCss(this.indicatorRef, 'width')
let indicatorWidth = _css(this.indicatorRef, 'width')
for (let i = 0; i < tabs.children.length; i++) {
let item = tabs.children[i]
let tabWidth = this.$getCss(item, 'width')
let tabWidth = _css(item, 'width')
this.lefts.push(
item.getBoundingClientRect().x -
tabs.children[0].getBoundingClientRect().x +
@ -196,12 +197,12 @@ export default {
)
}
this.indicatorSpace = this.lefts[1] - this.lefts[0]
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(this.indicatorRef, 'left', this.lefts[this.index] + 'px')
},
move(e) {
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.$setCss(
_css(this.indicatorRef, 'transition-duration', `0ms`)
_css(
this.indicatorRef,
'left',
this.lefts[this.index] - e / (this.baseStore.bodyWidth / this.indicatorSpace) + 'px'
@ -209,10 +210,10 @@ export default {
},
end(index) {
this.moveY = 0
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
_css(this.indicatorRef, 'transition-duration', `300ms`)
_css(this.indicatorRef, 'left', this.lefts[index] + 'px')
setTimeout(() => {
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
_css(this.indicatorRef, 'transition-duration', `0ms`)
}, 300)
}
}

8
src/pages/home/components/PlayFeedback.vue
View File

@ -161,7 +161,7 @@
</template>
<script>
import Check from '../../../components/Check'
import { _notice } from '@/utils'
import { _hideLoading, _notice, _showLoading, _sleep } from '@/utils'
export default {
name: 'Test',
@ -223,9 +223,9 @@ export default {
},
async submit() {
this.cancel()
this.$showLoading()
await this.$sleep(1000)
this.$hideLoading()
_showLoading()
await _sleep(1000)
_hideLoading()
_notice('感谢你的反馈，我们会尽快答复！')
}
}

13
src/pages/home/components/ShareTo.vue
View File

@ -102,7 +102,7 @@
v-for="(item, i) in localFriends.all"
@click="share(item)"
>
<img :src="$imgPreview(item.avatar)" alt="" />
<img :src="_checkImgUrl(item.avatar)" alt="" />
<div class="right">
<span>{{ item.name }}</span>
<div class="share-btn" v-if="!item.select">分享</div>
@ -123,7 +123,7 @@
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import { mapState } from 'pinia'
import { useBaseStore } from '@/store/pinia'
import { _no, _notice } from '@/utils'
import { _checkImgUrl, _no, _notice, _storageGet, _storageSet, cloneDeep } from '@/utils'
/*
* 分享到各种工具
* */
@ -151,7 +151,7 @@ export default {
this.change(newVal)
},
showShareDialog() {
this.localFriends = this.$clone(this.friends)
this.localFriends = cloneDeep(this.friends)
}
},
data() {
@ -174,12 +174,13 @@ export default {
},
created() {},
methods: {
_checkImgUrl,
_no,
async change(newVal) {
if (newVal === -1) return
this.showShareDialog = true
if (this.canDownload) {
let downloadedVideo = this.$storageGet('downloadedVideo', [])
let downloadedVideo = _storageGet('downloadedVideo', [])
if (!downloadedVideo.find((v) => v === this.videoId) && !this.downloading) {
await this.downloadVideo()
}
@ -215,9 +216,9 @@ export default {
this.downloading = true
let time = setInterval(() => {
if (this.progress >= 100) {
let downloadedVideo = this.$storageGet('downloadedVideo', [])
let downloadedVideo = _storageGet('downloadedVideo', [])
downloadedVideo.push(this.videoId)
this.$storageSet('downloadedVideo', downloadedVideo)
_storageSet('downloadedVideo', downloadedVideo)
clearInterval(time)
this.downloading = false
resolve()

12
src/pages/home/components/ShareToFriend.vue
View File

@ -26,7 +26,7 @@
v-for="(item, i) in searchResult"
@click="handleClick2(item)"
>
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
<img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
<div class="right">
<div class="info">
<span class="name">
@ -60,7 +60,7 @@
<div class="friend-list">
<div class="index">所有朋友</div>
<div class="friend-item" :key="i" v-for="(item, i) in localFriends">
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
<img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
<div class="right">
<span>{{ item.name }}</span>
<dy-button :type="item.shared ? 'dark' : 'primary'" @click="item.shared = true">
@ -80,7 +80,7 @@
<div class="chat-list">
<div class="chat-item" :key="i" v-for="(item, i) in localFriends">
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
<img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
<div class="right">
<div class="title">
<div class="name">{{ text }}</div>
@ -101,6 +101,7 @@ import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import { mapState } from 'pinia'
import Search from '../../../components/Search'
import { useBaseStore } from '@/store/pinia'
import { _checkImgUrl, cloneDeep } from '@/utils'
/*
分享给朋友
* */
@ -136,7 +137,7 @@ export default {
watch: {
searchKey(newVal) {
if (newVal) {
let temp = this.$clone(this.localFriends)
let temp = cloneDeep(this.localFriends)
this.searchResult = temp.filter((v) => {
// return v.name.includes(newVal) || v.account.includes(newVal);
return v.name.includes(newVal)
@ -147,7 +148,7 @@ export default {
},
modelValue(newVal) {
if (newVal) {
this.localFriends = this.$clone(this.friends.all)
this.localFriends = cloneDeep(this.friends.all)
this.localFriends.map((v) => (v.shared = false))
} else {
this.searchKey = ''
@ -165,6 +166,7 @@ export default {
},
created() {},
methods: {
_checkImgUrl,
handleClick() {
this.isShowRightText = true
this.height = 'calc(var(--vh, 1vh) * 100)'

23
src/pages/home/components/VideoShare.vue
View File

@ -55,7 +55,7 @@
</div>
<div class="friends">
<div class="item" :key="i" v-for="(item, i) in friends.all">
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="" />
<img class="left" v-lazy="_checkImgUrl(item.avatar)" alt="" />
<div class="right">
<span>{{ item.name }}</span>
<dy-button
@ -81,7 +81,15 @@ import { mapState } from 'pinia'
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import LoadingCircle from './LoadingCircle'
import { useBaseStore } from '@/store/pinia'
import { _no, _notice } from '@/utils'
import {
_checkImgUrl,
_hideLoading,
_no,
_notice,
_showLoading,
_sleep,
_stopPropagation
} from '@/utils'
// import DouyinCode from "./DouyinCode";
export default {
@ -150,14 +158,14 @@ export default {
click(e) {
if (!this.canDownload) {
if (this.itemType === 'download') {
this.$stopPropagation(e)
_stopPropagation(e)
} else {
_notice('作者已关闭下载功能')
this.$emit('copy')
}
return
}
if (this.needDown) this.$stopPropagation(e)
if (this.needDown) _stopPropagation(e)
else return
if (this.progress === 100) {
_notice('未实现分享跳转到其他App')
@ -250,6 +258,7 @@ export default {
}
},
methods: {
_checkImgUrl,
_no,
displayText(type) {
if (this.loading[type]) {
@ -259,9 +268,9 @@ export default {
},
async copyLink() {
this.closeShare()
this.$showLoading()
await this.$sleep(500)
this.$hideLoading()
_showLoading()
await _sleep(500)
_hideLoading()
_notice('复制成功')
},
toggleCollect() {

4
src/pages/home/slide/Community.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="Community" @dragstart="(e) => Utils.$stopPropagation(e)">
<div id="Community" @dragstart="(e) => _stopPropagation(e)">
<ScrollList class="Scroll" v-if="state.show" :api="recommendedPost">
<template v-slot="{ list }">
<div class="search" @click="nav('/home/search')">
@ -47,7 +47,7 @@
<script setup>
import { reactive, ref, watch } from 'vue'
import Utils, { _checkImgUrl, _no, cloneDeep } from '@/utils'
import { _checkImgUrl, _no, _stopPropagation, cloneDeep } from '@/utils'
import { recommendedPost } from '@/api/user'
import { useNav } from '@/utils/hooks/useNav'
import { Icon } from '@iconify/vue'

4
src/pages/home/slide/LongVideo.vue
View File

@ -1,6 +1,6 @@
<script setup>
import { reactive, ref, watch } from 'vue'
import Utils, { _checkImgUrl, _duration, _formatNumber } from '@/utils'
import { _checkImgUrl, _duration, _formatNumber, _stopPropagation } from '@/utils'
import { recommendedVideo } from '@/api/videos'
import ScrollList from '@/components/ScrollList.vue'
import { useNav } from '@/utils/hooks/useNav'
@ -78,7 +78,7 @@ const nav = useNav()
</script>
<template>
<div class="long-video" @dragstart="(e) => Utils.$stopPropagation(e)">
<div class="long-video" @dragstart="(e) => _stopPropagation(e)">
<ScrollList class="Scroll" v-if="state.show" :api="recommendedVideo">
<template v-slot="{ list }">
<div class="list">

6
src/pages/home/slide/Slide0.vue
View File

@ -62,7 +62,7 @@
import SlideItem from '@/components/slide/SlideItem.vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus'
import Utils from '@/utils'
import { _stopPropagation } from '@/utils'
import SlideList from './SlideList.vue'
import { recommendedVideo } from '@/api/videos'
@ -94,7 +94,7 @@ const state = reactive({
})
function showSubType(e) {
Utils.$stopPropagation(e)
_stopPropagation(e)
console.log('subTypeRef')
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
state.subTypeVisible = true
@ -107,7 +107,7 @@ function pageClick(e) {
if (state.subTypeVisible) {
state.subTypeIsTop = state.subTypeVisible = false
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
Utils.$stopPropagation(e)
_stopPropagation(e)
}
}

12
src/pages/home/slide/Slide2.vue
View File

@ -1,7 +1,7 @@
<template>
<SlideItem class="slide-item-class">
<div class="sub-type" :class="state.subTypeIsTop ? 'top' : ''" ref="subTypeRef">
<div class="card" @touchmove.capture="stop">
<div class="card" @touchmove="_stop">
<div class="nav-item" @click="goLive(i)" :key="j" v-for="(i, j) in store.users">
<img :src="_checkImgUrl(i.avatar_168x168.url_list[0])" alt="" />
<span>{{ i.nickname }}</span>
@ -33,7 +33,7 @@
import SlideItem from '@/components/slide/SlideItem.vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import bus, { EVENT_KEY } from '@/utils/bus'
import Utils, { _checkImgUrl } from '@/utils'
import { _checkImgUrl, _stop, _stopPropagation } from '@/utils'
import SlideList from './SlideList.vue'
import { recommendedVideo } from '@/api/videos'
import { useBaseStore } from '@/store/pinia'
@ -46,10 +46,6 @@ const props = defineProps({
}
})
function stop(e) {
e.stopPropagation()
}
const subTypeRef = ref(null)
const state = reactive({
index: 0,
@ -61,7 +57,7 @@ const state = reactive({
})
function showSubType(e) {
Utils.$stopPropagation(e)
_stopPropagation(e)
console.log('subTypeRef')
state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
state.subTypeVisible = true
@ -74,7 +70,7 @@ function pageClick(e) {
if (state.subTypeVisible) {
state.subTypeIsTop = state.subTypeVisible = false
bus.emit(EVENT_KEY.CLOSE_SUB_TYPE)
Utils.$stopPropagation(e)
_stopPropagation(e)
}
}

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

@ -103,11 +103,11 @@ async function getData(refresh = false) {
// function dislike() {
// listRef.value.dislike(state.list[1])
// state.list[state.index] = state.list[1]
// $notice('操作成功，将减少此类视频的推荐')
// _notice('操作成功，将减少此类视频的推荐')
// }
// function end() {
// // this.$notice('暂时没有更多了')
// // _notice('暂时没有更多了')
// }
function click(uniqueId) {

2
src/pages/login/OtherLogin.vue
View File

@ -113,7 +113,7 @@ export default {
if (res) {
this.loading = true
setTimeout(() => {
this.$nav('/login/verification-code')
this.$router.push('/login/verification-code')
}, 2000)
}
},

11
src/pages/login/RetrievePassword.vue
View File

@ -69,6 +69,7 @@ import Check from '../../components/Check'
import LoginInput from './components/LoginInput'
import Tooltip from './components/Tooltip'
import Base from './Base'
import { _hideLoading, _showConfirmDialog, _showLoading, _showNoticeDialog, _sleep } from '@/utils'
export default {
name: 'RetrievePassword',
@ -100,13 +101,13 @@ export default {
},
methods: {
getVoiceCode() {
return this.$showNoticeDialog(
return _showNoticeDialog(
'语音验证码',
'我们将以电话的方式告知你验证码，请注意接听',
'',
() => {
setTimeout(() => {
this.$showConfirmDialog(
_showConfirmDialog(
'',
'您的手机可能由于空号/欠费/停机无法收到验证码，请恢复手机号状态，如果' +
'您因为换号无法收到验证码，可以尝试找回账号',
@ -124,9 +125,9 @@ export default {
},
//TODO loading样式不对
async sendCode() {
this.$showLoading()
await this.$sleep(500)
this.$hideLoading()
_showLoading()
await _sleep(500)
_hideLoading()
this.isSendVerificationCode = true
},
async login() {

3
src/pages/me/Me.less
View File

@ -190,7 +190,8 @@
.poster {
border-radius: 4rem;
width: 100%;
height: calc((100% - 34rem) / 3);
height: 130rem;
max-height: calc((100vw - 34rem) / 3);
display: block;
}

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

@ -223,7 +223,7 @@
:key="j"
v-for="(i, j) in videos.collect.music.list.slice(0, 3)"
>
<img class="poster" :src="$imgPreview(i.cover)" alt="" />
<img class="poster" :src="_checkImgUrl(i.cover)" alt="" />
<div class="title">{{ i.name }}</div>
</div>
</div>
@ -378,7 +378,7 @@ import { mapState } from 'pinia'
import bus from '../../utils/bus'
import ConfirmDialog from '../../components/dialog/ConfirmDialog'
import { _checkImgUrl, _formatNumber, _getUserDouyinId, _no } from '@/utils'
import { _checkImgUrl, _formatNumber, _getUserDouyinId, _no, _stopPropagation } from '@/utils'
import { likeVideo, myVideo, privateVideo } from '@/api/videos'
import { useBaseStore } from '@/store/pinia'
import { userCollect } from '@/api/user'
@ -502,7 +502,7 @@ export default {
if (this.baseActiveIndex === 0) return
if (this.baseActiveIndex === 1) {
this.baseActiveIndex = 0
this.$stopPropagation(e)
_stopPropagation(e)
}
},
async getScrollAreaHeight(index = this.contentIndex) {
@ -790,10 +790,9 @@ export default {
} else {
//transformY === 0说明，本来就在顶部，然后猛的一划,这里要判断下
if (transformY !== 0) {
if (this.$getCss(this.refs.header, 'height') < 400) {
if (_css(this.refs.header, 'height') < 400) {
this.refs.header.style.transition = 'none'
this.refs.header.style.height =
this.$getCss(this.refs.header, 'height') + 10 + 'px'
this.refs.header.style.height = _css(this.refs.header, 'height') + 10 + 'px'
timer = requestAnimationFrame(fn)
} else {
this.refs.header.style.transition = 'all .6s'

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

@ -2,7 +2,7 @@
<div class="SlideItemMusic">
<div v-show="!isFullLyrics">
<div class="cover">
<img v-lazy="$imgPreview(modelValue.cover)" alt="" />
<img v-lazy="_checkImgUrl(modelValue.cover)" alt="" />
</div>
<div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true">
<div class="container">
@ -96,7 +96,7 @@
</template>
<script>
import { nextTick } from 'vue'
import globalMethods from '../../../utils'
import { _checkImgUrl, _duration, _stopPropagation } from '@/utils'
import gaobaiqiqiu from '../../../assets/data/lyrics/gaobaiqiqiu.lrc?raw'
import { userCollect } from '@/api/user'
@ -193,6 +193,7 @@ export default {
})
},
methods: {
_checkImgUrl,
slide(state) {
this.togglePlay(false)
this.$emit(state)
@ -291,7 +292,7 @@ export default {
if (this.pageX < 0) this.pageX = 0
if (this.pageX > this.slideBarWidth) this.pageX = this.slideBarWidth - 5
this.currentTime = Math.ceil(this.pageX / this.step)
globalMethods.$stopPropagation(e)
_stopPropagation(e)
},
end(e) {
this.lastPageX = this.pageX
@ -299,12 +300,12 @@ export default {
this.audio.currentTime = this.currentTime
this.audio.play()
this.isMove = false
globalMethods.$stopPropagation(e)
_stopPropagation(e)
},
$durationTime(time) {
if (time === 0) return '00:00'
else {
return this.$duration(time)
return _duration(time)
}
},
durationStyle(type) {

4
src/pages/other/AlbumDetail.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="goods-detail" @dragstart="(e) => Utils.$stopPropagation(e)">
<div class="goods-detail" @dragstart="(e) => _stopPropagation(e)">
<header>
<Icon @click="close" icon="material-symbols-light:arrow-back-ios-new" />
<div class="option" @click="nav('/home/search')">
@ -99,7 +99,7 @@ import SlideItem from '@/components/slide/SlideItem.vue'
import { reactive, ref } from 'vue'
import { useNav } from '@/utils/hooks/useNav'
import { Icon } from '@iconify/vue'
import Utils, { _checkImgUrl } from '@/utils'
import { _checkImgUrl, _stopPropagation } from '@/utils'
const nav = useNav()

5
src/pages/people/Scan.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="Scan">
<img src="../../assets/img/icon/components/gray-back.png" @click="$back" class="back" />
<img src="../../assets/img/icon/components/gray-back.png" @click="router.back()" class="back" />
<div class="video-ctn">
<video src="http://qy9rc9xff.hn-bkt.clouddn.com/0.mp4"></video>
</div>
@ -24,6 +24,9 @@
<script setup>
//TODO 那个动画没做，用css画有点麻烦，后面ps p一张图片吧
import { useRouter } from 'vue-router'
const router = useRouter()
defineOptions({
name: 'Scan'
})

6
src/pages/people/components/People.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="People">
<img :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left" />
<img :src="_checkImgUrl(people.avatar)" alt="" class="head-image pull-left" />
<div class="content">
<template v-if="mode === 'normal'">
<div class="left">
@ -161,6 +161,8 @@
</div>
</template>
<script>
import { _checkImgUrl } from '@/utils'
export default {
name: 'People',
props: {
@ -186,7 +188,7 @@ export default {
},
computed: {},
created() {},
methods: {}
methods: { _checkImgUrl }
}
</script>

4
src/pages/people/components/Peoples.vue
View File

@ -33,7 +33,7 @@
<script>
import People from './People'
import FromBottomDialog from '../../../components/dialog/FromBottomDialog'
import { _notice } from '@/utils'
import { _notice, _showConfirmDialog } from '@/utils'
export default {
name: 'Peoples',
@ -121,7 +121,7 @@ export default {
},
noLook() {
this.isShowUnfollow = false
this.$showConfirmDialog(
_showConfirmDialog(
'确认不看 TA?',
'确认后，将不再为你推荐对方的作品，你可以在对方主页随时恢复。',
'gray',

6
src/utils/dom.ts
View File

@ -142,7 +142,7 @@ export default class Dom {
}
export function _css(el, key, value?) {
const reg = /^\d+(px|pt|em|rem|vw|vh|%|rpx)$/i
const reg = /^\d+.?\d*(px|pt|em|rem|vw|vh|%|rpx|ms)$/i
if (value === undefined) {
let val = null
if ('getComputedStyle' in window) {
@ -167,7 +167,9 @@ export function _css(el, key, value?) {
].includes(key)
) {
if (!reg.test(value)) {
value += 'px'
if (!String(value).includes('calc')) {
value += 'px'
}
}
}
// console.log(value)

346
src/utils/index.tsx
View File

@ -3,274 +3,64 @@ 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, IS_DEV } from '../config'
import { IMG_URL, IS_DEV } from '@/config'
import NoticeDialog from '../components/dialog/NoticeDialog.vue'
import bus, { EVENT_KEY } from './bus'
import { ArchiveReader, libarchiveWasm } from 'libarchive-wasm'
const Utils = {
$showLoading() {
const app = Vue.createApp({
render() {
return <Loading />
}
})
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn'])
document.body.append(parent)
app.mount(parent)
},
$hideLoading() {
const parent = document.querySelector('.dialog-ctn')
parent.remove()
},
$showConfirmDialog(
title,
subtitle,
subtitleColor,
okCb,
cancelCb,
okText,
cancelText,
cancelTextColor
) {
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
const tempOkCb = (e) => {
remove()
okCb && okCb(e)
}
const tempCancelCb = (e) => {
remove()
cancelCb && cancelCb(e)
}
const app = Vue.createApp({
render() {
return (
<ConfirmDialog
onCancel={tempCancelCb}
onDismiss={remove}
title={title}
subtitle={subtitle}
subtitleColor={subtitleColor}
cancelTextColor={cancelTextColor}
okText={okText}
cancelText={cancelText}
onOk={tempOkCb}
/>
)
}
})
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) {
const remove = () => {
const parent = document.querySelector('.dialog-ctn')
parent.classList.replace('fade-in', 'fade-out')
setTimeout(() => {
parent.remove()
}, 300)
}
const tempCancelCb = (e) => {
remove()
cancelCb(e)
}
const app = Vue.createApp({
render() {
return (
<NoticeDialog
onCancel={tempCancelCb}
onDismiss={remove}
title={title}
subtitleColor={subtitleColor}
cancelText={cancelText}
subtitle={subtitle}
/>
)
}
})
const parent = document.createElement('div')
parent.classList.add(...['dialog-ctn', 'fade-in'])
document.body.append(parent)
app.mount(parent)
},
$notice(val) {
const div = document.createElement('div')
div.classList.add('global-notice')
div.textContent = val
document.body.append(div)
setTimeout(() => {
document.body.removeChild(div)
}, 1000)
},
$back() {
this.$router.back()
// window.history.back()
},
$stopPropagation(e) {
e.stopImmediatePropagation()
e.stopPropagation()
e.preventDefault()
},
$getCss(curEle, attr) {
let val = null,
reg = null
if ('getComputedStyle' in window) {
val = window.getComputedStyle(curEle, null)[attr]
} else {
//ie6~8不支持上面属性
//不兼容
if (attr === 'opacity') {
val = curEle.currentStyle['filter'] //'alpha(opacity=12,345)'
reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
} else {
val = curEle.currentStyle[attr]
}
}
// reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
// return reg.test(val) ? parseFloat(val) : val
return parseFloat(val)
},
$setCss(el, key, value) {
// console.log(value)
if (key === 'transform') {
//直接设置不生效
el.style.webkitTransform =
el.style.MsTransform =
el.style.msTransform =
el.style.MozTransform =
el.style.OTransform =
el.style.transform =
value
} else {
el.style[key] = value
}
},
$nav(path, query = {}) {
this.$router.push({ path, query })
},
$clone(v) {
return JSON.parse(JSON.stringify(v))
},
$sleep(duration) {
return new Promise((resolve) => {
setTimeout(resolve, duration)
})
},
$parseURL(url) {
const a = document.createElement('a')
a.href = url
return {
host: a.hostname,
port: a.port,
query: a.search,
params: (function () {
const ret = {}
const seg = a.search.replace(/^\?/, '').split('&')
const len = seg.length
let i = 0
let s
for (; i < len; i++) {
if (!seg[i]) {
continue
}
s = seg[i].split('=')
ret[s[0]] = s[1]
}
return ret
})(),
hash: a.hash.replace('#', '')
}
},
$imgPreview(url) {
// console.log(url)
if (!url) return
//本地图片
if (
url.includes('assets/img') ||
url.includes('file://') ||
url.includes('data:image') ||
url.includes('http') ||
url.includes('https')
) {
return url
}
return Config.filePreview + url
},
$storageSet(key, value) {
localStorage.setItem(key, JSON.stringify(value))
},
$storageGet(key, defaultValue = '') {
const res = localStorage.getItem(key)
if (res) {
return JSON.parse(res)
}
return defaultValue
},
$duration(v) {
if (!v) return '00:00'
const m = Math.floor(v / 60)
// let s = v % 60
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 += ':'
if (s === 0) {
str += '00'
} else if (s > 0 && s < 10) {
str += '0' + s
} else {
str += s
}
return str
},
formatNumber(num) {
if (!num) return
if (num > 100000000) {
return (num / 100000000).toFixed(1) + '亿'
} else if (num > 10000) {
return (num / 10000).toFixed(1) + '万'
} else {
return num
}
},
updateItem(props, key, val, emit) {
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) {
const 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(textarea)
}
export function _updateItem(props, key, val, emit) {
const old = cloneDeep(props.item)
old[key] = val
emit('update:item', old)
bus.emit(EVENT_KEY.UPDATE_ITEM, { position: props.position, item: old })
}
export default Utils
export function _storageSet(key, value) {
localStorage.setItem(key, JSON.stringify(value))
}
export function _storageGet(key, defaultValue = '') {
const res = localStorage.getItem(key)
if (res) {
return JSON.parse(res)
}
return defaultValue
}
export function _stopPropagation(e: Event) {
e.stopImmediatePropagation()
e.stopPropagation()
e.preventDefault()
}
export function _stop(e: Event) {
e.stopPropagation()
}
export function _copy(val) {
const 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)
_notice('已复制')
}
document.body.removeChild(textarea)
}
export function _formatNumber(num) {
if (!num) return
if (num > 100000000) {
return (num / 100000000).toFixed(1) + '亿'
} else if (num > 10000) {
return (num / 10000).toFixed(1) + '万'
} else {
return num
}
}
export function _dateFormat(val, type): string {
if (!val) return
@ -351,12 +141,28 @@ export function _checkImgUrl(url) {
return IMG_URL + url
}
export function _duration(num) {
return Utils.$duration(num)
}
export function _formatNumber(num) {
return Utils.formatNumber(num)
export function _duration(v) {
if (!v) return '00:00'
const m = Math.floor(v / 60)
// let s = v % 60
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 += ':'
if (s === 0) {
str += '00'
} else if (s > 0 && s < 10) {
str += '0' + s
} else {
str += s
}
return str
}
export function _getUserDouyinId(item) {
@ -372,10 +178,6 @@ export function _sleep(duration) {
})
}
export function _copy(val) {
return Utils.copy(val)
}
export function cloneDeep(val) {
return JSON.parse(JSON.stringify(val))
}

4
src/utils/mixin.ts
View File

@ -1,4 +1,3 @@
import globalMethods from './index'
import BaseHeader from '../components/BaseHeader.vue'
import SlideItem from '../components/slide/SlideItem.vue'
import Indicator from '../components/slide/Indicator.vue'
@ -35,9 +34,6 @@ export default {
RELATE_ENUM: CONST_VAR.RELATE_ENUM
}
},
methods: {
...globalMethods
},
directives: {
longpress: {
beforeMount: function (el, binding, vNode) {

9
src/utils/slide.ts
View File

@ -1,6 +1,5 @@
import bus from '@/utils/bus'
import Utils from '@/utils/index'
import GM from '@/utils/index'
import { _stopPropagation } from '@/utils/index'
import { SlideType } from '@/utils/const_var'
import { nextTick } from 'vue'
import { _css } from '@/utils/dom'
@ -22,8 +21,8 @@ function checkEvent(e) {
//初始化信息，获取slide dom的长宽、子元素数量，用于move事件判断能否滑动
export function slideInit(el, state) {
state.wrapper.width = GM.$getCss(el, 'width')
state.wrapper.height = GM.$getCss(el, 'height')
state.wrapper.width = _css(el, 'width')
state.wrapper.height = _css(el, 'height')
nextTick(() => {
state.wrapper.childrenLength = el.children.length
})
@ -138,7 +137,7 @@ export function slideTouchMove(
if (canNextCb(state, isNext)) {
window.isMoved = true
//能滑动，那就把事件捕获，不能给父组件处理
Utils.$stopPropagation(e)
_stopPropagation(e)
if (state.type === SlideType.HORIZONTAL) {
bus.emit(state.name + '-moveX', state.move.x)
}