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-08-29 02:57:53 +08:00
parent 618470ad34
commit 64cdc609b3
28 changed files with 1659 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -4,9 +4,9 @@
<Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
</transition>
<transition :name="transitionName">
<!-- <keep-alive>-->
<component :is="Component"/>
<!-- </keep-alive>-->
<keep-alive>
<component :is="Component"/>
</keep-alive>
</transition>
</router-view>
@ -46,6 +46,8 @@ export default {
const routeDeep = [
'/message', '/attention', '/home', '/me', '/publish',
'/home/report',
'/home/submit-report',
'/message/share-to-friend',
'/message/joined-group-chat',
'/country-choose',

BIN
src/assets/img/icon/components/video/hqx.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1019 B

3
src/assets/scss/custom.less
View File

@ -6,6 +6,7 @@
.global-notice {
position: fixed;
z-index: 999;
color: white;
background: black;
left: 50%;
@ -21,7 +22,7 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 5rem;
min-height: 5rem;
font-size: 1.4rem;
&.no-active {

1
src/components/AutoInput.vue
View File

@ -36,6 +36,7 @@ export default {
<style scoped lang="less">
.auto-input {
font-size: 1.2rem;
width: 100%;
max-height: 7rem;
overflow-y: scroll;

15
src/components/Check.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="check" @click.stop="$emit('update:modelValue',!modelValue)">
<div class="check" @click.stop="change">
<img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="">
<img v-show="modelValue && mode === 'gray'" src="../assets/img/icon/components/check/check-gray.png" alt="">
<img v-show="modelValue && mode === 'red'" src="../assets/img/icon/components/check/check-red.png" alt="">
@ -24,7 +24,12 @@ export default {
computed: {},
created() {
},
methods: {}
methods: {
change(){
this.$emit('update:modelValue',!this.modelValue)
this.$emit('change',!this.modelValue)
}
}
}
</script>
@ -36,9 +41,9 @@ export default {
width: @width;
height: @width;
img {
width: 100%;
height: 100%;
>img {
width: 100%!important;
height: 100%!important;
}
}

202
src/components/Comment.vue
View File

@ -1,14 +1,24 @@
<template>
<transition name="comment">
<div class="comment" v-if="isCommenting">
<div class="wrapper">
<div class="title">
<p>2.7w条评论</p>
<back mode="dark" img="close" direction="right" @click.stop="$emit('update:is-commenting',false)"/>
</div>
<from-bottom-dialog
v-model="modelValue"
@cancel="cancel"
:show-heng-gang="false"
maskMode="light"
height="70vh"
mode="white">
<template v-slot:header>
<div class="title">
<back mode="dark" img="close" direction="right" style="opacity: 0;"/>
<span>2.7w条评论</span>
<back mode="dark" img="close" direction="right" @click.stop="cancel"/>
</div>
</template>
<div class="comment">
<div class="wrapper" v-if="comments.length">
<div class="items">
<div class="item" v-for="item in comments">
<div class="main" v-longpress="e => showOptions(item)">
<!-- v-longpress="e => showOptions(item)"-->
<div class="main">
<div class="content">
<img :src="item.avatar" alt="" class="head-image">
<div class="comment-container">
@ -29,7 +39,8 @@
</div>
<div class="replies">
<div class="reply" v-for="child in item.children">
<div class="content" v-longpress="e => showOptions(child)">
<!-- v-longpress="e => showOptions(child)"-->
<div class="content">
<img :src="child.avatar" alt="" class="head-image">
<div class="comment-container">
<div class="name">
@ -58,31 +69,38 @@
</div>
</div>
</div>
<p class="no-more">暂时没有更多了</p>
</div>
<no-more/>
</div>
<Mask v-if="isInput"></Mask>
<Loading v-else style="position:absolute;"/>
<transition name="fade">
<Mask v-if="isCall" mode="lightgray" @click="isCall = false"/>
</transition>
<div class="input-toolbar">
<div class="call-friend">
<div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span>{{ item.name }}</span>
<img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
<transition name="fade">
<div class="call-friend" v-if="isCall">
<div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span>{{ item.name }}</span>
<img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
</div>
</div>
</div>
</transition>
<div class="toolbar">
<div class="input-wrapper">
<AutoInput v-model="comment"></AutoInput>
<div class="right">
<img src="../assets/img/icon/message/call.png" alt="" class="camera">
<img src="../assets/img/icon/message/emoji-black.png" alt="">
<img src="../assets/img/icon/message/call.png" @click="isCall = !isCall">
<img src="../assets/img/icon/message/emoji-black.png">
</div>
</div>
<img v-if="comment" src="../assets/img/icon/message/up.png" alt="">
<img v-if="comment" src="../assets/img/icon/message/up.png" @click="send">
</div>
</div>
<ConfirmDialog
title="私信给"
ok-text="发送"
@ -93,25 +111,77 @@
</div>
</ConfirmDialog>
</div>
</transition>
</from-bottom-dialog>
</template>
<script>
import AutoInput from "./AutoInput";
import ConfirmDialog from "./dialog/ConfirmDialog";
import {mapState} from "vuex";
import FromBottomDialog from "./dialog/FromBottomDialog";
import Loading from "./Loading";
export default {
name: "Comment",
components: {AutoInput, ConfirmDialog},
props: ['isCommenting'],
components: {
AutoInput,
ConfirmDialog,
FromBottomDialog,
Loading
},
props: {
modelValue: false,
videoId: {
type: String,
default: null
},
},
computed: {
...mapState(['friends'])
},
watch: {
modelValue(newVale) {
if (newVale) {
this.getData()
} else {
this.comments = []
}
}
},
data() {
return {
comment: '123',
comments: [
comment: '',
comments: [],
options: [
{id: 1, name: '私信回复'},
{id: 2, name: '复制'},
{id: 3, name: '搜一搜'},
{id: 4, name: '举报'},
],
selectRow: {},
showPrivateChat: false,
isInput: false,
isCall: false,
}
},
methods: {
send() {
this.comments.push({
id: '2',
avatar: require('../assets/img/icon/avatar/4.png'),
name: '成都旅行',
text: this.comment,
loveNum: 27,
isLoved: false,
time: '2021-08-24 20:33',
children: []
})
this.comment = ''
this.isCall = false
},
async getData() {
await this.$sleep(500)
this.comments = [
{
id: '1',
avatar: require('../assets/img/icon/avatar/1.png'),
@ -194,20 +264,11 @@ export default {
},
]
}
],
options: [
{id: 1, name: '私信回复'},
{id: 2, name: '复制'},
{id: 3, name: '搜一搜'},
{id: 4, name: '举报'},
],
selectRow: {},
showPrivateChat: false,
isInput: true,
isCall: true,
}
},
methods: {
]
},
cancel() {
this.$emit("update:modelValue", false)
},
toggleCall(item) {
item.select = !item.select
let name = item.name
@ -247,7 +308,7 @@ export default {
str = ` ${hour}小时前`
} else if (day === 1) str = `昨天${date.getHours()}:${date.getMinutes()}`
else if (day === 2) str = `前天${date.getHours()}:${date.getMinutes()}`
else str = date
else str = time
return str
},
call() {
@ -260,39 +321,45 @@ export default {
<style lang="less" scoped>
@import "../assets/scss/index";
.comment {
.title {
z-index: 2;
position: fixed;
height: 70vh;
left: 0;
right: 0;
height: 4rem;
padding: 0 1.5rem;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 1rem 1rem 0 0;
span {
font-size: 1.2rem;
text-align: center;
}
img {
width: 1.3rem;
height: 1.3rem;
}
}
.comment {
width: 100%;
bottom: 0;
height: 70vh;
background: #fff;
z-index: 5;
border-radius: 1rem 1rem 0 0;
.title {
.wrapper {
position: relative;
margin: 1.5rem 0;
p {
font-size: 1.2rem;
text-align: center;
}
img {
width: 1.3rem;
height: 1.3rem;
position: absolute;
right: 2rem;
top: 0;
}
padding-top: 4rem;
padding-bottom: 6rem;
}
.items {
overflow-y: scroll;
height: 60vh;
.item {
.main {
padding: .5rem 0;
display: flex;
@ -330,6 +397,7 @@ export default {
}
.more {
font-size: 1.2rem;
margin: .5rem;
display: flex;
align-items: center;
@ -383,6 +451,7 @@ export default {
.time-wrapper {
display: flex;
align-items: center;
.time {
color: #c4c3c3;
@ -396,7 +465,6 @@ export default {
}
}
.love {
color: @second-text-color;
text-align: center;
@ -413,12 +481,6 @@ export default {
}
}
}
.no-more {
margin: 10px;
text-align: center;
color: #ccc;
}
}
@ -432,12 +494,12 @@ export default {
width: 100vw;
bottom: 0;
z-index: 3;
padding-top: 3rem;
@space-width: 1.8rem;
@icon-width: 4.8rem;
.call-friend {
padding-top: 3rem;
overflow-x: scroll;
display: flex;
padding-right: @space-width;

195
src/components/DouyinCode.vue Normal file
View File

@ -0,0 +1,195 @@
<template>
<transition name="fade">
<div class="DouyinCode" v-if="modelValue">
<div class="content">
<img class="top" src="../assets/img/icon/components/video/douyin-code-bg.png" alt="">
<div class="desc">
<div class="left">
<div class="user">@名字</div>
<div class="title">#窃书不能算偷……窃书！……读书人的事，能算偷么？</div>
</div>
<img class="code" src="../assets/img/icon/components/video/douyin-code.jpg" alt="">
</div>
<img class="bottom" src="../assets/img/icon/components/video/douyin-code-bottom.jpg" alt="">
<div class="video-poster">
<img src="../assets/img/poster/1.jpg" class="poster">
<img src="../assets/img/icon/play.svg" class="play">
</div>
</div>
<div class="toolbar">
<div class="title">分享到</div>
<div class="shares ">
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/toqq.webp" alt="">
<span>QQ好友</span>
</div>
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/tozone.webp" alt="">
<span>QQ空间</span>
</div>
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
<span>微信好友</span>
</div>
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/towechat.webp" alt="">
<span>朋友圈</span>
</div>
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/todownload.webp" alt="">
<span>保存</span>
</div>
</div>
<div class="cancel" @click="cancel">取消</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "DouyinCode",
props: {
modelValue: false
},
data() {
return {}
},
computed: {},
created() {
},
methods: {
cancel() {
this.$emit('update:modelValue', false)
}
}
}
</script>
<style scoped lang="less">
@import "../assets/scss/index";
.DouyinCode {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background: transparent;
.content {
background: white;
width: 80vw;
margin-bottom: 2rem;
position: relative;
.top {
width: 100%;
}
.desc {
margin-bottom: 2rem;
display: flex;
padding: 1rem;
.left {
font-size: 1.8rem;
.title {
font-size: 1.4rem;
color: @second-text-color;
}
}
.code {
width: 6rem;
}
}
.bottom {
width: 100%;
}
.video-poster {
width: 35vw;
height: calc(35vw * 1.5);
position: absolute;
top: 8rem;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.poster {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.play {
position: relative;
z-index: 9;
width: 4rem;
}
}
}
.toolbar {
width: 100vw;
background: black;
border-radius: 1rem 1rem 0 0;
color: white;
.title {
font-size: 1.2rem;
padding: 1rem;
text-align: center;
}
@space-width: 1.8rem;
@icon-width: 4.5rem;
.shares {
display: flex;
padding-right: @space-width * 2;
.share-to {
margin-left: @space-width;
margin-bottom: @space-width;
img {
width: @icon-width;
height: @icon-width;
border-radius: 50%;
}
span {
color: @second-text-color;
font-size: 1rem;
display: block;
text-align: center;
}
}
}
.cancel {
font-size: 1.6rem;
background: rgb(38,38,38);
padding: 1.5rem;
text-align: center;
}
}
}
</style>

4
src/components/Mask.vue
View File

@ -34,6 +34,10 @@ export default {
background: transparent;
}
&.lightgray {
background: rgba(0, 0, 0, 0.15);
}
&.white {
background: transparent;
}

365
src/components/Share.vue
View File

@ -1,70 +1,77 @@
<template>
<transition name="share">
<div class="share" v-if="isSharing">
<from-bottom-dialog
v-model="modelValue"
@cancel="closeShare"
:show-heng-gang="false"
maskMode="light"
height="37rem"
mode="dark">
<div class="share">
<div class="title">
<span>私信给朋友</span>
<back mode="light" img="close" direction="right" @click="closeShare"></back>
</div>
<div class="friends ">
<div class="friends">
<div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span>{{ item.name }}</span>
<img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
</div>
<div class="more">
<div class="more" @click="closeShare($nav('/message/share-to-friend'))">
<back mode="light" direction="right"></back>
<span>更多</span>
</div>
</div>
<div class="line"></div>
<div class="shares ">
<div class="share-to " @click="$nav('/message/share-to-friend')">
<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">
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/torichang.png" alt="">
<span>分享日常</span>
</div>
<div class="share-to" @click="share2WeChatZone">
<div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
<img src="../assets/img/icon/components/video/towechat.webp" alt="">
<span>朋友圈</span>
</div>
<div class="share-to" @click="share2WeChat">
<div class="share-to" @click="closeShare($emit('share2WeChat'))">
<img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
<span>微信好友</span>
</div>
<div class="share-to" @click="share2QQZone">
<div class="share-to" @click="closeShare($emit('share2QQZone'))">
<img src="../assets/img/icon/components/video/tozone.webp" alt="">
<span>QQ空间</span>
</div>
<div class="share-to" @click="share2QQ">
<div class="share-to" @click="closeShare($emit('share2QQ'))">
<img src="../assets/img/icon/components/video/toqq.webp" alt="">
<span>QQ好友</span>
</div>
<div class="share-to" @click="showShareDuoshan = true;showShareDialog = false;">
<div class="share-to" @click="closeShare($emit('showShareDuoshan'))">
<img src="../assets/img/icon/components/video/duoshan.png" alt="">
<span>多闪</span>
</div>
<div class="share-to ">
<div class="share-to" @click="$no">
<img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
<span>今日头条</span>
</div>
<div class="share-to" @click="share2Webo">
<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 ">
<div class="tool ">
<div class="tool" @click="$no">
<img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
<span>一起视频</span>
</div>
<div class="tool ">
<div class="tool" @click="$nav('/home/report')">
<img src="../assets/img/icon/components/video/warring.png" alt="">
<span>举报</span>
</div>
<div class="tool" @click="download">
<div class="tool" @click="canDownload && closeShare($emit('download'))"
:style="{ opacity : canDownload ? '1' : '0.5' }">
<img src="../assets/img/icon/components/video/download.png" alt="">
<span>保存本地</span>
</div>
@ -73,15 +80,16 @@
<img v-else src="../assets/img/icon/components/video/star.png" alt="">
<span>收藏</span>
</div>
<div class="tool">
<div class="tool" @click="$no">
<img src="../assets/img/icon/components/video/comeonplay.png" alt="">
<span>合拍</span>
</div>
<div class="tool">
<div class="tool" @click="$no">
<img src="../assets/img/icon/components/video/bizhi.webp" alt="">
<span>动态壁纸</span>
</div>
<div class="tool">
<!-- todo-->
<div class="tool" @click="$emit('dislike')">
<img src="../assets/img/icon/components/video/dislike.png" alt="">
<span>不感兴趣</span>
</div>
@ -89,15 +97,15 @@
<img src="../assets/img/icon/components/video/link.png" alt="">
<span>复制链接</span>
</div>
<div class="tool">
<div class="tool" @click="closeShare($emit('showDouyinCode'))">
<img src="../assets/img/icon/components/video/qrcode.png" alt="">
<span>抖音码</span>
</div>
<div class="tool ">
<div class="tool" @click="$no">
<img src="../assets/img/icon/components/video/dou.webp" alt="">
<span>帮上热门</span>
</div>
<div class="tool ">
<div class="tool" @click="closeShare($emit('play-feedback'))">
<img src="../assets/img/icon/components/video/feedback.webp" alt="">
<span>播放反馈</span>
</div>
@ -113,126 +121,37 @@
<Check mode="red" v-model="isCreateChat"/>
<span>创建群聊</span>
</div>
<b-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
<b-button type="primary" @click="$no">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
</div>
</div>
<from-bottom-dialog
v-model="showShareDialog"
@cancel="cancel"
maskMode="light"
height="50vh"
mode="light">
<div class="option-dialog">
<div class="buttons">
<b-button v-if="showProgress"
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>
<b-button type="green" v-if="showShare2WeChatZone">
<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">
<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">
<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">
<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">
<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">复制口令发给好友</b-button>
<template v-if="showDownload">
<b-button type="primary">
去相册查看
<back scale="0.7" mode="light" direction="right"></back>
</b-button>
<b-button class="mt1r" type="white">
<img src="../assets/img/icon/components/video/wechat.webp" alt="">
发送视频到微信
</b-button>
</template>
</div>
<div class="dialog-friends">
<div class="dialog-friend" v-for="item in friends.all">
<img :src="$imgPreview(item.avatar)" alt="">
<div class="right">
<span>{{ item.name }}</span>
<div class="share-btn">分享</div>
</div>
</div>
<div class="dialog-friend">
<img src="../assets/img/icon/head-image.jpeg" alt="">
<div class="right">
<span>更多好友</span>
</div>
</div>
</div>
</div>
</from-bottom-dialog>
<from-bottom-dialog
v-model="showShareDuoshan"
@cancel="cancel"
maskMode="light"
mode="light">
<div class="share-to-duoshan">
<img src="../assets/img/icon/components/video/duoshan-logo2.png" class="logo">
<div class="wrapper">
<div class="title2">多闪</div>
<div class="subtitle">开发者：北京拍拍看看科技有限公司；版本：6.8.0</div>
<div class="subtitle mb2r">
<span class="link" @click="$nav('/service-protocol',{type:'多闪权限申请与使用情况说明'})">应用权限</span>与
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span>
</div>
<b-button type="dark2">
<template v-slot:prefix>
<img src="../assets/img/icon/components/video/duoshan-logo.webp">
</template>
下载多闪
</b-button>
</div>
</div>
</from-bottom-dialog>
</div>
</transition>
</from-bottom-dialog>
</template>
<script>
import {mapState} from "vuex";
import Check from "./Check";
import FromBottomDialog from "./dialog/FromBottomDialog";
import DouyinCode from "./DouyinCode";
export default {
name: "Share",
components: {FromBottomDialog, Check},
props: ['isSharing'],
components: {
FromBottomDialog,
Check,
DouyinCode
},
props: {
modelValue: false,
videoId: {
type: String,
default: null
},
canDownload: {
type: Boolean,
default: true
},
},
computed: {
...mapState(['friends']),
selectFriends() {
@ -241,18 +160,7 @@ export default {
},
data() {
return {
progress: 0,
isCreateChat: false,
showShareDialog: false,
showProgress: false,
showDownload: false,
showShare2WeChatZone: false,
showShare2WeChat: false,
showShare2QQZone: false,
showShare2QQ: false,
showShare2Webo: false,
showShareDuoshan: false,
isCollect: false
}
},
@ -272,72 +180,12 @@ export default {
this.$notice('收藏成功')
}
this.isCollect = !this.isCollect
},
download() {
this.showShareDialog = true
this.showDownload = false
this.downloadVideo(e => this.showDownload = true)
},
share2WeChatZone() {
this.showShareDialog = true
this.showShare2WeChatZone = false
this.downloadVideo(e => this.showShare2WeChatZone = true)
},
share2WeChat() {
this.showShareDialog = true
this.showShare2WeChat = false
this.downloadVideo(e => this.showShare2WeChat = true)
},
share2QQZone() {
this.showShareDialog = true
this.showShare2QQZone = false
this.downloadVideo(e => this.showShare2QQZone = true)
},
share2QQ() {
this.showShareDialog = true
this.showShare2QQ = false
this.downloadVideo(e => this.showShare2QQ = true)
},
share2Webo() {
this.showShareDialog = true
this.showShare2Webo = false
this.downloadVideo(e => this.showShare2Webo = true)
},
downloadVideo(cb) {
this.showProgress = true
this.progress = 0
let time = setInterval(() => {
if (this.progress >= 100) {
clearInterval(time)
this.showProgress = false
cb()
} else {
this.progress++
}
}, 5)
},
cancel() {
this.showProgress = false
this.showDownload = false
this.showShare2WeChatZone = false
this.showShare2WeChat = false
this.showShare2QQZone = false
this.showShare2QQ = false
this.showShare2Webo = false
},
toggleCall(item) {
item.select = !item.select
// let name = item.name
// if (this.comment.includes('@' + name)) {
// this.comment = this.comment.replace(`@${name} `, '')
// } else {
// this.comment += `@${name} `
// }
},
closeShare() {
this.$emit("update:is-sharing", false)
// this.isSharing = false
this.$emit("update:modelValue", false)
}
}
}
@ -351,11 +199,7 @@ export default {
}
.share {
position: fixed;
/*top: 200px;*/
width: 100%;
bottom: 0;
z-index: 5;
background: black;
border-radius: 10px 10px 0 0;
color: white;
@ -365,6 +209,7 @@ export default {
@icon-width: 4.8rem;
.title {
font-size: 1.4rem;
padding: 20px;
position: relative;
display: flex;
@ -406,9 +251,9 @@ export default {
margin-top: .5rem;
text-align: center;
width: @icon-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
//white-space: nowrap;
//overflow: hidden;
//text-overflow: ellipsis;
}
.checked {
@ -426,9 +271,9 @@ export default {
margin-bottom: @space-width;
img {
width: @icon-width - 2;
height: @icon-width - 2;
padding: 1rem;
width: @icon-width - 2.6;
height: @icon-width - 2.6;
padding: 1.3rem;
border-radius: 50%;
background: @second-btn-color-tran;
//background: rgb(56, 58, 57);
@ -555,102 +400,6 @@ export default {
}
}
.option-dialog {
.buttons {
padding: 0 1.5rem;
img {
height: 2.2rem;
margin-right: .5rem;
}
}
.dialog-friends {
color: black;
margin: 1rem 1rem 0 1rem;
width: calc(100% - 2rem);
background: white;
border-radius: 6px 6px 0 0;
> .dialog-friend {
box-sizing: border-box;
padding: 10px;
width: 100%;
display: flex;
align-items: center;
//border-bottom: 1px solid ghostwhite;
border-bottom: 1px solid gainsboro;
img {
border-radius: 50%;
width: 40px;
height: 40px;
}
.right {
margin: 0 5px 0 15px;
font-size: 1.6rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.share-btn {
font-size: 1.4rem;
color: white;
padding: 5px 20px;
background: @primary-btn-color;
border-radius: 2px;
}
}
}
}
}
.share-to-duoshan {
padding: 3rem 2rem;
min-height: calc(50vh - 6rem);
//min-height: 50vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.logo {
height: 12rem;
width: 12rem;
}
.wrapper {
width: 100%;
}
.title2 {
margin-bottom: 2rem;
text-align: center;
font-size: 2rem;
color: black;
}
.subtitle {
text-align: center;
font-size: 1.2rem;
color: @second-text-color;
}
.button {
width: 100%;
img {
height: 2.2rem;
margin-right: .5rem;
}
}
}
}
.share-enter-active,

12
src/components/Video.vue
View File

@ -42,16 +42,16 @@
<!-- <transition name="loved">-->
<!-- </transition>-->
</div>
<span>{{ lVideo.loves }}</span>
<span>{{ $likeNum(lVideo.likeNum) }}</span>
</div>
<div class="message mb2r" @click.stop="$emit('showComments')">
<!-- <div class="message mb15p" @click.stop="showComment">-->
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
<span>{{ lVideo.comments }}</span>
<span>{{ $likeNum(lVideo.commentNum) }}</span>
</div>
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
<span>{{ lVideo.shared }}</span>
<span>{{ $likeNum(lVideo.sharedNum) }}</span>
</div>
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
@ -60,7 +60,7 @@
<img class="music1" src="../assets/img/icon/home/music1.png" alt="">
<img class="music2" src="../assets/img/icon/home/music2.png" alt="">
<div class="music-bg">
<img class="music" src="../assets/img/icon/head-image.jpeg" alt="" @click.stop="$nav('/music')">
<img class="music" src="../assets/img/icon/head-image.jpeg" alt="" @click.stop="globalMethods.$nav('/music')">
</div>
</div>
</div>
@ -152,6 +152,7 @@ export default {
},
data() {
return {
globalMethods:globalMethods,
duration: 0,
step: 0,
currentTime: 0,
@ -194,6 +195,9 @@ export default {
})
},
methods: {
$likeNum(v){
return globalMethods.$likeNum(v)
},
$duration(v) {
if (!v) return
let m = Math.floor(v / 60)

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

@ -18,6 +18,7 @@
@touchmove="move"
@touchend="end"
>
<slot name="header"></slot>
<div class="heng-gang" :class="mode" v-if="showHengGang">
<div class="content"></div>
</div>
@ -52,17 +53,31 @@ export default {
type: Boolean,
default: true
},
pageId: {
type: String,
default: null
}
},
watch: {
modelValue(newVal) {
let app = document.getElementById('app')
if (newVal) {
app.children[0].style.position = 'absolute'
if (this.pageId) {
let page = document.getElementById(this.pageId)
page.style.position = 'absolute'
} else {
app.children[0].style.position = 'absolute'
}
this.scroll = document.documentElement.scrollTop
document.body.style.position = 'fixed'
document.body.style.top = -this.scroll + 'px'
} else {
app.children[1].style.position = 'fixed'
if (this.pageId) {
let page = document.getElementById(this.pageId)
page.style.position = 'fixed'
} else {
app.children[1].style.position = 'fixed'
}
document.body.style.position = 'static'
document.documentElement.scrollTop = this.scroll
}

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

@ -16,9 +16,11 @@
</div>
<div class="indicator" ref="indicator"></div>
</div>
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
<img src="../../assets/img/icon/search-gray.png" alt=""
:style="{opacity:loading ? 0 : 1}"
style="margin-top: .5rem;">
</div>
<div class="loading" :style="loadingStyle">AA</div>
<Loading class="loading" style="width: 4rem;" :style="loadingStyle" :is-full-screen="false"/>
</div>
<div id="base-slide-list" ref="slideList"
:style="{'flex-direction':'row',marginTop:indicatorFixed?'5rem':'0'}"
@ -32,9 +34,13 @@
<script>
import bus from "../../utils/bus";
import Loading from "../Loading";
export default {
name: "BaseSlideList",
components:{
Loading
},
props: {
canMove: {
type: Boolean,
@ -186,7 +192,7 @@ export default {
this.startTime = Date.now()
},
touchMove(e) {
// this.$stopPropagation(e)
// this.$stopPropagation(e)
if (!this.canMove) return;
this.moveXDistance = e.touches[0].pageX - this.startLocationX
@ -359,8 +365,8 @@ export default {
.loading {
opacity: 0;
top: 20px;
right: 15px;
top: 1.3rem;
right: 1.5rem;
position: absolute;
}

8
src/config/index.js
View File

@ -1,8 +1,8 @@
export default {
// baseUrl: 'http://192.168.0.105//index.php/v1',
// filePreview:'http://192.168.0.105/static/uploads/',
baseUrl: 'http://192.168.0.105//index.php/v1',
filePreview:'http://192.168.0.105/static/uploads/',
// baseUrl: 'http://192.168.10.164//index.php/v1',
// filePreview:'http://192.168.10.164/static/uploads/'
baseUrl: 'http://localhost//index.php/v1',
filePreview:'http://localhost/static/uploads/'
// baseUrl: 'http://localhost//index.php/v1',
// filePreview:'http://localhost/static/uploads/'
}

3
src/pages/Test.vue
View File

@ -6,7 +6,7 @@
</template>
</BaseHeader>
<div class="content">
<Share :isSharing="true"/>
<Share v-model="test"/>
</div>
</div>
</template>
@ -41,6 +41,7 @@ export default {
"status": 1
}
],
test:true
}
},
computed: {},

203
src/pages/Test3.vue
View File

@ -1,53 +1,105 @@
<template>
<div class="Test">
<div class="play-feedback">
<div class="feedback-header">
<span>&nbsp;</span>
<div class="title">播放反馈</div>
<back mode="dark" img="close" @click="cancel"></back>
</div>
<div class="content">
<img class="top" src="../assets/img/icon/components/video/douyin-code-bg.png" alt="">
<div class="desc">
<div class="left">
<div class="user">@名字</div>
<div class="title">#窃书不能算偷……窃书！……读书人的事，能算偷么？</div>
</div>
<img class="code" src="../assets/img/icon/components/video/douyin-code.jpg" alt="">
<div class="notice">请选择要反馈的问题</div>
<div class="l-row" @click="falseOther(()=>{this.type1 = true} )">
<Check mode="red" :modelValue="type1" @change="falseOther(()=>{this.type1 = true} )"/>
<span>网络正常无法播放视频</span>
</div>
<img class="bottom" src="../assets/img/icon/components/video/douyin-code-bottom.jpg" alt="">
<div class="l-row" @click="falseOther(()=>{this.type2 = true} )">
<Check mode="red" :modelValue="type2" @change="falseOther(()=>{this.type2 = true} )"/>
<span>视频画面正常没声音</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type3 = true} )">
<Check mode="red" :modelValue="type3" @change="falseOther(()=>{this.type3 = true} )"/>
<span>播放几秒/中途卡信</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type4 = true} )">
<Check mode="red" :modelValue="type4" @change="falseOther(()=>{this.type4 = true} )"/>
<span>画面内容不全</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type5 = true} )">
<Check mode="red" :modelValue="type5" @change="falseOther(()=>{this.type5 = true} )"/>
<span>播放过程中闪退回桌面</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type6 = true} )">
<Check mode="red" :modelValue="type6" @change="falseOther(()=>{this.type6 = true} )"/>
<span>画面模糊不清晰</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type7 = true} )">
<Check mode="red" :modelValue="type7" @change="falseOther(()=>{this.type7 = true} )"/>
<span>视频播放其他问题或建议</span>
</div>
<div v-if="type7" class="other">
<div class="textarea-ctn">
<textarea name="" id="" cols="30" rows="10"
v-model="desc"
placeholder="详输入内容"></textarea>
</div>
<div class="text-num">{{ desc.length }}/300</div>
</div>
<b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button>
</div>
</div>
</template>
<script>
import FromBottomDialog from "../components/dialog/FromBottomDialog";
import Check from "../components/Check";
import BaseButton from "../components/BaseButton";
export default {
name: "Test",
props: {},
components: {
BaseButton,
FromBottomDialog,
Check
},
data() {
return {
comment: '12'
showShareDialog: true,
type1: false,
type2: false,
type3: false,
type4: false,
type5: false,
type6: false,
type7: false,
disabled: false,
desc: ''
}
},
computed: {
disabled() {
if (this.type7 && this.desc) return true
return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
}
},
computed: {},
created() {
},
methods: {
changeText(e) {
console.log(e)
console.log(this.$el.innerText)
falseOther(cb) {
this.type1 = false
this.type2 = false
this.type3 = false
this.type4 = false
this.type5 = false
this.type6 = false
this.type7 = false
cb()
},
cancel() {
},
get() {
console.log(this.$refs.input)
},
call() {
let span = document.createElement('span')
span.setAttribute('contenteditable', false)
span.classList.add('link')
span.innerText = Date.now() + ' '
this.$refs.input.append(span)
},
emoji() {
let span = document.createElement('img')
span.setAttribute('src', require('../assets/img/icon/message/emoji/4.webp'))
span.classList.add('emoji')
this.$refs.input.append(span)
submit() {
if (this.disabled) return
this.cancel()
this.$notice('感谢你的反馈，我们会尽快答复！')
}
}
}
@ -56,44 +108,91 @@ export default {
<style scoped lang="less">
@import "../assets/scss/index";
.Test {
.play-feedback {
max-height: 49rem;
overflow: auto;
background: #fff;
color: black;
position: fixed;
bottom: 5rem;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #fff;
overflow: auto;
.feedback-header {
position: fixed;
left: 0;
right: 0;
background: white;
height: 3rem;
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
font-weight: bold;
font-size: 1.8rem;
}
.content {
padding-top: 6rem;
padding: 6rem 1.5rem 1.5rem 1.5rem;
}
.top {
width: 100%;
.notice {
font-size: 1.2rem;
color: @second-text-color;
}
.l-row {
display: flex;
align-items: center;
min-height: 5rem;
font-size: 1.4rem;
border-bottom: 1px solid #f1f1f1;
.check {
width: 2rem;
height: 2rem;
margin-right: 1rem;
}
}
.desc {
display: flex;
padding: 1rem;
.no-border {
border-bottom: none;
}
.left {
font-size: 1.8rem;
.other {
.textarea-ctn {
width: 100%;
background: #eae8e8;
padding: 1.5rem;
box-sizing: border-box;
margin-top: 1rem;
border-radius: 2px;
.title {
font-size: 1.4rem;
textarea {
font-family: "Microsoft YaHei UI";
outline: none;
width: 100%;
border: none;
background: transparent;
color: black;
&::placeholder {
color: @second-text-color;
}
}
.code {
width: 12rem;
}
}
.bottom {
width: 100%;
.text-num {
margin-top: .8rem;
margin-bottom: .8rem;
font-size: 1rem;
color: @second-text-color;
text-align: right;
}
}
}
</style>

62
src/pages/home/Index2.vue
View File

@ -148,8 +148,34 @@
<Me></Me>
</SlideItem>
</SlideRowList>
<Comment v-model:is-commenting="isCommenting"/>
<Share v-model:is-sharing="isSharing" ref="share"/>
<Comment v-model="isCommenting"/>
<Share v-model="isSharing"
ref="share"
@dislike="dislike"
:videoId="videos[videoActiveIndex]?.id"
:canDownload="videos[videoActiveIndex]?.canDownload"
@play-feedback="showPlayFeedback = true"
@showShareDuoshan="showShareDuoshan = true"
@showDouyinCode="showDouyinCode = true"
@showShare2WeChatZone="shareType = 2"
@share2WeChat="shareType = 3"
@share2QQZone="shareType = 4"
@share2QQ="shareType = 5"
@share2Webo="shareType = 8"
@download="shareType = 9"
/>
<PlayFeedback v-model="showPlayFeedback"/>
<DouyinCode v-model="showDouyinCode"></DouyinCode>
<Duoshan v-model="showShareDuoshan"/>
<ShareTo v-model:type="shareType"
:videoId="videos[videoActiveIndex]?.id"
:canDownload="videos[videoActiveIndex]?.canDownload"
/>
</div>
</template>
<script>
@ -171,10 +197,27 @@ import Share from "../../components/Share";
import SlideColumnList from "../../components/slide/SlideColumnList";
import SlideRowList from "../../components/slide/SlideRowList";
import Me from '../me/Me'
import PlayFeedback from "./components/PlayFeedback";
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
import Duoshan from "./components/Duoshan";
import ShareTo from "./components/ShareTo";
import DouyinCode from "../../components/DouyinCode";
export default {
name: "HomeIndex",
components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
components: {
FromBottomDialog,
SlideColumnList,
SlideRowList,
Video1,
Comment,
Share,
Me,
PlayFeedback,
Duoshan,
ShareTo,
DouyinCode
},
data() {
return {
webVideos: [
@ -325,6 +368,15 @@ export default {
],
isCommenting: false,
isSharing: false,
shareType: -1,
showPlayFeedback: false,
showShareDuoshan: false,
showShareDialog: false,
showShare2WeChatZone: false,
showDouyinCode: false,
videoActiveIndex: 0,
baseActiveIndex: 0,
activeIndex: 1,
@ -380,6 +432,9 @@ export default {
this.width = document.body.clientWidth
},
methods: {
dislike() {
this.$notice('操作成功，将减少此类视频的推荐')
},
async getData() {
this.loading = true
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
@ -405,6 +460,7 @@ export default {
#home-index {
height: 100%;
width: 100%;
//z-index: 4;
position: relative;
}
</style>

153
src/pages/home/Report.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div class="Report">
<BaseHeader backMode="light">
<template v-slot:center>
<span class="f16">视频举报</span>
</template>
</BaseHeader>
<div class="content">
<div class="title">
<span>内容违规</span>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'色情低俗'})">
<span>色情低俗</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'时政不实信息'})">
<span>时政不实信息</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'违法犯罪'})">
<span>违法犯罪</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'垃圾广告、售卖假货等'})">
<span>垃圾广告、售卖假货等</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'造谣传播'})">
<span>造谣传播</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'涉嫌欺诈'})">
<span>涉嫌欺诈</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'侮辱漫骂'})">
<span>侮辱漫骂</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'危险行为'})">
<span>危险行为</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'涉嫌非法集资'})">
<span>涉嫌非法集资</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'价值观导向不良'})">
<span>价值观导向不良</span>
<back scale=".8" direction="right"></back>
</div>
<div class="line"></div>
<!--todo 没做详细的举报 -->
<div class="title">
<span>侵犯名誉</span>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'侵犯名誉、隐私、肖像权等'})">
<span>侵犯名誉、隐私、肖像权等</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'内容盗用本人作品'})">
<span>内容盗用本人作品</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'内容盗用他人作品'})">
<span>内容盗用他人作品</span>
<back scale=".8" direction="right"></back>
</div>
<div class="line"></div>
<div class="title">
<span>未成年</span>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'未成年人不当行为'})">
<span>未成年人不当行为</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'内容不适合未成年观看'})">
<span>内容不适合未成年观看</span>
<back scale=".8" direction="right"></back>
</div>
<div class="line"></div>
<div class="title">
<span>其他</span>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'引人不适'})">
<span>引人不适</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'疑似自我伤害'})">
<span>疑似自我伤害</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'诱导点赞、分享、关注'})">
<span>诱导点赞、分享、关注</span>
<back scale=".8" direction="right"></back>
</div>
<div class="row" @click="$nav('/home/submit-report',{type:'其他'})">
<span>其他</span>
<back scale=".8" direction="right"></back>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Report",
props: {},
data() {
return {}
},
computed: {},
created() {
},
methods: {}
}
</script>
<style scoped lang="less">
@import "../../assets/scss/index";
.Report {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding-top: 6rem;
.title {
font-size: 1.2rem;
padding: 1rem 1.5rem;
color: @second-text-color;
img {
width: 1rem;
height: 1rem;
margin-right: .2rem;
}
}
}
.line {
width: calc(100% - 3rem);
margin-left: 1.5rem;
background: @line-color;
}
}
</style>

