subject_gxj/xj_project_app/components/page-title/page-title.vue

<template>
	<view class="back-btn" :style="`height: ${statusHeigth + 50}px;`">
		<view class="back-box">
			<u-icon name="arrow-left" color="#fff" size="20" customStyle="margin:0 auto" class="arrow-left"
				@click="backToBefore()"></u-icon>

			<text class="back-text">
				<slot></slot>
			</text>
			<slot name="search"></slot>
		</view>

		<view class="search-box">
			<u-icon v-if="showSearch" name="search" color="#fff" size="30" @click="goToSearch()"></u-icon>
			<view v-if="rightText" @click="rightTextClick()" class="">
				{{rightText}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits,
		defineProps,
	} from "vue";

	import {
		onLoad,
		onLaunch
	} from "@dcloudio/uni-app";
	/**
	 * 标题名 插槽形式录入
	 * @showSearch 是否展示搜索按钮
	 * @url 搜索按钮跳转的页面
	 * 搜索及搜索插槽功能暂不可用
	 */

	const props = defineProps({
		showSearch: {
			type: Boolean,
			default: false
		},
		rightText: {
			type: String,
			default: null
		},
		url: {
			type: String,
			default: null
		}
	})

	const emit = defineEmits(['searchClick', 'rightTextClick'])

	let statusHeigth = ref(null)

	// 返回上一级
	function backToBefore() {
		uni.navigateBack({
			delta: 1,
		})
	};

	// 去到搜索页
	function goToSearch() {
		emit("searchClick")
	}

	function rightTextClick() {
		emit("rightTextClick")
	}

	onLoad(() => {
		uni.getSystemInfo({
			success(res) {
				statusHeigth.value = res.statusBarHeight
			}
		})
	})
</script>

<style lang="scss">
	.back-btn {
		position: fixed;
		top: 0;
		display: flex;
		width: 100%;
		z-index: 10000;
		background-color: #1763E7;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(12, 69, 167, 0.35);
		font-size: 35rpx;
		font-weight: 500;
		color: #FFF;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		.back-box {
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.arrow-left {
				margin-left: 28rpx;
			}

			.back-text {
				margin-left: 28rpx;
			}
		}

		.search-box {
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-right: 28rpx;
			color: #fff;
		}
	}
</style>