city-gather/src/subPack-xsb/search/index.vue

<script setup lang="ts">
import router from '@/router'

definePage({
  name: 'xsb-search',
  islogin: false,
  style: {
    navigationBarTitleText: '搜索',
  },
})
const { searchList, SelectShopInfo } = storeToRefs(useSysXsbStore())
const searchText = ref()
const tabbarlist = ref([
  { name: '综合', id: 0 },
  { name: '销量', id: 1 },
  { name: '价格', id: 2 },
])
const activeTab = ref(0)
const { confirm: showConfirm } = useGlobalMessage()
const { userInfo } = storeToRefs(useUserStore())

const { data, send, isLastPage, page, error } = usePagination((pageNum, pageSize) => Apis.xsb.getSearchProductList({ data: {
  keywords: searchText.value,
  pageNum,
  pageSize,
  priceSort: activeTab.value === 2 ? 'DESC' : '',
  salesNum: activeTab.value === 1 ? 'DESC' : '',
  shopId: SelectShopInfo.value.shopId,
  channelId: userInfo.value.channelId || 1,
} }), {
  immediate: false,
  data: resp => resp.data?.list,
  initialPage: 1,
  initialPageSize: 10,
  append: true,
})
const isSearch = ref(false)
const hotText = ref<Api.xsbSearchTerm[]>([])

onLoad((query: any) => {
  if (query.text) {
    searchText.value = query.text
    send()
    isSearch.value = true
  }
})

function handleSearch() {
  if (!searchText.value)
    return
  data.value = []
  isSearch.value = true
  send()
  if (!searchList.value.includes(searchText.value)) {
    searchList.value.push(searchText.value)
  }
}
watch(() => searchText.value, () => {
  if (!searchText.value) {
    isSearch.value = false
    activeTab.value = 0
  }
})
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
function handleChange(e: { index: number }) {
  activeTab.value = e.index
  page.value = 1
  data.value = []
  send()
}
function handleClearnSeachLocaData() {
  showConfirm({
    title: '警告',
    msg: '是否删除历史搜索记录？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    success() {
      searchList.value = []
    },
  })
}
async function getSearchData() {
  const { data } = await Apis.xsb.SearchTerm({ data: { type: 2 } })
  hotText.value = data
}
getSearchData()
const state = computed(() => {
  return error.value ? 'error' : !isLastPage.value ? 'loading' : 'finished'
})
function handleSearchText(text: string) {
  searchText.value = text
  handleSearch()
}
</script>

<template>
  <view class="page-xsb">
    <view class="sticky top-0 bg-white px24rpx pt24rpx">
      <view class="box-border flex items-center justify-between border border-2rpx border-[var(--them-color)] rounded-40rpx border-solid px24rpx py14rpx">
        <view class="flex flex-1 items-center">
          <wd-icon name="search" size="20px" color="#aaa" />
          <view class="ml20rpx flex-1">
            <input v-model.trim="searchText" type="text" placeholder="请输入搜索内容">
          </view>
        </view>
        <view class="w-90rpx flex items-center">
          <view class="ml12rpx text-#DEDEDE">
            |
          </view>
          <view class="ml12rpx text-28rpx text-[var(--them-color)] font-semibold" @click="handleSearch">
            搜索
          </view>
        </view>
      </view>
      <view v-if="!isSearch" class="h-90vh">
        <view v-if="searchList.length" class="mt24rpx">
          <view class="flex items-center justify-between">
            <view class="text-28rpx font-semibold">
              历史搜索
            </view>
            <wd-icon name="delete-thin" size="22px" @click="handleClearnSeachLocaData" />
          </view>
          <view class="mt20rpx flex flex-wrap items-center">
            <view v-for="item in searchList" :key="item" class="mb20rpx mr16rpx box-border flex items-center justify-center rounded-30rpx bg-#F6F6F6 px24rpx py10rpx text-28rpx" @click="handleSearchText(item)">
              {{ item }}
            </view>
          </view>
        </view>
        <view v-if="hotText.length" class="mt24rpx">
          <view class="text-28rpx font-semibold">
            热门搜索
          </view>
          <view class="mt20rpx flex flex-wrap items-center">
            <view v-for="item in hotText" :key="item.id" class="mb20rpx mr16rpx box-border flex items-center justify-center rounded-30rpx bg-#F6F6F6 px24rpx py10rpx text-28rpx" @click="handleSearchText(item.searchName)">
              {{ item.searchName }}
            </view>
          </view>
        </view>
      </view>
      <view v-if="isSearch">
        <wd-tabs v-model="activeTab" @change="handleChange">
          <block v-for="item in tabbarlist" :key="item.id">
            <wd-tab :title="item.name" />
          </block>
        </wd-tabs>
      </view>
    </view>
    <view v-if="isSearch" class="px24rpx pt20rpx">
      <view v-for="item in data" :key="item.id" class="mb20rpx box-border flex items-center justify-between rounded-16rpx bg-white p24rpx" @click="router.push({ name: 'xsb-goods', params: { id: String(item.prodId) } })">
        <image
          :src="item.pic"
          class="h200rpx w200rpx flex-shrink-0 rounded-16rpx"
        />
        <view class="ml20rpx flex-1">
          <view class="text-32rpx font-semibold">
            {{ item.prodName }}
          </view>
          <view class="mt14rpx text-36rpx text-#FF4A39 font-semibold">
            ￥{{ item.channelProdPrice }}
          </view>
        </view>
      </view>
      <wd-loadmore v-if="data.length" :state="state" :loading-props="{ color: '#9ED605', size: 20 }" />
      <wd-status-tip v-if="!data.length" image="search" tip="当前搜索无结果" />
    </view>
    <view class="h30rpx" />
  </view>
</template>

<style scoped lang="scss">
.page-xsb{
  :deep(){
    .wd-tabs__nav-item-text{
      font-size: 28rpx !important;
    }
    .wd-tabs__nav-item.is-active{
      font-weight: 700 !important;
      color: var(--them-color) !important;
    }
  }
}
</style>