192
src/pages/home/SubmitReport.vue Normal file
View File

@ -0,0 +1,192 @@
<template>
<div class="Report">
<BaseHeader>
<template v-slot:center>
<span class="f16">视频举报</span>
</template>
</BaseHeader>
<div class="content">
<div class="title">
<span>你的举报将在12小时内受理，若举报成功会第一时间告知处理结果，请尽量提交完整的举报描述及材料</span>
</div>
<div class="row">
<span>
举报理由：{{ type }}
</span>
</div>
<div class="l-row">
<div class="notice">举报描述(选填)</div>
<div class="textarea-ctn">
<textarea name="" id="" cols="30" rows="10"
v-model="desc"
placeholder="详细描述举报理由"></textarea>
</div>
<div class="text-num">{{ desc.length }}/200</div>
</div>
<div class="upload-photo">
<div class="photo-wrapper" v-for="(index,item) in photos">
<img class="photo" src="../../assets/img/poster/1.jpg" alt="">
<img class="close" src="../../assets/img/icon/components/light-close.png" alt="" @click="photos.pop()">
</div>
<div class="upload" @click="upload" v-if="photos.length !== 4">
<img src="../../assets/img/icon/home/camera-gray.png" alt="">
<span>{{ photos.length }}/4</span>
</div>
</div>
<b-button type="primary" @click="$no">提交</b-button>
</div>
</div>
</template>
<script>
export default {
name: "Report",
props: {},
data() {
return {
type: '色情低俗',
desc: '',
photos: []
}
},
computed: {},
created() {
this.type = this.$route.query.type
},
activated() {
this.type = this.$route.query.type
},
methods: {
async upload() {
this.$showLoading()
await this.$sleep(500)
this.$hideLoading()
this.photos.push(
require(`../../assets/img/poster/${this.photos.length}.jpg`)
)
}
}
}
</script>
<style scoped lang="less">
@import "../../assets/scss/index";
.Report {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding-top: 6rem;
.title {
font-size: 1.2rem;
padding: 1rem 1.5rem;
color: @second-text-color;
border-bottom: 1px solid #cccccc11;
img {
width: 1rem;
height: 1rem;
margin-right: .2rem;
}
}
.l-row {
padding: 0 1.5rem;
.textarea-ctn {
width: 100%;
background: @active-main-bg;
padding: 1.5rem;
box-sizing: border-box;
margin-top: 1rem;
border-radius: 2px;
textarea {
font-family: "Microsoft YaHei UI";
outline: none;
width: 100%;
border: none;
background: transparent;
color: white;
&::placeholder {
color: @second-text-color;
}
}
}
.text-num {
margin-top: .5rem;
font-size: 1rem;
color: @second-text-color;
text-align: right;
}
}
.upload-photo {
margin-top: .5rem;
display: flex;
padding: 0 1.5rem;
@width: calc((100vw - 3vw - 3rem) / 4);
.photo-wrapper {
width: @width;
height: @width;
position: relative;
margin-right: 1vw;
.photo {
position: absolute;
width: 100%;
height: 100%;
}
.close {
position: absolute;
right: 0;
top: 0;
background: @second-btn-color;
padding: .3rem;
width: 1rem;
height: 1rem;
}
}
.upload {
width: @width;
height: @width;
display: flex;
flex-direction: column;
justify-content: center;
color: @second-text-color;
font-size: 1.2rem;
align-items: center;
background: @second-btn-color-tran;
img {
width: 3.5rem;
height: 3.5rem;
}
}
}
}
.button {
position: absolute;
left: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
}
}
</style>

