mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 优化多处组件样式与页面逻辑
1. 重构评论弹窗圆角样式与玻璃弹窗内部样式 2. 更新首页通知入口文案与样式 3. 调整tabbar图标尺寸与样式 4. 优化回到顶部组件布局 5. 重构公告列表页与详情页逻辑,添加加载延迟与数据状态管理
This commit is contained in:
@@ -265,7 +265,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<uh-glass-popup v-model="isShow" position="bottom" custom-class="!border rounded-lt-2xl rounded-rt-2xl"
|
<uh-glass-popup v-model="isShow" position="bottom" custom-class="!border rounded-2xl"
|
||||||
:z-index="100" @close="handleOnChange(false)">
|
:z-index="100" @close="handleOnChange(false)">
|
||||||
<view class="box-border p-4">
|
<view class="box-border p-4">
|
||||||
<view
|
<view
|
||||||
|
|||||||
@@ -50,8 +50,7 @@
|
|||||||
const emit = defineEmits<IEmits>()
|
const emit = defineEmits<IEmits>()
|
||||||
|
|
||||||
const panelStyle = computed(() => {
|
const panelStyle = computed(() => {
|
||||||
const radiusStyle = props.radius ? `border-radius:${props.radius};` : ''
|
return props.customStyle
|
||||||
return `${radiusStyle}${props.customStyle}`
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const panelClass = computed(() =>{
|
const panelClass = computed(() =>{
|
||||||
@@ -96,4 +95,10 @@
|
|||||||
background-color: rgb(255 255 255 / 88%);
|
background-color: rgb(255 255 255 / 88%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.wd-popup--bottom){
|
||||||
|
left:24rpx;
|
||||||
|
bottom:24rpx;
|
||||||
|
right:24rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -65,11 +65,9 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 右侧更多入口 -->
|
<!-- 右侧更多入口 -->
|
||||||
<view class="flex shrink-0 items-center gap-0.5 py-2 pl-2" @click="handleGoList">
|
<view class="box-border flex shrink-0 items-center gap-0.5 py-2 pl-2 text-gray-400" @click="handleGoList">
|
||||||
<text class="text-[22rpx] text-[#bbb]">
|
<text class="text-xs"> 全部 </text>
|
||||||
更多
|
<wd-icon name="arrow-right" size="26rpx" />
|
||||||
</text>
|
|
||||||
<wd-icon name="arrow-right" size="12px" color="#bbb" />
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -22,9 +22,11 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view v-if="visible"
|
<view v-if="visible" class="fixed bottom-22 right-3 z-50 pb-safe">
|
||||||
class="uh-global-card-glass border fixed bottom-24 right-4 z-50 h-10 w-10 flex items-center justify-center rounded-full text-primary"
|
<view
|
||||||
|
class="uh-global-card-glass border h-11 w-11 flex items-center justify-center rounded-full text-primary"
|
||||||
:class="props.customClass" @click="handleScrollTop">
|
:class="props.customClass" @click="handleScrollTop">
|
||||||
<wd-icon name="arrow-up" size="20px" />
|
<wd-icon name="arrow-up" size="20px" />
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,15 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
/**
|
|
||||||
* 公告详情页(plugin-uni-halo 通知公告,2026-09-03 客户端接入)
|
|
||||||
* 公开 GET /notices/{name} 返回完整 Notice extension(metadata+spec,spec 内嵌
|
|
||||||
* typeDisplayName/typeColor);正文 content 为富文本 HTML,mp-html 渲染。
|
|
||||||
* 不存在/删除中返回 404 → 空态提示。UIUX 见 .docs/notice-module-client-design.md
|
|
||||||
*/
|
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import { onLoad } from '@dcloudio/uni-app'
|
import { onLoad } from '@dcloudio/uni-app'
|
||||||
import { getNoticeDetail } from '@/api/uni-halo'
|
import { getNoticeDetail } from '@/api/uni-halo'
|
||||||
import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
|
import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
|
||||||
import { checkImageUrl, checkIsUrl } from '@/utils/url'
|
import { checkImageUrl, checkIsUrl } from '@/utils/url'
|
||||||
|
import { sleep } from '@/utils/common'
|
||||||
import { markdownConfig } from '@/config/markdown'
|
import { markdownConfig } from '@/config/markdown'
|
||||||
import type { INoticeDetail } from '@/api/types/uni-halo'
|
import type { INoticeDetail } from '@/api/types/uni-halo'
|
||||||
|
|
||||||
@@ -74,6 +69,7 @@
|
|||||||
try {
|
try {
|
||||||
const res = await getNoticeDetail(name.value)
|
const res = await getNoticeDetail(name.value)
|
||||||
detail.value = res.data || null
|
detail.value = res.data || null
|
||||||
|
await sleep(600)
|
||||||
updateLoadingStatus(
|
updateLoadingStatus(
|
||||||
detail.value?.spec ? DataLoadingStatusEnum.Success : DataLoadingStatusEnum.Empty,
|
detail.value?.spec ? DataLoadingStatusEnum.Success : DataLoadingStatusEnum.Empty,
|
||||||
)
|
)
|
||||||
@@ -97,7 +93,7 @@
|
|||||||
<uh-navbar default-title="公告详情" title-color="text-gray-900" />
|
<uh-navbar default-title="公告详情" title-color="text-gray-900" />
|
||||||
|
|
||||||
<!-- 加载/错误/空态(状态机) -->
|
<!-- 加载/错误/空态(状态机) -->
|
||||||
<uh-data-loading v-if="loadingStatus !== 'success'" :loading-status="loadingStatus" min-height="55vh"
|
<uh-data-loading v-if="loadingStatus !== 'success'" :loading-status="loadingStatus" min-height="75vh"
|
||||||
error-text="公告加载失败" empty-text="公告不存在或已下线" empty-sub-text="" @refresh="loadDetail" />
|
error-text="公告加载失败" empty-text="公告不存在或已下线" empty-sub-text="" @refresh="loadDetail" />
|
||||||
|
|
||||||
<!-- 正文 -->
|
<!-- 正文 -->
|
||||||
|
|||||||
@@ -1,31 +1,34 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
/**
|
|
||||||
* 公告中心·列表页(plugin-uni-halo 通知公告,2026-09-03 客户端接入)
|
|
||||||
* 公开接口 GET /notices 仅分页(脱敏不含 content);公告量小,页面一次拉取
|
|
||||||
* size=100 后本地做「类型筛选 + 排序(最新/最早/按类型分组)」,触底续拉下一页。
|
|
||||||
* UIUX 见 .docs/notice-module-client-design.md
|
|
||||||
*/
|
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||||||
import { getNotices } from '@/api/uni-halo'
|
import { getNotices } from '@/api/uni-halo'
|
||||||
|
import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
|
||||||
|
import { checkImageUrl } from '@/utils/url'
|
||||||
|
import { sleep } from '@/utils/common'
|
||||||
import type { INoticeListVo } from '@/api/types/uni-halo'
|
import type { INoticeListVo } from '@/api/types/uni-halo'
|
||||||
|
|
||||||
definePage({
|
definePage({
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '公告中心',
|
navigationBarTitleText: '公告中心',
|
||||||
|
navigationStyle: 'custom',
|
||||||
enablePullDownRefresh: true,
|
enablePullDownRefresh: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const PAGE_SIZE = 100
|
const PAGE_SIZE = 100
|
||||||
|
|
||||||
const loading = ref(false)
|
/** 状态机:首屏/下拉刷新 loading、empty、error;触底加载失败仅提示,不切整页错误态 */
|
||||||
|
const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
|
||||||
const allItems = ref<INoticeListVo[]>([])
|
const allItems = ref<INoticeListVo[]>([])
|
||||||
const page = ref(1)
|
const page = ref(1)
|
||||||
const total = ref(0)
|
const total = ref(0)
|
||||||
const activeType = ref('')
|
const activeType = ref('')
|
||||||
type SortKey = 'latest' | 'earliest' | 'group'
|
type SortKey = 'latest' | 'earliest' | 'group'
|
||||||
const sortKey = ref<SortKey>('latest')
|
const sortKey = ref<SortKey>('latest')
|
||||||
|
/** 请求并发锁(下拉刷新与触底加载互斥) */
|
||||||
|
const fetching = ref(false)
|
||||||
|
/** 触底加载更多底部文案(加载中/上拉加载更多/没有更多/失败提示) */
|
||||||
|
const loadMoreText = ref('')
|
||||||
|
|
||||||
const SORT_OPTIONS : Array<{ id : SortKey, label : string }> = [
|
const SORT_OPTIONS : Array<{ id : SortKey, label : string }> = [
|
||||||
{ id: 'latest', label: '最新在前' },
|
{ id: 'latest', label: '最新在前' },
|
||||||
@@ -58,7 +61,7 @@ function formatDate(value?: string): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function timeOf(item : INoticeListVo) : number {
|
function timeOf(item : INoticeListVo) : number {
|
||||||
const time = item.publishTime ? new Date(item.publishTime).getTime() : NaN
|
const time = item.publishTime ? new Date(item.publishTime).getTime() : Number.NaN
|
||||||
return Number.isNaN(time) ? 0 : time
|
return Number.isNaN(time) ? 0 : time
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -96,11 +99,18 @@ const displayList = computed(() => {
|
|||||||
return list
|
return list
|
||||||
})
|
})
|
||||||
|
|
||||||
/* ---------------- 数据加载 ---------------- */
|
/* ---------------- 数据加载(状态机:loading/empty/error/success) ---------------- */
|
||||||
async function loadNotices(reset : boolean) {
|
async function loadNotices(reset : boolean) {
|
||||||
if (loading.value)
|
if (fetching.value)
|
||||||
return
|
return
|
||||||
loading.value = true
|
fetching.value = true
|
||||||
|
if (reset) {
|
||||||
|
updateLoadingStatus(DataLoadingStatusEnum.Loading)
|
||||||
|
loadMoreText.value = ''
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
loadMoreText.value = '加载中...'
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
const target = reset ? 1 : page.value + 1
|
const target = reset ? 1 : page.value + 1
|
||||||
const res = await getNotices({ page: target, size: PAGE_SIZE })
|
const res = await getNotices({ page: target, size: PAGE_SIZE })
|
||||||
@@ -115,19 +125,32 @@ async function loadNotices(reset: boolean) {
|
|||||||
page.value = target
|
page.value = target
|
||||||
}
|
}
|
||||||
total.value = body?.total ?? allItems.value.length
|
total.value = body?.total ?? allItems.value.length
|
||||||
|
loadMoreText.value = allItems.value.length >= total.value ? '呜呜,没有更多数据啦~' : '上拉加载更多'
|
||||||
|
await sleep(600)
|
||||||
|
updateLoadingStatus(
|
||||||
|
allItems.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success,
|
||||||
|
)
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error('公告列表加载失败', err)
|
console.error('公告列表加载失败', err)
|
||||||
uni.showToast({ icon: 'none', title: '公告加载失败' })
|
if (reset) {
|
||||||
|
updateLoadingStatus(DataLoadingStatusEnum.Error)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// 触底加载失败:保留已加载列表,仅底部提示,避免整页切错误态
|
||||||
|
loadMoreText.value = '加载失败,请下拉刷新!'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
finally {
|
finally {
|
||||||
loading.value = false
|
setTimeout(() => {
|
||||||
|
fetching.value = false
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}, 500)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadMore() {
|
function loadMore() {
|
||||||
if (loading.value || allItems.value.length >= total.value)
|
if (fetching.value || allItems.value.length >= total.value) { return }
|
||||||
return
|
|
||||||
loadNotices(false)
|
loadNotices(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -139,123 +162,92 @@ onReachBottom(() => {
|
|||||||
loadMore()
|
loadMore()
|
||||||
})
|
})
|
||||||
|
|
||||||
onPullDownRefresh(async () => {
|
onPullDownRefresh(() => {
|
||||||
await loadNotices(true)
|
if (fetching.value) {
|
||||||
uni.stopPullDownRefresh()
|
uni.stopPullDownRefresh()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
loadNotices(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
/* ---------------- 跳转 ---------------- */
|
/* ---------------- 跳转 ---------------- */
|
||||||
function handleToDetail(item : INoticeListVo) {
|
function handleToDetail(item : INoticeListVo) {
|
||||||
if (!item.name)
|
if (!item.name) { return }
|
||||||
return
|
|
||||||
uni.navigateTo({ url: `/pages-blog/notice/detail?name=${item.name}` })
|
uni.navigateTo({ url: `/pages-blog/notice/detail?name=${item.name}` })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="notice-page min-h-screen w-screen bg-[#f7f8fa]">
|
<view class="app-page min-h-screen w-screen flex flex-col bg-page">
|
||||||
<!-- 类型筛选(横滑 chips) -->
|
<!-- 自定义导航 -->
|
||||||
<scroll-view scroll-x class="type-bar sticky top-0 z-10 w-full bg-white px-3 py-2" :show-scrollbar="false">
|
<uh-navbar default-title="公告中心" title-color="text-gray-900" />
|
||||||
<view class="flex items-center gap-2 whitespace-nowrap">
|
|
||||||
<view
|
<wd-sticky>
|
||||||
class="rounded-full px-4 py-1.5 text-[24rpx]"
|
<scroll-view scroll-x class="w-full whitespace-nowrap" :show-scrollbar="false">
|
||||||
:class="activeType === '' ? 'bg-[#f83856] text-white' : 'bg-[#f0f0f0] text-[#666]'"
|
<view class="flex gap-2 px-3 pb-1 pt-2">
|
||||||
@click="activeType = ''"
|
<view class="uh-global-card-glass uh-shadow-xs inline-block border rounded-2xl px-4 py-1.5 text-sm"
|
||||||
>
|
:class="activeType === '' ? 'bg-primary font-bold' : 'text-gray-500'" @click="activeType = ''">
|
||||||
全部
|
全部
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view v-for="(type) in typeOptions" :key="type.typeName || '__none__'"
|
||||||
v-for="type in typeOptions"
|
class="uh-global-card-glass uh-shadow-xs inline-flex items-center gap-1 border rounded-2xl px-4 py-1.5 text-sm"
|
||||||
:key="type.typeName || '__none__'"
|
:class="activeType === type.typeName ? 'bg-primary font-bold' : 'text-gray-500'"
|
||||||
class="flex items-center gap-1 rounded-full px-4 py-1.5 text-[24rpx]"
|
@click="activeType = activeType === type.typeName ? '' : type.typeName">
|
||||||
:class="activeType === type.typeName ? 'bg-[#f83856] text-white' : 'bg-[#f0f0f0] text-[#666]'"
|
<view v-if="type.typeColor" class="shrink-0 h-2 w-2 rounded-full"
|
||||||
@click="activeType = activeType === type.typeName ? '' : type.typeName"
|
:style="{ backgroundColor: type.typeColor }" />
|
||||||
>
|
<text class="shrink-0">{{ type.typeDisplayName }}</text>
|
||||||
<view v-if="type.typeColor" class="h-2 w-2 rounded-full" :style="{ backgroundColor: type.typeColor }" />
|
|
||||||
<text>{{ type.typeDisplayName }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
</wd-sticky>
|
||||||
|
|
||||||
<!-- 排序 -->
|
<view class="flex items-center gap-2 px-3 py-2">
|
||||||
<view class="sort-bar flex items-center gap-2 px-4 py-2">
|
<view v-for="opt in SORT_OPTIONS" :key="opt.id"
|
||||||
<view
|
class="uh-global-card-glass uh-shadow-xs inline-block border rounded-2xl px-4 py-1 text-xs"
|
||||||
v-for="opt in SORT_OPTIONS"
|
:class="sortKey === opt.id ? 'bg-primary font-bold' : 'text-gray-500'" @click="sortKey = opt.id">
|
||||||
:key="opt.id"
|
|
||||||
class="rounded-full px-3 py-1 text-[22rpx]"
|
|
||||||
:class="sortKey === opt.id ? 'bg-[#fdeef1] text-[#f83856]' : 'text-[#999]'"
|
|
||||||
@click="sortKey = opt.id"
|
|
||||||
>
|
|
||||||
{{ opt.label }}
|
{{ opt.label }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 列表 -->
|
<uh-data-loading v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
|
||||||
<view v-if="displayList.length > 0" class="px-3 pb-6">
|
empty-text="暂无公告" empty-sub-text="" @refresh="loadNotices(true)" />
|
||||||
<view
|
|
||||||
v-for="item in displayList"
|
<view v-else class="box-border pt-4">
|
||||||
:key="item.name"
|
<template v-if="displayList.length > 0">
|
||||||
class="mb-3 flex overflow-hidden rounded-xl bg-white p-4"
|
<view class="box-border flex flex-col gap-3 px-3">
|
||||||
@click="handleToDetail(item)"
|
<view v-for="item in displayList" :key="item.name"
|
||||||
>
|
class="box-border uh-global-card-glass uh-shadow-xs flex overflow-hidden rounded-xl p-3"
|
||||||
<image
|
@click="handleToDetail(item)">
|
||||||
v-if="item.cover"
|
<image v-if="item.cover" class="mr-3 h-18 w-24 shrink-0 rounded-lg"
|
||||||
class="mr-3 h-[140rpx] w-[180rpx] shrink-0 rounded-lg"
|
:src="checkImageUrl(item.cover)" mode="aspectFill" />
|
||||||
:src="item.cover"
|
<view class="min-w-0 flex-1 flex flex-col justify-between">
|
||||||
mode="aspectFill"
|
<view class="truncate text-sm text-gray-900 font-bold leading-snug">
|
||||||
/>
|
|
||||||
<view class="min-w-0 flex-1">
|
|
||||||
<view class="text-[28rpx] font-bold leading-snug text-[#333] line-clamp-2">
|
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</view>
|
</view>
|
||||||
<view v-if="item.summary" class="mt-1 text-[24rpx] leading-relaxed text-[#888] line-clamp-2">
|
<view v-if="item.summary" class="truncate mt-1 text-[24rpx] text-gray-500 leading-relaxed">
|
||||||
{{ item.summary }}
|
{{ item.summary }}
|
||||||
</view>
|
</view>
|
||||||
<view class="mt-2 flex items-center gap-2">
|
<view class="mt-2 flex items-center gap-2">
|
||||||
<view
|
<view v-if="item.typeDisplayName" class="rounded px-1.5 py-0.5 text-[20rpx]" :style="{
|
||||||
v-if="item.typeDisplayName"
|
|
||||||
class="rounded px-1.5 py-0.5 text-[20rpx]"
|
|
||||||
:style="{
|
|
||||||
color: item.typeColor || '#f83856',
|
color: item.typeColor || '#f83856',
|
||||||
backgroundColor: item.typeColor ? `${item.typeColor}1a` : '#fdeef1',
|
backgroundColor: item.typeColor ? `${item.typeColor}1a` : '#fdeef1',
|
||||||
}"
|
}">
|
||||||
>
|
|
||||||
{{ item.typeDisplayName }}
|
{{ item.typeDisplayName }}
|
||||||
</view>
|
</view>
|
||||||
<text class="text-[22rpx] text-[#bbb]">
|
<text class="text-[22rpx] text-gray-500">
|
||||||
{{ formatDate(item.publishTime) }}
|
{{ formatDate(item.publishTime) }}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="load-text py-5 text-center text-[24rpx] text-gray-500">
|
||||||
<view v-if="loading" class="py-6 text-center text-[24rpx] text-[#bbb]">
|
{{ loadMoreText }}
|
||||||
加载中...
|
|
||||||
</view>
|
|
||||||
<view v-else-if="allItems.length >= total.value" class="py-6 text-center text-[24rpx] text-[#bbb]">
|
|
||||||
没有更多了
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 空态 -->
|
|
||||||
<view v-else class="flex flex-col items-center justify-center py-32">
|
|
||||||
<text class="text-[40rpx]">📢</text>
|
|
||||||
<text class="mt-4 text-[26rpx] text-[#999]">
|
|
||||||
{{ loading ? '加载中...' : '暂无公告' }}
|
|
||||||
</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<!-- 类型筛选后无匹配 -->
|
||||||
.type-bar {
|
<uh-data-loading v-else :loading-status="DataLoadingStatusEnum.Empty"></uh-data-loading>
|
||||||
white-space: nowrap;
|
</view>
|
||||||
}
|
</view>
|
||||||
|
</template>
|
||||||
.line-clamp-2 {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -29,7 +29,7 @@ function isActive(index: number) {
|
|||||||
<!-- 如:<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
|
<!-- 如:<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
|
||||||
<!-- 如:<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
|
<!-- 如:<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
|
||||||
<!-- 如:<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
|
<!-- 如:<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
|
||||||
<text class="text-primary"><wd-icon :name="item.icon" size="52rpx" /></text>
|
<text class="text-primary"><wd-icon :name="item.icon" size="50rpx" /></text>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
|
<template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
|
||||||
<view class="flex-1" :class="[item.icon, isBulge ? 'text-80px' : 'text-20px']" />
|
<view class="flex-1" :class="[item.icon, isBulge ? 'text-80px' : 'text-20px']" />
|
||||||
|
|||||||
@@ -101,18 +101,18 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view v-if="customTabbarEnable" class="h-56px pb-safe bg-page">
|
<view v-if="customTabbarEnable" class="h-56px pb-safe bg-page">
|
||||||
<view class="border-and-fixed w-full px-2">
|
<view class="border-and-fixed w-full px-3">
|
||||||
<view class="flex box-border w-full items-center justify-between gap-x-2" @touchmove.stop.prevent>
|
<view class="flex box-border w-full items-center justify-between gap-x-2" @touchmove.stop.prevent>
|
||||||
<view
|
<view
|
||||||
class="flex-1 box-border uh-global-card-glass bg-white/75 border rounded-full p-1 h-52px flex items-center gap-x-1">
|
class="flex-1 box-border uh-global-card-glass bg-white/75 border rounded-full p-1 h-50px flex items-center gap-x-1">
|
||||||
<view v-for="(item, index) in noRightTabbarList" :key="index" class="text-gray-900 flex-1"
|
<view v-for="(item, index) in noRightTabbarList" :key="index" class="text-gray-900 flex-1"
|
||||||
:style="{ color: getColorByIndex(index) }" @click="handleClick(index)">
|
:style="{ color: getColorByIndex(index) }" @click="handleClick(index)">
|
||||||
<TabbarItem :item="item" :index="index" class="relative"
|
<TabbarItem :item="item" :index="index" class="relative"
|
||||||
:class="[isActive(index)?'uh-global-card-glass bg-white/30 border':'']" />
|
:class="[isActive(index)?'uh-global-card-glass bg-white/0 border':'']" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="rightButton.item"
|
<view v-if="rightButton.item"
|
||||||
class="shrink-0 uh-global-card-glass border bg-white/65 rounded-full h-52px w-52px p-1 flex items-center justify-center"
|
class="shrink-0 uh-global-card-glass border bg-white/65 rounded-full h-50px w-50px p-1 flex items-center justify-center"
|
||||||
@click="handleClickRightButton()">
|
@click="handleClickRightButton()">
|
||||||
<TabbarItem :item="rightButton.item" :index="rightButton.index" :is-bulge="true" />
|
<TabbarItem :item="rightButton.item" :index="rightButton.index" :is-bulge="true" />
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
Reference in New Issue
Block a user