front/components/use-header/use-header.vue

<template>
	<view>
		<view class="use-header dflex padding-lr-sm w-full bg-drak" :class="fixed ? 'fixed' : ''">
			<!-- 头部组件 -->
			<view class="use-search dflex-b border-radius-lg padding-lr w-full" @click="search">
				<text>{{ searchTip }}</text>
				<view class="iconfont iconsousuo-01"></view>
			</view>
		</view>
		
		<!-- 头部组件占位符 -->
		<view v-if="fixed && placeholder" class="use-header-placeholder"></view>
	</view>
</template>

<script>
export default {
	props: {
		fixed: {
			type: [Number, Boolean],
			default: false
		},
		placeholder: {
			type: [Number, Boolean],
			default: !0
		},
		searchAuto: {
			type: [Number, Boolean],
			default: !0
		},
		searchTip: {
			type: String,
			default: '搜索关键字'
		},
		id: {
			type: [Number, String],
			default: 0
		},
		source: {
			type: [Number, String],
			default: 1
		}
	},
	data() {
		return {};
	},
	methods: {
		search() {
			this.$emit('search', {
				type: 'search'
			});

			if (this.searchAuto) {
				this.Dever.location('source/search?id=' + this.id + '&source=' + this.source);
			}
		}
	}
};
</script>

<style lang="scss">
.use-header-placeholder {
	height: 100rpx;
}

.use-header {
	height: 100rpx;
}

.use-search {
	height: 70rpx;
	line-height: 70rpx;
	background-color: #fff;

	text {
		color: #c0c0c0;
	}

	.iconfont {
		font-size: $font-base + 6upx;
		color: #c0c0c0;
	}
}
</style>