97
src/pages/home/components/Duoshan.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<from-bottom-dialog
v-model="modelValue"
@cancel="cancel"
maskMode="light"
mode="light">
<div class="share-to-duoshan">
<img src="../../../assets/img/icon/components/video/duoshan-logo2.png" class="logo">
<div class="wrapper">
<div class="title2">多闪</div>
<div class="subtitle">开发者：北京拍拍看看科技有限公司；版本：6.8.0</div>
<div class="subtitle mb2r">
<span class="link" @click="$nav('/service-protocol',{type:'多闪权限申请与使用情况说明'})">应用权限</span>与
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span>
</div>
<b-button type="dark2">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/duoshan-logo.webp">
</template>
下载多闪
</b-button>
</div>
</div>
</from-bottom-dialog>
</template>
<script>
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
export default {
name: "Duoshan",
components: {
FromBottomDialog
},
props: {
modelValue: false
},
data() {
return {}
},
computed: {},
created() {
},
methods: {
cancel() {
this.$emit('update:modelValue', false)
},
}
}
</script>
<style scoped lang="less">
@import "../../../assets/scss/index";
.share-to-duoshan {
padding: 3rem 2rem;
min-height: calc(50vh - 6rem);
//min-height: 50vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.logo {
height: 12rem;
width: 12rem;
}
.wrapper {
width: 100%;
}
.title2 {
margin-bottom: 2rem;
text-align: center;
font-size: 2rem;
color: black;
}
.subtitle {
text-align: center;
font-size: 1.2rem;
color: @second-text-color;
}
.button {
width: 100%;
img {
height: 2.2rem;
margin-right: .5rem;
}
}
}
</style>

