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-11-03 23:52:08 +08:00
parent 9710144319
commit 7ba434aeca
4 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/icon/message/video-white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 438 B

68
src/components/Call.vue
View File

@ -1,43 +1,49 @@
<template>
<div class="call-float"
v-if="call.isSmall"
v-if="isSmall"
:style="callFloatStyle"
@touchmove="touchmove"
@touchend="touchend"
@click="call.isSmall = false">
@click="isSmall = false">
<img src="@/assets/img/icon/message/chat/call-float.png" alt="">
<span>呼叫中</span>
</div>
<transition name="scale">
<div class="audio-call"
:style="call.isSmall ? callFloatStyle : {zIndex:10}"
:class="call.isSmall?'small':''"
v-if="call.isShowAudioCall">
:style="isSmall ? callFloatStyle : {zIndex:10}"
:class="isSmall?'small':''"
v-if="isShowAudioCall">
<div class="float">
<div class="header">
<div class="left">
<img @click="call.isSmall = true" src="@/assets/img/icon/message/chat/narrow.png" alt="">
<img @click="isSmall = true" src="@/assets/img/icon/message/chat/narrow.png" alt="">
</div>
<span class="center">等待对方接听...</span>
<div class="right">
<div class="option">
<img src="@/assets/img/icon/message/chat/disabled-camera.png" alt="">
<img v-show="!isOpenCamera" @click="isOpenCamera = !isOpenCamera"
src="@/assets/img/icon/message/chat/disabled-camera.png" alt="">
<img v-show="isOpenCamera" @click="isOpenCamera = !isOpenCamera"
src="@/assets/img/icon/message/chat/able-camera.png" alt="">
<span>摄像头</span>
</div>
<div class="option">
<img src="@/assets/img/icon/message/chat/able-volume.png" alt="">
<div class="option" v-if="isExpand">
<img v-show="!isOpenAudio" @click="isOpenAudio = !isOpenAudio"
src="@/assets/img/icon/message/chat/disabled-volume.png" alt="">
<img v-show="isOpenAudio" @click="isOpenAudio = !isOpenAudio"
src="@/assets/img/icon/message/chat/able-volume.png" alt="">
<span>免提</span>
</div>
<div class="option">
<back mode="light" img="back" class="shrink"/>
<back mode="light" @click="isExpand = !isExpand" img="back" class="shrink"/>
<!-- <img src="@/assets/img/icon/message/chat/narrow.png" alt="">-->
</div>
</div>
</div>
<img src="@/assets/img/icon/avatar/2.png" alt="" class="big-avatar">
<div class="footer">
<img @click="call.isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png">
<img @click="isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png">
<span>挂断</span>
</div>
</div>
@ -56,13 +62,14 @@ export default {
data() {
return {
mitt: inject('mitt'),
call: {
callFloatTransitionTime: 300,
callFloatLeft: 15,
callFloatTop: 100,
isOpenCamera: false,
isOpenAudio: true,
isExpand: true,
isSmall: false,
isShowAudioCall: false,
},
height: 0,
width: 0,
}
@ -70,36 +77,43 @@ export default {
computed: {
callFloatStyle() {
return {
'transition-duration': this.call.callFloatTransitionTime + 'ms',
left: this.call.callFloatLeft + 'px',
top: this.call.callFloatTop + 'px',
'transition-duration': this.callFloatTransitionTime + 'ms',
left: this.callFloatLeft + 'px',
top: this.callFloatTop + 'px',
}
}
},
watch: {
isShowAudioCall(newVal) {
if (!newVal) {
this.isOpenCamera = false
this.isOpenAudio = true
}
}
},
watch: {},
created() {
},
methods: {
touchmove(e) {
this.call.callFloatTransitionTime = 0
this.call.callFloatLeft = e.touches[0].pageX - 35
this.call.callFloatTop = e.touches[0].pageY - 40
this.callFloatTransitionTime = 0
this.callFloatLeft = e.touches[0].pageX - 35
this.callFloatTop = e.touches[0].pageY - 40
},
touchend(e) {
this.call.callFloatTransitionTime = 300
if (this.call.callFloatLeft < this.width / 2) {
this.call.callFloatLeft = 15
this.callFloatTransitionTime = 300
if (this.callFloatLeft < this.width / 2) {
this.callFloatLeft = 15
} else {
this.call.callFloatLeft = this.width - 15 - 70
this.callFloatLeft = this.width - 15 - 70
}
},
},
mounted() {
this.mitt.on('showAudioCall', () => {
if (this.call.isShowAudioCall) {
this.call.isSmall = false
if (this.isShowAudioCall) {
this.isSmall = false
} else {
this.call.isShowAudioCall = true
this.isShowAudioCall = true
}
})
this.height = document.body.clientHeight

5
src/components/Comment.vue
View File

@ -32,9 +32,9 @@
</div>
</div>
<div class="love" @click="loved(item)">
<img v-if="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
class="love-image">
<img v-else src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
<span>{{ $likeNum(item.loveNum) }}</span>
</div>
</div>
@ -478,6 +478,7 @@ export default {
}
span {
font-size: 1rem;
transform: translateY(-.5rem);
}
}

11
src/pages/message/chat/Chat.vue
View File

@ -8,8 +8,10 @@
<span>zzzz</span>
</div>
<div class="right">
<img @click="mitt.emit('showAudioCall')" style="transform: scale(1.1)"
src="../../../assets/img/icon/message/video-white.png" alt="">
<img @click="mitt.emit('showAudioCall')"
src="../../../assets/img/icon/message/chat/call.png" alt="">
<img @click="$no"
src="../../../assets/img/icon/message/chat/video-white.png" alt="">
<img src="../../../assets/img/icon/menu-white.png" alt="" @click="$nav('/message/chat/detail')">
</div>
</div>
@ -449,7 +451,6 @@ export default {
}
},
],
typing: false,
loading: false,
opening: false,
@ -585,6 +586,10 @@ export default {
background: @second-btn-color;
}
}
.right{
display: flex;
}
}
.message-wrapper {