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" @click="onClose"></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: {
    onClose() {
      window.close()
    },
    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>