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

添加语音通话挂起功能

pull/19/head
zyronon 4 years ago
parent
5a939bc811
commit
293fc78c6a
2 changed files with 251 additions and 176 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 256
      src/App.vue
  2. 171
      src/pages/message/chat/Chat.vue

256
src/App.vue
Unescape View File

@ -6,10 +6,55 @@ @@ -6,10 +6,55 @@
</keep-alive>
</transition>
</router-view>
</template>
<script>
<div class="call-float"
v-if="isSmall"
:style="callFloatStyle"
@touchmove="touchmove"
@touchend="touchend"
@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="isSmall ? callFloatStyle : {zIndex:10}"
:class="isSmall?'small':''"
v-if="isShowAudioCall">
<div class="float">
<div class="header">
<img @click="isSmall = true" src="@/assets/img/icon/message/chat/narrow.png" alt=""
class="left">
<div class="center">
<img src="@/assets/img/icon/avatar/2.png" alt="" class="avatar">
<span>等待对方接听...</span>
</div>
<div class="right">
<div class="option">
<img src="@/assets/img/icon/message/chat/disabled-camera.png" alt="">
<span>摄像头</span>
</div>
<div class="option">
<img src="@/assets/img/icon/message/chat/able-volume.png" alt="">
<span>免提</span>
</div>
<div class="option">
<back mode="light" 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="isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png">
<span>挂断</span>
</div>
</div>
</div>
</transition>
</template>
<script>
/*
* try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
@ -17,6 +62,7 @@ try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出 @@ -17,6 +62,7 @@ try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出
import Mask from "./components/Mask";
import {mapState} from "vuex";
import routes from "./router/routes";
import {inject} from "_vue@3.2.20@vue";
export default {
name: 'App',
@ -25,13 +71,42 @@ export default { @@ -25,13 +71,42 @@ export default {
},
data() {
return {
isSmall: false,
isShowAudioCall: false,
transitionName: 'go',
callFloatTransitionTime: 0,
callFloatLeft: 15,
callFloatTop: 100,
height: 0,
width: 0,
mitt: inject('mitt'),
}
},
computed: {
...mapState(['excludeRoutes'])
...mapState(['excludeRoutes']),
callFloatStyle() {
return {
'transition-duration': this.callFloatTransitionTime + 'ms',
left: this.callFloatLeft + 'px',
top: this.callFloatTop + 'px',
}
}
},
methods: {
touchmove(e) {
this.callFloatTransitionTime = 0
this.callFloatLeft = e.touches[0].pageX - 35
this.callFloatTop = e.touches[0].pageY - 40
},
touchend(e) {
this.callFloatTransitionTime = 300
if (this.callFloatLeft < this.width / 2) {
this.callFloatLeft = 15
} else {
this.callFloatLeft = this.width - 15 - 70
}
},
},
methods: {},
// watch $route 决定使用哪种过渡
watch: {
'$route'(to, from) {
@ -49,6 +124,15 @@ export default { @@ -49,6 +124,15 @@ export default {
},
},
mounted() {
this.mitt.on('showAudioCall', () => {
if (this.isShowAudioCall) {
this.isSmall = false
} else {
this.isShowAudioCall = true
}
})
this.height = document.body.clientHeight
this.width = document.body.clientWidth
// this.$store.dispatch('getFriends')
try {
navigator.control.gesture(false);
@ -62,13 +146,165 @@ export default { @@ -62,13 +146,165 @@ export default {
},
}
</script>
<style>
.scale-enter-active,
.scale-leave-active {
transition: transform .2s ease;
}
.scale-enter-from,
.scale-leave-to {
transform: scale(0);
}
</style>
<style lang="less">
//
//.base-slide-item {
// min-width: 100vw;
// min-height: 100vh;
// position: relative;
//}
@import "./assets/less/index";
.call-float {
transition-property: all;
z-index: 9;
width: 7rem;
height: 8rem;
position: fixed;
top: 20vh;
left: @padding-page;
background: white;
display: flex;
align-items: center;
border-radius: .6rem;
justify-content: center;
flex-direction: column;
color: #14BF5F;
font-size: 1.2rem;
img {
width: 3rem;
margin-bottom: .2rem;
}
}
.audio-call {
color: white;
font-size: 1.2rem;
position: fixed;
z-index: 8;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
//background: black;
background: linear-gradient(to bottom, #262626, black);
transition: all .3s;
.float {
transition: all .3s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
> .header {
width: 100vw;
padding: @padding-page;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: space-between;
img {
width: 2.4rem;
height: 2.4rem;
}
.center {
display: flex;
align-items: center;
img {
width: 2rem;
height: 2rem;
background: white;
padding: .2rem;
border-radius: 50%;
}
span {
margin-left: .5rem;
}
}
.right {
display: flex;
flex-direction: column;
font-size: 1rem;
.option {
margin-bottom: 2.4rem;
display: flex;
align-items: center;
flex-direction: column;
span {
margin-top: 1rem;
}
}
.shrink {
transform: rotate(90deg) scale(.6) !important;
}
}
}
.big-avatar {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
width: 10rem;
border-radius: 50%;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.2rem;
margin-bottom: 4rem;
img {
width: 5rem;
margin-bottom: .5rem;
}
}
}
&.small {
//opacity: 0;
width: 7rem;
height: 8rem;
position: fixed;
top: 20vh;
left: @padding-page;
border-radius: .6rem;
.float {
width: 7rem;
height: 8rem;
transform: scale(0);
overflow: hidden;
}
}
}
#app {
height: 100%;

171
src/pages/message/chat/Chat.vue
Unescape View File

@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
<span>zzzz</span>
</div>
<div class="right">
<img @click="isShowAudioCall = true" style="transform: scale(1.1)"
<img @click="mitt.emit('showAudioCall')" style="transform: scale(1.1)"
src="../../../assets/img/icon/message/video-white.png" alt="">
<img src="../../../assets/img/icon/menu-white.png" alt="" @click="$nav('/message/chat/detail')">
</div>
@ -161,53 +161,11 @@ @@ -161,53 +161,11 @@
</transition>
<Loading v-if="loading"/>
<div class="call-float">
<!-- <span>对方手机可能不在身边，建议稍后再试</span>-->
<!-- <span>对方无应答</span>-->
<img src="@/assets/img/icon/message/chat/call-float.png" alt="">
<span>呼叫中</span>
</div>
<transition name="scale">
<div class="audio-call" v-if="isShowAudioCall">
<div class="float">
<div class="header">
<img @click="isShowAudioCall = false" src="../../../assets/img/icon/message/chat/narrow.png" alt=""
class="left">
<div class="center">
<img src="../../../assets/img/icon/avatar/2.png" alt="" class="avatar">
<span>等待对方接听...</span>
</div>
<div class="right">
<div class="option">
<img src="../../../assets/img/icon/message/chat/disabled-camera.png" alt="">
<span>摄像头</span>
</div>
<div class="option">
<img src="../../../assets/img/icon/message/chat/able-volume.png" alt="">
<span>免提</span>
</div>
<div class="option">
<back mode="light" 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="isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png">
<span>挂断</span>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import ChatMessage from "../components/ChatMessage";
import {nextTick} from "vue";
import {inject, nextTick} from "vue";
import Mask from "../../../components/Mask";
import {mapState} from "vuex";
import Loading from "../../../components/Loading";
@ -491,7 +449,7 @@ export default { @@ -491,7 +449,7 @@ export default {
}
},
],
isShowAudioCall: false,
typing: false,
loading: false,
opening: false,
@ -500,7 +458,8 @@ export default { @@ -500,7 +458,8 @@ export default {
showOption: false,
isShowOpenRedPacket: false,
tooltipTop: -1,
tooltipTopLocation: ''
tooltipTopLocation: '',
mitt: inject('mitt'),
}
},
computed: {
@ -934,126 +893,6 @@ export default { @@ -934,126 +893,6 @@ export default {
}
}
.audio-call {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
//background: black;
background: linear-gradient(to bottom, #262626, black);
.float {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
> .header {
width: 100vw;
padding: @padding-page;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: space-between;
img {
width: 2.4rem;
height: 2.4rem;
}
.center {
display: flex;
align-items: center;
img {
width: 2rem;
height: 2rem;
background: white;
padding: .2rem;
border-radius: 50%;
}
span {
margin-left: .5rem;
}
}
.right {
display: flex;
flex-direction: column;
font-size: 1rem;
.option {
margin-bottom: 2.4rem;
display: flex;
align-items: center;
flex-direction: column;
span {
margin-top: 1rem;
}
}
.shrink {
transform: rotate(90deg) scale(.6) !important;
}
}
}
.big-avatar {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
width: 10rem;
border-radius: 50%;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.2rem;
margin-bottom: 4rem;
img {
width: 5rem;
margin-bottom: .5rem;
}
}
}
}
.call-float {
position: fixed;
top: 20vh;
left: @padding-page;
background: white;
display: flex;
align-items: center;
border-radius: .6rem;
justify-content: center;
flex-direction: column;
color: #14BF5F;
padding: 1rem;
img {
width: 3rem;
margin-bottom: .2rem;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save