pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

save

v1
zyronon 1 year ago
parent
840ab94d63
commit
775066924b
3 changed files with 149 additions and 239 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/components/Comment.vue
  2. 355
      src/components/Share.vue
  3. 7
      src/pages/home/index.vue

26
src/components/Comment.vue
Unescape 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%;
}
} }
} }

355
src/components/Share.vue
Unescape 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> <span>合拍</span>
</div>
<div class="share-to" @click.stop="closeShare($emit('showDouyinCode'))">
<img src="../assets/img/icon/components/video/towechat.webp" alt="">
<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/dou.webp" alt="">
<!-- <span>朋友圈</span>--> <span>帮上热门</span>
<!-- </div>-->
<!-- <div class="share-to" @click.stop="closeShare($emit('share2WeChat'))">-->
<!-- <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">-->
<!-- <span>微信好友</span>-->
<!-- </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 v-if="mode === 'music'">
<div class="share-to" @click.stop="closeShare($emit('ShareToFriend'))">
<img src="../assets/img/icon/components/video/tofriend.webp" alt="">
<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"> <span>举报</span>
<img src="../assets/img/icon/components/video/torichang.png" alt="">
<span>转发到日常</span>
</div> </div>
<div class="share-to" @click.stop="closeShare($emit('ShareToFriend'))"> <div class="option" @click.stop="$nav('/home/report',{mode:this.mode})">
<img src="../assets/img/icon/components/video/tofriend.webp" alt=""> <Icon icon="ion:paper-plane"/>
<span>私信朋友</span> <span>私信朋友</span>
</div> </div>
</template> <div class="option" v-if="canDownload" @click.stop="closeShare($emit('download'))">
</div> <Icon icon="mingcute:download-fill"/>
<div class="toolbar "> <span>保存本地</span>
<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>
</div> </div>
</template> <div class="option" @click.stop="$no">
<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=""> <img class="small" 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="$no">
<img src="../assets/img/icon/components/video/comeonlook.webp" alt=""> <img class="small" src="../assets/img/icon/components/video/comeonlook.webp" alt="">
<span>一起视频</span> <span>一起看视频</span>
</div> </div>
<div class="tool" @click.stop="$nav('/home/report',{mode:this.mode})"> <div class="option" @click.stop="closeShare($emit('dislike'))">
<img src="../assets/img/icon/components/video/warring.png" alt=""> <img class="small" src="../assets/img/icon/components/video/dislike.png" alt="">
<span>举报</span> <span>不感兴趣</span>
</div> </div>
<div class="tool" @click.stop="$no"> <div class="option" @click.stop="closeShare($emit('showDouyinCode'))">
<img src="../assets/img/icon/components/video/comeonplay.png" alt=""> <img class="small" src="../assets/img/icon/components/video/dislike.png" alt="">
<span>合拍</span> <span>生成图片</span>
</div> </div>
<div class="tool" @click.stop="$no"> <div class="option" @click.stop="$no">
<img src="../assets/img/icon/components/video/bizhi.webp" alt=""> <img class="small" src="../assets/img/icon/components/video/bizhi.webp" alt="">
<span>动态壁纸</span> <span>动态壁纸</span>
</div> </div>
<div class="tool" @click.stop="$no"> <div class="option" @click.stop="closeShare($emit('play-feedback'))">
<img src="../assets/img/icon/components/video/dou.webp" alt=""> <img class="small" src="../assets/img/icon/components/video/feedback.webp" alt="">
<span>帮上热门</span> <span>播放反馈</span>
</div> </div>
<div class="tool" @click.stop="closeShare($emit('dislike'))"> </template>
<img src="../assets/img/icon/components/video/dislike.png" alt=""> <template v-if="mode === 'music'">
<span>不感兴趣</span> <div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img class="small" src="../assets/img/icon/components/video/tofriend.webp" alt="">
<span>私信朋友</span>
</div> </div>
<div class="tool" @click.stop="closeShare($emit('play-feedback'))"> <div class="option" @click.stop="$nav('/home/report',{mode:this.mode})">
<img src="../assets/img/icon/components/video/feedback.webp" alt=""> <img class="small" src="../assets/img/icon/components/video/warring.png" alt="">
<span>播放反馈</span> <span>举报音乐</span>
</div>
</template>
<template v-if="mode === 'my-music'">
<div class="option" @click.stop="$no">
<img class="small" src="../assets/img/icon/components/video/torichang.png" alt="">
<span>转发到日常</span>
</div>
<div class="option" @click.stop="closeShare($emit('ShareToFriend'))">
<img class="small" src="../assets/img/icon/components/video/tofriend.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;
.friend { padding-bottom: 50rem;
width: @avatar-width; }
position: relative;
margin-left: @space-width;
margin-bottom: @space-width;
font-size: 10rem;
display: flex;
flex-direction: column;
align-items: center;
.avatar { @c: rgb(51, 51, 51);
width: @avatar-width;
height: @avatar-width;
border-radius: 50%;
}
span { .option {
margin-top: 5rem; width: @avatar-width;
text-align: center; position: relative;
width: @avatar-width; font-size: 10rem;
//white-space: nowrap; display: flex;
//overflow: hidden; flex-direction: column;
//text-overflow: ellipsis; align-items: center;
}
.checked { .avatar {
position: absolute; width: @avatar-width;
top: @avatar-width - 1.5; height: @avatar-width;
right: -2px; border-radius: 50%;
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 {
height: 1px;
background: #1c1c1c;
margin-left: 20rem;
width: calc(100% - 40rem);
margin-bottom: 10rem;
}
.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 { .more {
color: var(--second-text-color); width: 20rem;
font-size: 10rem; padding: 19rem;
display: block; border-radius: 50%;
text-align: center; background: @c;
} //background: rgb(56, 58, 57);
} }
}
.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);
.tool { }
float: left;
margin-left: @space-width;
margin-bottom: @space-width;
img {
width: @icon-width;
height: @icon-width;
padding: 10rem;
border-radius: 50%;
//background: var(--second-btn-color);
background: rgb(56, 58, 57);
}
span { .small {
color: var(--second-text-color); width: @icon-width;
font-size: 10rem; height: @icon-width;
display: block; padding: 14rem;
text-align: center; border-radius: 50%;
} background: @c;
} }
} }
@ -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
Unescape 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,

Write Preview
Loading…
Cancel
Save