210
src/pages/home/components/PlayFeedback.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<transition name="fade">
<div class="play-feedback" v-if="modelValue">
<div class="feedback-header">
<span>&nbsp;</span>
<div class="title">播放反馈</div>
<back mode="dark" img="close" @click="cancel"></back>
</div>
<div class="content">
<div class="notice">请选择要反馈的问题</div>
<div class="l-row" @click="falseOther(()=>{this.type1 = true} )">
<Check mode="red" :modelValue="type1" @change="falseOther(()=>{this.type1 = true} )"/>
<span>网络正常无法播放视频</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type2 = true} )">
<Check mode="red" :modelValue="type2" @change="falseOther(()=>{this.type2 = true} )"/>
<span>视频画面正常没声音</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type3 = true} )">
<Check mode="red" :modelValue="type3" @change="falseOther(()=>{this.type3 = true} )"/>
<span>播放几秒/中途卡信</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type4 = true} )">
<Check mode="red" :modelValue="type4" @change="falseOther(()=>{this.type4 = true} )"/>
<span>画面内容不全</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type5 = true} )">
<Check mode="red" :modelValue="type5" @change="falseOther(()=>{this.type5 = true} )"/>
<span>播放过程中闪退回桌面</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type6 = true} )">
<Check mode="red" :modelValue="type6" @change="falseOther(()=>{this.type6 = true} )"/>
<span>画面模糊不清晰</span>
</div>
<div class="l-row" @click="falseOther(()=>{this.type7 = true} )">
<Check mode="red" :modelValue="type7" @change="falseOther(()=>{this.type7 = true} )"/>
<span>视频播放其他问题或建议</span>
</div>
<div v-if="type7" class="other">
<div class="textarea-ctn">
<textarea name="" id="" cols="30" rows="10"
v-model="desc"
placeholder="详输入内容"></textarea>
</div>
<div class="text-num">{{ desc.length }}/300</div>
</div>
<b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button>
</div>
</div>
</transition>
</template>
<script>
import Check from "../../../components/Check";
export default {
name: "Test",
props: {
modelValue: false
},
components: {
Check
},
watch: {
modelValue(newVal) {
this.type1 = false
this.type2 = false
this.type3 = false
this.type4 = false
this.type5 = false
this.type6 = false
this.type7 = false
this.desc = ''
}
},
data() {
return {
type1: false,
type2: false,
type3: false,
type4: false,
type5: false,
type6: false,
type7: false,
desc: ''
}
},
computed: {
disabled() {
if (this.type7 && this.desc) return true
return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
}
},
created() {
},
methods: {
falseOther(cb) {
this.type1 = false
this.type2 = false
this.type3 = false
this.type4 = false
this.type5 = false
this.type6 = false
this.type7 = false
cb()
},
cancel() {
this.$emit('update:modelValue', false)
},
async submit() {
this.cancel()
this.$showLoading()
await this.$sleep(1000)
this.$hideLoading()
this.$notice('感谢你的反馈，我们会尽快答复！')
}
}
}
</script>
<style scoped lang="less">
@import "../../../assets/scss/index";
.play-feedback {
max-height: 49rem;
overflow: auto;
background: #fff;
color: black;
position: fixed;
bottom: 5rem;
left: 0;
right: 0;
.feedback-header {
position: fixed;
left: 0;
right: 0;
background: white;
height: 3rem;
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
font-weight: bold;
font-size: 1.8rem;
}
.content {
padding: 6rem 1.5rem 1.5rem 1.5rem;
}
.notice {
font-size: 1.2rem;
color: @second-text-color;
}
.l-row {
display: flex;
align-items: center;
min-height: 5rem;
font-size: 1.4rem;
border-bottom: 1px solid #f1f1f1;
.check {
width: 2rem;
height: 2rem;
margin-right: 1rem;
}
}
.no-border {
border-bottom: none;
}
.other {
.textarea-ctn {
width: 100%;
background: #eae8e8;
padding: 1.5rem;
box-sizing: border-box;
margin-top: 1rem;
border-radius: 2px;
textarea {
font-family: "Microsoft YaHei UI";
outline: none;
width: 100%;
border: none;
background: transparent;
color: black;
&::placeholder {
color: @second-text-color;
}
}
}
.text-num {
margin-top: .8rem;
margin-bottom: .8rem;
font-size: 1rem;
color: @second-text-color;
text-align: right;
}
}
}
</style>

