refactor: simplify TopNavBar and update sharedWork back handling
remove leftAction prop and hardcode left icon type in TopNavBar move home navigation logic out of TopNavBar to parent components update sharedWork.vue to use new TopNavBar API and implement proper back handling
This commit is contained in:
@@ -4,13 +4,10 @@
|
|||||||
<view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
|
<view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
|
||||||
|
|
||||||
<!-- 导航栏内容 -->
|
<!-- 导航栏内容 -->
|
||||||
<view
|
<view class="flex flex-items-center flex-justify-between border-box pl-8 pr-8" :style="navContentStyle">
|
||||||
class="flex flex-items-center flex-justify-between border-box pl-8 pr-8"
|
<!-- 左侧返回按钮 -->
|
||||||
:style="navContentStyle"
|
|
||||||
>
|
|
||||||
<!-- 左侧导航按钮 -->
|
|
||||||
<view class="nav-bar-left flex flex-items-center flex-justify-center" v-if="showBack" @click="handleBack">
|
<view class="nav-bar-left flex flex-items-center flex-justify-center" v-if="showBack" @click="handleBack">
|
||||||
<uni-icons :type="leftIconType" size="20" :color="backIconColor" />
|
<uni-icons type="left" size="20" :color="backIconColor" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 中间标题区域 -->
|
<!-- 中间标题区域 -->
|
||||||
@@ -53,12 +50,6 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
// 左侧按钮行为
|
|
||||||
leftAction: {
|
|
||||||
type: String,
|
|
||||||
default: "back",
|
|
||||||
validator: (value) => ["back", "home"].includes(value),
|
|
||||||
},
|
|
||||||
// 背景颜色
|
// 背景颜色
|
||||||
background: {
|
background: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -154,8 +145,6 @@ const navContentStyle = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const leftIconType = computed(() => (props.leftAction === "home" ? "home-filled" : "left"));
|
|
||||||
|
|
||||||
const hasBackListener = computed(() => {
|
const hasBackListener = computed(() => {
|
||||||
const vnodeProps = instance?.vnode?.props || {};
|
const vnodeProps = instance?.vnode?.props || {};
|
||||||
return Boolean(vnodeProps.onBack);
|
return Boolean(vnodeProps.onBack);
|
||||||
@@ -167,14 +156,6 @@ const handleBack = () => {
|
|||||||
emit("back");
|
emit("back");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.leftAction === "home") {
|
|
||||||
uni.reLaunch({
|
|
||||||
url: "/pages/index/index",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果没有监听back事件,默认执行返回上一页
|
// 如果没有监听back事件,默认执行返回上一页
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta: 1,
|
delta: 1,
|
||||||
|
|||||||
@@ -1,17 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="shared-work-page">
|
<view class="shared-work-page">
|
||||||
<view class="shared-work-nav">
|
<view class="shared-work-nav">
|
||||||
<TopNavBar :title="shareDetail?.templateName || '旅行作品'" background="#fff" title-color="#173a5f"
|
<TopNavBar :title="shareDetail.templateName || '旅行作品'" background="#fff" title-color="#173a5f"
|
||||||
back-icon-color="#173a5f" left-action="home" :align-with-menu-button="true" :z-index="3"
|
back-icon-color="#173a5f" :align-with-menu-button="true" :z-index="3" @back="handleBack" />
|
||||||
@back="openAppHome" />
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="shared-work-scroll">
|
<view class="shared-work-scroll">
|
||||||
<template v-if="shareDetail">
|
<template v-if="shareDetail">
|
||||||
<video v-if="isVideo" class="shared-work-media is-video" :src="videoResultUrl"
|
<video v-if="isVideo" class="shared-work-media is-video" :src="videoResultUrl" :poster="imageResultUrl" controls
|
||||||
:poster="imageResultUrl" controls object-fit="cover" />
|
object-fit="cover" />
|
||||||
<image v-else-if="imageResultUrl" class="shared-work-media" :src="imageResultUrl"
|
<image v-else-if="imageResultUrl" class="shared-work-media" :src="imageResultUrl" mode="aspectFill" />
|
||||||
mode="aspectFill" />
|
|
||||||
|
|
||||||
<view class="shared-work-meta">
|
<view class="shared-work-meta">
|
||||||
<text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text>
|
<text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text>
|
||||||
@@ -107,11 +105,14 @@ const openAigcHome = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const openAppHome = () => {
|
const handleBack = () => {
|
||||||
uni.reLaunch({
|
const pages = getCurrentPages();
|
||||||
url: "/pages/index/index",
|
if (pages.length > 1) {
|
||||||
fail: () => showToast("打开首页失败"),
|
uni.navigateBack();
|
||||||
});
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
openAigcHome();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCreateOwn = async () => {
|
const handleCreateOwn = async () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user