125 lines
2.4 KiB
Vue
125 lines
2.4 KiB
Vue
<script setup>
|
|
import { computed } from "vue"
|
|
import { router } from "@@/index"
|
|
import { useTabbarStore } from "@@/stores/tabbar"
|
|
|
|
const tabbarStore = useTabbarStore()
|
|
const emit = defineEmits(["rightClick"])
|
|
|
|
const rightMap = {
|
|
"setting": "icon-setting",
|
|
}
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "标题",
|
|
},
|
|
titleColor: {
|
|
type: String,
|
|
default: "#333",
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: "white",
|
|
},
|
|
showLeft: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
rightIcon: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
})
|
|
|
|
const isHistiry = computed(() => {
|
|
return router.hasHistory()
|
|
})
|
|
|
|
const isDashboard = computed(() => {
|
|
return tabbarStore.currentRoute == "pages/root/dashboard"
|
|
})
|
|
|
|
function doBackClick() {
|
|
router.back()
|
|
}
|
|
|
|
function doToDashboard() {
|
|
tabbarStore.setRootActiveIndex(0)
|
|
router.jump("/pages/root/dashboard", {}, 3)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="navbar" :style="{ backgroundColor: bgColor, height: '44px' }">
|
|
<view class="navbar_left">
|
|
<view v-if="isHistiry" class="sicon-back icon" @tap="doBackClick" />
|
|
<view v-if="isHistiry" class="navbar_left_line" />
|
|
<view v-if="!isDashboard" class="sicon-home icon" @tap="doToDashboard"></view>
|
|
</view>
|
|
<view class="navbar_title" :style="{ color: titleColor }">{{ props.title }}</view>
|
|
<view v-if="props.rightIcon" class="navbar_right" @tap="emit('rightClick')">
|
|
<text :class="['iconfont', rightMap[props.rightIcon]]" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar {
|
|
position: relative;
|
|
height: 56rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&_left {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 68rpx;
|
|
border-radius: 34rpx;
|
|
background: #fff;
|
|
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
|
|
|
&_line {
|
|
width: 1rpx;
|
|
height: 25rpx;
|
|
background: #999;
|
|
}
|
|
|
|
&>.icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 36rpx;
|
|
width: 68rpx;
|
|
}
|
|
}
|
|
|
|
&_right {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
background: #fff;
|
|
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
|
border-radius: 34rpx;
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
&_title {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
</style>
|