239 行
7.5 KiB
Plaintext
239 行
7.5 KiB
Plaintext
<template>
|
||
<!-- #ifdef APP -->
|
||
<scroll-view style="flex: 1;" enable-back-to-top="true">
|
||
<!-- #endif -->
|
||
<view class="uni-container" :class="isDarkMode ? 'theme-dark' : 'theme-light'">
|
||
<view v-if="!hasLeftWin" class="uni-header-logo">
|
||
<image class="uni-header-image" src="/static/apiIndex.png"></image>
|
||
</view>
|
||
<view v-if="!hasLeftWin" class="uni-text-box">
|
||
<text class="hello-text">uni-app x API接口能力，文档详见：</text>
|
||
<uni-link class="hello-text" href="https://doc.dcloud.net.cn/uni-app-x/api/"
|
||
<!-- #ifndef MP -->
|
||
target="_blank"
|
||
<!-- #endif -->
|
||
>
|
||
https://doc.dcloud.net.cn/uni-app-x/api/
|
||
</uni-link>
|
||
</view>
|
||
<uni-collapse>
|
||
<uni-collapse-item ref="categoryRef" v-for="menuItem in menu" :key="menuItem.id" :title="menuItem.name"
|
||
class="uni-panel" title-wrap-class="component-collapse-title-wrap"
|
||
title-class="component-collapse-title" content-wrap-class="component-collapse-content-wrap"
|
||
arrow-class="component-collapse-arrow">
|
||
<template v-for="childMenuItem in menuItem.items" :key="childMenuItem.id">
|
||
<view v-if="childMenuItem.items.length==0" hover-class="is--active"
|
||
:class="{'uni-navigate-item':childMenuItem.path !== 'set-tab-bar' || windowWidth <= 768}"
|
||
@click="goPage(`/${childMenuItem.path}`)">
|
||
<template v-if="childMenuItem.path !== 'set-tab-bar' || windowWidth <= 768">
|
||
<text class="uni-navigate-text"
|
||
:class="{'left-win-active': leftWinActive === childMenuItem.path && hasLeftWin}">{{ childMenuItem.style["navigationBarTitleText"] }}</text>
|
||
<view class="right_arrow"></view>
|
||
</template>
|
||
</view>
|
||
<uni-collapse v-else style="width: 100%;border-top: 1px solid var(--border-color);">
|
||
<uni-collapse-item :title="childMenuItem.name" class="uni-panel"
|
||
style="margin-bottom: 0;" title-wrap-class="component-collapse-title-wrap component-collapse-sub-title-wrap"
|
||
title-class="component-collapse-title" content-wrap-class="component-collapse-content-wrap"
|
||
arrow-class="component-collapse-arrow">
|
||
<view class="uni-navigate-item component-collapse-sub-navigate-item" hover-class="is--active"
|
||
v-for="grandChildMenuItem in childMenuItem.items" :key="grandChildMenuItem.path"
|
||
@click="goPage(`/${grandChildMenuItem.path}`)">
|
||
<text class="uni-navigate-text" :class="{
|
||
'left-win-active':
|
||
leftWinActive === grandChildMenuItem.path && hasLeftWin,
|
||
}">{{ grandChildMenuItem.style["navigationBarTitleText"] }}</text>
|
||
<view class="right_arrow"></view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</template>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
<!-- #ifdef MP || WEB -->
|
||
<view v-if="!hasLeftWin" ref="popRef" @click="hidePop()" class="popup" @touchmove.prevent="stopPropagation">
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP || WEB -->
|
||
<view v-if="!hasLeftWin" ref="popRef" @click="hidePop()" class="popup">
|
||
<!-- #endif -->
|
||
<view style="width: 90%; background-color: white" @click.stop="stopClickPop">
|
||
<api-set-tabbar></api-set-tabbar>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef APP -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
defineOptions({
|
||
styleIsolation: 'app'
|
||
})
|
||
|
||
const activeIndex = inject<Ref<number>>('tabBarCurrentIndex', ref(0))
|
||
|
||
const instance = getCurrentInstance()!.proxy!
|
||
|
||
import { generateMenu, MenuItem } from './generateMenu.uts'
|
||
const menuData = generateMenu('pages/API')
|
||
import { state } from '@/store/index.uts'
|
||
|
||
// Template refs
|
||
const popRef = ref<UniElement | null>(null)
|
||
const categoryRef = ref<ComponentPublicInstance[] | null>(null)
|
||
|
||
const menu = ref(menuData as MenuItem[])
|
||
|
||
const hasLeftWin = computed((): boolean => {
|
||
return !state.noMatchLeftWindow
|
||
})
|
||
|
||
const leftWinActive = computed((): string => {
|
||
return state.leftWinActive.slice(1)
|
||
})
|
||
|
||
const windowWidth = computed((): number => {
|
||
return uni.getWindowInfo().windowWidth
|
||
})
|
||
|
||
const isDarkMode = computed((): boolean => {
|
||
return state.isDarkMode
|
||
})
|
||
|
||
const netless = computed((): boolean => {
|
||
return state.netless
|
||
})
|
||
|
||
function showPop() {
|
||
const popElement = popRef.value
|
||
if (popElement != null) {
|
||
popElement.style.setProperty("display", "flex")
|
||
}
|
||
}
|
||
|
||
function goPage(url : string) {
|
||
if (url == '/set-tab-bar') {
|
||
showPop()
|
||
}else {
|
||
if (hasLeftWin.value) {
|
||
uni.reLaunch({ url })
|
||
} else {
|
||
uni.navigateTo({ url })
|
||
}
|
||
}
|
||
}
|
||
|
||
function hidePop() {
|
||
const popElement = popRef.value
|
||
if (popElement != null) {
|
||
popElement.style.setProperty("display", "none")
|
||
}
|
||
}
|
||
|
||
function stopClickPop(e : PointerEvent) {
|
||
e.stopPropagation() //点击到pop的非灰色区域，拦截点击事件
|
||
}
|
||
|
||
function stopPropagation() {
|
||
|
||
}
|
||
|
||
// #ifdef APP-HARMONY
|
||
watch(netless, (netlessValue) => {
|
||
if (netlessValue) {
|
||
menu.value = menu.value.filter(item => {
|
||
return !['unicloud'].includes(item.id)
|
||
})
|
||
}
|
||
}, { immediate: true })
|
||
// #endif
|
||
|
||
// #ifdef WEB
|
||
// Note: This watch is for web platform routing, keeping minimal getInstance usage for $route and $nextTick
|
||
watch(() => (instance as any).$route, (newRoute: any) => {
|
||
if (newRoute.matched.length) {
|
||
const activeCategoryIndex = menu.value.findIndex(menuItem => menuItem?.items.some(item => leftWinActive.value !== "" && leftWinActive.value === item?.path))
|
||
if (activeCategoryIndex > -1) {
|
||
nextTick(() => {
|
||
const categoryRefs = categoryRef.value
|
||
if (categoryRefs != null && categoryRefs[activeCategoryIndex] != null) {
|
||
categoryRefs[activeCategoryIndex].$callMethod('openCollapse', true)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}, { immediate: true })
|
||
// #endif
|
||
|
||
// #ifdef APP-ANDROID
|
||
const testOpenDialogPage = () => {
|
||
uni.openDialogPage({
|
||
url: '/pages/API/dialog-page/dialog-5'
|
||
});
|
||
}
|
||
|
||
const testCloseDialogPage = () => {
|
||
uni.closeDialogPage();
|
||
}
|
||
|
||
defineExpose({
|
||
testOpenDialogPage,
|
||
testCloseDialogPage
|
||
})
|
||
// #endif
|
||
</script>
|
||
|
||
<style>
|
||
.popup {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: none;
|
||
background-color: rgba(16, 16, 16, 0.5);
|
||
}
|
||
|
||
.right_arrow {
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-left: 12px;
|
||
transform: rotate(-45deg);
|
||
border-right-width: 1px;
|
||
border-right-style: solid;
|
||
border-right-color: var(--arrow-color, #999999);
|
||
border-bottom-width: 1px;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: var(--arrow-color, #999999);
|
||
}
|
||
|
||
.component-collapse-title-wrap {
|
||
background-color: var(--list-background-color, #ffffff);
|
||
}
|
||
|
||
.component-collapse-sub-title-wrap {
|
||
padding-left: 16px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.component-collapse-title {
|
||
color: var(--text-color, #333333);
|
||
}
|
||
|
||
.component-collapse-content-wrap {
|
||
background-color: var(--list-background-color, #ffffff);
|
||
}
|
||
|
||
.component-collapse-arrow {
|
||
border-right-color: var(--arrow-color, #999999);
|
||
border-bottom-color: var(--arrow-color, #999999);
|
||
}
|
||
|
||
.component-collapse-sub-navigate-item {
|
||
padding-right: 20px;
|
||
}
|
||
</style>
|