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

优化

Browse Source
This commit is contained in:
zyronon 2023-02-18 02:59:03 +08:00
parent d9cbcda92d
commit a2a53cd829
40 changed files with 210 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/BaseButton.vue
View File

@ -132,9 +132,8 @@ export default {
}
&.dark2 {
border: 1px solid @second-btn-color;
background: white;
color: #000;
background: rgb(36,36,36);
color: #fff;
}
&.green {

2
src/components/BaseMusic.vue
View File

@ -25,7 +25,7 @@ const style = computed(() => {
.music-wrapper {
display: flex;
justify-content: center;
@w: 40rem;
@w: 45rem;
.music {
border-radius: 50%;

21
src/components/Share.vue
View File

@ -99,7 +99,7 @@
</template>
<template v-if="mode === 'video'">
<div class="tool" @click.stop="$no">
<!--TODO icon不对 -->
<!--TODO icon不对 -->
<img src="../assets/img/icon/components/video/feedback.webp" alt="">
<span>建群分享</span>
</div>
@ -144,7 +144,13 @@
<Check mode="red" v-model="isCreateChat"/>
<span>创建群聊</span>
</div>
<b-button type="primary" @click.stop="$no">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
<div class="btns">
<dy-button type="dark2" radius="7" @click.stop="$no">一起看视频</dy-button>
<dy-button type="primary" radius="7" @click.stop="$no">{{
selectFriends.length > 1 ? '分别发送' : '私信发送'
}}
</dy-button>
</div>
</div>
</div>
</div>
@ -210,6 +216,10 @@ export default {
item.select = !item.select
},
closeShare() {
this.friends.all = this.friends.all.map(v => {
v.select = false
return v
})
this.$emit("update:modelValue", false)
}
}
@ -418,9 +428,12 @@ export default {
}
}
.button {
.btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10rem;
}
}
}

2
src/components/UserPanel.vue
View File

@ -162,7 +162,7 @@
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span class="name">{{ item.name }}</span>
<span class="tips">可能感兴趣的人</span>
<b-button type="primary">关注</b-button>
<dy-button type="primary">关注</dy-button>
<div class="close">
<dy-back img="close" scale=".6"></dy-back>
</div>

2
src/components/UserPanel2.vue
View File

@ -120,7 +120,7 @@
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span class="name">{{ item.name }}</span>
<span class="tips">可能感兴趣的人</span>
<b-button type="primary">关注</b-button>
<dy-button type="primary">关注</dy-button>
<div class="close">
<dy-back img="close" scale=".6"></dy-back>
</div>

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

@ -74,7 +74,7 @@ function showComments() {
<img src="../../assets/img/icon/message.svg" alt="" class="message-image">
<span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
</div>
<!--TODO -->
<!--TODO -->
<div class="message mb2r" @click.stop="showComments">
<img v-if="item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
<img v-else src="@/assets/img/icon/components/video/star.png" alt="" class="message-image">
@ -108,9 +108,12 @@ function showComments() {
.avatar-ctn {
position: relative;
@w: 45rem;
.avatar {
width: 55px;
height: 55px;
width: @w;
height: @w;
border: 3rem solid white;
border-radius: 50%;
}

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

@ -74,7 +74,7 @@ import {
slideTouchEnd,
slideTouchMove,
slideTouchStart
} from "../../pages/slideHooks/common";
} from "./common";
import {SlideAlbumOperationStatus, SlideType} from "../../utils/const_var";
import ItemToolbar from "./ItemToolbar";
import ItemDesc from "./ItemDesc";

21
src/pages/slideHooks/H.vue → src/components/slide/SlideHorizontal.vue
View File

@ -1,9 +1,15 @@
<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import GM from '../../utils'
import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
import {SlideType} from "../../utils/const_var";
import Utils from "../../utils";
import {
getSlideDistance,
slideInit,
slideReset,
slideTouchEnd,
slideTouchMove,
slideTouchStart
} from "./common";
import {SlideType} from "@/utils/const_var";
const props = defineProps({
index: {
@ -16,6 +22,11 @@ const props = defineProps({
type: String,
default: () => ''
},
//改变index，是否使用动画
changeActiveIndexUseAnim: {
type: Boolean,
default: true
},
})
const emit = defineEmits(['update:index'])
@ -36,7 +47,9 @@ watch(
(newVal) => {
if (state.localIndex !== newVal) {
state.localIndex = newVal
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
if (props.changeActiveIndexUseAnim) {
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
}
GM.$setCss(wrapperEl.value, 'transform', `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`)
}
}

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

@ -1,21 +1,17 @@
<template>
<div class="base-slide-item">
<div class="slide-item">
<slot></slot>
</div>
</template>
<script>
export default {
name: "BaseSlideItem"
}
<script setup>
</script>
<style lang="less">
.base-slide-item {
//min-width: 100vw;
//min-height: 100vh;
min-width: 100%;
min-height: 100%;
.slide-item {
height: 100%;
width: 100%;
flex-shrink: 0;
position: relative;
}

13
src/pages/slideHooks/V.vue → src/components/slide/SlideVertical.vue
View File

@ -2,7 +2,7 @@
import {onMounted, reactive, ref, watch} from "vue";
import GM from '../../utils'
import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
import {SlideType} from "../../utils/const_var";
import {SlideType} from "@/utils/const_var";
const props = defineProps({
index: {
@ -11,6 +11,11 @@ const props = defineProps({
return 0
}
},
//改变index，是否使用动画
changeActiveIndexUseAnim: {
type: Boolean,
default: true
},
})
const emit = defineEmits(['update:index'])
@ -31,7 +36,9 @@ watch(
(newVal) => {
if (state.localIndex !== newVal) {
state.localIndex = newVal
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
if (props.changeActiveIndexUseAnim) {
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
}
GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`)
}
}
@ -46,7 +53,7 @@ function touchStart(e) {
}
function touchMove(e) {
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.VERTICAL)
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
}
function touchEnd(e) {

17
src/pages/slideHooks/VInfinite.vue → src/components/slide/SlideVerticalInfinite.vue
View File

@ -1,13 +1,11 @@
<script setup lang="jsx">
import {onMounted, reactive, ref, watch, createApp, computed} from "vue";
import {computed, createApp, onMounted, reactive, ref, watch} from "vue";
import GM from '../../utils'
import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
import {SlideType} from "../../utils/const_var";
import SlideItem from './SlideItem'
import {SlideType} from "@/utils/const_var";
import SlideItem from '@/components/slide/SlideItem.vue'
import bus, {EVENT_KEY} from "../../utils/bus";
import {useStore} from 'vuex'
import Utils from "../../utils";
import Dom from "@/utils/dom";
const props = defineProps({
index: {
@ -147,6 +145,15 @@ function insertContent(list = props.list) {
state.wrapper.childrenLength = wrapperEl.value.children.length
}
function dislike(item) {
let currentItem = $(wrapperEl.value).find(`.${itemClassName}[data-index=${state.localIndex}]`)
let replaceItem = getInsEl(item, state.localIndex, true)
$(replaceItem).css('top', currentItem.css('top'))
currentItem.replaceWith(replaceItem)
}
defineExpose({dislike})
function getInsEl(item, index, play = false) {
console.log('index', index, play)
let slideVNode = props.render(item, index, play, props.position)

0
src/pages/slideHooks/VInfinite-Component.vue → src/components/slide/VInfinite-Component.vue
View File

0
src/pages/slideHooks/common.js → src/components/slide/common.js
View File

2
src/pages/home/Attention.vue
View File

@ -14,9 +14,7 @@
<script setup lang="jsx">
import VInfinite from '@/pages/slideHooks/VInfinite.vue'
import {reactive} from "vue";
import api from "@/api";
import {useNav} from "@/utils/hooks/useNav";
import InfiniteList from "@/pages/slideHooks/InfiniteList.vue";

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

@ -66,7 +66,7 @@
<div class="follow_count">粉丝：83.4w</div>
</div>
</div>
<b-button type="primary">关注</b-button>
<dy-button type="primary">关注</dy-button>
<div class="arrow"></div>
</div>
</div>
@ -114,7 +114,7 @@
<div class="follow_count">粉丝：83.4w</div>
</div>
</div>
<b-button type="primary">关注</b-button>
<dy-button type="primary">关注</dy-button>
<div class="arrow"></div>
</div>
</div>
@ -162,7 +162,7 @@
<div class="follow_count">粉丝：83.4w</div>
</div>
</div>
<b-button type="primary">关注</b-button>
<dy-button type="primary">关注</dy-button>
<div class="arrow"></div>
</div>
</div>

2
src/pages/home/SubmitReport.vue
View File

@ -37,7 +37,7 @@
</div>
</div>
<b-button type="primary" @click="$no">提交</b-button>
<dy-button type="primary" @click="$no">提交</dy-button>
</div>
</div>
</template>

8
src/pages/slideHooks/Community.vue → src/pages/home/components/Community.vue
View File

@ -45,8 +45,8 @@ function loadData() {
console.log('loadData')
for (let i = 1; i < 12; i++) {
let temp = {
src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../assets/img/avatar.png`, import.meta.url).href,
src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
}
state.list.push(temp)
}
@ -55,8 +55,8 @@ function loadData() {
onMounted(() => {
for (let i = 1; i < 12; i++) {
let temp = {
src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../assets/img/avatar.png`, import.meta.url).href,
src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
}
state.list.push(temp)
}

14
src/pages/slideHooks/IndicatorHome.vue → src/pages/home/components/IndicatorHome.vue
View File

@ -5,7 +5,7 @@
</transition>
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
<div class="toolbar" ref="toolbar" :style="toolbarStyle">
<img src="../../assets/img/icon/scan.png"
<img src="../../../assets/img/icon/scan.png"
class="search"
@click="$nav('/home/live')"
style="margin-top: .5rem;">
@ -13,11 +13,11 @@
<div class="tabs" ref="tabs">
<div class="tab" :class="tabOneClass" @click.stop="change(0)">
<span>热点</span>
<img v-show="index === 0" src="../../assets/img/icon/arrow-up-white.png" class="tab1-img">
<img v-show="index === 0" src="../../../assets/img/icon/arrow-up-white.png" class="tab1-img">
</div>
<div class="tab" :class="{active:index === 1}" @click.stop="change(1)">
<span>社区</span>
<img src="../../assets/img/icon/live.webp" class="tab2-img">
<img src="../../../assets/img/icon/live.webp" class="tab2-img">
</div>
<div class="tab" :class="{active:index === 2}" @click.stop="change(2)"><span>关注</span>
</div>
@ -28,7 +28,7 @@
</div>
<div class="indicator" ref="indicator"></div>
</div>
<img v-hide="loading" src="../../assets/img/icon/search-light.png"
<img v-hide="loading" src="../../../assets/img/icon/search-light.png"
class="search"
@click="$nav('/home/search')"
style="margin-top: .5rem;">
@ -36,7 +36,7 @@
<div class="toggle-type" :class="{open}">
<div class="l-button" :class="{active:type === 0}" @click="toggleType(0)">
<span>同城</span>
<img v-if="type === 0" src="../../assets/img/icon/switch.png" alt="">
<img v-if="type === 0" src="../../../assets/img/icon/switch.png" alt="">
</div>
<div class="l-button" :class="{active:type === 1}" @click="toggleType(1)">学习</div>
<div class="l-button" :class="{active:type === 2}" @click="toggleType(2)">热点</div>
@ -46,8 +46,8 @@
</div>
</template>
<script>
import Loading from "../../components/Loading.vue";
import bus from "../../utils/bus";
import Loading from "../../../components/Loading.vue";
import bus from "../../../utils/bus";
import {mapState} from "vuex";
export default {

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

@ -44,7 +44,7 @@
</div>
<div class="text-num">{{ desc.length }}/300</div>
</div>
<b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button>
<dy-button type="primary" :disabled="!disabled" @click="submit">提交</dy-button>
</div>
</div>
</transition>

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

@ -8,91 +8,91 @@
mode="white">
<div class="option-dialog">
<div class="buttons">
<b-button v-if="downloading"
<dy-button v-if="downloading"
class="mb1r"
:border="false"
:progress="progress">
<img src="../../../assets/img/icon/components/video/download-gray.png" alt="">
<span class="second-text-color">下载中 9.2MB/{{ progress }}%</span>
</b-button>
</dy-button>
<template v-if="canDownload">
<b-button type="green" v-if="showShare2WeChatZone" @click="$no">
<dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="">
</template>
发送视频到朋友圈
</b-button>
<b-button type="green" v-if="showShare2WeChat" @click="$no">
</dy-button>
<dy-button type="green" v-if="showShare2WeChat" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="">
</template>
发送视频到微信
</b-button>
<b-button type="qqzone" v-if="showShare2QQZone" @click="$no">
</dy-button>
<dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="">
</template>
发送视频到QQ空间
</b-button>
<b-button type="qq" v-if="showShare2QQ" @click="$no">
</dy-button>
<dy-button type="qq" v-if="showShare2QQ" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/qq-white.webp" alt="">
</template>
发送视频到QQ
</b-button>
<b-button type="webo" v-if="showShare2Webo" @click="$no">
</dy-button>
<dy-button type="webo" v-if="showShare2Webo" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/webo-white.webp" alt="">
</template>
发送视频到微博
</b-button>
<b-button v-if="!showDownload" class="mt1r" type="white" @click="$no">复制口令发给好友</b-button>
</dy-button>
<dy-button v-if="!showDownload" class="mt1r" type="white" @click="$no">复制口令发给好友</dy-button>
</template>
<template v-else>
<b-button type="green" v-if="showShare2WeChatZone" @click="$no">
<dy-button type="green" v-if="showShare2WeChatZone" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="">
</template>
复制口令发给好友
</b-button>
<b-button type="green" v-if="showShare2WeChat" @click="$no">
</dy-button>
<dy-button type="green" v-if="showShare2WeChat" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="">
</template>
复制口令发给好友
</b-button>
<b-button type="qqzone" v-if="showShare2QQZone" @click="$no">
</dy-button>
<dy-button type="qqzone" v-if="showShare2QQZone" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="">
</template>
复制口令发给好友
</b-button>
<b-button type="qq" v-if="showShare2QQ" @click="$no">
</dy-button>
<dy-button type="qq" v-if="showShare2QQ" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/qq-white.webp" alt="">
</template>
复制口令发给好友
</b-button>
<b-button type="webo" v-if="showShare2Webo" @click="$no">
</dy-button>
<dy-button type="webo" v-if="showShare2Webo" @click="$no">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/webo-white.webp" alt="">
</template>
复制口令发给好友
</b-button>
</dy-button>
</template>
<template v-if="showDownload">
<b-button type="primary" @click="$no">
<dy-button type="primary" @click="$no">
已保存，请去相册查看
<dy-back scale="0.7" mode="light" direction="right"></dy-back>
</b-button>
</dy-button>
<b-button class="mt1r" type="white" @click="$no">
<dy-button class="mt1r" type="white" @click="$no">
<img src="../../../assets/img/icon/components/video/wechat.webp" alt="">
发送视频到微信
</b-button>
</dy-button>
</template>
</div>
<div class="dialog-friends">

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

@ -32,9 +32,9 @@
<span v-else>{{ item.name }}</span>
</span>
</div>
<b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
<dy-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
{{ item.shared ? '已' : '' }}分享
</b-button>
</dy-button>
</div>
</div>
</div>
@ -61,9 +61,9 @@
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="">
<div class="right">
<span>{{ item.name }}</span>
<b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
<dy-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
{{ item.shared ? '已' : '' }}分享
</b-button>
</dy-button>
</div>
</div>
</div>
@ -84,9 +84,9 @@
<div class="name">{{ text }}</div>
<div class="num">(3)</div>
</div>
<b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
<dy-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
{{ item.shared ? '已' : '' }}分享
</b-button>
</dy-button>
</div>
</div>
</div>

8
src/pages/slideHooks/Shop.vue → src/pages/home/components/Shop.vue
View File

@ -81,8 +81,8 @@ function loadData() {
console.log('loadData')
for (let i = 1; i < 12; i++) {
let temp = {
src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../assets/img/avatar.png`, import.meta.url).href,
src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
}
state.list.push(temp)
}
@ -91,8 +91,8 @@ function loadData() {
onMounted(() => {
for (let i = 1; i < 12; i++) {
let temp = {
src: new URL(`../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../assets/img/avatar.png`, import.meta.url).href,
src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
}
state.list.push(temp)
}

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

@ -40,10 +40,10 @@
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="">
<div class="right">
<span>{{ item.name }}</span>
<b-button size="small" :type="item.shared?'dark':'primary'"
<dy-button size="small" :type="item.shared?'dark':'primary'"
@click="item.shared = true">
{{ item.shared ? '已' : '' }}分享
</b-button>
</dy-button>
</div>
</div>
<div class="more" @click="closeShare($nav('/message/share-to-friend'))">

100
src/pages/slideHooks/index.vue → src/pages/home/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="test-slide-wrapper">
<H v-model:index="state.baseIndex">
<SlideHorizontal v-model:index="state.baseIndex">
<SlideItem>
<IndicatorHome
:isLight="state.subTypeVisible"
@ -12,10 +12,11 @@
<div class="slide-content"
>
<H class="first-horizontal-item"
name="main"
id="home-index"
v-model:index="state.navIndex">
<SlideHorizontal class="first-horizontal-item"
name="main"
id="home-index"
:change-active-index-use-anim="false"
v-model:index="state.navIndex">
<SlideItem id="slide1">
<div class="sub-type"
:class="state.subTypeIsTop?'top':''"
@ -61,7 +62,7 @@
v-if="state.subType===-1 && !state.subTypeVisible"
@click="showSubType">附近吃喝玩乐
</div>
<VInfinite
<SlideVerticalInfinite
@touchstart="pageClick"
v-love="'home-index'"
:style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
@ -69,7 +70,7 @@
id="slide1-infinite"
v-model:index="state.itemIndex"
:render="render"
:list="state.recommendVideos"
:list="state.recommendList"
:position="{
baseIndex:0,
navIndex:5,
@ -77,7 +78,7 @@
@loadMore="loadMore"
@refresh="() => getData(true)"
>
</VInfinite>
</SlideVerticalInfinite>
</SlideItem>
<SlideItem>
<Community/>
@ -89,12 +90,13 @@
<Shop/>
</SlideItem>
<SlideItem>
<VInfinite
<SlideVerticalInfinite
ref="recommendListRef"
:style="{background: 'black'}"
name="main"
v-model:index="state.itemIndex"
:render="render"
:list="state.recommendVideos"
:list="state.recommendList"
:position="{
baseIndex:0,
navIndex:5,
@ -102,9 +104,9 @@
@loadMore="loadMore"
@refresh="() => getData(true)"
>
</VInfinite>
</SlideVerticalInfinite>
</SlideItem>
</H>
</SlideHorizontal>
</div>
<Footer v-bind:init-tab="1"/>
</SlideItem>
@ -112,14 +114,14 @@
<UserPanel
ref="uploader"
:isOnThisPage="state.baseIndex === 1"
:author="state.recommendVideos[state.itemIndex]?.author"
:author="state.recommendList[state.itemIndex]?.author"
@toggleCanMove="e => state.canMove = e"
@back="state.baseIndex = 0"
@showFollowSetting="state.showFollowSetting = true"
@showFollowSetting2="state.showFollowSetting2 = true"
/>
</SlideItem>
</H>
</SlideHorizontal>
<Comment page-id="home-index" v-model="state.commentVisible"
@close="closeComments"
@ -129,8 +131,8 @@
ref="share"
page-id="home-index"
@dislike="dislike"
:videoId="state.recommendVideos[state.itemIndex]?.id"
:canDownload="state.recommendVideos[state.itemIndex]?.canDownload"
:videoId="state.recommendList[state.itemIndex]?.id"
:canDownload="state.recommendList[state.itemIndex]?.canDownload"
@play-feedback="state.showPlayFeedback = true"
@shareToFriend="delayShowDialog(e => state.shareToFriend = true)"
@showDouyinCode="state.showDouyinCode = true"
@ -147,8 +149,8 @@
<DouyinCode v-model="state.showDouyinCode"/>
<ShareTo v-model:type="state.shareType"
:videoId="state.recommendVideos[state.itemIndex]?.id"
:canDownload="state.recommendVideos[state.itemIndex]?.canDownload"
:videoId="state.recommendList[state.itemIndex]?.id"
:canDownload="state.recommendList[state.itemIndex]?.canDownload"
/>
<FollowSetting
@ -176,33 +178,33 @@
</template>
<script setup lang="jsx">
import H from './H'
import VInfinite from './VInfinite.vue'
import SlideItem from './SlideItem'
import SlideAlbum from "../../components/slide/SlideAlbum";
import SlideUser from "../../components/slide/SlideUser";
import BVideo from "../../components/slide/BVideo";
import Comment from "../../components/Comment";
import Share from "../../components/Share";
import IndicatorHome from "./IndicatorHome.vue";
import SlideHorizontal from '../../components/slide/SlideHorizontal.vue'
import SlideVerticalInfinite from '../../components/slide/SlideVerticalInfinite.vue'
import SlideItem from '@/components/slide/SlideItem.vue'
import SlideAlbum from "../../components/slide/SlideAlbum.vue";
import SlideUser from "../../components/slide/SlideUser.vue";
import BVideo from "../../components/slide/BVideo.vue";
import Comment from "../../components/Comment.vue";
import Share from "../../components/Share.vue";
import IndicatorHome from "./components/IndicatorHome.vue";
import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
import bus, {EVENT_KEY} from "../../utils/bus";
import {useNav} from "@/utils/hooks/useNav";
import Utils from "@/utils";
import api from "@/api";
import {useStore} from "vuex";
import PlayFeedback from "@/pages/home/components/PlayFeedback";
import ShareTo from "@/pages/home/components/ShareTo";
import DouyinCode from "../../components/DouyinCode";
import FollowSetting from "@/pages/home/components/FollowSetting";
import BlockDialog from "../message/components/BlockDialog";
import Search from "../../components/Search";
import ConfirmDialog from "../../components/dialog/ConfirmDialog";
import FollowSetting2 from "@/pages/home/components/FollowSetting2";
import ShareToFriend from "@/pages/home/components/ShareToFriend";
import PlayFeedback from "@/pages/home/components/PlayFeedback.vue";
import ShareTo from "@/pages/home/components/ShareTo.vue";
import DouyinCode from "../../components/DouyinCode.vue";
import FollowSetting from "@/pages/home/components/FollowSetting.vue";
import BlockDialog from "../message/components/BlockDialog.vue";
import Search from "../../components/Search.vue";
import ConfirmDialog from "../../components/dialog/ConfirmDialog.vue";
import FollowSetting2 from "@/pages/home/components/FollowSetting2.vue";
import ShareToFriend from "@/pages/home/components/ShareToFriend.vue";
import UserPanel from "@/components/UserPanel.vue";
import Community from "@/pages/slideHooks/Community.vue";
import Shop from "@/pages/slideHooks/Shop.vue";
import Community from "@/pages/home/components/Community.vue";
import Shop from "@/pages/home/components/Shop.vue";
const nav = useNav()
@ -216,12 +218,13 @@ const bodyHeight = computed(() => store.state.bodyHeight)
const bodyWidth = computed(() => store.state.bodyWidth)
const subTypeRef = ref(null)
const recommendListRef = ref(null)
const state = reactive({
baseIndex: 0,
navIndex: 4,
itemIndex: 0,
test: '',
recommendVideos: [
recommendList: [
// {
// type: 'img',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
@ -235,7 +238,6 @@ const state = reactive({
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// },
],
isSharing: false,
canMove: true,
loading: false,
@ -278,9 +280,9 @@ async function getData(refresh = false) {
if (res.code === 200) {
state.totalSize = res.data.total
if (refresh) {
state.recommendVideos = []
state.recommendList = []
}
state.recommendVideos = state.recommendVideos.concat(res.data.list)
state.recommendList = state.recommendList.concat(res.data.list)
} else {
state.pageNo--
}
@ -318,9 +320,9 @@ function delayShowDialog(cb) {
}
function dislike() {
// this.$refs.virtualList.dislike(this.videos[10])
// this.videos[this.videoIndex] = this.videos[10]
// this.$notice('操作成功，将减少此类视频的推荐')
recommendListRef.value.dislike(state.recommendList[1])
state.recommendList[state.itemIndex] = state.recommendList[1]
Utils.$notice('操作成功，将减少此类视频的推荐')
}
function end() {
@ -332,14 +334,14 @@ onMounted(() => {
bus.on(EVENT_KEY.SINGLE_CLICK, () => {
let id = ''
if (state.navIndex === 4) {
id = state.recommendVideos[state.itemIndex].id
id = state.recommendList[state.itemIndex].id
}
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {id, type: EVENT_KEY.ITEM_TOGGLE})
})
bus.on('update:item', val => {
const {baseIndex, navIndex, itemIndex} = val.position
if (navIndex === 5) {
state.recommendVideos[itemIndex] = val.item
state.recommendList[itemIndex] = val.item
}
})
@ -380,7 +382,7 @@ function render(item, itemIndex, play, position) {
}
if (item.type === 'recommend-video') {
node = <BVideo
isPlay={false}
isPlay={play}
item={item}
position={{...position, itemIndex}}
onGoMusic={e => nav('/home/music')}
@ -417,7 +419,7 @@ function render(item, itemIndex, play, position) {
//width: 90vw;
//height: 80vh;
width: 100vw;
height: calc(100vh - @footer-height)!important;
height: calc(100vh - @footer-height) !important;
overflow: hidden;
#slide1 {

6
src/pages/login/Login.vue
View File

@ -13,10 +13,10 @@
<div class="sub-title">认证服务由中国移动提供</div>
</div>
<b-button type="primary" :loading="loading.login" :active="false" :loadingWithText="true" @click="login">
<dy-button type="primary" :loading="loading.login" :active="false" :loadingWithText="true" @click="login">
{{ loading.login ? '登录中' : '一键登录' }}
</b-button>
<b-button :active="false" type="white" @click="$nav('/login/other')">其他手机号码登录</b-button>
</dy-button>
<dy-button :active="false" type="white" @click="$nav('/login/other')">其他手机号码登录</dy-button>
<div class="protocol" :class="showAnim?'anim-bounce':''">
<Tooltip style="top: -100%;left: -10rem;" v-model="showTooltip"/>

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

@ -31,9 +31,9 @@
</div>
</div>
<b-button type="primary" :loading="loading" :active="false" :disabled="phone.length < 10" @click="getCode">
<dy-button type="primary" :loading="loading" :active="false" :disabled="phone.length < 10" @click="getCode">
获取短信验证码
</b-button>
</dy-button>
<div class="options">
<span class="link" @click="$nav('/login/password')">密码登录</span>

4
src/pages/login/PasswordLogin.vue
View File

@ -31,9 +31,9 @@
{{ notice }}
</div>
<b-button type="primary" :loading="loading" :active="false" :disabled="disabled" @click="login">
<dy-button type="primary" :loading="loading" :active="false" :disabled="disabled" @click="login">
{{ loading ? '登录中' : '登录' }}
</b-button>
</dy-button>
<div class="options">
<span>

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

@ -44,7 +44,7 @@
{{ notice }}
</div>
<b-button
<dy-button
type="primary"
:loading="loading"
:active="false"
@ -52,7 +52,7 @@
:disabled="disabled"
@click="login">
完成
</b-button>
</dy-button>
<div class="options" v-if="showVoiceCode">
<span>

4
src/pages/login/VerificationCode.vue
View File

@ -23,9 +23,9 @@
</span>
</div>
<b-button type="primary" :loading="loading" :active="false" :disabled="code.length < 4" @click="login">
<dy-button type="primary" :loading="loading" :active="false" :disabled="code.length < 4" @click="login">
{{ loading ? '登录中' : '登录' }}
</b-button>
</dy-button>
</div>
</div>

4
src/pages/me/RequestUpdate.vue
View File

@ -34,8 +34,8 @@
</div>
</div>
<div class="buttons">
<b-button type="white" :border="false" :active="false" @click="$nav('/publish')">发布作品</b-button>
<b-button type="primary" :active="false" @click="$no">去直播</b-button>
<dy-button type="white" :border="false" :active="false" @click="$nav('/publish')">发布作品</dy-button>
<dy-button type="primary" :active="false" @click="$no">去直播</dy-button>
</div>
<from-bottom-dialog

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

@ -145,7 +145,7 @@
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span class="name">{{ item.name }}</span>
<span class="tips">可能感兴趣的人</span>
<b-button type="primary">关注</b-button>
<dy-button type="primary">关注</dy-button>
<div class="close">
<dy-back img="close" scale=".6"></dy-back>
</div>

2
src/pages/me/collect/MusicCollect.vue
View File

@ -47,7 +47,7 @@
</div>
</div>
<div class="option">
<b-button type="primary" size="small" @click="$no">使用</b-button>
<dy-button type="primary" size="small" @click="$no">使用</dy-button>
</div>
</div>
</div>

10
src/pages/me/components/GuessMusic.vue
View File

@ -1,8 +1,8 @@
<template>
<div id="GuessMusic">
<SlideColumnList
<SlideVertical
:changeActiveIndexUseAnim="false"
v-model:active-index="guessSlideIndex"
v-model:index="guessSlideIndex"
:canMove="slideCanMove">
<SlideItemMusic
:ref="setItemRef"
@ -14,7 +14,7 @@
v-model="list[index]"
v-model:isLoop="isLoop"
v-for="(item,index) in list "/>
</SlideColumnList>
</SlideVertical>
<from-bottom-dialog
mask-mode="lightgray"
page-id="GuessMusic"
@ -63,18 +63,18 @@ import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import Switches from "../../message/components/swtich/switches";
import SlideItemMusic from "./SlideItemMusic";
import IndicatorLight from "../../../components/slide/IndicatorLight";
import SlideColumnList from "../../../components/slide/SlideColumnList";
import Share from "../../../components/Share";
import ShareToFriend from "../../home/components/ShareToFriend";
import SlideVertical from "@/components/slide/SlideVertical.vue";
export default {
name: "GuessMusic",
components: {
SlideVertical,
FromBottomDialog,
Switches,
SlideItemMusic,
IndicatorLight,
SlideColumnList,
Share,
ShareToFriend
},

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

@ -94,7 +94,7 @@
<Check mode="red" v-model="isCreateChat"/>
<span>创建群聊</span>
</div>
<b-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
<dy-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</dy-button>
</div>
</div>
</div>

2
src/pages/slideHooks/InfiniteList.vue
View File

@ -16,7 +16,7 @@
</template>
<script setup lang="jsx">
import VInfinite from './VInfinite.vue'
import VInfinite from '../../components/slide/SlideVerticalInfinite.vue'
import SlideAlbum from "../../components/slide/SlideAlbum";
import SlideUser from "../../components/slide/SlideUser";
import BVideo from "../../components/slide/BVideo";

17
src/pages/slideHooks/SlideItem.vue
View File

@ -1,17 +0,0 @@
<template>
<div class="slide-item2">
<slot></slot>
</div>
</template>
<script setup>
</script>
<style scoped lang="less">
.slide-item2 {
height: 100%;
width: 100%;
flex-shrink: 0;
position: relative;
}
</style>

6
src/pages/test/Test.vue
View File

@ -21,12 +21,12 @@ import TestSlide from "./TestSlide";
import SlideUser from "../../components/slide/SlideUser";
import SlideImgs from "../../components/slide/SlideAlbum";
import TestImg from "./TestImg";
import slideHooks from '../slideHooks'
import slideHooks from '../home/index.vue'
import TestSwiperJs from "./TestSwiperJs";
import {mat4} from "gl-matrix";
import UserPanel from "@/components/UserPanel.vue";
import Shop from "@/pages/slideHooks/Shop.vue";
import Community from "@/pages/slideHooks/Community.vue";
import Shop from "@/pages/home/components/Shop.vue";
import Community from "@/pages/home/components/Community.vue";
export default {
name: "Test",

3
src/pages/test/TestSwiperJs.vue
View File

@ -12,7 +12,6 @@
</template>
<script lang="jsx" setup>
import SlideItem from "../slideHooks/SlideItem";
import {onMounted, reactive, ref, watch} from "vue";
import GM from "@/utils";
import {
@ -22,7 +21,7 @@ import {
slideTouchEnd,
slideTouchMove,
slideTouchStart
} from "@/pages/slideHooks/common";
} from "@/components/slide/common";
import {SlideType} from "@/utils/const_var";
const emit = defineEmits(['update:index'])

6
src/router/routes.js
View File

@ -1,4 +1,4 @@
import Index2 from "../pages/home/Index2";
import Home from "../pages/home";
import Test from "../pages/test/Test";
import Test4 from "../pages/test/Test4";
import SubmitReport from "../pages/home/SubmitReport";
@ -66,7 +66,7 @@ import Help from "../pages/login/Help";
import Uploader from "../pages/me/Uploader";
const routes = [
{path: '/', redirect: '/test'},
{path: '/', redirect: '/home'},
{path: '/test', component: Test},
{path: '/test4', component: Test4},
@ -74,7 +74,7 @@ const routes = [
{path: '/attention', component: Attention},
{path: '/publish', component: Publish},
{path: '/home', component: Index2},
{path: '/home', component: Home},
{path: '/home/music', component: Music},
{path: '/home/music-rank-list', component: MusicRankList},
{path: '/home/live', component: LivePage},

2
src/utils/mixin.js
View File

@ -33,7 +33,7 @@ export default {
NoMore,
'dy-back': Back,
Loading,
'b-button': BaseButton
'dy-button': BaseButton
},
data() {
return {