huoran
/
FE_five-color-flower
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
master
yujialong 1 month ago
parent c3f223e926
commit da5a298472
5 changed files with 129 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/pages/CollectionDetail/index.tsx
  2. 32
      src/pages/Home/index.tsx
  3. 1
      src/pages/ListenSearch/index.tsx
  4. 46
      src/pages/SearchDetail/index.less
  5. 203
      src/pages/SearchDetail/index.tsx

2
src/pages/CollectionDetail/index.tsx
Unescape View File

@ -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

32
src/pages/Home/index.tsx
Unescape View File

@ -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}
>
<View className='hot_info'
onClick={()=>toDetail(item.IsSubscribed, item.PrdtId, 0)}
onClick={()=>toDetail(item)}
>
<Image
className='hot_info_cover'
@ -387,14 +386,13 @@ export default function Home() {
</View>
</View>
</View>
<View className='hot_details'
onClick={()=>toDetail(item.IsSubscribed, item.PrdtId, 1)}
>
<View className='hot_details'>
{
item.Child.map((childItem: any, Childindex: number) => (
<View
className='hot_details_item'
key={Childindex}
onClick={()=>toDetail(item, childItem)}
>
<Image
className='hot_details_item_cover'

1
src/pages/ListenSearch/index.tsx
Unescape View File

@ -83,7 +83,6 @@ export default function SearchDetail() {
//点击取消按钮清楚搜索栏
const handleClearResearch = () => {
console.log('点击取消按钮清楚搜索栏')
setSearchText('')
}

46
src/pages/SearchDetail/index.less
Unescape View File

@ -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;
}
}

203
src/pages/SearchDetail/index.tsx
Unescape View File

@ -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<T>(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void {
let timeoutId: ReturnType<typeof setTimeout> | null = null;
return (...args: any[]): void => {
//@ts-ignore
clearTimeout(timeoutId);
timeoutId = setTimeout(() => callback(...args), delay);
};
}
// 自定义节流 Hook
function useThrottle<T>(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void {
let lastCallTime: number | null = null;
let timeoutId: ReturnType<typeof setTimeout> | 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<any>(null);
const [searchText, setSearchText] = useState<string>('');
const [searchSingleResults, setSearchSingleResults] = useState<any[]>()
@ -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 (
<View className='search_bg'>
<View className='subscribe_header'>
<View
<View
className='subscribe_header_searchContainer'
>
</View>
<Input
className='subscribe_header_input'
<Input
className='subscribe_header_input'
placeholder='请输入搜索内容'
value={searchText}
onInput={handleInputChange}
onInput={(e) => setSearchText(e.detail.value)}
></Input>
<View
className='subscribe_header_dressing'
@ -209,17 +173,17 @@ export default function SearchDetail() {
</View>
<View className='subscribe_selection'>
<View
<View
className='subscribe_selection_item'
style={userSelect === 0 ? {color: '#3ba366', fontSize: '1rem', height: '1rem', lineHeight: '1rem'} : {color: 'rgba(0, 0, 0, .3)', fontSize: '.875rem', height: '.875rem', lineHeight: '.875rem'}}
onClick={()=>{setuserSelect(0)}}
>
<Text className='subscribe_selection_item_text'>单本</Text>
</View>
<View
<View
className='subscribe_selection_item'
style={userSelect === 1 ? {color: '#3ba366', fontSize: '1rem', height: '1rem', lineHeight: '1rem'} : {color: 'rgba(0, 0, 0, .3)', fontSize: '.875rem', height: '.875rem', lineHeight: '.875rem'}}
onClick={()=>{setuserSelect(1)}}
onClick={()=>{setuserSelect(1)}}
>
<Text className='subscribe_selection_item_text'>套装</Text>
</View>
@ -227,74 +191,81 @@ export default function SearchDetail() {
{/* 列表渲染 */}
{
!isGetUsePhone &&
<ScrollView
scrollY
scrollWithAnimation
className='subscribe_content'
enableFlex
>
<View
className='subscribe_container'
style={userSelect === 0 ? {gridTemplateColumns: 'repeat(3, 1fr)'} : {gridTemplateColumns: 'repeat(2, 1fr)'}}
!isGetUsePhone && searchSingleResults && searchSingleResults.length > 0 ?
<ScrollView
scrollY
scrollWithAnimation
className='subscribe_content'
enableFlex
>
{
userSelect === 0 && searchSingleResults && searchSingleResults.length > 0 &&searchSingleResults.map((item: any, index: number) => (
<View
className='subscribe_content_singleItem'
key={index}
onClick={() => handleToSingleDetail(item.PrdtId)}
>
{
item.isFree === 1 && (
<View className='relative_container'>
<View className='subscribe_content_singleItem_label'>
<Text className='subscribe_content_singleItem_label_text'>免费绘本</Text>
<View
className='subscribe_container'
style={userSelect === 0 ? {gridTemplateColumns: 'repeat(3, 1fr)'} : {gridTemplateColumns: 'repeat(2, 1fr)'}}
>
{
userSelect === 0 && searchSingleResults && searchSingleResults.length > 0 &&searchSingleResults.map((item: any, index: number) => (
<View
className='subscribe_content_singleItem'
key={index}
onClick={() => handleToSingleDetail(item.PrdtId)}
>
{
item.isFree === 1 && (
<View className='relative_container'>
<View className='subscribe_content_singleItem_label'>
<Text className='subscribe_content_singleItem_label_text'>免费绘本</Text>
</View>
</View>
</View>
)
}
<Image
className='subscribe_content_singleItem_cover'
src={item.PrdtCover}
mode='aspectFill'
lazyLoad
></Image>
<View className='subscribe_content_singleItem_title'>{item.PrdtTitle}</View>
</View>
))
}
)
}
<Image
className='subscribe_content_singleItem_cover'
src={item.PrdtCover}
mode='aspectFill'
lazyLoad
></Image>
<View className='subscribe_content_singleItem_title'>{item.PrdtTitle}</View>
</View>
))
}
{
userSelect === 1 && searchCollectionResults && searchCollectionResults.length > 0 && searchCollectionResults.map((item: any, index: number) => (
<View
className='subscribe_content_collectionItem'
key={index}
onClick={() => handleToCollectionDetail(item.PrdtId)}
>
{
item.isFree === 1 && (
<View className='relative_container'>
<View className='subscribe_content_singleItem_label'>
<Text className='subscribe_content_singleItem_label_text'>免费绘本</Text>
{
userSelect === 1 && searchCollectionResults && searchCollectionResults.length > 0 && searchCollectionResults.map((item: any, index: number) => (
<View
className='subscribe_content_collectionItem'
key={index}
onClick={() => handleToCollectionDetail(item.PrdtId)}
>
{
item.isFree === 1 && (
<View className='relative_container'>
<View className='subscribe_content_singleItem_label'>
<Text className='subscribe_content_singleItem_label_text'>免费绘本</Text>
</View>
</View>
</View>
)
}
<Image
className='subscribe_content_singleItem_cover'
src={item.PrdtCover}
mode='aspectFit'
lazyLoad
></Image>
<View className='subscribe_content_singleItem_title'>{item.PrdtTitle}</View>
<View className='subscribe_content_collectionItem_count'>{`共${item.ChildCount}本`}</View>
</View>
))
}
)
}
<Image
className='subscribe_content_singleItem_cover'
src={item.PrdtCover}
mode='aspectFit'
lazyLoad
></Image>
<View className='subscribe_content_singleItem_title'>{item.PrdtTitle}</View>
<View className='subscribe_content_collectionItem_count'>{`共${item.ChildCount}本`}</View>
</View>
))
}
</View>
</ScrollView> :
<View className='none'>
<Image
className='icon'
src={empty}
></Image>
<View>抱歉，暂无查询结果</View>
</View>
</ScrollView>
}
</View>
)

Write Preview
Loading…
Cancel
Save