yubaitong-c/src/components/Navbar/Navbar.vue

<template>
	<view class="">
		<uni-nav-bar v-if="navType === 'custom'" :status-bar="true" :shadow="false" :border="false" :fixed="true"
			:color="color" :background-color="backgroundColor" :leftWidth="leftWidth" :rightWidth="rightWidth">
			<view class="" style="width: 100%">
				<slot></slot>
			</view>
		</uni-nav-bar>
		<uni-nav-bar v-else-if="navType === 'search'" :title="title" :status-bar="true" :shadow="false" :border="false"
			:fixed="true" :color="color" :background-color="backgroundColor" :leftWidth="leftWidth"
			:rightWidth="rightWidth">
			<view slot="left">
				<IconText v-if="showBack" style="padding: 8px;" @click.native="handle_click_search" :color="color"
					:code="`\ue8be`" size="16" />
			</view>
		</uni-nav-bar>
		<uni-nav-bar v-else-if="navType === 'front'" :title="title" :status-bar="true" :shadow="false" :border="false"
			:fixed="true" :color="color" :background-color="backgroundColor" :leftWidth="leftWidth"
			:rightWidth="rightWidth" class="front-seatch-box">
			<view slot="left" class="front-seatch-left">
				<view class="front-seatch-title">
					<!-- <IconText class="icon" size="18" color="#009360" :code="`\ue883`"></IconText> -->
					<image :src="staticUrl ? staticUrl + 'front-title.png' : ''" class="pic" mode="heightFix">
				</view>
				<view class="front-search-box" @click="handle_click_search">
					<IconText class="icon" size="16" color="#B3B3B3" :code="`\ue887`"></IconText>
					搜索
				</view>
			</view>
			<view class="bg"></view>
		</uni-nav-bar>
		<uni-nav-bar v-else-if="navType === 'user'" :title="title" :status-bar="true" :shadow="false" :border="false"
			:fixed="true" :color="color" :background-color="backgroundColor" :leftWidth="leftWidth"
			:rightWidth="rightWidth">
			<view class="user-navbar-box">
				<view class="user-navbar-bg"></view>
				{{title}}
			</view>
			<view slot="left">
				<view class="user-left">
					<IconText style="padding: 8px;" @click.native="toMessage" :color="color" :code="`\ue899`"
						size="20" />
					<view class="num">{{_yesNum}}</view>
				</view>
			</view>
		</uni-nav-bar>
		<uni-nav-bar v-else :title="title" :status-bar="true" :shadow="false" :border="false" :fixed="true"
			:color="color" :background-color="backgroundColor" :leftWidth="leftWidth" :rightWidth="rightWidth">
			<view slot="left">
				<IconText v-if="showBack" style="padding: 8px;" @click.native="handle_click_back" :color="color"
					:code="`\ue8be`" size="16" />
				<IconText v-if="showHome" style="padding: 8px;" @click.native="handle_click_home" :color="color"
					:code="`\ue75f`" size="16" />
			</view>
		</uni-nav-bar>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({})
	export default class Navbar extends Vue {
		@baseModule.Getter('_yesNum') _yesNum : any;
		@Prop({
			default: ''
		})
		private title ?: string; // 标题
		@Prop({
			default: true
		})
		private showBack ?: boolean; // 是否展示返回按钮
		@Prop({
			default: false
		})
		private showHome ?: boolean; // 是否展示返回按钮
		@Prop({
			default: true
		})
		private statusBar ?: boolean; //
		@Prop({
			default: false
		})
		private shadow ?: boolean; //
		@Prop({
			default: false
		})
		private border ?: boolean; //
		@Prop({
			default: true
		})
		private fixed ?: boolean; //
		@Prop({
			default: '#ffffff'
		})
		private backgroundColor ?: string; //
		@Prop({
			default: '#000000'
		})
		private color ?: string; //
		@Prop({
			default: ''
		})
		private navType ?: string; //navbar类型
		@Prop({
			default: ''
		})
		private leftWidth ?: string;
		@Prop({
			default: ''
		})
		private rightWidth ?: string;
		
		staticUrl : string = this.$oss_url; //oss地址

		handle_click_back() : void {
			console.log(this.$Router)
			this.$Router.back(1);
		}

		handle_click_search() {
			this.$Router.push({
				path: '/packages/goods/search'
			})
		}

		handle_click_home() {
			this.$Router.pushTab({
				path: '/pages/front/front'
			})
		}

		toMessage() {
			this.$Router.push({
				path: '/packages/user/user/message'
			})
		}
	}
</script>

<style lang="scss">
	// .front-seatch-box{
	// 	background: linear-gradient(270deg, #EBF2F0 -6%, #F3F4F4 110%);
	// }
	.front-search-box {
		height: vw(32);
		// width: vw(124);
		box-sizing: border-box;
		// border: vw(1) solid rgba(255, 255, 255, 0.3);
		border-radius: vw(16);
		@include flex-x(flex-start);
		background: #fff;
		position: relative;
		z-index: 10;
		padding-left: vw(10);
		box-sizing: border-box;
		flex: 1;
		box-sizing: border-box;
		margin-left: vw(12);
		@include word-vw(14, #333);

		.icon {
			margin-right: vw(8);
		}
	}

	.front-seatch-left {
		width: 100%;
		@include flex-x();
	}

	.front-seatch-title {
		// position: absolute;
		// width: calc(100vw - 20px);
		height: 44px;
		line-height: 44px;
		position: relative;
		z-index: 10;
		// bottom: 0;
		// z-index: 9;
		// text-align: center;
		font-size: vw(16);
		@include flex-x(center);
		.pic{
			height: 36px;
		}
	}

	.user-left {
		@include flex-x();
		position: relative;
		height: vw(24);
		.num{
			position: absolute;
			top: 0;
			right: vw(2);
			min-width: vw(12);
			height: vw(12);
			background: #CF174E;
			@include flex-x(center);
			border-radius: vw(6);
			@include word-vw(10, #fff);
			padding: 0 vw(3);
		}
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		background: linear-gradient(270deg, #EBF2F0 -6%, #F3F4F4 110%);
		top: 0;
		left: 0;
	}

	.user-navbar-box {
		width: 100%;
		@include flex-x(center);

		.user-navbar-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: linear-gradient(90deg, #FEF4F6 0%, #F2FBFB 100%);
			z-index: -1;
		}
	}
</style>