From 5a5c1f443e19256adb061dc0918da93cc94101de Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 9 Oct 2024 18:35:42 +0800
Subject: [PATCH] fix
---
src/assets/images/empty.svg | 1 +
src/pages/CollectionDetail/index.tsx | 49 ++++-----
src/pages/ListenSearch/index.less | 46 ++++----
src/pages/ListenSearch/index.tsx | 154 +++++++++++----------------
4 files changed, 117 insertions(+), 133 deletions(-)
create mode 100644 src/assets/images/empty.svg
diff --git a/src/assets/images/empty.svg b/src/assets/images/empty.svg
new file mode 100644
index 0000000..bb2724c
--- /dev/null
+++ b/src/assets/images/empty.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/pages/CollectionDetail/index.tsx b/src/pages/CollectionDetail/index.tsx
index 42558c6..b04b60d 100644
--- a/src/pages/CollectionDetail/index.tsx
+++ b/src/pages/CollectionDetail/index.tsx
@@ -15,6 +15,7 @@ interface DetailProps {
PrdtSubtitle: string,
PrdtTitle: string,
}[],
+ IsFree: number,
IsSubscribed: number,
MallLink: string,
Product: {
@@ -96,7 +97,7 @@ export default function CollectionDetail() {
}
})
}
-
+
})
useEffect(() => {
@@ -107,17 +108,17 @@ export default function CollectionDetail() {
}, [])
const handleToSingleDetail = (id: string) => {
+ if(productDetail?.IsSubscribed === 1 || productDetail?.IsFree){
+ //已订阅/免费，跳转详情页
+ Taro.navigateTo({
+ url: '/pages/SingleDetail/index?id=' + id
+ })
+ } else
if(productDetail?.IsSubscribed === -1 || productDetail?.IsSubscribed === 2){
//未订阅，跳转商城
setprdtMallLink(productDetail.MallLink)
setisToStoreOpen(true)
}
- else if(productDetail?.IsSubscribed === 1){
- //已订阅，跳转详情页
- Taro.navigateTo({
- url: '/pages/SingleDetail/index?id=' + id
- })
- }
// Taro.navigateTo({
// url: '/pages/SingleDetail/index?id=' + id
// })
@@ -125,19 +126,19 @@ export default function CollectionDetail() {
return (
- Taro.navigateBack()}
>
{
- productDetail &&
}
-
-
@@ -148,38 +149,38 @@ export default function CollectionDetail() {
{productDetail?.Product.PrdtDescription}
-
{
productDetail?.Child.map((item: any, index: number) => (
- handleToSingleDetail(item.PrdtId)}
>
{item.PrdtTitle}
{item.PrdtSubtitle}
-
+
{
item.PrdtKeys.map((keys_item: any, keys_index: number) => (
- keys_index < 3 &&
{keys_item}
))
}
-
+
))
@@ -187,10 +188,10 @@ export default function CollectionDetail() {
-
- setisToStoreOpen(false)}
+
+ setisToStoreOpen(false)}
type={0}
mallLink={prdtMallLink}
setmallLink={setprdtMallLink}
diff --git a/src/pages/ListenSearch/index.less b/src/pages/ListenSearch/index.less
index 9dac243..dd1bb9e 100644
--- a/src/pages/ListenSearch/index.less
+++ b/src/pages/ListenSearch/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/ListenSearch/index.tsx b/src/pages/ListenSearch/index.tsx
index 85ddb0d..d75398c 100644
--- a/src/pages/ListenSearch/index.tsx
+++ b/src/pages/ListenSearch/index.tsx
@@ -1,38 +1,10 @@
import { Input, View, Image, Text, ScrollView } from '@tarojs/components'
import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
import searchIcon from '../../assets/images/searchIcon.png'
-import errorIcon from '../../assets/images/error.png'
+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() {
@@ -62,6 +34,7 @@ export default function SearchDetail() {
//管理登录弹窗
const [isGetUsePhone, setisGetUsePhone] = useState(false)
+ const [timer, setTimer] = useState(null);
const [searchText, setSearchText] = useState('');
const [searchSingleResults, setSearchSingleResults] = useState()
@@ -70,37 +43,30 @@ export default function SearchDetail() {
const [userSelect, setuserSelect] = useState(0)
// 搜索逻辑
- const handleSearch = (value: string) => {
- if(value){
+ const handleSearch = () => {
+ if(searchText){
//搜索单本结果
Taro.request({
method: 'POST',
url: 'https://interapi.jm-kid.com/api/audio/search/product',
data: {
timestamp: Date.now(),
- title: value,
+ title: searchText
},
success: (res: any) => {
console.log('依据专辑标题搜索熏听专辑列表', res.data)
setSearchSingleResults(res.data.data.products)
}
})
+ } else {
+ setSearchSingleResults([])
}
-
- // console.log('searchSingle=>', searchSingle)
- // setSearchSingleResults(searchSingle)
};
- // 使用防抖和节流 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) => {
@@ -130,15 +96,15 @@ export default function SearchDetail() {
return (
-
- setSearchText(e.detail.value)}
>
{/* 列表渲染 */}
-
-
- {
- searchSingleResults && searchSingleResults.length > 0 &&searchSingleResults.map((item: any, index: number) => (
- handleToSingleDetail(item.PrdtId)}
- >
- {
- item.isFree === 1 && (
-
-
- 免费绘本
-
-
- )
- }
-
-
- {item.PrdtTitle}
-
- ))
- }
-
-
+ {
+ searchSingleResults && searchSingleResults.length > 0 ?
+
+
+ {
+ searchSingleResults.map((item: any, index: number) => (
+ handleToSingleDetail(item.PrdtId)}
+ >
+ {
+ item.isFree === 1 && (
+
+
+ 免费绘本
+
+
+ )
+ }
+
+
+ {item.PrdtTitle}
+
+ ))
+ }
+
+ :
+
+
+ 抱歉，暂无查询结果
+
+ }
)
}