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

save

Browse Source
This commit is contained in:
zyronon 2024-03-28 18:22:42 +08:00
parent 840ab94d63
commit 775066924b
3 changed files with 154 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Comment.vue
View File

@ -12,8 +12,11 @@
<template v-slot:header> <template v-slot:header>
<div class="title"> <div class="title">
<dy-back mode="dark" img="close" direction="right" style="opacity: 0;"/> <dy-back mode="dark" img="close" direction="right" style="opacity: 0;"/>
<span>2.7w条评论</span> <div class="num">2.7w条评论</div>
<dy-back mode="dark" img="close" direction="right" @click.stop="cancel"/> <div class="right">
<Icon icon="prime:arrow-up-right-and-arrow-down-left-from-center"/>
<Icon icon="ic:round-close" @click.stop="cancel"/>
</div>
</div> </div>
</template> </template>
<div class="comment"> <div class="comment">
@ -40,7 +43,6 @@
</div> </div>
<div class="love" @click="$no(item)"> <div class="love" @click="$no(item)">
<Icon icon="icon-park-outline:dislike" class="love-image"/> <Icon icon="icon-park-outline:dislike" class="love-image"/>
<span>{{ formatNumber(item.loveNum) }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -347,14 +349,24 @@ export default {
justify-content: space-between; justify-content: space-between;
border-radius: 10rem 10rem 0 0; border-radius: 10rem 10rem 0 0;
span { .num {
width: 100%;
position: absolute;
font-size: 12rem; font-size: 12rem;
font-weight: bold;
text-align: center; text-align: center;
} }
img { .right {
width: 13rem; display: flex;
height: 13rem; gap: 12rem;
svg {
background: rgb(242, 242, 242);
padding: 4rem;
font-size: 16rem;
border-radius: 50%;
}
} }
} }

365
src/components/Share.vue
View File

