分享&退出登录

src/components/PosterPage.vue

@@ -37,8 +37,35 @@ function dismiss() {
     show.value = false
 }
 
+const props = defineProps({
+    pageType: {
+        type: String,
+        default: 'mine'
+    },
+    poster: {
+        type: String,
+        default: ''
+    },
+    episodeNum: {
+        type: Number,
+        default: 0
+    },
+    title: {
+        type: String,
+        default: ''
+    }
+})
+
 const { user } = useUserStore()
-async function getInviteUrl() {}
+async function getInviteUrl() {
+    if (props.pageType === 'mine') {
+        return 'https://shorts.izouma.com/share2.html?referrer=' + user.id
+    } else {
+        return `https://shorts.izouma.com/share1.html?referrer=${user.id}&num=${props.episodeNum}&title=${
+            props.title
+        }&cover=${encodeURIComponent(props.poster)}`
+    }
+}
 
 const shareUrl = ref('')
 const posterUrl = ref('')

src/views/MinePage.vue

@@ -91,6 +91,11 @@
                                 <img src="@/assets/icon_kefu.png" class="w-[24px] h-[24px] mr-[10px]" alt="" />
                             </template>
                         </van-cell>
+                        <van-cell title="登出" @click="logoutCom" is-link>
+                            <template #icon>
+                                <img src="@/assets/icon_tuichu.png" class="w-[24px] h-[24px] mr-[10px]" alt="" />
+                            </template>
+                        </van-cell>
                     </van-cell-group>
                 </div>
             </div>
@@ -99,12 +104,13 @@
 
             <connect-page ref="connectPageRef"></connect-page>
 
-            <poster-page ref="posterRef"></poster-page>
+            <poster-page ref="posterRef" pageType="mine"></poster-page>
         </ion-content>
     </ion-page>
 </template>
 
 <script setup>
+import { ConfigProvider as VantConfigProvider, showConfirmDialog } from 'vant'
 import defaultImg from '@/assets/png-touxiang.png'
 import SignInfo from '@/components/SignInfo.vue'
 import BuyPage from '@/components/BuyPage.vue'
@@ -118,6 +124,7 @@ import { useI18n } from 'vue-i18n'
 import { isSameDay } from 'date-fns'
 import toast from '@/utils/toast'
 import { onIonViewWillEnter } from '@ionic/vue'
+import { useIonRouter } from '@ionic/vue'
 
 const buyPageRef = ref(null)
 function buy() {
@@ -130,7 +137,7 @@ function connect() {
     connectPageRef.value.changeShow(true)
 }
 
-const { user, get: getUser } = useUserStore()
+const { user, get: getUser, logout } = useUserStore()
 
 // onMounted(async () => {
 //     if (user) {
@@ -191,6 +198,19 @@ const posterRef = ref(null)
 function share() {
     posterRef.value.onOpenInviteModal()
 }
+
+const ionRouter = useIonRouter()
+async function logoutCom() {
+    const confirm = await showConfirmDialog({
+        title: '登出',
+        message: '您当前确认要登出吗？'
+    }).catch(() => {})
+    if (confirm) {
+        logout()
+        toast.success('登出成功')
+        ionRouter.push({ name: 'home' })
+    }
+}
 </script>
 
 <style lang="less" scoped>

src/views/VideoPage.vue

@@ -33,6 +33,10 @@
             ></video-player>
 
             <div class="right-fixed">
+                <div class="right-btn share" @click="share">
+                    <img class="w-[38px] h-[26px]" src="@/assets/icon_fenxiang.png" alt="" />
+                    <div>赚金豆</div>
+                </div>
                 <div class="right-btn" @click="collect">
                     <img
                         ref="collectImgRef"
@@ -74,6 +78,14 @@
                 :seriesInfo="seriesInfo"
                 :buyEpInfo="buyEpInfo"
             ></video-buy>
+
+            <poster-page
+                ref="posterRef"
+                pageType="video"
+                :title="seriesInfo.title"
+                :poster="poster"
+                :episode-num="curEpInfo.episodeNum"
+            ></poster-page>
         </ion-content>
     </ion-page>
 </template>
@@ -94,6 +106,7 @@ import { nextTick } from 'vue'
 import toast from '@/utils/toast'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import { useI18n } from 'vue-i18n'
+import PosterPage from '@/components/PosterPage.vue'
 
 const { t } = useI18n()
 const poster = ref('')
@@ -273,6 +286,11 @@ const isPre = computed(() => {
 const isNext = computed(() => {
     return curEpInfo.value.episodeNum !== seriesInfo.value.playCount
 })
+
+const posterRef = ref(null)
+function share() {
+    posterRef.value.onOpenInviteModal()
+}
 </script>
 
 <style lang="less" scoped>
@@ -327,4 +345,18 @@ const isNext = computed(() => {
         }
     }
 }
+
+.share {
+    margin-bottom: 20px;
+    div {
+        font-size: 12px;
+        font-weight: 600;
+        color: #ffd33f;
+        line-height: 18px;
+        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+        background: linear-gradient(180deg, #fffffd 0%, #ffa400 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
 </style>