share

src/components/common/ShareModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <n-modal v-model:show="showModal" transform-origin="center">
+    <n-modal :show="show" @update:show="newValue => updateShow(newValue)" transform-origin="center">
         <div class="share-box">
             <img :src="imgUrl" v-if="imgUrl" alt="" class="block w-5/6 max-w-md" />
             <div class="share-img w-5/6 relative max-w-md" v-else ref="postRef">
@@ -8,56 +8,71 @@
                     <user-avatar avatarType="small" onlyAvatar />
                 </div> -->
                 <div class="qrcode flex items-center justify-center">
-                    <qrcode-vue :value="shareUrl" :size="300" renderAs="svg" level="H" />
+                    <qrcode-vue :value="shareUrl" :size="300" renderAs="svg" level="M" />
                 </div>
             </div>
 
             <div class="tips" v-if="isMobile">长按保存图片</div>
             <div class="mt-16" v-else>
-                <n-button type="primary" @click="down">点击保存图片</n-button>
+                <n-button type="primary" @click="save">点击保存图片</n-button>
             </div>
 
-            <n-button text class="cancel" @click.stop="showModal = false"> 取消 </n-button>
+            <n-button text class="cancel" @click.stop="updateShow(false)"> 取消 </n-button>
         </div>
     </n-modal>
 </template>
 
 <script setup lang="ts">
 import { NModal, NButton } from 'naive-ui'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import QrcodeVue from 'qrcode.vue'
 import html2canvas from 'html2canvas'
 import { useUserStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { Ref } from 'vue'
 import { fetchRedirectUrl } from '@/api'
-const showModal = ref(false)
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+const emit = defineEmits(['update:show'])
+
+function updateShow(val: boolean) {
+    emit('update:show', val)
+}
 
 const imgUrl = ref('')
 
 const userStore = useUserStore()
 const shareUrl = ref('')
-fetchRedirectUrl(location.origin + '/ui/home?invitor=' + userStore.userInfo.id).then(res => {
-    shareUrl.value = res as string
+fetchRedirectUrl(location.origin + '/ui/home?invitor=' + userStore.userInfo.id).then((res: any) => {
+    shareUrl.value = res.url
 })
 
 const postRef: Ref<HTMLElement | null> = ref(null)
-function init() {
-    showModal.value = true
-    setTimeout(() => {
-        html2canvas(postRef.value!, {
-            useCORS: true,
-            allowTaint: true,
-            backgroundColor: null,
-            scale: 3
-        }).then(canvas => {
-            console.log(canvas)
-            imgUrl.value = canvas.toDataURL('image/png')
-        })
-    }, 500)
-}
+watch(
+    () => props.show,
+    val => {
+        if (val) {
+            setTimeout(() => {
+                html2canvas(postRef.value!, {
+                    useCORS: true,
+                    allowTaint: true,
+                    backgroundColor: null,
+                    scale: 3
+                }).then(canvas => {
+                    console.log(canvas)
+                    imgUrl.value = canvas.toDataURL('image/png')
+                })
+            }, 500)
+        }
+    }
+)
 
-function down() {
+function save() {
     const tempLink = document.createElement('a')
     tempLink.style.display = 'none'
     tempLink.href = imgUrl.value
@@ -68,12 +83,10 @@ function down() {
     tempLink.click()
     document.body.removeChild(tempLink)
     window.URL.revokeObjectURL(imgUrl.value)
-    showModal.value = false
+    updateShow(false)
 }
 
 const { isMobile } = useBasicLayout()
-
-defineExpose({ init })
 </script>
 
 <style lang="less" scoped>

src/components/common/minePannel.vue

@@ -10,7 +10,7 @@
         <n-card :bordered="false">
             <n-row gutter="12">
                 <n-col :span="12">
-                    <div class="share-btn cursor-pointer" @click="shareEvent">
+                    <div class="share-btn cursor-pointer" @click="showShareModal = true">
                         <div class="share-text">
                             <div class="text1">邀请好友</div>
                             <div class="text2">一起赚钱</div>
@@ -36,38 +36,28 @@
             <n-button @click="logout" quaternary type="primary" block round size="large"> 退出登录 </n-button>
         </div>
 
-        <share ref="shareRef" />
+        <share v-model:show="showShareModal" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { UserAvatar, VipCard, Share } from '@/components/common'
-import { NCard, NEl, NPageHeader, NRow, NCol, useMessage, NButton, useDialog, NModal } from 'naive-ui'
+import { NCard, NRow, NCol, useMessage, NButton, useDialog, NModal } from 'naive-ui'
 import { useRouter } from 'vue-router'
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useUserStore } from '@/store'
-import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { emitter } from '@/plugins'
 
 const router = useRouter()
-function handleBack() {
-    router.back()
-}
-
 const message = useMessage()
+const showShareModal: any = ref(false)
+const dialog = useDialog()
+const userStore = useUserStore()
 
-const { isMobile } = useBasicLayout()
 function goVip() {
     emitter.emit('changeVipShow', true)
 }
 
-const shareRef: any = ref(null)
-function shareEvent() {
-    shareRef.value.init()
-}
-
-const dialog = useDialog()
-const userStore = useUserStore()
 function logout() {
     dialog.create({
         title: '提示',