311
src/pages/home/components/ShareTo.vue Normal file
View File

@ -0,0 +1,311 @@
<template>
<from-bottom-dialog
page-id="home-index"
v-model="showShareDialog"
@cancel="cancel"
maskMode="light"
height="50vh"
mode="white">
<div class="option-dialog">
<div class="buttons">
<b-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>
<template v-if="canDownload">
<b-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">
<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">
<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">
<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">
<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>
</template>
<template v-else>
<b-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">
<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">
<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">
<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">
<template v-slot:prefix>
<img src="../../../assets/img/icon/components/video/webo-white.webp" alt="">
</template>
复制口令发给好友
</b-button>
</template>
<template v-if="showDownload">
<b-button type="primary" @click="$no">
去相册查看
<back scale="0.7" mode="light" direction="right"></back>
</b-button>
<b-button class="mt1r" type="white" @click="$no">
<img src="../../../assets/img/icon/components/video/wechat.webp" alt="">
发送视频到微信
</b-button>
</template>
</div>
<div class="dialog-friends">
<div class="dialog-friend" v-for="item in localFriends.all" @click="share(item)">
<img :src="$imgPreview(item.avatar)" alt="">
<div class="right">
<span>{{ item.name }}</span>
<div class="share-btn" v-if="!item.select">分享</div>
<div class="share-btn shared" v-else>已私信</div>
</div>
</div>
<div class="more" @click="cancel($nav('/message/share-to-friend'))">
<img src="../../../assets/img/icon/components/video/more-dark.png">
<div class="right">
<span>更多好友</span>
</div>
</div>
</div>
</div>
</from-bottom-dialog>
</template>
<script>
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import {mapState} from "vuex";
export default {
name: "ShareTo",
components: {
FromBottomDialog
},
props: {
type: {
type: Number,
default: -1
},
videoId: {
type: String,
default: null
},
canDownload: {
type: Boolean,
default: true
},
},
watch: {
type(newVal, oldVal) {
this.change(newVal)
},
showShareDialog() {
this.localFriends = this.$clone(this.friends)
}
},
data() {
return {
progress: 0,
downloading: false,
showShareDialog: false,
showDownload: false,
showShare2WeChatZone: false,
showShare2WeChat: false,
showShare2QQZone: false,
showShare2QQ: false,
showShare2Webo: false,
localFriends: [],
}
},
computed: {
...mapState(['friends']),
},
created() {
},
methods: {
async change(newVal) {
if (newVal === -1) return
this.showShareDialog = true
if (this.canDownload) {
let downloadedVideo = this.$storageGet('downloadedVideo', [])
if (!downloadedVideo.find(v => v === this.videoId) && !this.downloading) {
await this.downloadVideo()
}
}
switch (newVal) {
case 2:
return this.showShare2WeChatZone = true
case 3:
return this.showShare2WeChat = true
case 4:
return this.showShare2QQZone = true
case 5:
return this.showShare2QQ = true
case 8:
return this.showShare2Webo = true
case 9:
return this.showDownload = true
}
},
cancel() {
this.showShareDialog = false
this.showDownload = false
this.showShare2WeChatZone = false
this.showShare2WeChat = false
this.showShare2QQZone = false
this.showShare2QQ = false
this.showShare2Webo = false
this.$emit('update:type', -1)
},
downloadVideo() {
return new Promise((resolve, reject) => {
this.progress = 0
this.downloading = true
let time = setInterval(() => {
if (this.progress >= 100) {
let downloadedVideo = this.$storageGet('downloadedVideo', [])
downloadedVideo.push(this.videoId)
this.$storageSet('downloadedVideo', downloadedVideo)
clearInterval(time)
this.downloading = false
resolve()
} else {
this.progress++
}
}, 5)
})
},
share(item) {
if (item.select) {
this.$notice('已分享给朋友')
}
item.select = true
}
}
}
</script>
<style scoped lang="less">
@import "../../../assets/scss/index";
.option-dialog {
.buttons {
padding: 0 1.5rem;
img {
height: 2.2rem;
margin-right: .5rem;
}
}
.dialog-friends {
color: black;
margin: 1rem 1rem 0 1rem;
width: calc(100% - 2rem);
background: white;
border-radius: 6px 6px 0 0;
> .dialog-friend {
box-sizing: border-box;
padding: .8rem;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #efefef;
img {
border-radius: 50%;
width: 3.8rem;
height: 3.8rem;
}
.right {
margin: 0 0.5rem 0 1.5rem;
font-size: 1.4rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.share-btn {
font-size: 1.3rem;
color: white;
height: 2.5rem;
width: 6rem;
display: flex;
align-items: center;
justify-content: center;
background: @primary-btn-color;
border-radius: 2px;
&.shared {
background: lightgray;
color: @second-text-color;
}
}
}
}
.more {
box-sizing: border-box;
height: 5.5rem;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid #efefef;
font-size: 1.4rem;
margin-bottom: 1.5rem;
img {
border-radius: 50%;
width: 2rem;
height: 2rem;
margin: 0 2.2rem 0 1.5rem;
}
}
}
}
</style>

