From da5a2984722751150d79732a195374298945f4cb Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Fri, 11 Oct 2024 18:33:52 +0800 Subject: [PATCH] fix --- src/pages/CollectionDetail/index.tsx | 2 +- src/pages/Home/index.tsx | 32 ++--- src/pages/ListenSearch/index.tsx | 1 - src/pages/SearchDetail/index.less | 46 +++--- src/pages/SearchDetail/index.tsx | 203 ++++++++++++--------------- 5 files changed, 129 insertions(+), 155 deletions(-) diff --git a/src/pages/CollectionDetail/index.tsx b/src/pages/CollectionDetail/index.tsx index b04b60d..94a2a1f 100644 --- a/src/pages/CollectionDetail/index.tsx +++ b/src/pages/CollectionDetail/index.tsx @@ -108,7 +108,7 @@ export default function CollectionDetail() { }, []) const handleToSingleDetail = (id: string) => { - if(productDetail?.IsSubscribed === 1 || productDetail?.IsFree){ + if(productDetail?.IsSubscribed === 1 || productDetail?.IsFree === 1){ //已订阅/免费，跳转详情页 Taro.navigateTo({ url: '/pages/SingleDetail/index?id=' + id diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index c298498..6a5aa76 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -14,6 +14,7 @@ interface FreeItemProps { PrdtOrder: number, PrdtSubtitle: string, PrdtTitle: string, + IsSubscribed: number, } export default function Home() { @@ -240,27 +241,25 @@ export default function Home() { } }, [isGetUsePhone]) - const toDetail = (isSubscribed: number, id: number, isDetail: number) => { - if(isSubscribed === 0){ + const toDetail = (item: FreeItemProps, child: FreeItemProps | undefined) => { + const { IsSubscribed, PrdtId, MallLink } = item + if(IsSubscribed === 0){ //提醒用户登录 setisLoginOpen(true) - } - else if (isSubscribed === -1 || isSubscribed === 2) { + }else if(!child){ + Taro.navigateTo({ + url: `/pages/CollectionDetail/index?id=${PrdtId}` + }) + }else if (IsSubscribed === -1 || IsSubscribed === 2) { //未订阅，跳转商城 + setprdtMallLink(MallLink) setisToStoreOpen(true) - }else if(isSubscribed === 1){ + }else if(IsSubscribed === 1){ //已订阅，跳转详情页 Taro.navigateTo({ - url: `/pages/${isDetail ? 'SingleDetail' : 'CollectionDetail'}/index?id=${id}` + url: `/pages/SingleDetail/index?id=${child.PrdtId}` }) } - // else if(isSubscribed === 1 || isSubscribed === -1 || isSubscribed === 2){ - // //已订阅，跳转详情页 - // Taro.navigateTo({ - // url: '/pages/CollectionDetail/index?id=' + id - // }) - // } - } const handleBannerClick = (item: any) => { @@ -372,7 +371,7 @@ export default function Home() { key={index} > toDetail(item.IsSubscribed, item.PrdtId, 0)} + onClick={()=>toDetail(item)} > - toDetail(item.IsSubscribed, item.PrdtId, 1)} - > + { item.Child.map((childItem: any, Childindex: number) => ( toDetail(item, childItem)} > { - console.log('点击取消按钮清楚搜索栏') setSearchText('') } diff --git a/src/pages/SearchDetail/index.less b/src/pages/SearchDetail/index.less index 9dac243..dd1bb9e 100644 --- a/src/pages/SearchDetail/index.less +++ b/src/pages/SearchDetail/index.less @@ -11,7 +11,7 @@ display: flex; flex-direction: row; margin-bottom: 1rem; - + .subscribe_header_input { width: calc(100% - 2.5rem - 4rem); height: 2.5rem; @@ -20,7 +20,7 @@ padding-left: 3rem; border: .0625rem solid green; } - + .subscribe_header_dressing { width: 2.5rem; height: 1.5rem; @@ -28,7 +28,7 @@ font-size: 1rem; margin: auto 0 auto auto; } - + .subscribe_header_scanCodeBtn { position: absolute; top: 1.5625rem; @@ -36,7 +36,7 @@ width: 1.5rem; height: 1.5rem; } - + .subscribe_header_errorIcon { position: absolute; top: 1.5625rem; @@ -45,14 +45,14 @@ height: 1.5rem; z-index: 999; } - + .subscribe_header_searchContainer { position: relative; width: 0; height: 2.5rem; top: calc(2.5rem + .125rem); left: 0; - + .subscribe_searchContainer { position: absolute; left: 1.125rem; @@ -63,7 +63,7 @@ flex-direction: column; z-index: 999; opacity: .9; - + .subscribe_searchItem { // width: 100%; width: auto; @@ -72,12 +72,12 @@ border: .0625rem solid #f8f8f8; display: flex; flex-direction: row; - + .subscribe_searchItem_cover { width: 2.5rem; height: 2.5rem; } - + .subscribe_searchItem_title { width: auto; font-size: 1.125rem; @@ -86,11 +86,11 @@ } } } - - + + } } - + .subscribe_selection { width: 100%; height: 1.5rem; @@ -98,13 +98,13 @@ flex-direction: row; gap: 1rem; margin-bottom: 1rem; - + .subscribe_selection_item { width: 2.5rem; height: 1.5rem; margin: auto 0; display: flex; - + .subscribe_selection_item_text { margin: auto; } @@ -145,11 +145,11 @@ border-radius: .75rem 0; background-color: #fcca1e; display: flex; - + .subscribe_content_singleItem_label_text { font-size: .5rem; margin: auto; - } + } } } @@ -159,7 +159,7 @@ border-radius: .75rem; margin-bottom: auto; } - + .subscribe_content_singleItem_title { width: 100%; height: 2.5rem; @@ -191,11 +191,11 @@ border-radius: .75rem 0; background-color: #fcca1e; display: flex; - + .subscribe_content_singleItem_label_text { font-size: .5rem; margin: auto; - } + } } } @@ -205,7 +205,7 @@ border-radius: .75rem; margin-bottom: .625rem; } - + .subscribe_content_singleItem_title { width: calc(((100vw - 2rem - .625rem) / 2)); height: 1.25rem; @@ -227,4 +227,10 @@ } } } + .none { + padding-top: 5rem; + font-size: .9rem; + text-align: center; + color: #353535; + } } diff --git a/src/pages/SearchDetail/index.tsx b/src/pages/SearchDetail/index.tsx index b838bf8..20e3ef8 100644 --- a/src/pages/SearchDetail/index.tsx +++ b/src/pages/SearchDetail/index.tsx @@ -1,39 +1,9 @@ import { Input, View, Image, Text, ScrollView } from '@tarojs/components' import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro' -import React, { useState } from 'react' -import searchIcon from '../../assets/images/searchIcon.png' -import errorIcon from '../../assets/images/error.png' +import React, { useState, useEffect } from 'react' +import empty from '../../assets/images/empty.svg' import './index.less' -// 自定义防抖 Hook -function useDebounce(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void { - let timeoutId: ReturnType | null = null; - return (...args: any[]): void => { - //@ts-ignore - clearTimeout(timeoutId); - timeoutId = setTimeout(() => callback(...args), delay); - }; -} - -// 自定义节流 Hook -function useThrottle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void { - let lastCallTime: number | null = null; - let timeoutId: ReturnType | null = null; - return (...args: any[]): void => { - const now = Date.now(); - if (lastCallTime === null || now - lastCallTime >= delay) { - lastCallTime = now; - callback(...args); - } else if (!timeoutId) { - timeoutId = setTimeout(() => { - lastCallTime = now; - callback(...args); - timeoutId = null; - }, delay - (now - (lastCallTime as number))); - } - }; -} - export default function SearchDetail() { useShareAppMessage((res) => { @@ -62,6 +32,7 @@ export default function SearchDetail() { //管理登录弹窗 const [isGetUsePhone, setisGetUsePhone] = useState(false) + const [timer, setTimer] = useState(null); const [searchText, setSearchText] = useState(''); const [searchSingleResults, setSearchSingleResults] = useState() @@ -70,28 +41,22 @@ export default function SearchDetail() { const [userSelect, setuserSelect] = useState(0) // 搜索逻辑 - const handleSearch = (value: string) => { + const handleSearch = () => { //搜索单本结果 - const searchSingle = userSubscribeSingleList.filter(( item:any ) => item.PrdtTitle.includes(value)) + const searchSingle = userSubscribeSingleList.filter(( item:any ) => item.PrdtTitle.includes(searchText)) console.log('searchSingle=>', searchSingle) setSearchSingleResults(searchSingle) //搜索套装结果 - const searchCollection = userSubscribeCollectionList.filter(( item:any ) => item.PrdtTitle.includes(value)) + const searchCollection = userSubscribeCollectionList.filter(( item:any ) => item.PrdtTitle.includes(searchText)) console.log('searchCollection=>', searchCollection) setsearchCollectionResults(searchCollection) }; - // 使用防抖和节流 Hooks - const debouncedHandleSearch = useDebounce(handleSearch, 300); - const throttledHandleSearch = useThrottle(handleSearch, 500); - - // 监听输入框的变化 - const handleInputChange = (event: any) => { - setSearchText(event.detail.value); - debouncedHandleSearch(event.detail.value); - throttledHandleSearch(event.detail.value); - }; + useEffect(() => { + clearTimeout(timer) + setTimer(setTimeout(handleSearch, 300)) + }, [searchText]) //跳转详情页 const handleToCollectionDetail = (id: string) => { @@ -108,7 +73,6 @@ export default function SearchDetail() { //点击取消按钮清楚搜索栏 const handleClearResearch = () => { - console.log('点击取消按钮清楚搜索栏') setSearchText('') } @@ -182,15 +146,15 @@ export default function SearchDetail() { return ( - - setSearchText(e.detail.value)} > - {setuserSelect(0)}} > 单本 - {setuserSelect(1)}} + onClick={()=>{setuserSelect(1)}} > 套装 @@ -227,74 +191,81 @@ export default function SearchDetail() { {/* 列表渲染 */} { - !isGetUsePhone && - - 0 ? + - { - userSelect === 0 && searchSingleResults && searchSingleResults.length > 0 &&searchSingleResults.map((item: any, index: number) => ( - handleToSingleDetail(item.PrdtId)} - > - { - item.isFree === 1 && ( - - - 免费绘本 + + { + userSelect === 0 && searchSingleResults && searchSingleResults.length > 0 &&searchSingleResults.map((item: any, index: number) => ( + handleToSingleDetail(item.PrdtId)} + > + { + item.isFree === 1 && ( + + + 免费绘本 + - - ) - } - - - {item.PrdtTitle} - - )) - } + ) + } + + + {item.PrdtTitle} + + )) + } - { - userSelect === 1 && searchCollectionResults && searchCollectionResults.length > 0 && searchCollectionResults.map((item: any, index: number) => ( - handleToCollectionDetail(item.PrdtId)} - > - { - item.isFree === 1 && ( - - - 免费绘本 + { + userSelect === 1 && searchCollectionResults && searchCollectionResults.length > 0 && searchCollectionResults.map((item: any, index: number) => ( + handleToCollectionDetail(item.PrdtId)} + > + { + item.isFree === 1 && ( + + + 免费绘本 + - - ) - } - - {item.PrdtTitle} - {`共${item.ChildCount}本`} - - )) - } + ) + } + + {item.PrdtTitle} + {`共${item.ChildCount}本`} + + )) + } + + : + + + 抱歉，暂无查询结果 - } )