支付

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NConfigProvider, NGlobalStyle } from 'naive-ui'
-import { NaiveProvider, VipModal } from '@/components/common'
+import { NaiveProvider } from '@/components/common'
 import { useTheme } from '@/hooks/useTheme'
 import { useLanguage } from '@/hooks/useLanguage'
 import { emitter } from '@/plugins'
@@ -9,18 +9,6 @@ import { useRouter } from 'vue-router'
 
 const { theme, themeOverrides } = useTheme()
 const { language } = useLanguage()
-
-const router = useRouter()
-const showVipModal = ref(false)
-onMounted(() => {
-    emitter.on('changeVipShow', res => {
-        if (window.sessionStorage.getItem('openid')) {
-            router.push('/vip')
-        } else {
-            showVipModal.value = true
-        }
-    })
-})
 </script>
 
 <template>
@@ -34,8 +22,6 @@ onMounted(() => {
         <NGlobalStyle />
         <NaiveProvider>
             <RouterView />
-
-            <VipModal v-model:show="showVipModal" />
         </NaiveProvider>
     </NConfigProvider>
 </template>

src/components/common/VipModal.vue

@@ -19,9 +19,9 @@
                 <div class="text">微信扫描二维码进行支付</div>
             </div>
 
-            <div class="tips" v-if="isMobile">长按保存图片</div>
-            <div class="mt-16" v-else>
-                <n-button type="primary" @click="down" round block size="large">保存图片</n-button>
+            <!-- <div class="tips" v-if="isMobile">长按保存图片</div> -->
+            <div class="mt-16 w-3/4">
+                <n-button type="primary" @click="goChat" round block :loading="loading">我已支付</n-button>
             </div>
 
             <n-button text class="cancel" @click.stop="updateShow(false)"> 取消 </n-button>
@@ -34,6 +34,7 @@ import { NModal, NButton, NGradientText } from 'naive-ui'
 import { ref, Ref, watch } from 'vue'
 import QrcodeVue from 'qrcode.vue'
 import html2canvas from 'html2canvas'
+import { useUserStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { fetchRedirectUrl } from '@/api'
 
@@ -41,9 +42,13 @@ const props = defineProps({
     show: {
         type: Boolean,
         default: false
+    },
+    planId: {
+        type: Number,
+        default: 0
     }
 })
-const emit = defineEmits(['update:show'])
+const emit = defineEmits(['update:show', 'goChat'])
 
 function updateShow(val: boolean) {
     emit('update:show', val)
@@ -54,11 +59,27 @@ const shareUrl = ref('')
 const isWechat = /micromessenger/i.test(navigator.userAgent)
 
 const postRef: Ref<HTMLElement | null> = ref(null)
+const userStore = useUserStore()
 watch(
     () => props.show,
     val => {
         if (val) {
-            //todo 在这里获取二维码链接
+            fetchRedirectUrl(
+                location.origin + '/api/membership/h5pay?userId=' + userStore.userInfo.id + '&planId=' + props.planId
+            ).then((res: any) => {
+                shareUrl.value = res.url
+            })
+            // setTimeout(() => {
+            //     html2canvas(postRef.value!, {
+            //         useCORS: true,
+            //         allowTaint: true,https://chillgpt.raexmeta.com/api/membership/h5pay?userId=&planId=
+            //         backgroundColor: null,
+            //         scale: 3
+            //     }).then(canvas => {
+            //         console.log(canvas)
+            //         imgUrl.value = canvas.toDataURL('image/png')
+            //     })
+            // }, 500)
         }
     }
 )
@@ -78,6 +99,14 @@ function down() {
 }
 
 const { isMobile } = useBasicLayout()
+
+const loading = ref(false)
+function goChat() {
+    loading.value = true
+    setTimeout(() => {
+        emit('goChat')
+    }, 200)
+}
 </script>
 
 <style lang="less" scoped>
@@ -113,29 +142,29 @@ const { isMobile } = useBasicLayout()
     .text {
         font-size: 12px;
         color: #5b4380;
-        // margin-top: 16px;
+        margin-top: 16px;
         position: relative;
-        // &::before {
-        //     position: absolute;
-        //     left: -20px;
-        //     top: 50%;
-        //     content: '';
-        //     width: 12px;
-        //     height: 1px;
-        //     background: linear-gradient(270deg, #5b4380 0%, rgba(91, 67, 128, 0) 100%);
-        //     opacity: 0.8;
-        // }
-
-        // &::after {
-        //     position: absolute;
-        //     right: -20px;
-        //     top: 50%;
-        //     content: '';
-        //     width: 12px;
-        //     height: 1px;
-        //     background: linear-gradient(270deg, rgba(91, 67, 128, 0) 0%, #5b4380 100%);
-        //     opacity: 0.8;
-        // }
+        &::before {
+            position: absolute;
+            left: -20px;
+            top: 50%;
+            content: '';
+            width: 12px;
+            height: 1px;
+            background: linear-gradient(270deg, #5b4380 0%, rgba(91, 67, 128, 0) 100%);
+            opacity: 0.8;
+        }
+
+        &::after {
+            position: absolute;
+            right: -20px;
+            top: 50%;
+            content: '';
+            width: 12px;
+            height: 1px;
+            background: linear-gradient(270deg, rgba(91, 67, 128, 0) 0%, #5b4380 100%);
+            opacity: 0.8;
+        }
     }
 }
 

src/components/common/VipPannel.vue

@@ -89,10 +89,12 @@
         <n-modal v-model:show="showSuccess" transform-origin="center" :on-after-leave="onLeave">
             <img src="@/assets/png-kaitong.png" @click="showSuccess = false" class="w-[90%] max-w-[500px]" alt="" />
         </n-modal>
+
+        <VipModal v-model:show="showPayModal" :planId="chooseMemberId" @goChat="goChat" />
     </div>
 </template>
 <script setup lang="ts">
-import { VipCard } from '@/components/common'
+import { VipCard, VipModal } from '@/components/common'
 import {
     NCard,
     NEl,
@@ -137,6 +139,7 @@ import { useTheme } from '@/hooks/useTheme'
 import type { MemberShip } from '@/store/modules/memberShip/helper'
 import { emitter } from '@/plugins'
 import { useStorage } from '@vueuse/core'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
 
 const router = useRouter()
 function handleBack() {
@@ -253,7 +256,7 @@ function submit() {
                 message.error(e.message)
             })
     } else {
-        emitter.emit('changeVipShow', true)
+        showPayModal.value = true
     }
 }
 
@@ -263,6 +266,21 @@ function onLeave() {
         name: 'Chat'
     })
 }
+
+const { isMobile } = useBasicLayout()
+const showPayModal = ref(false)
+function goChat() {
+    userMemberStore.fetchMember()
+    if (isMobile.value) {
+        router.replace({
+            name: 'Chat'
+        })
+    } else {
+        showPayModal.value = false
+        emitter.emit('changeMineShow',false)
+        emitter.emit('changeVipShow',false)
+    }
+}
 </script>
 
 <style lang="less" scoped>

src/components/common/minePannel.vue

@@ -55,6 +55,7 @@ const dialog = useDialog()
 const userStore = useUserStore()
 
 function goVip() {
+    // router.push('/vip')
     emitter.emit('changeVipShow', true)
 }
 

src/main.ts

@@ -20,6 +20,8 @@ const invitor = query.get('invitor')
 if (invitor) {
     useStorage('invitor', '', sessionStorage).value = invitor as string
 }
+// const 
+
 const isWechat = /micromessenger/i.test(navigator.userAgent)
 
 const openid = useStorage('openid', '', sessionStorage)

src/views/chat/index.vue

@@ -451,8 +451,17 @@ watch(isMobile, val => {
 
 onMounted(() => {
     emitter.on('changeMineShow', res => {
+        console.log(res)
         showMine.value = !!res
     })
+    emitter.on('changeVipShow', res => {
+        console.log(res)
+        if (isMobile.value) {
+            router.push('/vip')
+        } else {
+            showVip.value = !!res
+        }
+    })
 })
 
 const showVip = ref(false)

src/views/page/VipView.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, ref } from 'vue'
 import { VipPannel } from '@/components/common'
 import { NPageHeader, NAffix } from 'naive-ui'
 import { useWindowScroll } from '@vueuse/core'
@@ -32,6 +32,8 @@ export default defineComponent({
 
         const { isDark } = useTheme()
 
+        
+
         return {
             scrollY,
             isDark