zh_order_food_xcx/components/en-utils/en-nav/en-nav.vue

<template>
	<view class="">
		<view class="header" :style="style">
			<view class="flexbox" :class="{
		  'flexbox-xcx':(isXcx && rightShow),
		  'flex-justify-space':!customNav,
		  'align-items-center':!customNav,
		  }" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px','background':bgckgroundBox}]">
				<view @tap="goBack" v-if="leftShow">
					<uni-icons type="left" :color="leftColor" size="18"></uni-icons>
					<!-- <image class="toLeft" src="@/static/img/toLeft.png" mode=""></image> -->
				</view>
				<view v-if="!customNav" :style="[{'color': titleColor}]" class="title-text text-overflow-ellipsis-one">
					{{title}}</view>
				<view v-else class="">
					<slot name="custom"></slot>
				</view>
				<view v-if="rightShow" class="right-button button" @click="rightClick">
					<slot name="right">
						<text class="rightName" v-if="rightType===1">{{rightText}}</text>
						<text class="rightName r-but" v-else>{{rightText}}</text>
					</slot>
				</view>
				<view v-else class="w-right"></view>
			</view>
		</view>

		<view class="box-title">
			<view class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
			</view>
		</view>
	</view>
</template>

<script>
	import tools from "@/service/tools";

	export default {
		name: "en-nav",
		data() {
			return {
				statusBarH: 0,
				customBarH: 0,
				left: 35,
				isXcx: false
			}
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			customNav: {
				type: Boolean,
				default: false
			},
			leftColor: {
				type: String,
				default: '#333'
			},
			leftShow: {
				type: Boolean,
				default: true
			},
			letTap: {
				type: Boolean,
				default: false
			},
			bgckgroundBox: {
				type: String,
				default: '#fff'
			},

			titleColor: {
				type: String,
				default: '#333'
			},
			bgColor: {
				type: String,
				default: '#707'
			},
			rightText: {
				type: String,
				default: ''
			},
			rightShow: {
				type: Boolean,
				default: false
			},
			rightType: {
				default: 1
			},
		},
		computed: {
			style() {
				let _style = `height: ${this.customBarH}px;`
				return _style
			}
		},
		watch: {
			leftShow(e) {
				if (e == true) {
					this.left = 0
				}
			}
		},
		methods: {
			rightClick() {
				this.$emit('rightClick')
			},
			goBack() {
				if (!this.leftShow) {
					return;
				}
				if (this.letTap) {
					this.$emit('goBack')
				} else {
					tools.leftClick()
				}
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					this.statusBarH = e.statusBarHeight + 10
					let custom = 0;
					//#ifdef MP-WEIXIN
					custom = wx.getMenuButtonBoundingClientRect()

					this.customBarH = custom.height
					//#endif
					//#ifdef H5
					this.customBarH = 30
					this.left = 0
					//#endif

					this.$emit('navHeight', this.customBarH - 10)
				}
			})
			//#ifdef MP-WEIXIN
			this.isXcx = true
			//#endif
		}
	}
</script>

<style scoped lang="scss">
	@import url("../../static/css/en-common.css");

	.toLeft {
		width: 44rpx;
		height: 44rpx;
	}

	.header {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999999;

		.flexbox {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			transition: background-color 1s ease-in-out;
			padding: 0 24rpx;

			.iconfont {
				color: #333333;
				font-size: 34rpx;
			}

			.title-text {
				max-width: 275rpx;
				font-size: 36rpx;
				font-weight: 600;
			}

			.icon-left {
				width: 20px;
				height: 20px;
			}

			.button {
				position: relative;
				z-index: 5;

				// width: 21px;
				.rightName {
					font-size: 14px;
					color: #333333;
				}

				.r-but {
					background-color: #FF0000;
					color: #fff;
					font-size: 12px;
					padding: 5px;
					border-radius: 3px;
				}
			}
		}

		.flexbox-xcx {
			justify-content: left;
			position: relative;

			.right-button {
				position: absolute;
				right: 220rpx;
			}
		}

	}

	.w-right {
		width: 20rpx;
	}

	.box-title {
		width: 100vw;
	}
</style>