Commit f2171a36 by Hantao

feat: 在多个页面添加导航栏组件

- 创建可复用的导航栏组件 navBar.vue
- 在 second、coupon、badge、third 等页面引入导航栏
- 提供统一的返回按钮功能,提升用户体验
parent b53a38f8
<script setup>
const handleBack = () => {
uni.navigateBack();
};
</script>
<template>
<view class="navbar">
<view class="navbar-left" @click="handleBack">
<up-icon name="arrow-left" size="40rpx" color="#2D4B5D"></up-icon>
</view>
</view>
</template>
<style lang="scss" scoped>
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 176rpx;
z-index: 100;
display: flex;
align-items: flex-end;
padding-bottom: 20rpx;
box-sizing: border-box;
}
.navbar-left {
padding-left: 32rpx;
display: flex;
align-items: center;
}
</style>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import navBar from '@/components/navBar.vue';
const ASSETS = Object.freeze({ const ASSETS = Object.freeze({
blank: '/static/badge/blank.webp', blank: '/static/badge/blank.webp',
...@@ -65,6 +66,7 @@ const navToContinuePage = () => { ...@@ -65,6 +66,7 @@ const navToContinuePage = () => {
<template> <template>
<view class="container"> <view class="container">
<navBar />
<view class="title-box"> <view class="title-box">
<view class="title-content"> <view class="title-content">
<view class="title">我的徽章</view> <view class="title">我的徽章</view>
......
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import navBar from '@/components/navBar.vue';
const ASSETS = Object.freeze({ const ASSETS = Object.freeze({
bg: '/static/coupon/bg.webp', bg: '/static/coupon/bg.webp',
...@@ -100,6 +101,7 @@ const toggleExpand = (coupon) => { ...@@ -100,6 +101,7 @@ const toggleExpand = (coupon) => {
<template> <template>
<view class="container"> <view class="container">
<navBar />
<view class="title">我的优惠券</view> <view class="title">我的优惠券</view>
<scroll-view scroll-y class="coupon-list"> <scroll-view scroll-y class="coupon-list">
<view <view
......
<script setup> <script setup>
import navBar from '@/components/navBar.vue';
const ASSETS = Object.freeze({ const ASSETS = Object.freeze({
bg: '/static/second/bg.webp', bg: '/static/second/bg.webp',
info: '/static/second/info.webp', info: '/static/second/info.webp',
...@@ -16,6 +18,7 @@ const handleNext = () => { ...@@ -16,6 +18,7 @@ const handleNext = () => {
<template> <template>
<view class="container"> <view class="container">
<navBar />
<!-- 主体内容 --> <!-- 主体内容 -->
<view class="main-content"> <view class="main-content">
<!-- 背景 --> <!-- 背景 -->
......
<script setup> <script setup>
import navBar from '@/components/navBar.vue';
const ASSETS = Object.freeze({ const ASSETS = Object.freeze({
title: '/static/second/part1/title.webp', title: '/static/second/part1/title.webp',
center: '/static/second/part1/center.webp', center: '/static/second/part1/center.webp',
...@@ -12,6 +14,7 @@ const ASSETS = Object.freeze({ ...@@ -12,6 +14,7 @@ const ASSETS = Object.freeze({
<template> <template>
<view class="part1-container"> <view class="part1-container">
<navBar />
<!-- 顶部标题 --> <!-- 顶部标题 -->
<view class="header-section"> <view class="header-section">
<image class="title-img" :src="ASSETS.title" mode="widthFix" /> <image class="title-img" :src="ASSETS.title" mode="widthFix" />
......
<script setup> <script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'; import { ref, onMounted, getCurrentInstance, computed } from 'vue';
import { useDrag } from './hooks/useDrag'; import { useDrag } from './hooks/useDrag';
import navBar from '@/components/navBar.vue';
const ASSETS = Object.freeze({ const ASSETS = Object.freeze({
title: '/static/second/part2/title.webp', title: '/static/second/part2/title.webp',
...@@ -140,6 +141,7 @@ const getGhostIcon = () => { ...@@ -140,6 +141,7 @@ const getGhostIcon = () => {
<template> <template>
<view class="part2-container"> <view class="part2-container">
<navBar />
<!-- 拖拽时的镜像 --> <!-- 拖拽时的镜像 -->
<view <view
v-if="isDragging" v-if="isDragging"
......
<script setup> <script setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue'; import { ref, computed, onMounted, getCurrentInstance } from 'vue';
import { useDrag } from '../hooks/useDrag'; import { useDrag } from '../hooks/useDrag';
import navBar from '@/components/navBar.vue';
const ASSETS = Object.freeze({ const ASSETS = Object.freeze({
box: '/static/second/part4/index/box.webp', box: '/static/second/part4/index/box.webp',
...@@ -179,6 +180,7 @@ onMounted(() => { ...@@ -179,6 +180,7 @@ onMounted(() => {
<template> <template>
<view class="part4-container"> <view class="part4-container">
<navBar />
<!-- 拖拽镜像 --> <!-- 拖拽镜像 -->
<view v-if="isDragging" class="drag-ghost" :style="{ left: `${dragPosition.x}px`, top: `${dragPosition.y}px` }"> <view v-if="isDragging" class="drag-ghost" :style="{ left: `${dragPosition.x}px`, top: `${dragPosition.y}px` }">
<image :src="getGhostIcon()" mode="scaleToFill" :class="['ghost-icon', `ghost-${getDraggedType()}`]" /> <image :src="getGhostIcon()" mode="scaleToFill" :class="['ghost-icon', `ghost-${getDraggedType()}`]" />
......
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import navBar from '@/components/navBar.vue';
import Beaker from './components/beaker.vue'; import Beaker from './components/beaker.vue';
import TabsInstructionsPanel from './components/TabsInstructionsPanel.vue'; import TabsInstructionsPanel from './components/TabsInstructionsPanel.vue';
import BottomActionBar from './components/BottomActionBar.vue'; import BottomActionBar from './components/BottomActionBar.vue';
...@@ -61,6 +62,7 @@ const closeCompletion = () => { ...@@ -61,6 +62,7 @@ const closeCompletion = () => {
<template> <template>
<view class="container"> <view class="container">
<navBar />
<image class="bg" :src="assets.bg" mode="aspectFill" /> <image class="bg" :src="assets.bg" mode="aspectFill" />
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }"> <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment