{"version":3,"file":"search-B1RZQDEp.js","sources":["../../../src/pages/search/search.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nimport HeaderNavigator from \"@components/header-navigator\";\r\nimport { storeToRefs } from \"pinia\";\r\nimport {ref, onActivated} from 'vue';\r\nimport {scrollAniTo} from \"global-common\"\r\nimport {onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router'\r\nimport { usePageSearchStore } from \"@stores/page/useStoreSearch.ts\"\r\nimport { useStoreGlobal } from \"@stores/useStoreGlobal\";\r\nimport { useStoreContext } from \"@stores/useStoreContext\";\r\nimport SearchInput from \"@components/search-input-a/search-input-a.vue\";\r\nimport Banner from \"@components/banner/banner.vue\";\r\nimport { vMasonry } from \"bbw-masonry2\";\r\nimport HotWords from \"@components/hot-words/hot-words.vue\";\r\nimport GridItem from \"@components/grid-item/grid-item.vue\"\r\nimport FooterIndex from \"@components/footer-index/footer-index.vue\";\r\nimport searchFilterPopular from  \"@images/search-filter-popular.svg\";\r\nimport searchFilterdropdown from  \"@images/search-filter-dropdown.svg\";\r\nimport {TSearchImgByText} from \"global-common/apis/img-clippng/searchImg/searchByText/list.ts\";\r\nimport { Menu as AMenu, MenuItem as AMenuItem, Dropdown as ADropdown, Button as AButton } from \"ant-design-vue\";\r\n\r\nimport \"bbw-masonry2/dist/index.css\";\r\nimport {getSearchRoute, searchKeyword} from \"@helpers/util.ts\";\r\nimport {useStoreSearch} from \"@stores/useSearch.ts\";\r\nimport TWEEN from \"@tweenjs/tween.js\";\r\nimport {statGeneral} from \"@helpers/stats.ts\";\r\nimport {showContactModel} from \"@helpers/ui.ts\";\r\n\r\nconst storeData = usePageSearchStore();\r\nconst { fetchData, setPageNumber, setItems, items, searchWord, setIsLoading } = storeData\r\nconst { isLoading, isSearchEnd } = storeToRefs(storeData);\r\nconst global = useStoreGlobal();\r\nconst route = useRoute();\r\nconst router = useRouter();\r\nconst currentWord = ref<string>(``);\r\nconst historyQuery = ref(null)\r\ndefineOptions({\r\n  name: 'PageSearch',\r\n  asyncData: async ( options )=>{\r\n    const { store, route, ctx } = options;\r\n    const context = useStoreContext();\r\n    try {\r\n      const { FETCH_HOT_WORD_LIST } = useStoreSearch();\r\n      const { setIsLoading } = usePageSearchStore();\r\n      setIsLoading(true);\r\n      const routeKeyword = route.params.word as string ?? ``;\r\n      const keyword = routeKeyword.trim().replace ( /-/g, ` `);\r\n      const tasks = [\r\n        FETCH_HOT_WORD_LIST({type:1})\r\n      ]\r\n      const res = await Promise.all( tasks );\r\n\r\n      res.forEach( (item, index) => {\r\n        if ( item[0] ) {\r\n          context.addDebug (`PageSearchAsyncDataError:${index}`, item[0] );\r\n        }\r\n      }) ;\r\n      // 设置TDK\r\n      context.setTitle(`${keyword} PNG Transparent Images Free Download | Search Free| Clippng`);\r\n      context.setDescription(`Search the png images for ${keyword}.Download in the form of PNG and free for commercial use.`)\r\n      context.setKeywords(`${keyword},${keyword} png,${keyword} hd images, vectors,${keyword} png images`)\r\n    } catch ( e ) {\r\n      context.addDebug (`PageSearchAsyncDataError`, e);\r\n    }\r\n  }\r\n});\r\nconst { hotWords } = useStoreSearch();\r\nconst data = reactive({\r\n  searchValue: ``,\r\n  wordList: [\r\n    {word: 'halloween templates'},\r\n    {word: 'halloween clipart'},\r\n    {word: 'halloween background'},\r\n    {word: 'happy halloween'},\r\n    {word: 'halloween pumpkin'},\r\n    {word: 'halloween frame'},\r\n    {word: 'scary'},\r\n    {word: 'pumpkin'},\r\n    {word: 'halloween party'},\r\n    {word: 'cartoon'},\r\n    {word: 'ghost'},\r\n    {word: 'halloween templates'}\r\n  ],\r\n  refreshID: new Date().getTime(),\r\n})\r\nonBeforeRouteUpdate((to,from,next) => {\r\n  scrollAniTo( {x:0, y:0}, 300, TWEEN.Easing.Quadratic.Out, window );\r\n  next();\r\n})\r\nonActivated(()=>{\r\n  // if(historyQuery.value?.kw === route.query.kw) return\r\n  scrollAniTo( {x:0, y:0}, 300, TWEEN.Easing.Quadratic.Out, window );\r\n  setItems([])\r\n  setPageNumber(1)\r\n  /** 初始化 */\r\n  const word = route.params.word as string ?? ``;\r\n  initSearch( word )\r\n  setTimeout(()=>{\r\n    data.refreshID = new Date().getTime();\r\n  },100)\r\n  // showContactModel({})\r\n})\r\nonBeforeRouteLeave((to,from,next)=>{\r\n  historyQuery.value = from.query\r\n  next();\r\n})\r\n\r\nonBeforeRouteUpdate((to, from, next) => {\r\n  console.log('beforeRouteUpdate',to)\r\n  data.refreshID = new Date().getTime();\r\n  setItems([])\r\n  setPageNumber(1)\r\n  const word = to.params.word as string;\r\n  data.searchValue = word;\r\n  currentWord.value = word;\r\n  initSearch( word )\r\n  next();\r\n})\r\n/** ***************** emit ***************** */\r\n\r\nconst handleLoadEnd = async () => {\r\n  console.log( `handleLoadEnd`, route.params.word );\r\n  if( isSearchEnd.value ) return;\r\n  await fetchData({ text: route.params.word });\r\n}\r\n/** ***************** Methods ***************** */\r\n/** 搜索初始化 */\r\nconst initSearch = async ( word:string ) => {\r\n  const displayWord = word.trim().replace(/-/g, ` `);\r\n  console.log( `搜索初始化`, route.params, `路由参数`) // 路由参数\r\n  currentWord.value = word;\r\n  data.searchValue = displayWord;\r\n  isLoading.value = true;\r\n  try {\r\n    const params: TSearchImgByText = {\r\n      text: word,\r\n      p: 1,\r\n      size: 50\r\n    }\r\n    await fetchData(params, { force: true});\r\n  } catch (e) {\r\n    throw e\r\n  }\r\n}\r\nconst handleSearch = async ( kw ) => {\r\n  scrollAniTo( {x:0, y:0}, 300, TWEEN.Easing.Quadratic.Out, window );\r\n  searchKeyword ( kw, router );\r\n}\r\nconst handleClickHotWord = ( e ) => {\r\n  const { index, item } = e;\r\n  const kw = item.search_word;\r\n  statGeneral({\r\n    action_type: `search_hotword`,\r\n    remark: `${index+1}_${kw}`\r\n  })\r\n  handleSearch (kw);\r\n}\r\nconst handleLink = ( kw:string ) => {\r\n  const route = getSearchRoute( kw );\r\n  const config = router.resolve(route);\r\n  const fullpath = config.fullPath;\r\n  return fullpath;\r\n}\r\n</script>\r\n<template>\r\n    <div :class=\"[$style.pageContent, $style.pageSearch]\">\r\n        <banner></banner>\r\n        <!-- 顶部导航栏 -->\r\n        <header-navigator/>\r\n        <!-- 顶部搜索模块 -->\r\n        <div :class=\"$style[`banner-bk`]\">\r\n            <!-- 背景色 -->\r\n            <div :class=\"$style[`banner-bg`]\">\r\n                <div :class=\"$style[`banner-top`]\"></div>\r\n                <div :class=\"$style[`banner-left`]\"></div>\r\n                <div :class=\"$style[`banner-right`]\"></div>\r\n            </div>\r\n            <!-- 搜索区域 -->\r\n            <div :class=\"$style.center\">\r\n              <div :class=\"$style.title\">\r\n                <img :src=\"`${process.env.CDN_CP_PATH}/img/PNG Images@2x.png`\">\r\n              </div>\r\n              <div :class=\"$style[`search-box`]\">\r\n                <search-input\r\n                    :class=\"$style[`search-input`]\"\r\n                    v-model=\"data.searchValue\"\r\n                    @search=\"handleSearch\"\r\n                    placeholder=\"Search for free images\"\r\n                />\r\n                <!-- 热门搜索词 -->\r\n                <hot-words :class=\"$style[`hot-words`]\"\r\n                           :hot-words=\"hotWords\"\r\n                           :link=\"handleLink\"\r\n                           @click=\"handleClickHotWord\"\r\n                ></hot-words>\r\n              </div>\r\n            </div>\r\n        </div>\r\n        <!-- 顶部搜索模块结束 -->\r\n        <div :class=\"$style.main\">\r\n          <!-- 搜索推荐词开始 -->\r\n          <div :class=\"$style[`search-recommend`]\" v-if=\"false\">\r\n            <h1 :class=\"$style[`current-word`]\">{{ currentWord }} PNG Images</h1>\r\n            <div :class=\"$style[`recommend-list`]\">\r\n              <search-recommend :word-list=\"data.wordList\">\r\n                <template #content=\"dataProps\">\r\n                  <span :class=\"$style[`text`]\" @click.stop=\"handleSearch(dataProps.data.word)\">{{dataProps.data.word}}</span>\r\n                </template>\r\n              </search-recommend>\r\n            </div>\r\n          </div>\r\n          <!-- 搜索推荐词结束 -->\r\n          <!-- 图片数量 和 筛选器 -->\r\n          <div :class=\"$style[`filters-box`]\" v-if=\"false\">\r\n            <div :class=\"$style[`images-num`]\">168,249 Images</div>\r\n            <div :class=\"$style[`filter`]\">\r\n              <div :class=\"$style['filter-item']\">\r\n                <a-dropdown placement=\"bottom\" :trigger=\"['click']\">\r\n                  <a-button :class=\"$style['filter-button']\">\r\n                    <div :class=\"$style['contain']\">\r\n                      <inline-svg :src=\"searchFilterPopular\"></inline-svg>\r\n                      <span :class=\"$style['popular-text']\">Popular</span>\r\n                    </div>\r\n                    <span :class=\"$style['popular-drop']\">\r\n                      <inline-svg :src=\"searchFilterdropdown\"></inline-svg>\r\n                    </span>\r\n                  </a-button>\r\n                  <template #overlay>\r\n                    <a-menu>\r\n                      <a-menu-item>\r\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.alipay.com/\">\r\n                          1st menu item\r\n                        </a>\r\n                      </a-menu-item>\r\n                      <a-menu-item>\r\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.taobao.com/\">\r\n                          2nd menu item\r\n                        </a>\r\n                      </a-menu-item>\r\n                      <a-menu-item>\r\n                        <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.tmall.com/\">\r\n                          3rd menu item\r\n                        </a>\r\n                      </a-menu-item>\r\n                    </a-menu>\r\n                  </template>\r\n                </a-dropdown>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- 瀑布流 -->\r\n          <div :class=\"[$style.result_wrap, $style.masonry]\">\r\n            <vMasonry :server=\"global.server\" :refreshID=\"data.refreshID\" :items=\"(items as any[])\"\r\n                      :grid-width=\"340\" :gapX=\"24\" :gapY=\"24\" @loadEnd=\"handleLoadEnd\">\r\n              <template #default=\"props\">\r\n                <grid-item\r\n                    :is-search-end=\"isSearchEnd\"\r\n                    :items=\"items\"\r\n                    :callback=\"handleLoadEnd\"\r\n                    :imageSet=\"true\"\r\n                    :item=\"props.item.data\"\r\n                    :itemIndex=\"props.itemIndex\"\r\n                />\r\n              </template>\r\n            </vMasonry>\r\n            <div :class=\"$style[`loading_con`]\">\r\n              <dItemLoading v-if=\"isLoading\" :class=\"$style[`down-loading`]\" size=\"big\"></dItemLoading>\r\n            </div>\r\n            <!-- You don’t have any favorites yet -->\r\n            <d-no-result v-if=\"!isLoading && items.length === 0\" content=\"There are no search results available.\" />\r\n          </div>\r\n          <!--  off all plans -->\r\n          <div :class=\"$style[`bestValue`]\" v-if=\"false\">\r\n            <div :class=\"[$style[`question`], `font-bold`]\">\r\n              <p>Does it need to be used by many people?</p>\r\n              <p>Need company business authorization and invoice?</p>\r\n            </div>\r\n            <div :class=\"[$style[`bv`], `font-bold`]\">Best Value! <span>50%</span> off all plans</div>\r\n            <div :class=\"$style[`btn`]\">\r\n              <dButton :class=\"$style[`button-setion`]\" border-radius=\"4px\">\r\n                <span :class=\"$style[`button-text`]\">Upgrade Now ＞</span>\r\n              </dButton>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- 底部 -->\r\n        <footer-index :class=\"$style[`footer-index`]\"/>\r\n    </div>\r\n</template>\r\n<style lang=\"scss\" module src=\"./search.scss\"></style>\r\n"],"names":["storeData","usePageSearchStore","fetchData","setPageNumber","setItems","items","searchWord","setIsLoading","isLoading","isSearchEnd","storeToRefs","global","useStoreGlobal","route","useRoute","router","useRouter","currentWord","ref","historyQuery","hotWords","useStoreSearch","data","reactive","onBeforeRouteUpdate","to","from","next","scrollAniTo","TWEEN","onActivated","word","initSearch","onBeforeRouteLeave","handleLoadEnd","displayWord","e","handleSearch","kw","searchKeyword","handleClickHotWord","index","item","statGeneral","handleLink","getSearchRoute"],"mappings":"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"}