@ -14,122 +14,95 @@
<span>分享给朋友</span> <span>分享给朋友</span>
<dy-back mode="light" img="close" direction="right" @click.stop="closeShare"></dy-back> <dy-back mode="light" img="close" direction="right" @click.stop="closeShare"></dy-back>
</div> </div>
<div class="friends"> <div class="friends list">
<div class="friend" v-for="item in friends.all" @click.stop="toggleCall(item)"> <div class="option" v-for="item in friends.all" @click.stop="toggleCall(item)">
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt=""> <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png"> <img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
</div> </div>
<div class="more" @click.stop="closeShare($nav('/message/share-to-friend'))"> <div class="option" @click.stop="closeShare($nav('/message/share-to-friend'))">
<dy-back mode="light" direction="right"></dy-back> <dy-back class="more" mode="light" direction="right"></dy-back>
<span>更多</span> <span>更多朋友</span>
</div> </div>
</div> </div>
<div class="line"></div> <div class="shares list">
<div class="shares">
<template v-if="mode === 'video'"> <template v-if="mode === 'video'">
<div class="share-to" @click.stop="$no"> <div class="option" @click.stop="$no">
<img src="../assets/img/icon/components/video/torichang.png" alt=""> <img class="avatar" src="../assets/img/icon/components/video/torichang.png" alt="">
<span>转发</span> <span>转发</span>
</div> </div>
<div class="share-to" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img src="../assets/img/icon/components/video/tofriend.webp" alt=""> <Icon icon="icon-park-solid:good-two"/>
<span>私信朋友</span> <span>推荐给朋友</span>
</div> </div>
<div class="share-to" @click.stop="copyLink"> <div class="option" @click.stop="copyLink">
<img src="../assets/img/icon/components/video/towechat.webp" alt=""> <Icon icon="humbleicons:link"/>
<span>复制链接</span> <span>复制链接</span>
</div> </div>
<div class="share-to" v-if="canDownload" @click.stop="closeShare($emit('download'))"> <div class="option" @click.stop="$no">
<img src="../assets/img/icon/components/video/towechat.webp" alt=""> <img class="small" src="../assets/img/icon/components/video/comeonplay.png" alt="">
<span>合拍</span>
</div>
<div class="option" @click.stop="$no">
<img class="small" src="../assets/img/icon/components/video/dou.webp" alt="">
<span>帮上热门</span>
</div>
<div class="option" @click.stop="$nav('/home/report',{mode:this.mode})">
<img class="small" src="../assets/img/icon/components/video/warring.png" alt="">
<span>举报</span>
</div>
<div class="option" @click.stop="$nav('/home/report',{mode:this.mode})">
<Icon icon="ion:paper-plane"/>
<span>私信朋友</span>
</div>
<div class="option" v-if="canDownload" @click.stop="closeShare($emit('download'))">
<Icon icon="mingcute:download-fill"/>
<span>保存本地</span> <span>保存本地</span>
</div> </div>
<div class="share-to" @click.stop="closeShare($emit('showDouyinCode'))"> <div class="option" @click.stop="$no">
<img src="../assets/img/icon/components/video/towechat.webp" alt=""> <!--TODO icon不对 -->
<img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="">
<span>建群分享</span>
</div>
<div class="option" @click.stop="$no">
<img class="small" src="../assets/img/icon/components/video/comeonlook.webp" alt="">
<span>一起看视频</span>
</div>
<div class="option" @click.stop="closeShare($emit('dislike'))">
<img class="small" src="../assets/img/icon/components/video/dislike.png" alt="">
<span>不感兴趣</span>
</div>
<div class="option" @click.stop="closeShare($emit('showDouyinCode'))">
<img class="small" src="../assets/img/icon/components/video/dislike.png" alt="">
<span>生成图片</span> <span>生成图片</span>
</div> </div>
<!-- <div class="share-to" @click.stop="closeShare($emit('showShare2WeChatZone'))">--> <div class="option" @click.stop="$no">
<!-- <img src="../assets/img/icon/components/video/towechat.webp" alt="">--> <img class="small" src="../assets/img/icon/components/video/bizhi.webp" alt="">
<!-- <span>朋友圈</span>--> <span>动态壁纸</span>
<!-- </div>--> </div>
<!-- <div class="share-to" @click.stop="closeShare($emit('share2WeChat'))">--> <div class="option" @click.stop="closeShare($emit('play-feedback'))">
<!-- <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">--> <img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="">
<!-- <span>微信好友</span>--> <span>播放反馈</span>
<!-- </div>--> </div>
<!-- <div class="share-to" @click.stop="closeShare($emit('share2QQZone'))">-->
<!-- <img src="../assets/img/icon/components/video/tozone.webp" alt="">-->
<!-- <span>QQ空间</span>-->
<!-- </div>-->
<!-- <div class="share-to" @click.stop="closeShare($emit('share2QQ'))">-->
<!-- <img src="../assets/img/icon/components/video/toqq.webp" alt="">-->
<!-- <span>QQ好友</span>-->
<!-- </div>-->
<!-- <div class="share-to" @click.stop="$no">-->
<!-- <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">-->
<!-- <span>今日头条</span>-->
<!-- </div>-->
<!-- <div class="share-to" @click.stop="closeShare($emit('share2Webo'))">-->
<!-- <img src="../assets/img/icon/components/video/toweibo.webp" alt="">-->
<!-- <span>微博</span>-->
<!-- </div>-->
</template> </template>
<template v-if="mode === 'music'"> <template v-if="mode === 'music'">
<div class="share-to" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img src="../assets/img/icon/components/video/tofriend.webp" alt=""> <img class="small" src="../assets/img/icon/components/video/tofriend.webp" alt="">
<span>私信朋友</span> <span>私信朋友</span>
</div> </div>
</template> <div class="option" @click.stop="$nav('/home/report',{mode:this.mode})">
<template v-if="mode === 'my-music'"> <img class="small" src="../assets/img/icon/components/video/warring.png" alt="">
<div class="share-to" @click.stop="$no">
<img src="../assets/img/icon/components/video/torichang.png" alt="">
<span>转发到日常</span>
</div>
<div class="share-to" @click.stop="closeShare($emit('ShareToFriend'))">
<img src="../assets/img/icon/components/video/tofriend.webp" alt="">
<span>私信朋友</span>
</div>
</template>
</div>
<div class="toolbar ">
<template v-if="mode === 'music'">
<div class="tool" @click.stop="$nav('/home/report',{mode:this.mode})">
<img src="../assets/img/icon/components/video/warring.png" alt="">
<span>举报音乐</span> <span>举报音乐</span>
</div> </div>
</template> </template>
<template v-if="mode === 'video'"> <template v-if="mode === 'my-music'">
<div class="tool" @click.stop="$no"> <div class="option" @click.stop="$no">
<!--TODO icon不对 --> <img class="small" src="../assets/img/icon/components/video/torichang.png" alt="">
<img src="../assets/img/icon/components/video/feedback.webp" alt=""> <span>转发到日常</span>
<span>建群分享</span>
</div> </div>
<div class="tool" @click.stop="$no"> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img src="../assets/img/icon/components/video/comeonlook.webp" alt=""> <img class="small" src="../assets/img/icon/components/video/tofriend.webp" alt="">
<span>一起视频</span> <span>私信朋友</span>
</div>
<div class="tool" @click.stop="$nav('/home/report',{mode:this.mode})">
<img src="../assets/img/icon/components/video/warring.png" alt="">
<span>举报</span>
</div>
<div class="tool" @click.stop="$no">
<img src="../assets/img/icon/components/video/comeonplay.png" alt="">
<span>合拍</span>
</div>
<div class="tool" @click.stop="$no">
<img src="../assets/img/icon/components/video/bizhi.webp" alt="">
<span>动态壁纸</span>
</div>
<div class="tool" @click.stop="$no">
<img src="../assets/img/icon/components/video/dou.webp" alt="">
<span>帮上热门</span>
</div>
<div class="tool" @click.stop="closeShare($emit('dislike'))">
<img src="../assets/img/icon/components/video/dislike.png" alt="">
<span>不感兴趣</span>
</div>
<div class="tool" @click.stop="closeShare($emit('play-feedback'))">
<img src="../assets/img/icon/components/video/feedback.webp" alt="">
<span>播放反馈</span>
</div> </div>
</template> </template>
</div> </div>
@ -139,18 +112,15 @@
<textarea placeholder="有什么想和好友说的..."></textarea> <textarea placeholder="有什么想和好友说的..."></textarea>
<img class="poster" src="../assets/img/poster/1.jpg" alt=""> <img class="poster" src="../assets/img/poster/1.jpg" alt="">
</div> </div>
<div class="wrapper"> <div class="btns">
<div class="create-chat" v-if="selectFriends.length>1"> <dy-button type="dark2" radius="7"
<Check mode="red" v-model="isCreateChat"/> v-if="selectFriends.length > 1"
<span>创建群聊</span> @click.stop="$no">建群并发送
</div> </dy-button>
<div class="btns"> <dy-button type="primary" radius="7" @click.stop="$no">{{
<dy-button type="dark2" radius="7" @click.stop="$no">一起看视频</dy-button> selectFriends.length > 1 ? '分别发送' : '发送'
<dy-button type="primary" radius="7" @click.stop="$no">{{ }}
selectFriends.length > 1 ? '分别发送' : '私信发送' </dy-button>
}}
</dy-button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -163,6 +133,7 @@ import Check from "./Check";
import FromBottomDialog from "./dialog/FromBottomDialog"; import FromBottomDialog from "./dialog/FromBottomDialog";
import DouyinCode from "./DouyinCode"; import DouyinCode from "./DouyinCode";
import {useBaseStore} from "@/store/pinia"; import {useBaseStore} from "@/store/pinia";
import {$no} from "@/utils";
export default { export default {
name: "Share", name: "Share",
@ -200,10 +171,10 @@ export default {
}, },
data() { data() {
return { return {
isCreateChat: false,
} }
}, },
methods: { methods: {
$no,
async copyLink() { async copyLink() {
this.closeShare() this.closeShare()
this.$showLoading() this.$showLoading()
@ -237,13 +208,13 @@ export default {
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
@space-width: 18rem; @space-width: 26rem;
@avatar-width: 48rem; @avatar-width: 58rem;
@icon-width: 28rem; @icon-width: 30rem;
.title { .title {
font-size: 14rem; font-size: 14rem;
padding: 20rem; padding: 10rem 20rem 30rem 20rem;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -259,127 +230,70 @@ export default {
} }
} }
.friends { .list {
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
padding-right: @space-width * 2; padding: 0 20rem;
gap: 22rem;
padding-bottom: 50rem;
}
.friend { @c: rgb(51, 51, 51);
.option {
width: @avatar-width;
position: relative;
font-size: 10rem;
display: flex;
flex-direction: column;
align-items: center;
.avatar {
width: @avatar-width; width: @avatar-width;
position: relative; height: @avatar-width;
margin-left: @space-width; border-radius: 50%;
margin-bottom: @space-width;
font-size: 10rem;
display: flex;
flex-direction: column;
align-items: center;
.avatar {
width: @avatar-width;
height: @avatar-width;
border-radius: 50%;
}
span {
margin-top: 5rem;
text-align: center;
width: @avatar-width;
//white-space: nowrap;
//overflow: hidden;
//text-overflow: ellipsis;
}
.checked {
position: absolute;
top: @avatar-width - 1.5;
right: -2px;
width: 20rem;
height: 20rem;
border-radius: 50%;
}
} }
.more { .checked {
margin-left: @space-width; position: absolute;
margin-bottom: @space-width; top: @avatar-width - 1.5;
right: -2px;
img { width: 20rem;
width: 20rem; height: 20rem;
padding: 13rem; border-radius: 50%;
border-radius: 50%;
margin-bottom: 3rem;
background: var(--second-btn-color-tran);
//background: rgb(56, 58, 57);
}
} }
span { span {
font-size: 12rem; margin-top: 8rem;
display: block;
text-align: center; text-align: center;
word-break: break-all; width: @avatar-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
}
.line { .more {
height: 1px; width: 20rem;
background: #1c1c1c; padding: 19rem;
margin-left: 20rem; border-radius: 50%;
width: calc(100% - 40rem); background: @c;
margin-bottom: 10rem; //background: rgb(56, 58, 57);
}
.shares {
overflow-x: scroll;
display: flex;
padding-right: @space-width * 2;
.share-to {
margin-left: @space-width;
margin-bottom: @space-width;
img {
width: @avatar-width;
height: @avatar-width;
border-radius: 50%;
}
span {
color: var(--second-text-color);
font-size: 10rem;
display: block;
text-align: center;
}
} }
}
.toolbar { svg {
overflow-x: scroll; .more;
display: flex; width: unset;
padding-right: @space-width * 2; padding: 16rem;
font-size: 26rem;
color: rgb(205, 205, 205);
}
.small {
.tool { width: @icon-width;
float: left; height: @icon-width;
margin-left: @space-width; padding: 14rem;
margin-bottom: @space-width; border-radius: 50%;
background: @c;
img {
width: @icon-width;
height: @icon-width;
padding: 10rem;
border-radius: 50%;
//background: var(--second-btn-color);
background: rgb(56, 58, 57);
}
span {
color: var(--second-text-color);
font-size: 10rem;
display: block;
text-align: center;
}
} }
} }
@ -414,27 +328,16 @@ export default {
} }
} }
.create-chat { .btns {
font-size: 11rem;
margin: 10rem 0;
display: flex; display: flex;
gap: 10rem;
align-items: center; align-items: center;
color: var(--second-text-color); justify-content: space-between;
.check { .button {
margin-right: 10rem; flex: 1;
width: 16rem;
height: 16rem;
//transform: scale(1.2);
} }
} }
.btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10rem;
}
} }
} }

7
src/pages/home/index.vue
View File

@ -147,11 +147,6 @@
@play-feedback="state.showPlayFeedback = true" @play-feedback="state.showPlayFeedback = true"
@shareToFriend="delayShowDialog(e => state.shareToFriend = true)" @shareToFriend="delayShowDialog(e => state.shareToFriend = true)"
@showDouyinCode="state.showDouyinCode = true" @showDouyinCode="state.showDouyinCode = true"
@showShare2WeChatZone="state.shareType = 2"
@share2WeChat="state.shareType = 3"
@share2QQZone="state.shareType = 4"
@share2QQ="state.shareType = 5"
@share2Webo="state.shareType = 8"
@download="state.shareType = 9" @download="state.shareType = 9"
/> />
@ -223,7 +218,7 @@ const baseStore = useBaseStore()
const state = reactive({ const state = reactive({
baseIndex: 1, baseIndex: 1,
navIndex: 3, navIndex: 4,
test: '', test: '',
recommendList: [], recommendList: [],
isSharing: false, isSharing: false,