feat(组件): 增加分享弹窗

src/api/scene/list.ts

@@ -22,6 +22,8 @@ enum Api {
   dismissRoom = '/zfb-api/zfb/liveRoom/dismissRoom',
   deleteRoom = '/zfb-api/zfb/liveRoom/deleteRoom',
   generateDefaultLiveRoom = '/zfb-api/zfb/scene/generateDefaultLiveRoom',
+  generateReality = '/zfb-api/zfb/scene/createVrScene',
+  getShareList = '/zfb-api/zfb/scene/getVRShareLinks',
 }
 
 /**
@@ -134,3 +136,28 @@ export const generateDefaultLiveRoomApi = (params: SceneDownloadParam) =>
       ignoreCancelToken: true,
     },
   });
+
+export const generateRealityApi = (params: SceneDownloadParam) =>
+  defHttp.post<Result>({
+    url: Api.generateReality,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const getShareListApi = (params: SceneDownloadParam) =>
+  defHttp.post<Result>(
+    {
+      url: Api.getShareList,
+      params,
+      headers: {
+        // @ts-ignore
+        ignoreCancelToken: true,
+      },
+    },
+    {
+      useResult: true,
+    },
+  );

src/views/scenes/list.vue

@@ -47,6 +47,18 @@
                       (record.lived !== true && getCheckRole(['super', 'plat_admin'])),
                     onClick: generateDefaultLiveRoom.bind(null, record),
                   },
+                  {
+                    color: 'warning',
+                    label: '虚实同步',
+                    ifShow: true,
+                    onClick: syncReality.bind(null, record),
+                  },
+                  {
+                    color: 'error',
+                    label: '分享',
+                    ifShow: true,
+                    onClick: openShareModalFn.bind(null, record),
+                  },
                 ]
               : []
           "
@@ -55,6 +67,7 @@
     </BasicTable>
     <DownloadModal @register="registerDownloadModal" />
     <EditorModal @register="registerEditorModal" @reload="reload" />
+    <ShareModal @register="registerShareModal" @reload="reload" />
   </div>
 </template>
 <script lang="ts">
@@ -77,6 +90,7 @@
     // generateSceneEditTokenApi,
     downloadSceneDataAPi,
     generateDefaultLiveRoomApi,
+    generateRealityApi,
   } from '/@/api/scene/list';
   import { useI18n } from '/@/hooks/web/useI18n';
   import {
@@ -89,14 +103,16 @@
   import { useUserStore } from '/@/store/modules/user';
   import DownloadModal from './downloadModal.vue';
   import EditorModal from './editorModal.vue';
+  import ShareModal from './shareModal.vue';
 
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg, DownloadModal, EditorModal },
+    components: { BasicTable, TableAction, TableImg, DownloadModal, EditorModal, ShareModal },
     emits: ['register'],
     setup() {
       const { createMessage } = useMessage();
       const [registerDownloadModal, { openModal: openDownloadModal }] = useModal();
       const [registerEditorModal, { openModal: openEditorModal }] = useModal();
+      const [registerShareModal, { openModal: openShareModal }] = useModal();
       const { t } = useI18n();
       const userStore = useUserStore();
       const { getCheckRole, getEquity } = userStore;
@@ -305,6 +321,19 @@
           reload();
         }
       }
+      async function syncReality(record: Recordable) {
+        let res = await generateRealityApi({
+          sceneNum: record.num,
+        });
+        if (res) {
+          createMessage.success(t('common.optSuccess'));
+          reload();
+        }
+      }
+      function openShareModalFn(record: Recordable) {
+        openShareModal(true, record);
+      }
+
       return {
         registerTable,
         createMessage,
@@ -319,7 +348,15 @@
         openSceneEditorModal,
         getEquity,
         getCheckRole,
+        syncReality,
+        registerShareModal,
+        openShareModalFn,
       };
     },
   });
 </script>
+<style>
+  .vben-basic-table-action {
+    flex-wrap: wrap;
+  }
+</style>

src/views/scenes/shareModal.vue

@@ -0,0 +1,85 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @cancel="handleCancel"
+    @register="register"
+    title="分享场景"
+    @ok="handleOk"
+  >
+    <div class="pt-3px pr-3px"> </div>
+    <div v-for="item in lists" :key="item.sceneName" class="pt-8">
+      <div class="flex flex-nowrap flex-row justify-between py-2">
+        <div> {{ item.sceneName }}</div>
+        <a-button size="small" type="link" @click="handleCopy(item.webSite)">复制链接</a-button>
+      </div>
+      <Input :value="item.webSite" :disabled="true" />
+    </div>
+    <div v-if="empty" class="flex justify-center items-center" style="min-height: 200px">
+      暂无数据
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  // import { UpdateApi } from '/@/api/scene/list';
+  import { getShareListApi } from '/@/api/scene/list';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Input } from 'ant-design-vue';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  // import { BasicForm, FormSchema } from '/@/components/Form/index';
+  // import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  // const { t } = useI18n();
+
+  interface ShareItemType {
+    sceneName: string;
+    webSite: string;
+  }
+  export default defineComponent({
+    components: { BasicModal, Input },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['reload', 'register'],
+    setup() {
+      const lists = ref<ShareItemType[]>([]);
+      const empty = ref<boolean>(false);
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+      async function onDataReceive(data) {
+        // data = unref(data);
+        const res = await getShareListApi({
+          sceneNum: data.num,
+        });
+        console.log('res', res);
+
+        if (res.result?.length as ShareItemType[]) {
+          const data: ShareItemType[] = res.result;
+          lists.value = data;
+        } else {
+          empty.value = true;
+        }
+
+        // console.log('demoData', demoData);
+      }
+
+      async function handleOk() {
+        closeModal();
+        empty.value = false;
+      }
+      async function handleCancel() {
+        closeModal();
+        empty.value = false;
+      }
+
+      function handleCopy(text) {
+        const { isSuccessRef } = useCopyToClipboard(text);
+        unref(isSuccessRef) && createMessage.success('复制成功！');
+      }
+
+      return { register, handleOk, closeModal, lists, handleCopy, empty, handleCancel };
+    },
+  });
+</script>