分享

src/store/room.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { TemplateId } from './constant'
 import { useUserStore } from './user'
-import { mainURL,liveStreamURL } from '@/env'
+import { mainURL, liveStreamURL } from '@/env'
 import {
   fetchRomms,
   fetchRoomMiniCode,
@@ -22,6 +22,15 @@ export type Room = SRoom & {
   scenes: Scenes
 }
 
+export interface ShareLinkType {
+  num: string
+  name?: string
+  roomId: number
+  role?: string
+  lang?: string
+  avatar?: string
+}
+
 export const createRoom = (room: Partial<Room>): Room => {
   const user = useUserStore().current
   return {
@@ -39,18 +48,24 @@ export const createRoom = (room: Partial<Room>): Room => {
 
 export const useRoomStore = defineStore('room', {
   state: () => ({
-    list: [] as Rooms
+    list: [] as Rooms,
+    shareLink: ''
   }),
   getters: {
     getNums:
       () =>
-      <T extends Pick<Room, 'scenes'>>(room: T) =>
-        room.scenes.map(scene => scene.num),
-    getShareUrl: () => (room: Room, m?: string) => {
-      // m=${scene}
-      return m
-        ? `${liveStreamURL}?m=${m}&roomId=roomId_${room.id}`
-        : `${liveStreamURL}?&roomId=roomId_${room.id}`
+        <T extends Pick<Room, 'scenes'>>(room: T) =>
+          room.scenes.map(scene => scene.num),
+    getShareUrl: () => (param: ShareLinkType) => {
+      const search = new URLSearchParams()
+      search.set('m', `${param.num}`)
+      search.set('role', `${param.role || 'leader'}`)
+      param.name && search.set('name', `${param.name}`)
+      search.set('roomId', `roomId_${param.roomId}`)
+      param.avatar && search.set('avatar', param.avatar)
+      param.lang && search.set('set', param.lang)
+      search.set('isTour', '0')
+      return liveStreamURL + '?' + search.toString()
     },
     filter: state => (keyowrd: string) =>
       state.list.filter(room => room.title.includes(keyowrd))
@@ -88,6 +103,15 @@ export const useRoomStore = defineStore('room', {
     async setLeaderRoomMiniCode(room: Room) {
       const code = room.leaderMiniCode || (await fetchLeaderRoomMiniCode(room))
       room.leaderMiniCode = code
+    },
+    setShareLink(param: ShareLinkType) {
+      const search = new URLSearchParams()
+      search.set('m', `${param.num}`)
+      search.set('role', `${param.role || 'leader'}`)
+      param.name && search.set('name', `${param.name}`)
+      search.set('roomId', `${param.roomId}`)
+      param.lang && search.set('set', param.lang)
+      this.shareLink = liveStreamURL + search.toString()
     }
   }
 })

src/views/room/list.vue

@@ -33,7 +33,7 @@
             :room="item"
             @web-sync="webSyncRoom(item)"
             @delete="deleteRoom(item)"
-            @share="miniSyncRoom(item)"
+            @share="shareRoom(item)"
             @mini-sync="miniSyncRoom(item, 'leader')"
             @edit="editRoom(item)"
           />
@@ -61,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRoomStore } from '@/store'
+import { useRoomStore, useUserStore } from '@/store'
 import { ref, computed, createVNode } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import { copyText } from '@/shared'
@@ -99,17 +99,24 @@ const deleteRoom = (room: Room) => {
   })
 }
 const shareRoom = async (room: Room) => {
-  await roomStore.setRoomMiniCode(room)
+  // await roomStore.setRoomMiniCode(room)
+  const scenes = await fetchRoomScenes(room.id)
+  const m = scenes[0].num
   Modal.confirm({
-    content: createVNode(Share, { room }),
+    content: createVNode(Share, { room, num: m }),
     title: '分享',
     icon: null,
     width: '500px',
     okText: '复制链接',
     appContext: app._context,
     cancelText: '取消',
-    onOk: async (room: Room) => {
-      await copyText(roomStore.getShareUrl(room))
+    onOk: async () => {
+      const link = roomStore.getShareUrl({
+        roomId: room.id,
+        num: m,
+        role: 'customer'
+      })
+      await copyText(link)
       message.success('链接复制成功')
     }
   })
@@ -138,9 +145,18 @@ const miniSyncRoom = async (room: Room, key?: 'leader') => {
 const webSyncRoom = async (room: Room) => {
   // debugger
   const scenes = await fetchRoomScenes(room.id)
+
+  const user = useUserStore().current
   const m = scenes[0].num
-  console.log('带看link', roomStore.getShareUrl(room, m))
-  window.open(roomStore.getShareUrl(room, m), '_blank')
+  const link = roomStore.getShareUrl({
+    roomId: room.id,
+    num: m,
+    role: 'leader',
+    name: user.nickname,
+    avatar: user.avatar
+  })
+  console.log('带看link', link)
+  window.open(link, '_blank')
 }
 
 const editRoom = async (room?: Room) => {

src/views/room/modal/share.vue

@@ -5,11 +5,11 @@
     class="share-form"
   >
     <a-form-item label="作品链接">
-      <a-input disabled :value="roomStore.getShareUrl(room)" />
+      <a-input disabled :value="url" />
     </a-form-item>
-    <a-form-item label="作品葵花码">
+    <!-- <a-form-item label="作品葵花码">
       <img :src="room.leaderMiniCode" class="mini-code" />
-    </a-form-item>
+    </a-form-item> -->
   </a-form>
 </template>
 
@@ -18,9 +18,13 @@ import { useRoomStore } from '@/store'
 import type { Room } from '@/store'
 
 defineOptions({ name: 'RoomShare' })
-defineProps<{ room: Room }>()
-
+const props = defineProps<{ room: Room; num: string }>()
 const roomStore = useRoomStore()
+const url = roomStore.getShareUrl({
+  roomId: props.room.id,
+  num: props.num,
+  role: 'customer'
+})
 </script>
 
 <style lang="scss" scoped>