30
src/pages/me/userinfo/ChooseLocation.vue
View File

@ -23,7 +23,7 @@
<div class="row" @click="$nav('/choose-province')">
<span>中国</span>
<div class="right">
<back scale='1.5' direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
<div v-for="(value, name) of countryOk">
@ -1234,34 +1234,6 @@ export default {
margin-right: .2rem;
}
}
.row {
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 5rem;
font-size: 1.4rem;
transition: all .1s;
background: @main-bg;
.right {
display: flex;
justify-content: space-between;
align-items: center;
color: @second-text-color;
img {
margin-left: 1rem;
width: 15px;
}
}
&:active {
background: @active-main-bg;
color: @second-text-color;
}
}
}
}

30
src/pages/me/userinfo/ChooseProvince.vue
View File

@ -10,7 +10,7 @@
<div class="row" @click="$nav('/choose-city')" v-for="item in list">
<span>{{ item }}</span>
<div class="right">
<back scale='1.5' direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
</div>
@ -63,34 +63,6 @@ export default {
}
}
.row {
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 5rem;
font-size: 1.4rem;
transition: all .1s;
background: @main-bg;
.right {
display: flex;
justify-content: space-between;
align-items: center;
color: @second-text-color;
img {
margin-left: 1rem;
width: 15px;
}
}
&:active {
background: @active-main-bg;
color: @second-text-color;
}
}
}
}

