|
|
@@ -0,0 +1,145 @@
|
|
|
+<script setup lang="ts">
|
|
|
+definePage({
|
|
|
+ name: 'xsb-search',
|
|
|
+ islogin: false,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '搜索',
|
|
|
+ },
|
|
|
+})
|
|
|
+const { searchList } = 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 { data, send, isLastPage, page } = usePagination((pageNum, pageSize) => Apis.xsb.getSearchProductList({ data: {
|
|
|
+ keywords: searchText.value,
|
|
|
+ pageNum,
|
|
|
+ pageSize,
|
|
|
+ priceSort: activeTab.value === 2 ? 'DESC' : '',
|
|
|
+ salesNum: activeTab.value === 1 ? 'DESC' : '',
|
|
|
+} }), {
|
|
|
+ immediate: false,
|
|
|
+ data: resp => resp.list,
|
|
|
+ initialPage: 1,
|
|
|
+ initialPageSize: 10,
|
|
|
+ append: true,
|
|
|
+})
|
|
|
+const isSearch = ref(false)
|
|
|
+function handleSearch() {
|
|
|
+ data.value = []
|
|
|
+ isSearch.value = true
|
|
|
+ send()
|
|
|
+ searchList.value.push(searchText.value)
|
|
|
+}
|
|
|
+watch(() => searchText.value, () => {
|
|
|
+ if (!searchText.value) {
|
|
|
+ isSearch.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+onReachBottom(() => {
|
|
|
+ if (!isLastPage.value) {
|
|
|
+ page.value++
|
|
|
+ }
|
|
|
+})
|
|
|
+function handleChange(e: { index: number }) {
|
|
|
+ activeTab.value = e.index
|
|
|
+ data.value = []
|
|
|
+ send()
|
|
|
+}
|
|
|
+function handleClearnSeachLocaData() {
|
|
|
+ showConfirm({
|
|
|
+ title: '警告',
|
|
|
+ msg: '是否删除历史搜索记录?',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ success() {
|
|
|
+ searchList.value = []
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+</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 items-center">
|
|
|
+ <wd-icon name="search" size="20px" color="#aaa" />
|
|
|
+ <input v-model="searchText" type="text" placeholder="请输入搜索内容" class="ml20rpx">
|
|
|
+ </view>
|
|
|
+ <view class="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="mr16rpx flex items-center justify-center rounded-30rpx bg-#F6F6F6 px24rpx py10rpx">
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx">
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ 热门搜索
|
|
|
+ </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">
|
|
|
+ <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-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>
|