168 lines
3.5 KiB
Vue
168 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="status_bar">
|
|
<!-- 这里是状态栏 -->
|
|
</view>
|
|
<view style="height: 110upx">
|
|
<u-sticky offset-top="0" v-if="stickyShow">
|
|
<u-navbar
|
|
:is-back="false"
|
|
:title="navTitle"
|
|
:bgColor="background"
|
|
:titleStyle="titleStyle"
|
|
:color="color"
|
|
>
|
|
<view slot="left">
|
|
<text
|
|
v-if="isBack"
|
|
@click="navigateBack"
|
|
class="back"
|
|
:style="{ backgroundColor: `${this._props.backBackGroundColor}` }"
|
|
>{{ $t("navbar.back") }}</text
|
|
>
|
|
<text v-else></text>
|
|
</view>
|
|
</u-navbar>
|
|
</u-sticky>
|
|
<u-navbar
|
|
:is-back="false"
|
|
:title="navTitle"
|
|
:bgColor="background1"
|
|
:titleStyle="titleStyle"
|
|
>
|
|
<view slot="left">
|
|
<text
|
|
v-if="isBack"
|
|
@click="navigateBack"
|
|
class="back"
|
|
:style="{ backgroundColor: `${this._props.backBackGroundColor}` }"
|
|
>{{ $t("navbar.back") }}</text
|
|
>
|
|
<text v-else></text>
|
|
</view>
|
|
<view slot="center" v-if="hasLogo">
|
|
<image
|
|
style="width: 202upx; height: 60upx"
|
|
src="../../static/image/home/fontree.png"
|
|
></image>
|
|
</view>
|
|
<view slot="right" v-if="hasRight" @click="clickRight">
|
|
<image
|
|
style="width: 80upx; height: 34upx"
|
|
src="../../static/image/mine/feedback.png"
|
|
></image>
|
|
</view>
|
|
</u-navbar>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "navBar",
|
|
props: {
|
|
isBack: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
navTitle: {
|
|
type: String,
|
|
required: true,
|
|
default: "",
|
|
},
|
|
stickyShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
backToUrl: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
isSwitchTab: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
hasLogo: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
hasRight: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
backBackGroundColor: {
|
|
type: String,
|
|
default: "rgba(255, 255, 255)",
|
|
},
|
|
sfBack: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
background: "rgba(255, 255, 255)",
|
|
background1: "transparent",
|
|
};
|
|
},
|
|
computed: {
|
|
titleStyle() {
|
|
return {
|
|
color: this._props.color ?? "#fff",
|
|
fontSize: "36upx",
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
navigateBack(params) {
|
|
const pages = getCurrentPages();
|
|
if (this.sfBack) {
|
|
return this.$emit("triggerSfBack");
|
|
}
|
|
if (this.backToUrl.length > 0) {
|
|
if (this.isSwitchTab) {
|
|
uni.switchTab({
|
|
url: this.backToUrl,
|
|
});
|
|
} else {
|
|
console.log("navigateTo");
|
|
uni.navigateTo({
|
|
url: this.backToUrl,
|
|
});
|
|
}
|
|
} else {
|
|
if (pages.length === 1) {
|
|
if (typeof params === "number") {
|
|
history.go(-params);
|
|
} else {
|
|
history.back();
|
|
}
|
|
} else {
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
},
|
|
clickRight() {
|
|
this.$emit("clickRight");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.back {
|
|
font-size: 28upx;
|
|
color: #ffffff;
|
|
padding: 10rpx 32rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
.status_bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
</style>
|