feature

1. 竖屏横屏pc增加发送时间倒计时

components/modules-pc/sendBox/index.vue

@@ -36,7 +36,9 @@
         />
       </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>
         <emoji-box v-if="showEmoji" v-model="content"></emoji-box>
       </keep-alive>
@@ -56,6 +58,7 @@ export default {
   },
   data() {
     return {
+      sendCountDown: 0,
       showEmoji: false,
       sendDate: 0,
       content: '',
@@ -123,13 +126,25 @@ export default {
         uuid: this.uuid
       });
       if (res.code === 200 && res.errorCode === 0) {
-        this.content = '';
-        this._remReplay();
+        this._resetChat()
         if (res.data.chatAuthModel === 1) {
           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() {
       if (this.userInfo.isDisableChat === 1) {
         this.$layer.msg('你已经被禁言，该功能暂时无法使用');
@@ -290,6 +305,10 @@ export default {
       border-radius: 2px;
       cursor: pointer;
     }
+    .unable {
+      color:#fff;
+      background-color: #999;
+    }
   }
   .chat-reply {
     position: absolute;

components/modules-vertical/sendBox/sendChat.vue

@@ -3,7 +3,9 @@
     <div class="box">
       <input type="text" v-model="content" @keyup.enter="_sendChat" ref="sendInput" v-iosfit />
     </div>
-    <div class="btn" @click="_sendChat">发送</div>
+    <div class="btn" @click="sendCountDown === 0 && _sendChat()" :class="sendCountDown === 0 ? '' : 'unable'">
+      {{ sendCountDown === 0 ? '发送' : `${sendCountDown}s` }}
+    </div>
   </div>
 </template>
 <script>
@@ -17,7 +19,8 @@ export default {
   data() {
     return {
       sendDate: 0,
-      content: ''
+      content: '',
+      sendCountDown: 0
     };
   },
   computed: {
@@ -49,6 +52,19 @@ export default {
     _close() {
       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() {
       if (new Date().getTime() - this.sendDate <= 3000) {
         this.$layer.msg('您的操作太频繁了');
@@ -67,8 +83,7 @@ export default {
         uuid: this.uuid
       });
       if (res.code === 200 && res.errorCode === 0) {
-        this.content = '';
-        this._close();
+        this._resetChat()
         if (res.data.chatAuthModel === 1) {
           this.$layer.msg('已提交审核，请耐心等待');
         }
@@ -113,11 +128,17 @@ export default {
     margin: 0 0.1rem;
     padding: 0 0.1rem;
     height: 0.28rem;
+    width: 0.5rem;
+    text-align: center;
     line-height: 0.28rem;
     border-radius: 0.05rem;
     background: #409eff;
     color: #fff;
     font-size: 0.12rem;
   }
+  .unable {
+    color:#fff;
+    background-color: #999;
+  }
 }
 </style>

components/modules/cameraBox/index.vue

@@ -82,6 +82,7 @@ export default {
     border: 1px solid #fff;
     .img {
       display: block;
+      border-radius: 0.05rem;
       width: 100%;
       height: 100%;
       background-color: #333333;
@@ -97,10 +98,10 @@ export default {
       width: 100%;
       height: 100%;
       font-size: 0.13rem;
-      transform: scale(0.95) translateX(-0.02rem);
       color: #fff;
       background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0.01) 50%);
       &-text {
+        transform: scale(0.95) translateX(-0.02rem);
         position: absolute;
         top: 0.02rem;
         left: 0.02rem;
@@ -108,6 +109,7 @@ export default {
     }
     &.z-active {
       border-color: var(--main-color);
+      background: var(--main-color);
     }
   }
 }

components/modules/sendBox/index.vue

@@ -34,7 +34,9 @@
         </div>
         <div class="emoji" @click.stop="_toggleEmoji"></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>
       <keep-alive>
         <transition-group :name="showAni ? 'fade' : 'left'">
@@ -75,7 +77,8 @@ export default {
       },
       count: 0,
       showAni: true,
-      marketSrc: ''
+      marketSrc: '',
+      sendCountDown: 0
     };
   },
   computed: {
@@ -129,6 +132,15 @@ export default {
       this.chatReplyObj = { id: '', name: '' };
     },
     _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 = '';
     },
@@ -376,10 +388,16 @@ export default {
       height: 0.28rem;
       line-height: 0.28rem;
       border-radius: 0.05rem;
+      width: .5rem;
+      text-align: center;
       background-color: var(--main-color);
       color: var(--sebdBox-text-color);
       font-size: 0.12rem;
     }
+    .unable {
+      color:#fff;
+      background-color: #999;
+    }
   }
 }
 </style>