template-10490/pages/market/components/SearchBar.vue

<template>
  <div class="flex flex-col text-sm bg-white px-4 mt-5 pt-2 pb-2">
    <div class="flex flex-col">
      <el-space class="my-2">
        <h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">行业</h4>
        <div class="flex-wrap">
          <el-radio-group v-model="selectIndustry" @change="onIndustry">
            <el-radio-button v-for="(item,index) in IndustryData" :key="index" :label="item.label" :value="item.value" />
          </el-radio-group>
        </div>
      </el-space>
      <el-space class="my-2">
        <h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">类型</h4>
        <el-radio-group v-model="selectType" @change="onType">
          <el-radio-button v-for="(item,index) in websiteType" :key="index" :label="item.label" :value="item.value" />
        </el-radio-group>
      </el-space>
      <el-space class="my-2" :size="12">
        <h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">色系</h4>
        <template v-for="(item,index) in colors" :key="index">
          <nuxt-link :to="`?color=${item.label}`" @click="handleColor(item.label)">
            <el-avatar v-if="selectColor == item.label" :size="28" :style="item.comments" class="border-solid border-1 border-gray-800 rounded-full"></el-avatar>
            <el-avatar v-else :size="24" :style="item.comments"></el-avatar>
          </nuxt-link>
        </template>
      </el-space>
    </div>
  </div>
  <el-space class="gap-4 mt-5">
    <el-button type="primary" @click="handleDefault">默认</el-button>
    <el-button @click="handleLast">最新</el-button>
    <el-button @click="handleHot">最热</el-button>
    <el-button @click="handleFree">免费</el-button>
    <el-button @click="handlePay">付费</el-button>
    <el-button @click="handleOfficial">官方</el-button>
    <el-input v-model="keywords" style="width: 400px" :placeholder="`云官网`"
              :suffix-icon="Search" @change="handleKeywords"/>
    <el-button @click="clearWhere">重置</el-button>
  </el-space>
</template>

<script setup lang="ts">
import {Search} from '@element-plus/icons-vue'
import {listDictData} from "~/api/system/dict-data";
import IndustryData from "~/api/json/industry-data.json"

const props = withDefaults(
  defineProps<{
    value?: number;
  }>(),
  {}
);

// 关键词
const keywords = ref<string | undefined>()
const selectIndustry = ref<string>();
const selectType = ref<string>();
const selectColor = ref<string>();
// 行业
const industry = ref<string>()
// 类型
const websiteType = ref<any[]>([])
// 色系
const colors = ref<any[]>()

// 搜索条件
let where = <any>{
  keywords: undefined,
  websiteType: undefined,
  industry: undefined,
  color: undefined,
  sort: undefined,
  order: undefined
}

// 选择类型
const handleType = (text: string) => {
  if (text === '全部') {
    where.websiteType = undefined;
  } else {
    where.websiteType = text;
  }
  reload()
}

// 选择行业
const handleIndustry = (text: string) => {
  if (text === '全部') {
    where.industry = undefined;
  } else {
    where.industry = text;
  }
  reload()
}

// 选择色系
const handleColor = (text: string) => {
  selectColor.value = text;
  if (text === '彩色') {
    where.color = undefined;
  } else {
    where.color = text;
  }
  reload()
}

const handleDefault = () => {
  where.sort = undefined
  where.order = undefined
  reload()
}

const handleLast = () => {
  where.sort = 'createTime'
  where.order = 'desc'
  reload()
}

const handleHot = () => {
  where.sort = 'clicks'
  where.order = 'desc'
  reload()
}

const handleFree = () => {
  where.price = 0
  reload()
}

const handlePay = () => {
  where.isPay = true
  reload()
}

const handleOfficial = () => {
  where.official = true
  reload()
}

const clearWhere = () => {
  where = {}
  selectColor.value = ''
  selectType.value = ''
  selectIndustry.value = ''
  reload()
}

// 搜索关键词
const handleKeywords = () => {
  where.keywords = keywords.value;
  reload()
}

// 跳转路由
const reload = () => {
  navigateTo({
    path: '/market',
    query: where
  })
}

const onType = (text: string) => {
  where.websiteType = text
  if(text == '全部'){
    where.websiteType = undefined
  }
  reload();
}

const onIndustry = (text: string) => {
  where.industry = text
  if(text == '全部'){
    where.industry = undefined
  }
  reload();
}

// 获取基础数据
const getData = () => {
  listDictData({
    dictCode: 'WebsiteType'
  }).then(data => {
    websiteType.value = data.map((item: any) => {
      return {
        label: item.dictDataName,
        value: item.dictDataCode
      }
    })
  })
  listDictData({
    dictCode: 'Color'
  }).then(data => {
    colors.value = data.map((item: any) => {
      return {
        label: item.dictDataName,
        value: item.dictDataCode,
        comments: item.comments
      }
    })
  })
}
getData()

// watch(
//   () => props.where,
//   (query) => {
//     if(query){
//       where = query;
//     }
//   }
// );
</script>