优化分享组件

src/components/BaseButton.vue

@@ -4,6 +4,7 @@
     <slot name="prefix"></slot>
     <slot v-if="showText"></slot>
     <slot name="suffix"></slot>
+    <div :style="{width: progress +'%'}" v-if="$props.progress" class="progress"></div>
   </div>
 </template>
 <script>
@@ -14,6 +15,10 @@ export default {
       type: Boolean,
       default: false
     },
+    progress: {
+      type: Number,
+      default: null
+    },
     loadingWithText: {
       type: Boolean,
       default: false
@@ -24,19 +29,28 @@ export default {
     },
     type: {
       type: String,
-      default: 'primary'
+      default: ''
     },
     active: {
       type: Boolean,
       default: true
     },
+    border: {
+      type: Boolean,
+      default: true
+    },
   },
   data() {
     return {}
   },
   computed: {
     class1() {
-      return [this.type, this.active ? '' : 'no-active', this.disabled && 'disabled']
+      return [
+        this.type,
+        this.active ? '' : 'no-active',
+        this.border ? '' : 'no-border',
+        this.disabled && 'disabled',
+      ]
     },
     showText() {
       if (this.loading) {
@@ -70,6 +84,17 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+
+  .progress {
+    border-radius: .3rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0;
+    background: rgb(80 80 80 / 10%);
+  }
 
   img {
     height: 1.6rem;
@@ -88,12 +113,70 @@ export default {
 
   &.primary {
     background: @primary-btn-color;
+  }
 
-    &:active {
+  &.dark {
+    background: @second-btn-color;
+  }
+
+  &.dark2 {
+    border:1px solid @second-btn-color;
+    background: white;
+    color: #000;
+  }
+
+  &.green {
+    background: rgb(9, 184, 91);
+    color: white;
+  }
+
+  &.qqzone {
+    background: rgb(240, 179, 2);
+    color: white;
+  }
+
+  &.qq {
+    background: rgb(27, 177, 228);
+    color: white;
+  }
+  &.webo {
+    background: rgb(242,95,67);
+    color: white;
+  }
+
+  &.white {
+    background: white;
+    color: black;
+    border: 1px solid gainsboro;
+  }
+
+  &:active {
+    &.primary {
       background: @disable-primary-btn-color;
     }
+
+    &.dark {
+      background: @second-btn-color-tran;
+    }
+
+    &.green {
+      opacity: .8;
+    }
+
+    &.qqzone {
+      opacity: .8;
+    }
+
+    &.qq {
+      opacity: .8;
+    }
+
+    &.webo {
+      opacity: .8;
+    }
   }
 
+
   &.no-active {
     &:active {
       &.primary {
@@ -107,6 +190,18 @@ export default {
       &.white {
         background: white;
       }
+
+      &.green {
+        background: rgb(9, 184, 91);
+      }
+
+      &.qqzone {
+        background: rgb(27, 177, 228);
+      }
+
+      &.qq {
+        background: rgb(27, 177, 228);
+      }
     }
   }
 
@@ -116,6 +211,10 @@ export default {
       color: white;
     }
 
+    &.white {
+      background: lightgray;
+    }
+
     &:active {
       &.primary {
         background: gainsboro;
@@ -123,23 +222,9 @@ export default {
     }
   }
 
-  &.dark {
-    background: @second-btn-color;
-
-    &:active {
-      background: @second-btn-color-tran;
-    }
-  }
-
-  &.white {
-    background: white;
-    color: black;
-    border: 1px solid gainsboro;
-  }
-
-  &.green {
-    background: rgb(9,184,91);
-    color: white;
+  &.no-border {
+    border: none;
+    background: rgb(212 212 212 / 36%);
   }
 }
 </style>

src/components/Share.vue

@@ -18,7 +18,7 @@
       </div>
       <div class="line"></div>
       <div class="shares ">
-        <div class="share-to " @click="isOtherLogin = true">
+        <div class="share-to " @click="showShareDialog = true">
           <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
           <span>私信朋友</span>
         </div>
@@ -26,23 +26,23 @@
           <img src="../assets/img/icon/components/video/torichang.png" alt="">
           <span>分享日常</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" @click="share2WeChatZone">
           <img src="../assets/img/icon/components/video/towechat.webp" alt="">
           <span>朋友圈</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" @click="share2WeChat">
           <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
           <span>微信好友</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" @click="share2QQZone">
           <img src="../assets/img/icon/components/video/tozone.webp" alt="">
           <span>QQ空间</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" @click="share2QQ">
           <img src="../assets/img/icon/components/video/toqq.webp" alt="">
           <span>QQ好友</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" @click="showShareDuoshan = true;showShareDialog = false;">
           <img src="../assets/img/icon/components/video/duoshan.png" alt="">
           <span>多闪</span>
         </div>
@@ -50,7 +50,7 @@
           <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
           <span>今日头条</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" @click="share2Webo">
           <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
           <span>微博</span>
         </div>
@@ -64,7 +64,7 @@
           <img src="../assets/img/icon/components/video/warring.png" alt="">
           <span>举报</span>
         </div>
-        <div class="tool  ">
+        <div class="tool" @click="download">
           <img src="../assets/img/icon/components/video/download.png" alt="">
           <span>保存本地</span>
         </div>
@@ -112,24 +112,70 @@
             <Check mode="red" v-model="isCreateChat"/>
             <span>创建群聊</span>
           </div>
-          <b-button>{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
+          <b-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
         </div>
       </div>
 
-
       <from-bottom-dialog
-          v-model="isOtherLogin"
-          height="50rem"
+          v-model="showShareDialog"
+          @cancel="cancel"
+          maskMode="light"
+          height="50vh"
           mode="white">
         <div class="option-dialog">
           <div class="buttons">
-            <b-button type="green">
+            <b-button v-if="showProgress"
+                      class="mb1r"
+                      :border="false"
+                      :progress="progress">
+              <img src="../assets/img/icon/components/video/download-gray.png" alt="">
+              <span class="second-text-color">下载中 9.2MB/{{ progress }}%</span>
+            </b-button>
+
+            <b-button type="green" v-if="showShare2WeChatZone">
               <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>
+            <b-button type="green" v-if="showShare2WeChat">
+              <template v-slot:prefix>
+                <img src="../assets/img/icon/components/video/wechat-white.webp" alt="">
+              </template>
+              发送视频到微信
+            </b-button>
+            <b-button type="qqzone" v-if="showShare2QQZone">
+              <template v-slot:prefix>
+                <img src="../assets/img/icon/components/video/qqzone-white.png" alt="">
+              </template>
+              发送视频到QQ空间
+            </b-button>
+            <b-button type="qq" v-if="showShare2QQ">
+              <template v-slot:prefix>
+                <img src="../assets/img/icon/components/video/qq-white.webp" alt="">
+              </template>
+              发送视频到QQ
+            </b-button>
+            <b-button type="webo" v-if="showShare2Webo">
+              <template v-slot:prefix>
+                <img src="../assets/img/icon/components/video/webo-white.webp" alt="">
+              </template>
+              发送视频到微博
+            </b-button>
+
+            <b-button v-if="!showDownload" class="mt1r" type="white">复制口令发给好友</b-button>
+
+            <template v-if="showDownload">
+              <b-button type="primary">
+                去相册查看
+                <back scale="0.7" mode="light" direction="right"></back>
+              </b-button>
+
+              <b-button class="mt1r" type="white">
+                <img src="../assets/img/icon/components/video/wechat.webp" alt="">
+                发送视频到微信
+              </b-button>
+            </template>
           </div>
           <div class="dialog-friends">
             <div class="dialog-friend" v-for="item in friends">
@@ -148,6 +194,31 @@
           </div>
         </div>
       </from-bottom-dialog>
+
+      <from-bottom-dialog
+          v-model="showShareDuoshan"
+          @cancel="cancel"
+          maskMode="light"
+          mode="white">
+        <div class="share-to-duoshan">
+          <img src="../assets/img/icon/components/video/duoshan-logo2.png" class="logo">
+          <div class="wrapper">
+            <div class="title2">多闪</div>
+            <div class="subtitle">开发者：北京拍拍看看科技有限公司；版本：6.8.0</div>
+            <div class="subtitle mb2r">
+              <span class="link" @click="$nav('/service-protocol',{type:'多闪权限申请与使用情况说明'})">应用权限</span>与
+              <span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span>
+            </div>
+            <b-button type="dark2">
+              <template v-slot:prefix>
+                <img src="../assets/img/icon/components/video/duoshan-logo.webp">
+              </template>
+              下载多闪
+            </b-button>
+          </div>
+        </div>
+
+      </from-bottom-dialog>
     </div>
   </transition>
 </template>
@@ -169,12 +240,73 @@ export default {
   },
   data() {
     return {
-      notice: '发送视频到朋友圈',
+      progress: 0,
       isCreateChat: false,
-      isOtherLogin: false,
+      showShareDialog: false,
+
+      showProgress: false,
+      showDownload: false,
+      showShare2WeChatZone: false,
+      showShare2WeChat: false,
+      showShare2QQZone: false,
+      showShare2QQ: false,
+      showShare2Webo: false,
+      showShareDuoshan: false,
     }
   },
   methods: {
+    download() {
+      this.showShareDialog = true
+      this.showDownload = false
+      this.downloadVideo(e => this.showDownload = true)
+    },
+    share2WeChatZone() {
+      this.showShareDialog = true
+      this.showShare2WeChatZone = false
+      this.downloadVideo(e => this.showShare2WeChatZone = true)
+    },
+    share2WeChat() {
+      this.showShareDialog = true
+      this.showShare2WeChat = false
+      this.downloadVideo(e => this.showShare2WeChat = true)
+    },
+    share2QQZone() {
+      this.showShareDialog = true
+      this.showShare2QQZone = false
+      this.downloadVideo(e => this.showShare2QQZone = true)
+    },
+    share2QQ() {
+      this.showShareDialog = true
+      this.showShare2QQ = false
+      this.downloadVideo(e => this.showShare2QQ = true)
+    },
+    share2Webo() {
+      this.showShareDialog = true
+      this.showShare2Webo = false
+      this.downloadVideo(e => this.showShare2Webo = true)
+    },
+    downloadVideo(cb) {
+      this.showProgress = true
+      this.progress = 0
+      let time = setInterval(() => {
+        if (this.progress >= 100) {
+          clearInterval(time)
+          this.showProgress = false
+          cb()
+        } else {
+          this.progress++
+        }
+      }, 5)
+    },
+    cancel() {
+      this.showProgress = false
+      this.showDownload = false
+      this.showShare2WeChatZone = false
+      this.showShare2WeChat = false
+      this.showShare2QQZone = false
+      this.showShare2QQ = false
+      this.showShare2Webo = false
+    },
     toggleCall(item) {
       item.select = !item.select
       // let name = item.name
@@ -358,7 +490,7 @@ export default {
   .share2friend {
     position: fixed;
     bottom: 0;
-    padding: 1rem;
+    padding: 2rem;
     box-sizing: border-box;
     width: 100vw;
     height: 18rem;
@@ -407,7 +539,7 @@ export default {
 
   .option-dialog {
     .buttons {
-      padding: 1.5rem;
+      padding: 0 1.5rem;
 
       img {
         height: 2.2rem;
@@ -415,7 +547,6 @@ export default {
       }
     }
 
-
     .dialog-friends {
       color: black;
       margin: 1rem 1rem 0 1rem;
@@ -457,6 +588,50 @@ export default {
       }
     }
   }
+
+  .share-to-duoshan {
+    padding: 3rem 2rem;
+    min-height: calc(50vh - 6rem);
+    //min-height: 50vh;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+
+    .logo {
+      height: 12rem;
+      width: 12rem;
+    }
+
+    .wrapper {
+      width: 100%;
+    }
+
+    .title2 {
+      margin-bottom: 2rem;
+      text-align: center;
+      font-size: 2rem;
+      color: black;
+    }
+
+    .subtitle {
+      text-align: center;
+      font-size: 1.2rem;
+      color: @second-text-color;
+    }
+
+
+    .button {
+      width: 100%;
+
+      img {
+        height: 2.2rem;
+        margin-right: .5rem;
+      }
+    }
+  }
 }
 
 .share-enter-active,

src/components/dialog/FromBottomDialog.vue

@@ -120,6 +120,7 @@ export default {
 
     hide(val = false) {
       this.$emit('update:modelValue', val)
+      this.$emit('cancel')
     },
     start(e) {
       if (this.$refs.dialog.scrollTop !== 0) return

src/pages/other/ServiceProtocol.vue

@@ -11,6 +11,7 @@
         <span class="f16" v-if="type === '《帐号及信息同步授权协议》'">《帐号及信息同步授权协议》</span>
         <span class="f16" v-if="type === '中国移动认证服务协议'">中国移动认证服务协议</span>
         <span class="f16" v-if="type === '抖音注销须知'">抖音注销须知</span>
+        <span class="f16" v-if="type === '多闪权限申请与使用情况说明'">多闪权限申请与使用情况说明</span>
       </template>
     </BaseHeader>
     <div class="content" v-if="type === '“抖音”隐私政策'">
@@ -1599,6 +1600,113 @@
         <p>权限功能说明：访问运动与健身数据</p>
         <p>使用场景和目的：用于访问你的行走数据，帮助你正常使用走路赚音符功能</p></div>
     </div>
+
+    <div class="content" v-if="type === '多闪权限申请与使用情况说明'">
+      <ul>
+        <li class="text">1. 为保障多闪App功能实现与安全稳定运行之目的，我们可能会申请或使用操作系统的相关权限；</li>
+        <li class="text">2. 为保障您的知情权，我们通过下列列表将产品可能申请、使用的相关操作系统权限进行展示，您可以根据实际需要对相关权限进行管理；</li>
+        <li class="text">3. 根据产品的升级，申请、使用权限的类型与目的可能会有变动，我们将及时根据这些变动对列表进行调整，以确保您及时获悉权限的申请与使用情况；</li>
+        <li class="text">4. 请您知悉，我们为业务与产品的功能与安全需要，我们可能也会使用第三方SDK，这些第三方也可能会申请或使用相关操作系统权限；</li>
+        <li class="text">5. 在使用产品的过程中，您可能会使用第三方开发的H5页面或小程序，这些第三方开发开发的插件或小程序也可能因业务功能所必需而申请或使用相关操作系统权限。</li>
+      </ul>
+      <h3>安卓操作系统应用权限列表</h3>
+      <div class="table-header-wrapper">
+        <div class="table-header">权限名称</div>
+        <div class="table-header">权限功能说明</div>
+        <div class="table-header">使用场景或目的</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">1.读取SD卡中的内容（读取存储空间/照片权限）android.permission.READ_EXTERNAL_STORAGE</div>
+        <div class="table-body">提供读取手机储存空间内数据的功能</div>
+        <div class="table-body">允许App或小程序读取存储中的图片、文件等内容，主要用于帮助您发布信息，上传头像等图片、文件、在本地记录崩溃日志信息（如有）等功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">2.写入/删除SD卡中的内容（写入/删除/存储空间/照片权限）android.permission.WRITE_EXTERNAL_STORAGE</div>
+        <div class="table-body">提供写入外部储存功能</div>
+        <div class="table-body">允许App写入/下载/保存/缓存/修改/删除图片、文件、崩溃日志等信息</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">3.读取手机状态和身份（电话权限、设备权限）android.permission.READ_PHONE_STATE</div>
+        <div class="table-body">提供读取手机设备标识等信息，请您放心该权限无法监听、获取您的任何通话内容与信息</div>
+        <div class="table-body">读取设备通话状态和识别码，识别手机设备ID，保证运营商网络免流服务，用于完成音视频、信息展示、账号登录、安全保障等主要功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">4.访问大致地理位置信息 android.permission.ACCESS_COARSE_LOCATION</div>
+        <div class="table-body">通过网络位置信息（例如基站和WLAN）获取大致地理位置信息</div>
+        <div class="table-body">用于完成安全保障服务及基于地理位置的服务（LBS）等相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">5. 访问精确地理位置信息 android.permission.ACCESS_FINE_LOCATION</div>
+        <div class="table-body">通过全球定位系统（GPS）或网络位置信息（例如基站和WLAN）获取精准地理位置信息</div>
+        <div class="table-body">用于完成安全保障服务及包括但不限于发布作品时添加坐标定位等相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">6.获取已知账户 android.permission.GET_ACCOUNTS</div>
+        <div class="table-body">获取设备上已安装的应用创建的账号，请您放心，该权限仅获取应用相关的信息，无法获取您的账号密码等个人敏感信息</div>
+        <div class="table-body">用于帮助您登录App以及管理、验证账户</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">7.录音 android.permission.RECORD_AUDIO</div>
+        <div class="table-body">使用麦克风录制音频</div>
+        <div class="table-body">用于帮助您完成音视频信息发布、音视频通话等需要使用该权限的相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">8.拍摄照片和视频 android.permission.CAMERA</div>
+        <div class="table-body">使用拍摄照片和视频、完成扫描二维码</div>
+        <div class="table-body">用于帮助您完成音视频信息发布、视频通话、完成扫描二维码等需要使用该权限的相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">9.读取通讯录 android.permission.READ_CONTACTS</div>
+        <div class="table-body">获取系统中的通讯录信息</div>
+        <div class="table-body">用于好友推荐功能</div>
+      </div>
+      <h3>iOS操作系统应用权限列表</h3>
+      <div class="table-header-wrapper">
+        <div class="table-header">权限名称</div>
+        <div class="table-header">权限功能说明</div>
+        <div class="table-header">使用场景或目的</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">1.NSPhotoLibraryAddUsageDescription</div>
+        <div class="table-body">向相册中添加内容</div>
+        <div class="table-body">使用场景和目的：允许App写入/下载/保存/修改/删除图片、文件、崩溃日志等信息</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">2.NSPhotoLibraryUsageDescription</div>
+        <div class="table-body">读取相册中内容</div>
+        <div class="table-body">使用场景和目的：允许App读取存储中的图片、文件等内容，主要用于帮助您发布信息等功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">3.NSCameraUsageDescription</div>
+        <div class="table-body">使用摄像头</div>
+        <div class="table-body">使用场景和目的：用于帮助您完成音视频信息发布、视频通话、完成扫描二维码等需要使用该权限的相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">4.NSLocationAlwaysUsageDescription</div>
+        <div class="table-body">持续获取地理位置</div>
+        <div class="table-body">使用场景和目的：用于完成安全保障、推荐信息以及基于地理位置的服务（LBS）等相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">5.NSLocationWhenInUseUsageDescription</div>
+        <div class="table-body">仅App被使用时获取地理位置</div>
+        <div class="table-body">使用场景和目的：用于完成安全保障、推荐信息以及基于地理位置的服务（LBS）等相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">6.NSLocationAlwaysAndWhenInUseUsageDescription</div>
+        <div class="table-body">持续和仅App被使用时获取地理位置</div>
+        <div class="table-body">使用场景和目的：用于完成安全保障、推荐信息以及基于地理位置的服务（LBS）等相关功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">7.NSContactsUsageDescription</div>
+        <div class="table-body">读取用户通讯录</div>
+        <div class="table-body">使用场景和目的：用于好友推荐功能</div>
+      </div>
+      <div class="table-body-wrapper">
+        <div class="table-body strong">8.NSMicrophoneUsageDescription</div>
+        <div class="table-body">使用麦克风</div>
+        <div class="table-body">使用场景和目的：用于帮助您完成音视频信息发布、音视频通话、完成搜索（语音转语义）等需要使用该权限的相关功能</div>
+      </div>
+    </div>
   </div>
 </template>
 <script>