Skip to content

broadcast_cloud / web-live

Go to a project
Commit d1e6067f by MichaelJier
Options

feature 

1. 竖屏横屏pc增加发送时间倒计时
parent 11b92c35
Showing with 70 additions and 10 deletions
components/modules-pc/sendBox/index.vue
...@@ -36,7 +36,9 @@ ...@@ -36,7 +36,9 @@
/> />
</div> </div>
<div class="send-emoji" @click.stop="_toggleEmoji"></div> <div class="send-emoji" @click.stop="_toggleEmoji"></div>
<div class="send-btn" @click.stop="_sendChat">发送</div> <div class="send-btn" @click.stop="sendCountDown === 0 && _sendChat()" :class="sendCountDown === 0 ? '' : 'unable'">
{{ sendCountDown === 0 ? '发送' : `${sendCountDown}s` }}
</div>
<keep-alive> <keep-alive>
<emoji-box v-if="showEmoji" v-model="content"></emoji-box> <emoji-box v-if="showEmoji" v-model="content"></emoji-box>
</keep-alive> </keep-alive>
...@@ -56,6 +58,7 @@ export default { ...@@ -56,6 +58,7 @@ export default {
}, },
data() { data() {
return { return {
sendCountDown: 0,
showEmoji: false, showEmoji: false,
sendDate: 0, sendDate: 0,
content: '', content: '',
...@@ -123,13 +126,25 @@ export default { ...@@ -123,13 +126,25 @@ export default {
uuid: this.uuid uuid: this.uuid
}); });
if (res.code === 200 && res.errorCode === 0) { if (res.code === 200 && res.errorCode === 0) {
this.content = ''; this._resetChat()
this._remReplay();
if (res.data.chatAuthModel === 1) { if (res.data.chatAuthModel === 1) {
this.$layer.msg('已提交审核，请耐心等待'); this.$layer.msg('已提交审核，请耐心等待');
} }
} }
}, },
_resetChat() {
clearInterval(this.sendCountDownTimer)
this.sendCountDown = 3
this.sendCountDownTimer = setInterval(() => {
if (this.sendCountDown === 0) {
clearInterval(this.sendCountDownTimer)
} else if (this.sendCountDown > 0) {
this.sendCountDown--
}
}, 1000);
this._remReplay();
this.content = '';
},
_isDisabled() { _isDisabled() {
if (this.userInfo.isDisableChat === 1) { if (this.userInfo.isDisableChat === 1) {
this.$layer.msg('你已经被禁言，该功能暂时无法使用'); this.$layer.msg('你已经被禁言，该功能暂时无法使用');
...@@ -290,6 +305,10 @@ export default { ...@@ -290,6 +305,10 @@ export default {
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
} }
.unable {
color:#fff;
background-color: #999;
}
} }
.chat-reply { .chat-reply {
position: absolute; position: absolute;
......
components/modules-vertical/sendBox/sendChat.vue
...@@ -3,7 +3,9 @@ ...@@ -3,7 +3,9 @@
<div class="box"> <div class="box">
<input type="text" v-model="content" @keyup.enter="_sendChat" ref="sendInput" v-iosfit /> <input type="text" v-model="content" @keyup.enter="_sendChat" ref="sendInput" v-iosfit />
</div> </div>
<div class="btn" @click="_sendChat">发送</div> <div class="btn" @click="sendCountDown === 0 && _sendChat()" :class="sendCountDown === 0 ? '' : 'unable'">
{{ sendCountDown === 0 ? '发送' : `${sendCountDown}s` }}
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -17,7 +19,8 @@ export default { ...@@ -17,7 +19,8 @@ export default {
data() { data() {
return { return {
sendDate: 0, sendDate: 0,
content: '' content: '',
sendCountDown: 0
}; };
}, },
computed: { computed: {
...@@ -49,6 +52,19 @@ export default { ...@@ -49,6 +52,19 @@ export default {
_close() { _close() {
this.isShow = false; this.isShow = false;
}, },
_resetChat() {
clearInterval(this.sendCountDownTimer)
this.sendCountDown = 3
this.sendCountDownTimer = setInterval(() => {
if (this.sendCountDown === 0) {
clearInterval(this.sendCountDownTimer)
} else if (this.sendCountDown > 0) {
this.sendCountDown--
}
}, 1000);
this._close();
this.content = '';
},
async _sendChat() { async _sendChat() {
if (new Date().getTime() - this.sendDate <= 3000) { if (new Date().getTime() - this.sendDate <= 3000) {
this.$layer.msg('您的操作太频繁了'); this.$layer.msg('您的操作太频繁了');
...@@ -67,8 +83,7 @@ export default { ...@@ -67,8 +83,7 @@ export default {
uuid: this.uuid uuid: this.uuid
}); });
if (res.code === 200 && res.errorCode === 0) { if (res.code === 200 && res.errorCode === 0) {
this.content = ''; this._resetChat()
this._close();
if (res.data.chatAuthModel === 1) { if (res.data.chatAuthModel === 1) {
this.$layer.msg('已提交审核，请耐心等待'); this.$layer.msg('已提交审核，请耐心等待');
} }
...@@ -113,11 +128,17 @@ export default { ...@@ -113,11 +128,17 @@ export default {
margin: 0 0.1rem; margin: 0 0.1rem;
padding: 0 0.1rem; padding: 0 0.1rem;
height: 0.28rem; height: 0.28rem;
width: 0.5rem;
text-align: center;
line-height: 0.28rem; line-height: 0.28rem;
border-radius: 0.05rem; border-radius: 0.05rem;
background: #409eff; background: #409eff;
color: #fff; color: #fff;
font-size: 0.12rem; font-size: 0.12rem;
} }
.unable {
color:#fff;
background-color: #999;
}
} }
</style> </style>
components/modules/cameraBox/index.vue
...@@ -82,6 +82,7 @@ export default { ...@@ -82,6 +82,7 @@ export default {
border: 1px solid #fff; border: 1px solid #fff;
.img { .img {
display: block; display: block;
border-radius: 0.05rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #333333; background-color: #333333;
...@@ -97,10 +98,10 @@ export default { ...@@ -97,10 +98,10 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 0.13rem; font-size: 0.13rem;
transform: scale(0.95) translateX(-0.02rem);
color: #fff; color: #fff;
background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0.01) 50%); background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0.01) 50%);
&-text { &-text {
transform: scale(0.95) translateX(-0.02rem);
position: absolute; position: absolute;
top: 0.02rem; top: 0.02rem;
left: 0.02rem; left: 0.02rem;
...@@ -108,6 +109,7 @@ export default { ...@@ -108,6 +109,7 @@ export default {
} }
&.z-active { &.z-active {
border-color: var(--main-color); border-color: var(--main-color);
background: var(--main-color);
} }
} }
} }
......
components/modules/sendBox/index.vue
...@@ -34,7 +34,9 @@ ...@@ -34,7 +34,9 @@
</div> </div>
<div class="emoji" @click.stop="_toggleEmoji"></div> <div class="emoji" @click.stop="_toggleEmoji"></div>
<div class="more" v-if="!content.trim()" @click.stop="_toggleMore"></div> <div class="more" v-if="!content.trim()" @click.stop="_toggleMore"></div>
<div class="send" v-else @click.stop="_sendChat">发送</div> <div class="send" v-else @click.stop="sendCountDown === 0 && _sendChat()" :class="sendCountDown === 0 ? '' : 'unable'">
{{ sendCountDown === 0 ? '发送' : `${sendCountDown}s` }}
</div>
</div> </div>
<keep-alive> <keep-alive>
<transition-group :name="showAni ? 'fade' : 'left'"> <transition-group :name="showAni ? 'fade' : 'left'">
...@@ -75,7 +77,8 @@ export default { ...@@ -75,7 +77,8 @@ export default {
}, },
count: 0, count: 0,
showAni: true, showAni: true,
marketSrc: '' marketSrc: '',
sendCountDown: 0
}; };
}, },
computed: { computed: {
...@@ -129,6 +132,15 @@ export default { ...@@ -129,6 +132,15 @@ export default {
this.chatReplyObj = { id: '', name: '' }; this.chatReplyObj = { id: '', name: '' };
}, },
_resetChat() { _resetChat() {
clearInterval(this.sendCountDownTimer)
this.sendCountDown = 3
this.sendCountDownTimer = setInterval(() => {
if (this.sendCountDown === 0) {
clearInterval(this.sendCountDownTimer)
} else if (this.sendCountDown > 0) {
this.sendCountDown--
}
}, 1000);
this._remReplay(); this._remReplay();
this.content = ''; this.content = '';
}, },
...@@ -376,10 +388,16 @@ export default { ...@@ -376,10 +388,16 @@ export default {
height: 0.28rem; height: 0.28rem;
line-height: 0.28rem; line-height: 0.28rem;
border-radius: 0.05rem; border-radius: 0.05rem;
width: .5rem;
text-align: center;
background-color: var(--main-color); background-color: var(--main-color);
color: var(--sebdBox-text-color); color: var(--sebdBox-text-color);
font-size: 0.12rem; font-size: 0.12rem;
} }
.unable {
color:#fff;
background-color: #999;
}
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment