ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/componentLibs/modules/container/mobileNavFrame/index.vue

@@ -0,0 +1,789 @@
+<script lang='ts'>
+import { computed, defineComponent, reactive, watch, ref, defineAsyncComponent } from 'vue'
+import { ArrowLeftBold, RefreshRight, Camera, MoreFilled, Back, HomeFilled, House } from '@element-plus/icons-vue';
+import { useRouter, useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus'
+import { builtinPages } from '@/views/builtins/index'
+import MobileMenu from './components/MobileMenu.vue';
+import useAppMenus from '../navigationFrame/hooks/useAppMenus';
+import { MyNavigationDrawer } from '@/views/builtins/index';
+import './utils/uni.webview.1.5.5.js'
+import { eventManager } from '@/prodModels'
+import { getPageInfoApi } from '@/api/ibsp-bg-page';
+
+import RenderIndex from '@preview/src/index.vue';
+
+export default defineComponent({
+  name: 'IBSPMobileNavFrame',
+  components: {
+    MobileMenu,
+    RenderIndex,
+    ArrowLeftBold,
+    RefreshRight,
+    Camera,
+    MoreFilled,
+    House,
+    MyNavigationDrawer
+  },
+  props: ['propsValues', 'component', 'page', 'app', 'eventValues'],
+  setup(props) {
+    const currentNav = ref<any>({})
+    const cacheIdList = ref<string[]>([])
+    const loading = ref(false)
+    const historyInnerPageIds = ref<any[]>([])
+    const _refresh_key = ref<string>('')
+    const previewPage_keepalive_ref = ref<any>(null)
+    const previewPage_ref = ref<any>(null)
+    const mobileTop = ref(0)
+    const mobileBottom = ref(0)
+    const currentJumpToHistory = ref<any[]>([])
+    const _pageName = ref<string>('')
+    const currentDownLoadProgress = ref<number>(0)
+    const currentProgressState = ref<boolean>(false)
+    const exportData = reactive({
+      config: [
+        {
+          label: '扫一扫结果',
+          value: 'currentScanRes'
+        }
+      ],
+      values: {
+        currentScanRes: ''
+      }
+    })
+
+
+    props.app.mobileParams.top = mobileTop
+    props.app.mobileParams.bottom = mobileBottom
+
+    const { updateData } = useAppMenus(props.component, props.page)
+    updateData(props.propsValues.navConfig.navMenus || [])
+    const router = useRouter()
+    const route = useRoute()
+    const renderedCacheIds = ref<string[]>([])
+
+    const loadPage = reactive({
+      id: '',
+      cache: false,
+      name: '',
+      inner: false,
+      builtinInner: false,
+      mainPage: false,
+      pageType: 2 // 2:构建页面 1:内置页面
+    })
+
+    watch(() => loadPage.id, (val) => {
+      if (window.uni?.postMessage) {
+        window.uni.postMessage({
+          data: {
+            type: 'isTopPage', params: {
+              state: val === currentNav.value?.page?.id
+            }
+          }
+        })
+      }
+
+    })
+
+    const setJumpToRecord = (page: typeof loadPage) => {
+
+      if (page.mainPage) {
+        currentJumpToHistory.value = [page]
+        return
+      }
+      const isExitIndex = currentJumpToHistory.value.findIndex((item) => item.id === page.id)
+
+      if (isExitIndex > -1) {
+        currentJumpToHistory.value = currentJumpToHistory.value.slice(0, isExitIndex + 1)
+
+        return
+      }
+      currentJumpToHistory.value.push(page)
+    }
+
+    const navMenusPlatList = computed<any[]>(() => {
+      const result: any[] = []
+      const loop = (menus: any[]) => {
+        menus.forEach((item) => {
+          result.push(item)
+          if (item.children) {
+            loop(item.children)
+          }
+        })
+      }
+      loop(props.component.data.navMenus || [])
+      return result
+    })
+
+    const navMenus = computed<any[]>(() => {
+      return props.component.data.navMenus || []
+    })
+    const headerStyle = computed(() => {
+      return {
+        backgroundColor: props.propsValues.navConfig.headerBackgroundColor,
+        height: props.propsValues.navConfig.headerHeight + 'px',
+        color: props.propsValues.navConfig.headerColor,
+        marginTop: mobileTop.value + 'px'
+      }
+    })
+
+    // 监听路由变化
+    router.afterEach((to, from) => {
+      const id = to.params.childId || to.params.id
+
+      if (id) {
+        const menu = navMenusPlatList.value.find((item: any) => item.page.id === id)
+        if (menu) {
+          currentNav.value = menu
+          loadPage.cache = menu.cache
+          loadPage.id = menu.page.id
+          loadPage.pageType = menu.page.pageType
+          loadPage.name = menu.title
+          loadPage.inner = false
+          return
+        }
+        const innerPage = historyInnerPageIds.value.find((item) => item.id === id)
+        if (innerPage) {
+          loadPage.id = innerPage.id
+          loadPage.pageType = innerPage.pageType
+          loadPage.cache = innerPage.cache
+          loadPage.name = innerPage.name
+          loadPage.inner = innerPage.inner
+        }
+      }
+      loading.value = false
+    })
+
+    const innerPageId = computed(() => props.page.getDynamicValue(props.propsValues.navConfig.innerPageId))
+    const innerPageName = computed(() => props.page.getDynamicValue(props.propsValues.navConfig.innerPageName))
+
+    const goInnerPage = async (id: string) => {
+      loadPage.id = id
+      loadPage.cache = false
+      loadPage.name = innerPageName.value
+      loadPage.inner = true
+      loadPage.mainPage = false
+      router.push({
+        name: 'PreviewChild',
+        params: {
+          childId: id
+        }
+      })
+      historyInnerPageIds.value.push(JSON.parse(JSON.stringify(loadPage)))
+      setJumpToRecord({ ...loadPage })
+    }
+
+
+    const goBuiltinPage = async (page: typeof loadPage) => {
+      loadPage.id = page.id
+      loadPage.name = page.name
+      loadPage.inner = true
+      loadPage.pageType = 1
+      loadPage.mainPage = false
+      loadPage.builtinInner = page.builtinInner
+      historyInnerPageIds.value.push(JSON.parse(JSON.stringify(loadPage)))
+      setJumpToRecord({ ...loadPage })
+    }
+
+
+    return {
+      navMenus,
+      currentNav,
+      cacheIdList,
+      headerStyle,
+      navMenusPlatList,
+      router,
+      route,
+      loading,
+      renderedCacheIds,
+      goInnerPage,
+      historyInnerPageIds,
+      innerPageId,
+      loadPage,
+      innerPageName,
+      _refresh_key,
+      previewPage_keepalive_ref,
+      previewPage_ref,
+      goBuiltinPage,
+      mobileTop,
+      mobileBottom,
+      currentJumpToHistory,
+      setJumpToRecord,
+      _pageName,
+      currentDownLoadProgress,
+      currentProgressState,
+      exportData
+    }
+
+
+  },
+  watch: {
+    navMenus: {
+      async handler(val) {
+        if (this.component.mode === 'Design') {
+          return
+        }
+        // 处理初始加载内置页面
+        const childId = this.route.params.childId as string
+        if (childId && !(this.navMenusPlatList.find((item) => item.page.id === childId))) {
+          this.loadPage.id = childId
+          this.loadPage.cache = false
+          this.loadPage.name = this.innerPageName
+          this.loadPage.inner = true
+          return
+        }
+        // 处理初始加载菜单页面
+        const menu = val[0]
+        if (menu && menu.page?.id) {
+          this.router.push({
+            name: 'PreviewChild',
+            params: {
+              childId: menu.page.id
+            }
+          })
+          this.currentNav = menu
+          const pageId = this.currentNav.page.id
+          this.loadPage.id = pageId
+          this.loadPage.pageType = this.currentNav.page.pageType
+          this.loadPage.cache = this.currentNav.cache
+          this.loadPage.name = this.currentNav.title
+          this.loadPage.inner = false
+          this.loadPage.mainPage = true
+          this.loading = !this.renderedCacheIds.includes(pageId)
+        }
+        this.setJumpToRecord({ ...this.loadPage })
+      },
+      deep: true
+    },
+    async innerPageId(val) {
+      if (val && this.component.mode !== 'Design') {
+        let id = val
+        if (val?.startsWith?.('#ibspstart{')) {
+          const reg = /^#ibspstart{(.*?)}#ibspend(.*?)$/
+          const regRes = val.match(reg, val)
+          id = regRes[1]
+        }
+        const versionId = await this.getPageVersionId(id)
+        this.goInnerPage(versionId || id)
+      }
+    }
+
+  },
+  methods: {
+    getBuiltinPage(value:any) {
+      const c = builtinPages.find((i:any) => i.value === value)?.component as ()=>Promise<any>
+      if (c) {
+        return defineAsyncComponent(c)
+      }
+    },
+    onSelectMenu(id: string, item: any, refresh: boolean = false) {
+      if (this.currentNav.id === item.id && !refresh) {
+        return
+      }
+      this.currentNav = item
+      if (this.currentNav?.page?.id) {
+        this.loading = !this.renderedCacheIds.includes(item.page.id)
+      } else {
+        this.loading = false
+      }
+
+      this.loadPage.id = item.page.id
+      this.loadPage.pageType = item.page.pageType
+      this.loadPage.cache = item.cache
+      this.loadPage.name = item.title
+      this.loadPage.inner = false
+      this.loadPage.mainPage = true
+
+      this.setJumpToRecord({ ...this.loadPage })
+
+
+      this.historyInnerPageIds.push(JSON.parse(JSON.stringify(this.loadPage)))
+
+      // 去重 相同的id
+      const ids = this.historyInnerPageIds.map((item) => item.id)
+      const uniqueIds = Array.from(new Set(ids))
+      this.historyInnerPageIds = uniqueIds.map((id) => this.historyInnerPageIds.find((item) => item.id === id))
+
+
+      this.router.push({
+        name: 'PreviewChild',
+        params: {
+          childId: item.page.id
+        }
+      })
+
+    },
+    loadedCallback() {
+      this.loading = false
+      if (this.currentNav.cache) {
+        this.renderedCacheIds.push(this.currentNav.page.id)
+      }
+    },
+    onClickGoInnerPageReturn() {
+      const currentIndex = this.currentJumpToHistory.findIndex((item) => item.id === this.loadPage.id)
+      if (currentIndex > 0) {
+        const page = this.currentJumpToHistory[currentIndex - 1]
+        if (page) {
+          this.loadPage.id = page.id
+          this.loadPage.cache = page.cache
+          this.loadPage.name = page.name
+          this.loadPage.inner = page.inner
+          this.loadPage.pageType = page.pageType
+          this.loadPage.mainPage = page.mainPage
+          this.historyInnerPageIds.pop()
+          this.setJumpToRecord({ ...this.loadPage })
+        }
+      }
+    },
+    async getPageVersionId(id: string) {
+      const res = await getPageInfoApi(id)
+      return res?.data?.idPageVersion
+    },
+    onClickClose() {
+      if (this.currentNav?.page?.id) {
+        this.onSelectMenu('', this.currentNav, true)
+      }
+
+    },
+    onPageCreated(page: any) {
+      if (!page?.name) {
+        this.loading = false
+        return
+      }
+      const target = this.currentJumpToHistory.find((item: any) => item.id === this.loadPage.id)
+      this._pageName = page.name
+      if (!target?.name) {
+        target.name = page.name
+      }
+
+      if (!this.loadPage?.name) {
+        this.loadPage.name = page.name
+      }
+      this.loading = false
+
+    },
+    onCLickRefresh() {
+      if (this.loadPage.cache) {
+        this.previewPage_keepalive_ref.refresh()
+      } else {
+        this.previewPage_ref.refresh()
+      }
+      this.loading = true
+    },
+    onWatchMobileBack() {
+      (window as any).msgFromUniapp = (arg: any) => {
+        if (arg.back) {
+          this.onClickGoInnerPageReturn()
+        }
+      }
+    },
+    onClickAvatar() {
+      eventManager.notify('onOpenMyNavigation')
+    },
+    onClickScan() {
+      window._uni.emitScanCode((res: string) => {
+        this.exportData.values.currentScanRes = res;
+        this.$props.eventValues.scan?.()
+      })
+    }
+  },
+  errorCaptured(err, vm, info) {
+    if (vm?.$.type.__name === 'PreviewPage') {
+      ElMessage.error('页面加载失败,请检查页面是否存于移动端')
+      this.loadPage.id = ''
+    }
+  },
+  mounted() {
+    // 监听其他地方要跳转到的内置页面
+    eventManager.subscribe('onMobileFramePage', async (val: string) => {
+      if (val && this.component.mode !== 'Design') {
+        let id = val
+        if (val?.startsWith?.('#ibspstart{')) {
+          const reg = /^#ibspstart{(.*?)}#ibspend(.*?)$/
+          const regRes = val.match(reg)
+          id = regRes![1]
+        }
+        const versionId = await this.getPageVersionId(id)
+        this.goInnerPage(versionId || id)
+      }
+    })
+    // 监听下载进度
+    eventManager.subscribe('downloadProgress', (val: number) => {
+      this.currentDownLoadProgress = val
+      this.currentProgressState = true
+      if (val >= 100) {
+        setTimeout(() => {
+          this.currentProgressState = false
+        }, 1000);
+      }
+    })
+
+    this.onWatchMobileBack()
+
+    this.component.data.exportDataOptions = this.exportData.config
+    this.component.data.exportDataValues = this.exportData.values
+
+    setTimeout(() => {
+      window.uni.postMessage({ data: { type: 'initPage' } })
+    }, 100);
+  },
+  beforeMount() {
+    // @ts-ignore
+    window.setMobileHeight = (top: number, bottom: number = 0) => {
+      this.mobileTop = top
+      this.mobileBottom = bottom
+    }
+    window.uni.postMessage({ data: { type: 'initPage' } })
+  }
+})
+</script>
+
+<template>
+  <div class="ibsp-mobile-nav-frame">
+    <header class="nav-header" :style="headerStyle">
+      <div class="return-title">
+        <template v-if="loadPage.inner">
+          <span class="return" @click="onClickGoInnerPageReturn">
+            <el-icon>
+              <svg width="20"
+                   height="20"
+                   viewBox="0 0 20 20"
+                   fill="none"
+                   xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M5.9224 10.1605C5.858 9.88852 5.93185 9.59049 6.14398 9.37836L12.8222 2.70013C13.1476 2.3747 13.6753 2.3747 14.0007 2.70013C14.3262 3.02557 14.3262 3.55321 14.0007 3.87864L7.91019 9.96917L14.0017 16.0607C14.3271 16.3861 14.3271 16.9137 14.0017 17.2392C13.6762 17.5646 13.1486 17.5646 12.8232 17.2392L6.14493 10.5609C6.03056 10.4466 5.95639 10.3072 5.9224 10.1605Z"
+                      fill="#1D2129" />
+              </svg>
+
+            </el-icon>
+          </span>
+          <span class="close" @click.stop="onClickClose">
+            <svg width="20"
+                 height="20"
+                 viewBox="0 0 20 20"
+                 fill="none"
+                 xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M16.535 6.91604L11.535 3.02687C10.6325 2.32438 9.36833 2.32438 8.465 3.02687L3.465 6.91604C2.85583 7.38938 2.5 8.11771 2.5 8.88937V15.0002C2.5 16.381 3.61917 17.5002 5 17.5002H15C16.3808 17.5002 17.5 16.381 17.5 15.0002V8.88937C17.5 8.11771 17.1442 7.38938 16.535 6.91604Z"
+                    stroke="#323232"
+                    stroke-width="1.5" />
+              <path d="M7.5 17V13C7.5 12.4477 7.94772 12 8.5 12H11.5C12.0523 12 12.5 12.4477 12.5 13V17"
+                    stroke="#323232"
+                    stroke-width="1.5" />
+            </svg>
+
+          </span>
+        </template>
+        <template v-if="!loadPage.inner">
+
+          <div class="user-avatar" @click="onClickAvatar">
+            <el-progress type="circle"
+                         :percentage="currentDownLoadProgress"
+                         :width="40"
+                         v-if="currentProgressState"
+                         status="success">
+              <el-avatar v-if="page.data.userInfo?.personImage"
+                         :src="page.data.userInfo?.personImage"
+                         :size="32"
+                         style="margin-right: 8px"></el-avatar>
+              <div v-else class="avatar-back">
+                <span>{{ page.data.userInfo?.username.split?.('')?.slice?.(-2)?.join?.('') }}</span>
+              </div>
+            </el-progress>
+
+            <template v-else>
+              <el-avatar v-if="page.data.userInfo?.personImage"
+                         :src="page.data.userInfo?.personImage"
+                         :size="32"
+                         style="margin-right: 8px"></el-avatar>
+              <div v-else class="avatar-back">
+                <span>{{ page.data.userInfo?.username.split?.('')?.slice?.(-2)?.join?.('') }}</span>
+              </div>
+            </template>
+
+          </div>
+
+
+        </template>
+      </div>
+      <div class="nav-title">
+        <span>{{ loadPage.name || _pageName }}</span>
+      </div>
+      <div class="nav-btn">
+        <el-icon style="font-size: 1.2rem" @click="onClickScan">
+          <svg width="20"
+               height="20"
+               viewBox="0 0 20 20"
+               fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path d="M17.5 6.66667V4.16667C17.5 3.24583 16.7542 2.5 15.8333 2.5H13.3333"
+                  stroke="#1D2129"
+                  stroke-width="1.66667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"/>
+            <path d="M6.66667 2.5H4.16667C3.24583 2.5 2.5 3.24583 2.5 4.16667V6.66667"
+                  stroke="#1D2129"
+                  stroke-width="1.66667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"/>
+            <path d="M2.5 13.3333V15.8333C2.5 16.7542 3.24583 17.5 4.16667 17.5H6.66667"
+                  stroke="#1D2129"
+                  stroke-width="1.66667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"/>
+            <path d="M13.3333 17.5H15.8333C16.7542 17.5 17.5 16.7542 17.5 15.8333V13.3333"
+                  stroke="#1D2129"
+                  stroke-width="1.66667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"/>
+            <path d="M2.5 10H17.5"
+                  stroke="#1D2129"
+                  stroke-width="1.66667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"/>
+          </svg>
+        </el-icon>
+      </div>
+
+    </header>
+    <main v-loading="loading && propsValues.navConfig?.loading"
+          :style="{
+            height: `calc(100% - ${mobileTop}px - ${mobileBottom}px - ${loadPage.inner ? '0px' : '50px'} - ${propsValues.navConfig.headerHeight}px)`,
+            backgroundColor: propsValues.navConfig.backgroundColor
+          }">
+      <template v-if="loadPage?.id">
+        <router-view v-if="loadPage.pageType === 2">
+          <KeepAlive>
+            <RenderIndex v-if="loadPage?.cache"
+                         :cacheLevel="1"
+                         ref="previewPage_keepalive_ref"
+                         :key="loadPage?.id"
+                         :loaded="loadedCallback"
+                         :created="onPageCreated"
+                         :id="loadPage?.id" />
+          </KeepAlive>
+          <RenderIndex v-if="!loadPage?.cache"
+                       :cacheLevel="1"
+                       ref="previewPage_ref"
+                       :key="loadPage?.id"
+                       :id="loadPage?.id"
+                       :loaded="loadedCallback"
+                       :created="onPageCreated" />
+        </router-view>
+        <router-view v-else-if="getBuiltinPage(loadPage.id)">
+          <component :is="getBuiltinPage(loadPage.id)"
+                     :app="app"
+                     :loaded="loadedCallback"
+                     :created="onPageCreated"
+                     :goBuiltinPage="goBuiltinPage" />
+        </router-view>
+      </template>
+    </main>
+
+    <footer v-if="!loadPage.inner"
+            :style="{
+              'pointer-events': component.mode === 'Design' ? 'none' : 'auto',
+            }">
+      <MobileMenu @onSelect="onSelectMenu"
+                  :menu="navMenus || []"
+                  :currentActionId="currentNav?.id" />
+      <div :style="{
+        height: mobileBottom + 'px',
+        background: '#fff'
+      }"></div>
+    </footer>
+
+    <MyNavigationDrawer :app="app"
+                        :page="page"
+                        :loadPage="loadPage"
+                        :goBuiltinPage="goBuiltinPage" />
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-mobile-nav-frame {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+
+
+  header {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+
+    .el-icon {
+      color: #1D2129;
+      width: 20px;
+      height: 20px;
+
+      :deep(svg) {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .return-title {
+      display: flex;
+      align-items: center;
+      width: 100px;
+      font-size: 1.2rem;
+      color: #1D2129;
+
+      .user-avatar {
+
+        .el-progress {
+          :deep(.el-progress__text) {
+            left: 4px;
+
+            >* {
+              border: 2px solid #fff;
+            }
+          }
+
+          :deep(.el-progress-circle__track) {
+            stroke: #BEC9DB;
+          }
+
+          :deep(.el-progress-circle__path) {
+            stroke-linecap: butt;
+          }
+        }
+      }
+
+      .avatar-back {
+        width: 32px;
+        height: 32px;
+        background: #1989FA;
+        color: #fff;
+        border-radius: 32px;
+        font-size: 13px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        span {
+          margin-right: 0;
+        }
+      }
+
+      span {
+        margin-right: 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+
+      .close {
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+
+      }
+    }
+
+    .nav-title {
+      flex: 1;
+      text-align: center;
+      color: #1D2129;
+
+    }
+
+    .nav-btn {
+      width: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      font-size: 1.2rem;
+
+      .el-icon {
+        color: #1D2129;
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  main {
+    background-color: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    :deep(.content-wrap) {
+      position: absolute !important;
+      top: 0;
+      left: 0;
+      height: calc(100% - 154px);
+    }
+  }
+
+  footer {
+
+    width: 100%;
+    height: 50px;
+    background-color: inherit;
+    border-top: 1px solid #f0f0f0;
+
+    :deep(.el-menu--horizontal>.el-menu-item) {
+      flex: 1;
+    }
+
+    :deep(.el-menu--horizontal) {
+      >.el-menu-item {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        color: #000;
+
+        >i {
+          margin-right: 0 !important;
+          height: 20px;
+        }
+
+        .iconfont,
+        svg {
+          font-size: 24px;
+        }
+
+
+      }
+    }
+
+    :deep(.el-menu-item) {
+      padding: 0;
+      //   &.is-active{
+      //     background-color: var(--el-menu-hover-bg-color);
+      // color: var(--el-menu-hover-text-color);
+      // ibsp-outline: none;
+      //   }
+    }
+  }
+}
+</style>
+
+<style lang="less">
+#app>#app-preview-wrap {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+
+}
+
+.el-message {
+  top: 50px !important;
+}
+</style>