14
src/pages/me/userinfo/EditUserInfo.vue
View File

@ -20,28 +20,28 @@
<div class="left">名字</div>
<div class="right">
<span>{{ isEmpty(userinfo.name) }}</span>
<back direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item',{type:2})">
<div class="left">抖音号</div>
<div class="right">
<span>{{ isEmpty(userinfo.account) }}</span>
<back direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
<div class="row" @click="$nav('/edit-userinfo-item',{type:3})">
<div class="left">简介</div>
<div class="right">
<span>{{ isEmpty(userinfo.desc) }}</span>
<back direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
<div class="row" @click="showSexDialog">
<div class="left">性别</div>
<div class="right">
<span>{{ isEmpty(userinfo.sex) }}</span>
<back direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
<div class="row" @click="showBirthdayDialog">
@ -49,21 +49,21 @@
<div class="right">
<span>{{ isEmpty(userinfo.birthday) }}</span>
<div v-show="false" id="trigger1"></div>
<back direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
<div class="row" @click="$nav('/choose-location')">
<div class="left">所在地</div>
<div class="right">
<span>{{ isEmpty(userinfo.location) }}</span>
<back direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
<div class="row" @click="$nav('/add-school')">
<div class="left">学校</div>
<div class="right">
<span>{{ isEmpty(userinfo.school.name) }}</span>
<back direction="right"></back>
<back scale=".8" direction="right"></back>
</div>
</div>
</div>

