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

优化分享朋友弹窗

Browse Source
This commit is contained in:
zyronon 2021-09-16 00:27:26 +08:00
parent db94917754
commit 6fec94a62a
11 changed files with 589 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.vue
View File

@ -4,9 +4,10 @@
<Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
</transition>
<transition :name="transitionName">
<keep-alive>
<!-- <keep-alive>-->
<!-- </keep-alive>-->
<component :is="Component"/>
</keep-alive>
</transition>
</router-view>
@ -51,10 +52,10 @@ export default {
const routeDeep = [
'/message', '/attention', '/home', '/me', '/publish',
'/home/report',
'/home/submit-report',
'/home/music',
'/home/music-rank-list',
'/home/report',
'/message/share-to-friend',

BIN
src/assets/img/icon/home/music3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/assets/img/icon/home/record.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

0
src/assets/img/icon/newicon/e0g.webp → src/assets/img/icon/share-password.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

34
src/components/Share.vue
View File

@ -25,14 +25,16 @@
</div>
<div class="line"></div>
<div class="shares ">
<div class="share-to" @click="closeShare($nav('/message/share-to-friend'))">
<img src="../assets/img/icon/components/video/tofriend.webp" alt="">
<span>私信朋友</span>
</div>
<template v-if="mode === 'video'">
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/torichang.png" alt="">
<span>分享日常</span>
</div>
</template>
<div class="share-to" @click="closeShare($nav('/message/share-to-friend'))">
<img src="../assets/img/icon/components/video/tofriend.webp" alt="">
<span>站内私信</span>
</div>
<div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
<img src="../assets/img/icon/components/video/towechat.webp" alt="">
<span>朋友圈</span>
@ -49,6 +51,7 @@
<img src="../assets/img/icon/components/video/toqq.webp" alt="">
<span>QQ好友</span>
</div>
<template v-if="mode === 'video'">
<div class="share-to" @click="closeShare($emit('showShareDuoshan'))">
<img src="../assets/img/icon/components/video/duoshan.png" alt="">
<span>多闪</span>
@ -57,17 +60,33 @@
<img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
<span>今日头条</span>
</div>
</template>
<div class="share-to" @click="closeShare($emit('share2Webo'))">
<img src="../assets/img/icon/components/video/toweibo.webp" alt="">
<span>微博</span>
</div>
</div>
<div class="toolbar ">
<template v-if="mode === 'music'">
<div class="tool" @click="copyLink">
<img src="../assets/img/icon/components/video/link.png" alt="">
<span>复制链接</span>
</div>
<div class="tool" @click="$nav('/home/report',{type:this.mode})">
<img src="../assets/img/icon/components/video/warring.png" alt="">
<span>举报音乐</span>
</div>
<div class="tool" @click="closeShare($emit('showDouyinCode'))">
<img src="../assets/img/icon/components/video/qrcode.png" alt="">
<span>抖音码</span>
</div>
</template>
<template v-if="mode === 'video'">
<div class="tool" @click="$no">
<img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
<span>一起视频</span>
</div>
<div class="tool" @click="$nav('/home/report')">
<div class="tool" @click="$nav('/home/report',{type:this.mode})">
<img src="../assets/img/icon/components/video/warring.png" alt="">
<span>举报</span>
</div>
@ -110,6 +129,7 @@
<img src="../assets/img/icon/components/video/feedback.webp" alt="">
<span>播放反馈</span>
</div>
</template>
</div>
<div class="share2friend" v-if="selectFriends.length">
@ -152,6 +172,10 @@ export default {
type: Boolean,
default: true
},
mode: {
type: String,
default: 'video'//music
},
},
computed: {
...mapState(['friends']),

2
src/components/dialog/ConfirmDialog.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="ConfirmDialog " @click="$emit('dismiss')" v-if="visible">
<div class="content" @click.stop="stop">
<slot name="header"></slot>
<div class="body">
<div class="title" v-if="title">{{ title }}</div>
<div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
@ -14,6 +15,7 @@
</div>
</template>
<script>
/*TODO 单独使用时，没有mark*/
export default {
name: "ConfirmDialog",
props: {

37
src/pages/Test4.vue
View File

@ -1,21 +1,19 @@
<template>
<div class="Test">
<div class="content1">
<BaseMarquee :is-play="true" :text="text" style="width: 150px;"/>
<BaseButton @click="triggerPause">pause</BaseButton>
<BaseButton @click="triggerStart">start</BaseButton>
</div>
<base-button type="primary" @click="t = true">test</base-button>
<ShareToFriend v-model="t"/>
</div>
</template>
<script>
import ShareToFriend from "./home/components/ShareToFriend";
import BaseButton from "../components/BaseButton";
import BaseMarquee from "../components/BaseMarquee";
import Dom from "../utils/dom";
export default {
name: "Test4",
components: {BaseButton, BaseMarquee},
components: {
BaseButton,
ShareToFriend
},
props: {
text: {
type: String,
@ -24,20 +22,10 @@ export default {
},
data() {
return {
timer: null,
contentWidth: 0,
transformX: 0,
$marqueeContent: null,
t: false,
}
},
methods: {
triggerPause() {
new Dom('.text').trigger('pause')
},
triggerStart() {
new Dom('.text').trigger('start')
},
},
methods: {},
mounted() {
}
}
@ -55,12 +43,5 @@ export default {
overflow: auto;
font-size: 1.4rem;
color: white;
.content1 {
padding-top: 6rem;
}
}
</style>

113
src/pages/home/Music.vue
View File

@ -14,7 +14,7 @@
<img class="star" v-else src="../../assets/img/icon/star-white.png" @click.stop="toggleCollect()">
</template>
<div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
<img class="share" src="../../assets/img/icon/share-white.png" alt="">
<img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true">
</div>
</div>
<div class="content">
@ -23,16 +23,21 @@
@fixed="e => this.isFixed = e"
@pulldown="loadData">
<div class="desc">
<img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
<div class="cover-wrapper" @click="togglePlay()">
<img class="cover" src="../../assets/img/poster/src1-bg.png" alt="">
<img v-if="!isPlay" src="../../assets/img/icon/play-white.png" alt="" class="play">
<img v-if="isPlay" src="../../assets/img/icon/pause-white.png" alt="" class="play">
</div>
<div class="info">
<div class="name">MT创作的原声</div>
<div>
<div class="user">NT ></div>
<div class="peoples">>1 人使用</div>
<div class="user">NT</div>
<div class="peoples">>5585 人使用</div>
</div>
<div class="collection">
<img src="../../assets/img/icon/star-white.png" alt="">
<span>收藏</span>
<div class="collection" @click.stop="toggleCollect()">
<img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
<img v-else src="../../assets/img/icon/star-white.png">
<span>{{ isCollect ? '已' : '' }}收藏</span>
</div>
</div>
</div>
@ -50,21 +55,75 @@
<span>拍同款</span>
</div>
</div>
<Share v-model="isSharing"
mode="music"
ref="share"
@showDouyinCode="showDouyinCode = true"
@showShare2WeChatZone="shareType = 2"
@share2WeChat="shareType = 3"
@share2QQZone="shareType = 4"
@share2QQ="shareType = 5"
@share2Webo="shareType = 8"
/>
<DouyinCode v-model="showDouyinCode"/>
<ConfirmDialog
v-model:visible="showSharePassword"
title="你的口令已复制"
subtitle="0F.:/ a【风就应该自由要什么归宿】长按复制此条消息，打开抖音搜索，聆听音乐##kwu3VCixHl8##[抖音口令]"
:okText="okText"
cancelText="不分享了"
>
<template v-slot:header>
<img style="width: 100%;" src="../../assets/img/icon/share-password.webp" alt="">
</template>
</ConfirmDialog>
</div>
</template>
<script>
import Posters from "../../components/Posters";
import Scroll from "../../components/Scroll";
import Loading from "../../components/Loading";
import Share from "../../components/Share";
import DouyinCode from "../../components/DouyinCode";
import ConfirmDialog from "../../components/dialog/ConfirmDialog";
export default {
name: "Music",
components: {Scroll, Posters, Loading},
components: {
Scroll,
Posters,
Loading,
Share,
DouyinCode,
ConfirmDialog
},
data() {
return {
loading: false,
isFixed: false,
isCollect: false,
loading: false,
isPlay: false,
isSharing: false,
okText: '',
showSharePassword: false,
shareType: -1,
showPlayFeedback: false,
showShareDuoshan: false,
showShareDialog: false,
showShare2WeChatZone: false,
showDouyinCode: false,
showFollowSetting: false,
showFollowSetting2: false,
showBlockDialog: false,
showChangeNote: false,
videos: [
{
"id": "ac78850c-1497-43bb-bdf8-219f3262b690",
@ -2423,6 +2482,22 @@ export default {
]
}
},
watch: {
shareType(newVal, oldVal) {
if (newVal === -1) return
this.showSharePassword = true
switch (newVal) {
case 2:
case 3:
return this.okText = '去微信粘贴'
case 4:
case 5:
return this.okText = '去QQ粘贴'
case 8:
return this.okText = '去微博粘贴'
}
}
},
created() {
this.videos = this.videos.concat(this.videos2).concat(this.videos3)
},
@ -2436,6 +2511,9 @@ export default {
await this.$sleep(1500)
this.videos = this.videos.concat(this.videos2)
this.loading = false
},
togglePlay() {
this.isPlay = !this.isPlay
}
},
mounted() {
@ -2509,15 +2587,28 @@ export default {
}
.desc {
padding: 3rem 1.5rem;
padding: 1rem 1.5rem 3rem 1.5rem;
display: flex;
height: 12rem;
.logo {
.cover-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
.play {
width: 4rem;
height: 4rem;
position: absolute;
}
.cover {
width: 12rem;
height: 100%;
border-radius: .3rem;
}
}
.info {
margin-left: 1.5rem;

11
src/pages/home/Report.vue
View File

@ -2,7 +2,9 @@
<div class="Report">
<BaseHeader backMode="light">
<template v-slot:center>
<span class="f16">视频举报</span>
<span class="f16">
<template v-if="type === 'video'">视频</template>
<template v-if="type === 'music'">音乐</template>举报</span>
</template>
</BaseHeader>
<div class="content">
@ -106,11 +108,16 @@ export default {
name: "Report",
props: {},
data() {
return {}
return {
type: 'video'
}
},
computed: {},
created() {
},
activated() {
this.type = this.$route.query.type
},
methods: {}
}
</script>

371
src/pages/home/components/ShareToFriend.vue Normal file
View File

@ -0,0 +1,371 @@
<template>
<from-bottom-dialog
v-model="modelValue"
@cancel="cancel"
height="70vh">
<div class="create-chat-wrapper" v-if="!showJoinedChat">
<Search :isShowText="isShowText"
@click="isShowText = true"
@notice="isShowText = false;"
@clear="isShowText = false"
class="ml2r mr2r" placeholder="搜索" v-model="createChatSearchKey"></Search>
<template v-if="createChatSearchKey">
<div class="search-result" v-if="searchFriends.length">
<div class="search-result-item" v-for="item in searchFriends"
@click="item.select = !item.select;createChatSearchKey = ''">
<img class="left" src="../../../assets/img/icon/head-image.jpeg" alt="">
<div class="right">
<div class="info">
<span class="name">{{ item.name }}</span>
<span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span>
</div>
<b-button type="primary">分享</b-button>
</div>
</div>
</div>
<div class="no-result" v-else>
<div class="notice-h1">
搜索结果为空
</div>
<div class="notice-h2">
没有搜索到相关的联系人
</div>
</div>
</template>
<template v-else>
<div class="joined-chat" @click="showJoinedChat = true">
<img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
<div class="right">
<span>已加入的群聊</span>
<back direction="right" mode="gray" scale=".7"/>
</div>
</div>
<div class="friend-list">
<div class="index">所有朋友</div>
<div class="friend-item" v-for="item in friends.all" @click="item.select = !item.select">
<img class="left" :src="$imgPreview(item.avatar)" alt="">
<div class="right">
<span>{{ item.name }}</span>
<b-button type="primary">分享</b-button>
</div>
</div>
</div>
</template>
</div>
<div class="joined-chat-wrapper" v-if="showJoinedChat">
<div class="nav">
<back @click="showJoinedChat = false" mode="light" scale="1.2"></back>
<span>已加入的群聊</span>
<span>&nbsp;</span>
</div>
<div class="chat-list">
<div class="chat-item" v-for="item in 15">
<img class="left" src="../../../assets/img/icon/head-image.jpeg" alt="">
<div class="right">
<div class="title">
<div class="name">{{ text.length > 20 ? text.substr(0, 20) + '...' : text }}</div>
<div class="num">(3)</div>
</div>
<back direction="right" mode="light"></back>
</div>
</div>
</div>
<NoMore></NoMore>
</div>
</from-bottom-dialog>
</template>
<script>
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import {mapState} from "vuex";
import Search from "../../../components/Search";
import Check from "../../../components/Check";
export default {
name: "ShareTo",
components: {
FromBottomDialog,
Search,
Check
},
props: {
modelValue: false
},
data() {
return {
showDialog: false,
showJoinedChat: false,
isShowText: false,
createChatSearchKey: '',
localFriends: [],
searchFriends: []
}
},
watch: {
createChatSearchKey(newVal) {
if (newVal) {
//TODO　搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
this.searchFriends = this.friends.filter(v => {
if (v.name.includes(newVal)) return true
return v.account.includes(newVal);
})
} else {
this.searchFriends = []
}
}
},
computed: {
...mapState(['friends']),
selectFriends() {
return this.friends.all.filter(v => v.select).length
}
},
created() {
},
methods: {
cancel() {
this.$emit('update:modelValue', false)
},
}
}
</script>
<style scoped lang="less">
@import "../../../assets/scss/index";
.button {
width: 6.4rem;
height: 2.6rem;
}
.create-chat-wrapper {
padding-bottom: 4rem;
background: @main-bg;
.joined-chat {
border-bottom: 1px solid @line-color;
height: 5rem;
padding: 0 2rem;
display: flex;
align-items: center;
.left {
width: 2.2rem;
height: 2.2rem;
margin-left: 1rem;
margin-right: 2rem;
}
.right {
font-size: 1.4rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.friend-list {
padding: 0 2rem;
.index {
color: @second-text-color;
height: 6rem;
line-height: 6rem;
font-size: 1.3rem;
}
.friend-item {
margin-bottom: 2rem;
display: flex;
align-items: center;
//background: #fff;
&:nth-child(1) {
margin-top: 1rem;
}
.left {
width: 3.8rem;
height: 3.8rem;
border-radius: 50%;
margin-right: 1rem;
}
.right {
font-size: 1.4rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
img {
height: 2rem;
}
}
}
}
.btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: @main-bg;
//background: red;
display: flex;
align-items: center;
justify-content: center;
.btn {
margin-bottom: 2rem;
width: calc(100% - 4rem);
height: 4rem;
display: flex;
align-items: center;
font-size: 1.4rem;
justify-content: center;
background: #3f445c;
border-radius: .2rem;
&.primary {
background: @primary-btn-color;
}
}
}
.search-result {
padding: 0 2rem;
.search-result-item {
margin-bottom: 2rem;
display: flex;
align-items: center;
&:nth-child(1) {
margin-top: 1rem;
}
.left {
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
margin-right: 1rem;
}
.right {
font-size: 1.4rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.info {
display: flex;
flex-direction: column;
.name {
font-size: 1.4rem;
}
.account {
font-size: 1.3rem;
color: @second-text-color;
}
}
img {
height: 2rem;
}
}
}
}
.no-result {
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.notice-h1 {
font-size: 1.6rem;
}
.notice-h2 {
margin-top: 1rem;
font-size: 1.4rem;
color: @second-text-color;
}
}
}
.joined-chat-wrapper {
background: @main-bg;
.nav {
font-size: 1.7rem;
padding: 2rem;
display: flex;
justify-content: space-between;
img {
height: 2rem;
}
}
.chat-list {
padding: 0 2rem;
.chat-item {
margin-bottom: 2rem;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
&:nth-last-child(1) {
margin-bottom: 0;
}
&:nth-child(1) {
margin-top: 1rem;
}
.left {
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
margin-right: 1rem;
}
.right {
font-size: 1.4rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.title {
box-sizing: border-box;
display: flex;
align-items: center;
.name {
}
.num {
margin-left: .5rem;
color: @second-text-color;
}
}
img {
height: 1.5rem;
}
}
}
}
}
</style>

4
src/router/index.js
View File

@ -60,10 +60,12 @@ const routes = [
{path: '/test3', component: Test3},
{path: '/test4', component: Test4},
{path: '/home', component: Index},
{path: '/home/report', component: Report},
{path: '/home/submit-report', component: SubmitReport},
{path: '/home/music', component: Music},
{path: '/home/music-rank-list', component: MusicRankList},
{path: '/home/report', component: Report},
{path: '/attention', component: Attention},
{path: '/publish', component: Publish},
{path: '/message', component: Message},