抖音码

src/components/Share.vue

@@ -33,7 +33,7 @@
         </template>
         <div class="share-to" @click="closeShare($emit('ShareToFriend'))">
           <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
-          <span>站内私信</span>
+          <span>私信朋友</span>
         </div>
         <div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
           <img src="../assets/img/icon/components/video/towechat.webp" alt="">
@@ -67,6 +67,12 @@
         </div>
       </div>
       <div class="toolbar ">
+        <template v-if="mode === 'qrcode'">
+          <div class="tool" @click="copyLink">
+            <img src="../assets/img/icon/components/video/link.png" alt="">
+            <span>复制链接</span>
+          </div>
+        </template>
         <template v-if="mode === 'music'">
           <div class="tool" @click="copyLink">
             <img src="../assets/img/icon/components/video/link.png" alt="">
@@ -174,7 +180,9 @@ export default {
     },
     mode: {
       type: String,
-      default: 'video'//music
+      default: 'video'
+      //music
+      //qrcode
     },
   },
   computed: {

src/pages/home/Music.vue

@@ -76,6 +76,8 @@
         subtitle="0F.:/ a【风就应该自由要什么归宿】长按复制此条消息，打开抖音搜索，聆听音乐##kwu3VCixHl8##[抖音口令]"
         :okText="okText"
         cancelText="不分享了"
+        @ok="shareType = -1"
+        @cancel="shareType = -1"
     >
       <template v-slot:header>
         <img style="width: 100%;" src="../../assets/img/icon/share-password.webp" alt="">

src/pages/me/Me.less

@@ -322,7 +322,7 @@
           align-items: center;
 
           img {
-            width: 1.6rem;
+            width: 1.4rem;
             margin-left: .5rem;
           }
         }

src/pages/me/MyCard.vue

@@ -1,47 +1,118 @@
 <template>
   <div id='MyCard'>
-    <BaseHeader>
+    <div class="header">
-      <template v-slot:center>
+      <back mode="light" @click="$back"/>
-        <span class="f16">我的抖音码</span>
+<!--      todo 差一-->
-      </template>
+      <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true">
-    </BaseHeader>
+    </div>
     <div class="content">
-      <div class="card">
+      <div class="qrcode">
-        <div class="logo-ctn">
+        <img class="qrcode-bg" src="../../assets/img/icon/me/code-bg.png" alt="">
-          <img src="../../assets/img/icon/head-image.jpeg" alt="">
+        <img class="avatar" src="../../assets/img/icon/avatar/7.png" alt="">
       </div>
-        <span class="name">TTentau</span>
+
-        <span class="notice">使用抖音扫码，加我好友</span>
+      <span class="name">ZZZZZZZZZZ</span>
-        <img src="../../assets/img/icon/logo2.png" alt="" class="logo">
+      <span class="notice">抖音扫一扫，立即关注我</span>
     </div>
-    </div>
-    <div class="notice-two">请使用最新版抖音扫描</div>
     <div class="footer">
-      <div class="btn">
+<!--      <div class="btn" @click="$nav('/scan')">-->
-        <img src="../../assets/img/icon/download.png" alt="">
+      <div class="btn" @click="$no">
-        <span>保存到相册</span>
+        <div class="wrapper">
-      </div>
-      <div class="btn" @click="$nav('/scan')">
           <img src="../../assets/img/icon/scan.png" alt="">
+        </div>
         <span>扫一扫</span>
       </div>
+      <div class="btn" @click="$no">
+        <div class="wrapper">
+          <img src="../../assets/img/icon/download.png" alt="">
         </div>
+        <span>保存</span>
+      </div>
+    </div>
+
+    <Share v-model="isSharing"
+           mode="qrcode"
+           ref="share"
+           @showDouyinCode="showDouyinCode = true"
+           @showShare2WeChatZone="shareType = 2"
+           @share2WeChat="shareType = 3"
+           @share2QQZone="shareType = 4"
+           @share2QQ="shareType = 5"
+           @share2Webo="shareType = 8"
+           @ShareToFriend="delayShowDialog( e => this.shareToFriend = true)"
+    />
+
+
+    <ConfirmDialog
+        v-model:visible="showSharePassword"
+        title="你的口令已复制"
+        subtitle="0F.:/ a【风就应该自由要什么归宿】长按复制此条消息，打开抖音搜索，聆听音乐##kwu3VCixHl8##[抖音口令]"
+        :okText="okText"
+        cancelText="不分享了"
+        @ok="shareType = -1"
+        @cancel="shareType = -1"
+    >
+      <template v-slot:header>
+        <img style="width: 100%;" src="../../assets/img/icon/share-password.webp" alt="">
+      </template>
+    </ConfirmDialog>
+
+    <ShareToFriend v-model="shareToFriend"/>
+
+
   </div>
 </template>
 <script>