3
src/pages/message/Message.vue
View File

@ -239,6 +239,9 @@ export default {
<style scoped lang="less">
@import "../../assets/scss/index";
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
#Message {
position: absolute;

4
src/router/index.js
View File

@ -45,6 +45,8 @@ import Test2 from "../pages/Test2";
import Test3 from "../pages/Test3";
import Share2Friend from "../pages/message/Share2Friend";
import JoinedGroupChat from "../pages/message/JoinedGroupChat";
import Report from "../pages/home/Report";
import SubmitReport from "../pages/home/SubmitReport";
const routes = [
// {path: '', component: Music},
@ -54,6 +56,8 @@ const routes = [
{path: '/test2', component: Test2},
{path: '/test3', component: Test3},
{path: '/home', component: Index},
{path: '/home/report', component: Report},
{path: '/home/submit-report', component: SubmitReport},
{path: '/attention', component: Attention},
{path: '/publish', component: Publish},
{path: '/message', component: Message},

22
src/utils/global-methods.js
View File

@ -140,6 +140,9 @@ export default {
document.body.removeChild(div)
}, 1000)
},
$no(){
this.$notice('未实现')
},
$back() {
window.history.back()
},
@ -248,5 +251,22 @@ export default {
//当前的transformY
transformY = parseInt(transformY)
return transformY
}
},
$storageSet(key, value) {
localStorage.setItem(key, JSON.stringify(value))
},
$storageGet(key, defaultValue = '') {
let res = localStorage.getItem(key)
if (res) {
return JSON.parse(res)
}
return defaultValue
},
$storageClear(key, isAll = false) {
if (isAll) {
localStorage.clear()
} else {
localStorage.removeItem(key)
}
},
}

2
src/utils/mixin.js
View File

@ -65,7 +65,7 @@ export default {
pressTimer = setTimeout(() => {
// 执行函数
handler();
}, 500)
}, 300)
}
}
// 取消计时器