yujialong 2 months ago
parent 43091ad9d3
commit 5a5c1f443e
  1. 1
      src/assets/images/empty.svg
  2. 49
      src/pages/CollectionDetail/index.tsx
  3. 46
      src/pages/ListenSearch/index.less
  4. 154
      src/pages/ListenSearch/index.tsx

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728469377393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8447" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M867.36 197.71a39.5 39.5 0 0 0 0.51-79h-0.47a39.5 39.5 0 0 0 0 79zM844 148.24a25.39 25.39 0 0 1 23.45-15.52h0.32A25.49 25.49 0 1 1 844 148.24zM172.91 353a33.92 33.92 0 1 0 33.92 33.91A33.95 33.95 0 0 0 172.91 353z m0 53.83a19.92 19.92 0 1 1 19.92-19.92 19.94 19.94 0 0 1-19.92 19.87zM226.87 152.77h12.61v12.84a7.58 7.58 0 0 0 15.15 0v-12.84h12.61a7.58 7.58 0 0 0 0-15.15h-12.61v-12.79a7.58 7.58 0 1 0-15.15 0v12.79h-12.61a7.58 7.58 0 0 0 0 15.15zM137.18 668.17h12.61v12.76a7.58 7.58 0 1 0 15.15 0V668.1h12.61a7.58 7.58 0 0 0 0-15.15h-12.61v-12.8a7.58 7.58 0 0 0-15.15 0V653l-12.61 0.08a7.57 7.57 0 0 0 0 15.14zM947.32 606.64h-12.6v-12.8a7.58 7.58 0 0 0-15.15 0v12.8H907a7.58 7.58 0 1 0 0 15.15h12.61v12.83a7.58 7.58 0 0 0 15.15 0v-12.83h12.6a7.58 7.58 0 1 0 0-15.15zM375.13 416.34H519a11.47 11.47 0 0 0 0-22.93H375.13a11.47 11.47 0 1 0 0 22.93zM588.23 466.39a11.48 11.48 0 0 0-11.47-11.47H375.13a11.47 11.47 0 1 0 0 22.93h201.63a11.48 11.48 0 0 0 11.47-11.46zM477.36 516.43H375.13a11.47 11.47 0 1 0 0 22.93h102.23a11.47 11.47 0 1 0 0-22.93zM173 814.67H87.79a15.47 15.47 0 1 0 0 30.93H173a15.47 15.47 0 0 0 0-30.93z" fill="#3BA366" p-id="8448"></path><path d="M917.39 744.7h-75.56V268.84a29.08 29.08 0 0 0-29-29H406.55a29.14 29.14 0 0 0-29 29v41.76h-71.98a29.14 29.14 0 0 0-29 29v475.9h-59.2a15.11 15.11 0 1 0 0 30.21h379.25l44.66 44.66 0.11 0.11a19.75 19.75 0 0 0 27.93-27.88l-16.85-16.89H760.7a15.11 15.11 0 1 0 0-30.21H741v-40.59h176.4a15.11 15.11 0 1 0 0-30.21z m-185-425.59a28.8 28.8 0 0 0-20.52-8.51H407.73V270h403.89v474.7h-70.77V339.64a28.81 28.81 0 0 0-8.51-20.53zM467.51 766.75h-0.09a76 76 0 1 1 0.09 0z m88-8.6l-3.36-3.36a107 107 0 1 0-17.84 18.34l2.74 2.73a19.62 19.62 0 0 0 5.87 15.9l23.6 23.6H306.76V340.82h403.88V815.5h-88.51L570.62 764a19.68 19.68 0 0 0-15.13-5.85z" fill="#3BA366" p-id="8449"></path></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

@ -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 (
<View className='collection_bg'>
<View
<View
className='collection_back'
style={{top: navigationBarHeight}}
style={{top: navigationBarHeight}}
onClick={()=>Taro.navigateBack()}
></View>
{
productDetail && <View
productDetail && <View
className='collection_cover'
style={{backgroundImage: `url(${productDetail.Product.PrdtCover})`}}
style={{backgroundImage: `url(${productDetail.Product.PrdtCover})`}}
></View>
}
<View
<View
className='collection_info_container'
>
<View className='collection_container'>
@ -148,38 +149,38 @@ export default function CollectionDetail() {
</View>
<View className='collection_desc'>{productDetail?.Product.PrdtDescription}</View>
</View>
<View
<View
className='collection_List'
>
{
productDetail?.Child.map((item: any, index: number) => (
<View
<View
className='collection_item'
key={index}
onClick={() => handleToSingleDetail(item.PrdtId)}
>
<Image
className='collection_item_cover'
src={item.PrdtCover}
src={item.PrdtCover}
lazyLoad
></Image>
<View className='collection_item_info'>
<View className='collection_item_title'>{item.PrdtTitle}</View>
<View className='collection_item_subtitle'>{item.PrdtSubtitle}</View>
<View className='collection_item_label_container'>
{
item.PrdtKeys.map((keys_item: any, keys_index: number) => (
keys_index < 3 && <View
keys_index < 3 && <View
className='collection_item_label'
key={keys_index}
key={keys_index}
>
<View className='collection_item_label_text'>{keys_item}</View>
</View>
))
}
</View>
</View>
</View>
))
@ -187,10 +188,10 @@ export default function CollectionDetail() {
</View>
</View>
</View>
<GoToStoreModal
visible={isToStoreOpen}
onClose={() => setisToStoreOpen(false)}
<GoToStoreModal
visible={isToStoreOpen}
onClose={() => setisToStoreOpen(false)}
type={0}
mallLink={prdtMallLink}
setmallLink={setprdtMallLink}

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

@ -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<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() {
@ -62,6 +34,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,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 (
<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'
@ -157,45 +123,55 @@ export default function SearchDetail() {
</View>
{/* 列表渲染 */}
<ScrollView
scrollY
scrollWithAnimation
className='subscribe_content'
enableFlex
>
<View
className='subscribe_container'
style={userSelect === 0 ? {gridTemplateColumns: 'repeat(3, 1fr)'} : {gridTemplateColumns: 'repeat(2, 1fr)'}}
>
{
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>
)
}
<Image
className='subscribe_content_singleItem_cover'
src={item.PrdtCover}
mode='aspectFill'
lazyLoad
></Image>
<View className='subscribe_content_singleItem_title'>{item.PrdtTitle}</View>
</View>
))
}
</View>
</ScrollView>
{
searchSingleResults && searchSingleResults.length > 0 ?
<ScrollView
scrollY
scrollWithAnimation
className='subscribe_content'
enableFlex
>
<View
className='subscribe_container'
style={userSelect === 0 ? { gridTemplateColumns: 'repeat(3, 1fr)' } : { gridTemplateColumns: 'repeat(2, 1fr)' }}
>
{
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>
)
}
<Image
className='subscribe_content_singleItem_cover'
src={item.PrdtCover}
mode='aspectFill'
lazyLoad
></Image>
<View className='subscribe_content_singleItem_title'>{item.PrdtTitle}</View>
</View>
))
}
</View>
</ScrollView> :
<View className='none'>
<Image
className='icon'
src={empty}
></Image>
<View></View>
</View>
}
</View>
)
}

Loading…
Cancel
Save