From d133c7f7149d74b9186dfa845a3951b306396592 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 26 Aug 2021 21:06:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/icon/components/video/gyx.webp | Bin 868 -> 0 bytes
 src/components/BaseButton.vue                 |   7 ++
 src/components/Share.vue                      |  99 +++++++++++++++++-
 3 files changed, 103 insertions(+), 3 deletions(-)
 delete mode 100644 src/assets/img/icon/components/video/gyx.webp

diff --git a/src/assets/img/icon/components/video/gyx.webp b/src/assets/img/icon/components/video/gyx.webp
deleted file mode 100644
index bd02a5cc7148bc482a8c90c2e59642a4893354af..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 868
zcmV-q1DpI(Nk&Fo0{{S5MM6+kP&il$0000G0000x002Ay06|PpNWcLA00EGeZF}Bi
zse|GmIH-i6fGMC=z;LiApeUdypbj<#FRua`2c3i5`)KdyPJi(;A|SYtq)2jRE*@jQ
z!TtSHH{CwQ*o9_u;Uj_MJht_g{=-TRuHEQsbZDJVwhB|bf&Ce{R{(tbLjD9`Sq0{{
zNRt3k1@fU}XMk1#ycf+VxBi$u)z?UXSt<b~Pu2+#sz45k9+0ZQT-$blSWbVL1hJ2a
z(I4sny#hqbDXH1rY8%{kxpjfBF<!c}Q}f=@9p=K9j>gUDhAkQ|9E6!a>P?mCfS!3X
zb<R$e_;6%KdlEj-Cr;)xe8`@?q%{#Ae?e>BYxs~mO>{m5&ETpC3EyLaroT^fHl}f_
zDGw*U8+EFY?oOPcCO+5}%4Yve?#NauVV05pZC-C}d?;Mr^FLS15$VKlc9WT3PrWTh
zVW>9#i)OgD4o_l2ZT};)EIL5U<SZ~P`=!Y*=ACF-w$eHY|3W8AN%OOE9J3TO_fAQa
z;OD{auhTMcdMEGHQbvu*=^3kZ1&Mi0YyRg855Loj)ZCXJWBa@yG#`W8Abz+rTe}U9
z@5h|!Php<>Z4dsw>yJ~uW&Zhm4epN+2UbuxAa(%&0FVp-odGI506hRcZ6=RLq#_|9
zJ>Y;1iEIG8q1s&DT78p}H-{r?b3Q;G!}iSifc+r-N%zI+0R6G+CG-IDyY?;p!}Mm&
z0R92^0r~+?`b#2AZbuvc6LPqqv;$~u&Ut&xvY&ZWt=0%BVSoVBt%PFPZ|9<~^83b8
zz6A8ImgS5Ygr<myI4JT;(O600V|=@3u8t3Nk0L&A<W$<&2aHNAMB!{NVf8uBtvzKP
zcnA~UaF4&i%lezsfip`=#yzj*b%;O)yTca7DZcvU*K7604Q1R-&vBPtu78={{Rh6!
z`lrh0hZMi>=_>GPPLFme5lusQn?wpf{Iho%=gciVl#e=KetdP3X$GR8+8sg`o(XD8
znayBhqt%^=NSKLrk~f2#$c>)^T`txGF4p^&C|m$<;m^{U#{d<hc9MmJSVbpSMVV|}
u`{1WIkua3X!JUIYUPs<Uqe@xO)|qJW(kWZUTKft*{V6Uc!525S00001DW3@d

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 7594592..04e1fe3 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="button" :class="class1" @click.capture.stop="check">
     <img v-show="loading" src="../assets/img/icon/loading-white.png" alt="">
+    <slot name="prefix"></slot>
     <slot v-if="showText"></slot>
+    <slot name="suffix"></slot>
   </div>
 </template>
 <script>
@@ -134,5 +136,10 @@ export default {
     color: black;
     border: 1px solid gainsboro;
   }
+
+  &.green {
+    background: rgb(9,184,91);
+    color: white;
+  }
 }
 </style>
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 26cef8c..86910b2 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -18,7 +18,7 @@
       </div>
       <div class="line"></div>
       <div class="shares ">
-        <div class="share-to ">
+        <div class="share-to " @click="isOtherLogin = true">
           <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
           <span>私信朋友</span>
         </div>
@@ -115,6 +115,39 @@
           <b-button>{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
         </div>
       </div>
+
+
+      <from-bottom-dialog
+          v-model="isOtherLogin"
+          height="50rem"
+          mode="white">
+        <div class="option-dialog">
+          <div class="buttons">
+            <b-button type="green">
+              <template v-slot:prefix>
+                <img src="../assets/img/icon/components/video/wechatzone-white.webp" alt="">
+              </template>
+              {{ notice }}
+            </b-button>
+            <b-button class="mt1r" type="white">复制口令发给好友</b-button>
+          </div>
+          <div class="dialog-friends">
+            <div class="dialog-friend" v-for="item in friends">
+              <img :src="item.avatar" alt="">
+              <div class="right">
+                <span>{{ item.name }}</span>
+                <div class="share-btn">分享</div>
+              </div>
+            </div>
+            <div class="dialog-friend">
+              <img src="../assets/img/icon/head-image.jpeg" alt="">
+              <div class="right">
+                <span>更多好友</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </from-bottom-dialog>
     </div>
   </transition>
 </template>
@@ -122,10 +155,11 @@
 <script>
 import {mapState} from "vuex";
 import Check from "./Check";
+import FromBottomDialog from "./dialog/FromBottomDialog";
 
 export default {
   name: "Share",
-  components: {Check},
+  components: {FromBottomDialog, Check},
   props: ['isSharing'],
   computed: {
     ...mapState(['friends']),
@@ -135,7 +169,9 @@ export default {
   },
   data() {
     return {
-      isCreateChat: false
+      notice: '发送视频到朋友圈',
+      isCreateChat: false,
+      isOtherLogin: false,
     }
   },
   methods: {
@@ -159,6 +195,10 @@ export default {
 <style lang="less" scoped>
 @import "../assets/scss/index";
 
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
 .share {
   position: fixed;
   /*top: 200px;*/
@@ -364,6 +404,59 @@ export default {
 
     }
   }
+
+  .option-dialog {
+    .buttons {
+      padding: 1.5rem;
+
+      img {
+        height: 2.2rem;
+        margin-right: .5rem;
+      }
+    }
+
+
+    .dialog-friends {
+      color: black;
+      margin: 1rem 1rem 0 1rem;
+      width: calc(100% - 2rem);
+      background: white;
+      border-radius: 6px 6px 0 0;
+
+      > .dialog-friend {
+        box-sizing: border-box;
+        padding: 10px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        //border-bottom: 1px solid ghostwhite;
+        border-bottom: 1px solid gainsboro;
+
+        img {
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+        }
+
+        .right {
+          margin: 0 5px 0 15px;
+          font-size: 1.6rem;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .share-btn {
+            font-size: 1.4rem;
+            color: white;
+            padding: 5px 20px;
+            background: @primary-btn-color;
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+  }
 }
 
 .share-enter-active,