分享功能

src/components/BottomBar.vue

@@ -1,8 +1,11 @@
 <template>
   <div
-    v-show="$route.meta.isShowBottomBar"
+    v-if="$route.meta.isShowBottomBar"
     class="bottom-bar"
     :class="{collapsed: isCollapsed}"
+    :style="{
+      zIndex: $config.zIndex.bottomBar.self,
+    }"
   >
     <img
       class="bg-image"
@@ -74,15 +77,28 @@
         <span>全屏</span>
       </button>
     </menu>
+    <ShareModal
+      v-if="isShowShareModal"
+      :style="{
+        zIndex: $config.zIndex.bottomBar.children.shareModal.self,
+      }"
+      @close="isShowShareModal = false"
+    />
   </div>
 </template>
 
 <script>
+import ShareModal from "@/components/ShareModal.vue"
+
 export default {
+  components: {
+    ShareModal,
+  },
   data() {
     return {
       isCollapsed: false,
       isShowPlusOne: false,
+      isShowShareModal: false,
     }
   },
   computed: {
@@ -106,6 +122,7 @@ export default {
       }
     },
     onClickShare() {
+      this.isShowShareModal = true
     },
     onClickFullScreen() {
     }

src/components/ShareModal.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    class="share-modal"
+  >
+    <h1>分享</h1>
+    <button
+      class="close-btn"
+      @click="$emit('close')"
+    >
+      <img
+        src="@/assets/images/close.png"
+        alt="关闭"
+        draggable="false"
+      >
+    </button>
+    <p>请使用手机扫描二维码或<br>复制分享链接</p>
+    <img
+      src="@/assets/images/search.png"
+      alt="二维码"
+      class="qr-code"
+    >
+    <div class="button-group">
+      <button @click="copyToClipBoard">
+        复制链接
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    globalUtils.showToast('长按二维码保存到手机')
+  },
+  methods: {
+    copyToClipBoard() {
+      globalUtils.copyToClipBoard('sfjlsflkjlsdfjkl')
+      globalUtils.showToast('已复制链接')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.share-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 37.92rem;
+  height: 54.17rem;
+  background-image: url('@/assets/images/share-bg.png');
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4.63rem;
+  padding-top: 3.5rem;
+  h1 {
+    font-size: 2rem;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #D8B275;
+    line-height: 2.34rem;
+    position: absolute;
+    top: 2.42rem;
+    left: 1.58rem;
+  }
+  .close-btn {
+    position: absolute;
+    top: 1.83rem;
+    right: 1.25rem;
+    width: 4.17rem;
+    height: 4.17rem;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > p {
+    font-size: 1.67rem;
+    font-weight: bold;
+    line-height: 2.4rem;
+    color: #FFFFFF;
+    text-align: center;
+  }
+  > img {
+    width: 18.75rem;
+    height: 18.75rem;
+    object-fit: contain;
+  }
+  .button-group {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    > button {
+      width: 15rem;
+      height: 5.42rem;
+      background: #930909;
+      border-radius: 4.17rem 4.17rem 4.17rem 4.17rem;
+      border: 0.17rem solid #D8B275;
+      color: #FFFFFF;
+      font-size: 1.83rem;
+    }
+    > a {
+      font-size: 1.83rem;
+    }
+  }
+}
+</style>

src/config.js

@@ -5,5 +5,18 @@ export default {
       self: '3',
       children: {},
     },
+    bottomBar: {
+      self: '3',
+      children: {
+        shareModal: {
+          self: '1',
+          children: {},
+        }
+      },
+    },
+    toast: {
+      self: '97',
+      children: {},
+    },
   },
 }

src/utils.js

@@ -13,4 +13,36 @@ export default {
       return fn.apply(context, args)
     }
   },
+  copyToClipBoard(content) {
+    let tempDom = document.createElement('input')
+    tempDom.setAttribute('value', content)
+    document.body.appendChild(tempDom)
+    tempDom.select()
+    tempDom.setSelectionRange(0, 9999)
+    document.execCommand('Copy')
+    document.body.removeChild(tempDom)
+  },
+  showToast(contentStr) {
+    const toastNode = document.createElement('div')
+    toastNode.style.position = 'fixed'
+    toastNode.style.left = '50%'
+    toastNode.style.top = '50%'
+    toastNode.style.transform = 'translate(-50%, -50%)'
+    toastNode.style.backgroundColor = '#555'
+    toastNode.style.borderRadius = '0.5rem'
+    toastNode.style.padding = '1.67rem'
+    toastNode.style.minWidth = '33vw'
+    toastNode.style.color = '#fff'
+    toastNode.style.fontSize = '1.67rem'
+    toastNode.style.zIndex = globalConfig.zIndex.toast.self
+    toastNode.style.display = 'flex'
+    toastNode.style.flexDirection = 'column'
+    toastNode.style.justifyContent = 'center'
+    toastNode.style.alignItems = 'center'
+    toastNode.innerText = contentStr
+    document.body.appendChild(toastNode)
+    setTimeout(() => {
+      document.body.removeChild(toastNode)
+    }, 1700)
+  }
 }