+import Share from "../../components/Share";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
+import ShareToFriend from "../home/components/ShareToFriend";
+
 export default {
   name: "MyCard",
-  components: {},
+  components: {
+    Share,
+    ConfirmDialog,
+    ShareToFriend
+  },
   data() {
     return {
-      transitionName: 'fade'
+      isSharing: false,
+      okText: '',
+
+      showSharePassword: false,
+      shareToFriend: false,
+      shareType: -1,
+
+      showDouyinCode: false,
+    }
+  },
+  watch: {
+    shareType(newVal, oldVal) {
+      if (newVal === -1) return
+      this.showSharePassword = true
+      switch (newVal) {
+        case 2:
+        case 3:
+          return this.okText = '去微信粘贴'
+        case 4:
+        case 5:
+          return this.okText = '去QQ粘贴'
+        case 8:
+          return this.okText = '去微博粘贴'
+      }
     }
   },
   created() {
 
   },
   computed: {},
-  methods: {}
+  methods: {
+    delayShowDialog(cb) {
+      setTimeout(() => {
+        cb()
+      }, 100)
+    },
+  }
 }
 </script>
 
@@ -49,6 +120,7 @@ export default {
 @import "../../assets/scss/index";
 
 #MyCard {
+  background: rgb(136, 132, 133);
   position: fixed;
   left: 0;
   right: 0;
@@ -57,54 +129,65 @@ export default {
   overflow: auto;
   font-size: 1.4rem;
 
+  .header {
+    position: fixed;
+    z-index: 9;
+    top: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 1.5rem;
+    height: 6rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .share {
+      width: 2.4rem;
+      height: 2.4rem;
+      margin-left: 1.5rem;
+    }
+  }
+
 
   .content {
     padding-top: @header-height;
-
-    .card {
-      margin: 3rem;
-      background: white;
-      border-radius: 1rem;
     display: flex;
-      align-items: center;
     flex-direction: column;
+    align-items: center;
 
-      .logo-ctn {
+    .qrcode {
-        margin: 2rem 0;
+      margin-top: 12vh;
-        width: 40vw;
-        background-image: url("/@/assets/img/icon/logo-bg.png");
-        background-position: center;
-        background-size: 100% 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+      position: relative;
 
-        img {
+      .qrcode-bg {
-          width: 100%;
+        width: 60vw;
-          height: 100%;
-          border-radius: 50%;
       }
+
+      .avatar {
+        border-radius: 50%;
+        position: absolute;
+        width: 25vw;
+      }
+    }
+
+    .name {
+      font-weight: bold;
+      margin-top: 2rem;
+      font-size: 1.6rem;
+      color: white;
     }
 
     .notice {
-        font-size: 1.2rem;
-        margin-top: 6rem;
-        opacity: .4;
-      }
-
-      .logo {
-        margin: 2rem 0;
-        width: 40vw;
-      }
-    }
-
-  }
-
-  .notice-two {
-    font-size: 1.2rem;
       color: white;
+      font-size: 1.4rem;
+      margin-top: 2rem;
       opacity: .4;
-    text-align: center;
+    }
+
+
   }
 
   .footer {
@@ -119,10 +202,20 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
+      font-size: 1.2rem;
+
+      .wrapper {
+        background: rgba(252, 250, 250, 0.3);
+        border-radius: 50%;
+        display: flex;
+        padding: 1.8rem;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 1rem;
+      }
 
       img {
-        width: 3rem;
+        width: 2.6rem;
-        margin-bottom: 1rem;
       }
     }
   }

src/pages/me/Uploader.less

@@ -357,7 +357,7 @@
             align-items: center;
 
             img {
-              width: 1.6rem;
+              width: 1.4rem;
               margin-left: .5rem;
             }
           }
@@ -372,7 +372,7 @@
 
           .certification {
             img {
-              width: 1.6rem;
+              width: 1.4rem;
               margin-right: .5rem;
             }
           }

src/pages/me/Uploader.vue

@@ -61,7 +61,7 @@
               </div>
               <div class="number" v-else>
                 <span>抖音号：{{ localAuthor.unique_id }}</span>
-                <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
+                <img src="../../assets/img/icon/me/copy.png" alt="" @click.stop="copy">
               </div>
               <div class="signature f12" v-if="localAuthor.desc">
                 <div class="text" v-html="localAuthor.desc"></div>
@@ -389,6 +389,18 @@ export default {
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
+    copy() {
+      const input = document.createElement('input');
+      input.setAttribute('readonly', 'readonly');
+      input.setAttribute('value', this.localAuthor.unique_id);
+      document.body.appendChild(input);
+      input.setSelectionRange(0, 9999);
+      if (document.execCommand('copy')) {
+        document.execCommand('copy');
+        this.$notice('已复制')
+      }
+      document.body.removeChild(input);
+    },
     cancelFollow() {
       this.localAuthor.is_follow = false
     },