From 7ba434aeca61c3af2bdd072abdbf3b130a58384b Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 3 Nov 2021 23:52:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=80=9A=E8=AF=9D=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/icon/message/video-white.png | Bin 438 -> 0 bytes
 src/components/Call.vue                     |  78 ++++++++++++--------
 src/components/Comment.vue                  |   5 +-
 src/pages/message/chat/Chat.vue             |  11 ++-
 4 files changed, 57 insertions(+), 37 deletions(-)
 delete mode 100644 src/assets/img/icon/message/video-white.png

diff --git a/src/assets/img/icon/message/video-white.png b/src/assets/img/icon/message/video-white.png
deleted file mode 100644
index 4b43a5d23be0d5f55ff856ea54f899a2b588d290..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 438
zcmV;n0ZIOeP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80004fNkl<ZSV!%b
zJugI25Qd+ZPQ-r@qEJw%R6a_bMrb6&E()DQClrDe5g)Cep-_lzMW>Sx;wSI}UOAh)
zn`;yHa<k`d;k0Mw%ri6R%*+u5FBNQ`e}K-3fbAJz78uNNFRp<bN%vXLs71i`C9s@T
zDTCaOq}>d1$o3JinML@QGNY0nTImFUM_>qe1?DB)wNm<S-}WSMo9tI4Z8gi<?gkEl
zF`ya%oCsAVP5sq)UGJy!Y>xx`z(id>8i4H$-~i}JJK1&s+kL<}u$VGj1wy)Nm#}Rq
z0QP`WU^p@U0jvV$7yvIof0NfGNl&)JMQwWo(y2a{)OhMK0Yb<ZBweLxVgkGabCN=d
zZmgI9b)#QOb1Z;oU?Amqh(cM?TP%R^*0+HRU?c$vDJcQ#F<wEfwA=0lLc?2&UWn4Y
z#r6tt0tBGOYHKBIZf>?i2dn_o>1GtW9d{)VOTbz214#%)p(9ypkSJ~_%{v9<(eIpp
gK^`yi=>A9G6ZxSC@RO6(&j0`b07*qoM6N<$f<j)n%K!iX

diff --git a/src/components/Call.vue b/src/components/Call.vue
index 5db170a..717574b 100644
--- a/src/components/Call.vue
+++ b/src/components/Call.vue
@@ -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,
-        isSmall: false,
-        isShowAudioCall: false,
-      },
+      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
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 253f63c..e442729 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -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);
         }
       }
diff --git a/src/pages/message/chat/Chat.vue b/src/pages/message/chat/Chat.vue
index 76d4fa6..51e577f 100644
--- a/src/pages/message/chat/Chat.vue
+++ b/src/pages/message/chat/Chat.vue
@@ -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 {