yanxiang_h5/components/yx-navbar/yx-navbar.vue

<template>
	<view class="narBarCon">
		<view class="topBarCon">
			<view class="itemCon">
				<view class="leftIcon">
					<u-icon
						v-if="isBack" 
						@click.once="leftClick"
						name="arrow-left"
						size="23"
						color="#fff"
					></u-icon>
				</view>
				<view class="title">
					<span v-if="!searchShow">{{title}}</span>
					<u-search bgColor="#fff" shape="square" :showAction="false" v-if="searchShow" placeholder="请输入关键字" v-model="keyword" @change="onSearchInput"></u-search>
				</view>
				<view class="rightIcon" v-if="isAdd||isSearch">
					<view class="yuan" v-if="!searchShow">
						<u-icon
							v-if="isSearch"
							name="search"
							size="24"
							color="#eb5a10"
							@click="openSearch"
						></u-icon>
						<u-icon
							v-if="isAdd"
							@click="addMenuShow=true"
							name="plus"
							size="16"
							color="#eb5a10"
						></u-icon>
					</view>
					<view v-if="searchShow" style="font-size: 28rpx;margin-left: 20rpx;" @click="clsoeSearch">取消</view>
				</view>
			</view>
		</view>
		<view class="searchOptions" v-if="searchToolList.length>0&&searchShow">
			<view class="myList" v-for="(item, index) in searchToolList" :key="index" @click="chooseItem(item)">
				<u--image
					radius="4"
					:src="item.icon"
					width="32px"
					height="32px"
				></u--image>
				<view class="name">{{item.funcName}}</view>
				<u-icon
					name="arrow-right"
					size="21"
					color="#ccc"
				></u-icon>
			</view>
		</view>
		<view class="addMenuCon column y-center flex-around" v-if="addMenuShow">
			<view class="row wid-80 flex-around" @click="eventUp(1)">
				<u-icon name="minus-circle-fill" size="16" color="#fff"></u-icon>
				<text>{{toolStatus?'停用':'启用'}}工具</text>
			</view>
			<view class="row wid-80 flex-around" @click="eventUp(2)">
				<u-icon name="file-text-fill" size="20" color="#fff"></u-icon>
				<text>申请开放</text>
			</view>
			<view class="row wid-80 flex-around" @click="eventUp(3)">
				<u-icon name="share-square" size="18" color="#fff"></u-icon>
				<text>账号授权</text>
			</view>
			<view class="row wid-80 flex-around" @click="eventUp(4)">
				<u-icon name="trash-fill" size="18" color="#fff"></u-icon>
				<text>删除工具</text>
			</view>
			
		</view>
		<view class="addMenuConZhe" v-if="addMenuShow" v-on:touchstart="addMenuShow=false;searchToolList=[]"/>
<!--		<u-icon class="close-icon" name="close-circle" size="22" color="#fff"></u-icon>-->
	</view>
</template>

<script>
	import {getFuncListApi} from 'common/api.js'
	export default {
		name:"yx-navbar",
		props:{
			isBack:{
				type: Boolean,
				default: true
			},
			title:{
				type: String,
				default: ''
			},
			isSearch:{
				type: Boolean,
				default: false
			},
			isAdd:{
				type: Boolean,
				default: false
			},
			toolStatus:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				addMenuShow:false,
				searchShow:false,
				timer:'',
				indexList:[
					// {url:'https://cdn.uviewui.com/uview/album/1.jpg'},
					// {url:'https://cdn.uviewui.com/uview/album/2.jpg'},
				],
				keyword:'',
				searchToolList:[]
			};
		},
		methods:{
			eventUp(e){
				this.$emit('eventUp',e)
				this.addMenuShow=false
			},
			// 点击左侧区域
			leftClick() {
				// 如果配置了autoBack，自动返回上一页
				// this.$emit('leftClick')
				// if(this.$props.isBack) {
					uni.navigateBack()
					uni.$emit('refreshPage')
				// }
			},
			// 点击右侧区域
			rightClick() {
				this.$emit('rightClick')
			},
			openSearch(){
				console.log("2222")
				this.searchShow=true
			},
			clsoeSearch(){
				this.keyword=''
				this.searchToolList=[]
				this.searchShow=false
			},
			onSearchInput(v){
				console.log('onSearchInput',v)
				// if(v.length>0)uni.$u.throttle(this.$emit('search',v), 600)
				clearTimeout(this.timer)
				if(v.length==0)return
				this.timer=setTimeout(()=>{
					this.allSearch(v)
				},1000)
			},
			async allSearch(e){
				console.log('search',e)
				let params={
					listType:0,
					pageIndex:1,
					pageSize:9999,
					funcName:e,
				}
				const res = await getFuncListApi(params)
				if(res.data.toolList){
					this.searchToolList=res.data.toolList
				}else{
					this.searchToolList=[]
					uni.showToast({
						title:'搜索无结果',
						icon:'none'
					})
				}
			},
			chooseItem(item){
				console.log(item)
				this.searchShow=false
				this.keyword=''
				this.searchToolList=[]
				uni.navigateTo({
					url:"/pages/detail/detail?id="+item.id
				})
			}
		}
	}
</script>

<style lang="less">
@import "./yx-navbar.less";
</style>