1.修改文章没有内容时不能添加收藏

2.修改图片的默认图片
3.新增图片组件最小高度加载图片后高度适配
v2
king 1 year ago
parent 56de47bf2c
commit c1e6f8a5bc
  1. 1
      src/components/collect/collect.module.scss
  2. 30
      src/components/image/image.tsx
  3. 2
      src/components/videoList/videoList.tsx
  4. 1
      src/pages/home/components/search.tsx
  5. 2
      src/pages/home/home.module.scss
  6. 2
      src/pages/manage/courseAdmin/courseAdmin.tsx
  7. 49
      src/pages/preview/brand/article/article.tsx
  8. 1
      src/pages/preview/brand/info/info.module.scss
  9. 2
      src/pages/preview/brand/info/info.tsx
  10. 164
      src/pages/preview/search/search/components/list.tsx
  11. 2
      src/pages/preview/search/search/index.tsx
  12. BIN
      src/static/img/组 498@2x.png
  13. 1
      types/user.d.ts

@ -1,4 +1,5 @@
.collect {
width: 130rpx;
display: flex;
align-items: center;
color: #909795;

@ -6,12 +6,14 @@ import avatar from '@/static/img/avatar.png'
import healthShard from '@/static/img/healthShard.png'
import professionShard from '@/static/img/professionShard.png'
import brandSecond from '@/static/img/brandSecond.png'
import courseShard from '@/static/img/courseShard.png'
interface Props extends ImageProps {
width?: number | string
height?: number | string
fallback?: string
errorType?: ImgErrType
fit?: boolean // 当网络图片加载完成后高度自动
}
const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...props}) => {
@ -24,7 +26,7 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
useEffect(() => {
if (!height && !isError && mode !== 'heightFix') {
if (!isError && props.fit) {
Taro.getImageInfo({
src,
success() {
@ -54,6 +56,9 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
case 'brand':
setErrorUrl(brandSecond)
break
case 'course':
setErrorUrl(courseShard)
break
}
}, [props.errorType])
@ -71,16 +76,15 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
}
return (
<View
style={{
overflow: 'hidden',
width: width ? `${width}rpx` : "100%",
height: height ? `${height}rpx` : "100%",
backgroundColor: (isError || !loading) ? 'transparent' : '#F8F8F8'
}}
className={`${props?.className}`}>
<View className={props?.className}
style={{
overflow: 'hidden',
width: width ? `${width}rpx` : "100%",
height: height ? `${height}rpx` : "100%",
backgroundColor: (isError || !loading) ? 'transparent' : '#F8F8F8'
}}>
{!isError &&
<View animation={animationData}>
<View animation={animationData} style={{height: '100%', width: '100%'}}>
<Image
{...props}
src={src}
@ -100,13 +104,11 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...p
{
isError && !loading &&
<Image
mode='widthFix'
mode='aspectFill'
src={errorUrl}
lazyLoad
fadeIn
style={{
width: "100%",
}}/>
style={{width: "100%", height: '100%'}}/>
}
</View>
)

@ -19,7 +19,7 @@ const VideoList: FC<Props> = ({data, errorType}) => {
return (
<View key={data.id} className={styles.health} onClick={jump}>
<Img src={data.url_path} mode='widthFix' errorType={errorType} height={346}/>
<Img src={data.url_path} mode='widthFix' errorType={errorType} height={346} fit/>
<Image src={play} className={styles.play} mode='aspectFit'/>
<View className='p-1'>
<View className='text-ellipsis-2 text-dark'>{data.title}</View>

@ -14,7 +14,6 @@ export const Search: FC = () => {
return (
<View className={styles.search} onClick={jump}>
<Image src={search} mode='widthFix' style={{width: 16, height: 16, verticalAlign: 'middle',padding:'0 20rpx'}}/>
{/*<Icon name='search' size={18} color='#808080'/>*/}
<View></View>
</View>
)

@ -61,7 +61,7 @@
display: flex;
align-items: center;
box-sizing: border-box;
//justify-content: center;
justify-content: center;
height: 68rpx;
margin-bottom: 40rpx;
font-size: 28rpx;

@ -163,7 +163,7 @@ const CourseAdmin: FC = () => {
checked={curs.includes(d.id)}
style={{marginTop: '30px'}}
onClick={() => addCurs(d.id)}/>}
<Img src={d.thumb} className={styles.curImage} width={280} height={164}/>
<Img src={d.thumb} className={styles.curImage} width={280} height={164} errorType='course'/>
<View>{d.title}</View>
</View>
<View className={styles.Operation}>

@ -64,7 +64,7 @@ const article: FC = () => {
}
const onCollect = (v: boolean | undefined) => {
setArticleInfo((s) => ({...s, collect: v} as ArticleRecord))
setArticleInfo((s) => ({...s, collect: v} as ArticleRecord))
}
Taro.useReady(() => {
@ -87,26 +87,24 @@ const article: FC = () => {
function helloWorld() {
return (
<>
<View className={styles.botmBox}>
<View>
<Collect
select={articleInfo?.collect}
styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
stylesImage={{margin: '0 0 8rpx 0'}}
owner_id={Number(id)}
owner_type={1}
onUpdate={onCollect}
/>
{
headings.length > 0 && <View className={styles.botmBox}>
<View>
<Collect
select={articleInfo?.collect}
styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
stylesImage={{margin: '0 0 8rpx 0'}}
owner_id={Number(id)}
owner_type={1}
onUpdate={onCollect}
/>
</View>
<View className='flex flex-column justify-center align-center' onClick={() => setShow(true)}>
<Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/>
<View></View>
</View>
</View>
{
headings.length > 0 && (
<View className='flex flex-column justify-center align-center' onClick={() => setShow(true)}>
<Image src={catalogue} mode='widthFix' style={{width: '40rpx', height: '40rpx'}}/>
<View></View>
</View>
)
}
</View>
}
<Spin overlay enable={enable}/>
<View
@ -118,7 +116,7 @@ const article: FC = () => {
<View id="childrenNode">
<View className={styles.articleTitle}>{articleInfo?.title}</View>
{
articleInfo?.brands.map(d => (
articleInfo?.brands?.map(d => (
<View className='flex align-center mb-4'>
<View className={`${styles.article} flex-1`}>
<Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/>
@ -175,12 +173,13 @@ const article: FC = () => {
>
<View>
<View className='text-center text-black relative clip'>
<View className='absolute left top bottom flex flex-column justify-center align-center' style={{width: '58px'}} onClick={() => setShow(false)}>
<Icon name='close' color="#000" bold />
<View className='absolute left top bottom flex flex-column justify-center align-center'
style={{width: '58px'}} onClick={() => setShow(false)}>
<Icon name='close' color="#000" bold/>
</View>
<View className='py-3 bold'></View>
</View>
<View className='hr-solid' />
<View className='hr-solid'/>
<View className="px-3 py-5">
{
headings.length > 0 && headings.map((d) => <View
@ -189,7 +188,7 @@ const article: FC = () => {
fontSize: '28rpx',
fontWeight: '500',
color: maoId === d.id ? '#45D4A8' : '#323635',
marginLeft: 24*(d.level-1) + 'px',
marginLeft: 24 * (d.level - 1) + 'px',
}}
onClick={() => mao(d.id)}>
{d.text}

@ -57,6 +57,7 @@ page{
height:128rpx;
background-color: #eee;
border-radius: 8rpx;
overflow: hidden;
}
.leftBox{
padding-right: 24rpx;

@ -126,7 +126,7 @@ const BrandInfo: FC = () => {
<View className={styles.desc}>{rfc33392time(i.created_at)} {i.page_view}</View>
</View>
<View className={styles.image}>
<Img width={172} height={128} src={i.cover}/>
<Img width={172} height={128} src={i.cover} errorType='brand'/>
</View>
</View>
</View>)}

@ -4,17 +4,17 @@ import styles from './list.module.scss'
import Taro from "@tarojs/taro";
import Empty from "@/components/empty/empty";
import Img from "@/components/image/image";
import { SearchApi } from "@/api/search";
import { AtLoadMore } from 'taro-ui'
import {SearchApi} from "@/api/search";
import {AtLoadMore} from 'taro-ui'
import {rfc33392time} from "@/utils/day";
import play from "@/static/img/play.png";
import play from "@/static/img/play-back.png";
type Props = {
name:string
clear:boolean
name: string
clear: boolean
}
const SearchList: FC<Props> = ({name,clear}) => {
console.log(name,'name')
const SearchList: FC<Props> = ({name, clear}) => {
console.log(name, 'name')
const globalData = Taro.getApp().globalData
const [page, setPage] = useState(1)
const [brands, setBrands] = useState<any[]>([])
@ -22,21 +22,21 @@ const SearchList: FC<Props> = ({name,clear}) => {
const [text, setText] = useState('')
const [loading, setLoading] = useState(true)
useEffect(()=>{
if(!clear){
useEffect(() => {
if (!clear) {
setBrands([])
setLoading(true)
}
},[clear])
}, [clear])
useEffect(() => {
if(name && clear){
if (name && clear) {
getData()
}
}, [page,name,clear])
}, [page, name, clear])
const getData = useCallback(async () => {
try {
const data = await SearchApi.list(page, 10,name)
const data = await SearchApi.list(page, 10, name)
if (page === 1) {
if (data.data.length < 10) {
setText('没有更多了~')
@ -46,7 +46,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
setBrands([
...data.data
])
}else{
} else {
setBrands([
...brands,
...data.data
@ -57,13 +57,13 @@ const SearchList: FC<Props> = ({name,clear}) => {
} catch (e) {
}
setLoading(false)
}, [page,name])
}, [page, name])
function jumpInfo(id: number,type:string) {
console.log(type,'type')
function jumpInfo(id: number, type: string) {
console.log(type, 'type')
let url = ''
switch (type){
switch (type) {
case 'brand':
url = '/pages/preview/brand/info/info';
break;
@ -81,13 +81,13 @@ const SearchList: FC<Props> = ({name,clear}) => {
}
function onScrollToLower(){
if (brands?.length < total) {
setPage(page + 1)
getData().then()
} else {
setText('没有更多了~')
}
function onScrollToLower() {
if (brands?.length < total) {
setPage(page + 1)
getData().then()
} else {
setText('没有更多了~')
}
}
return (
@ -95,65 +95,71 @@ const SearchList: FC<Props> = ({name,clear}) => {
className='scrollview'
scrollY
scrollWithAnimation
style={{height:`${globalData.screenHeight-140}px`,backgroundColor:`#f5f5f5`}}
style={{height: `${globalData.screenHeight - 140}px`, backgroundColor: `#f5f5f5`}}
onScrollToLower={onScrollToLower}
>
{ loading && <AtLoadMore status={'loading'}/>}
{loading && <AtLoadMore status={'loading'}/>}
{
brands.length >= 1 && !loading &&
<>
{brands.map((d) =>
<View onClick={() => jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}>
{
d.data.table === 'brand' &&
<>
<Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
<View className={styles.rightBox}>
<View className='font-weight mb-2 font-28'>{d.data.title}</View>
<View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
</View>
</>
}
{
d.data.table === 'article' &&
<>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}</View>
</View>
<Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
</>
}
{
d.data.table === 'video_records' &&
<>
<Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
<Image src={play} className={styles.play} mode='aspectFit'/>
<View className={styles.videoRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>{d.data['@data'].introduction}</View>
<View className={`${styles.desc} mt-2`}>: {d.data['@data'].video_view}</View>
</View>
</>
}
{
d.data.table === 'courses' &&
<>
<Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
<View className={styles.courseRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>:{d.data['@data'].class_hour} {d.data['@data'].charge}</View>
</View>
</>
}
</View>
)
}
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
</>
<>
{brands.map((d) =>
<View onClick={() => jumpInfo(d.data.id, d.data.table)} className={styles.box} key={d.data.id}>
{
d.data.table === 'brand' &&
<>
<Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}
errorType='brand'/>
<View className={styles.rightBox}>
<View className='font-weight mb-2 font-28'>{d.data.title}</View>
<View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
</View>
</>
}
{
d.data.table === 'article' &&
<>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View
className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}</View>
</View>
<Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}
errorType='course'/>
</>
}
{
d.data.table === 'video_records' &&
<>
<Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' errorType='health'
className={styles.image}/>
<Image src={play} className={styles.play} mode='aspectFit'/>
<View className={styles.videoRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>{d.data['@data'].introduction}</View>
<View className={`${styles.desc} mt-2`}>: {d.data['@data'].video_view}</View>
</View>
</>
}
{
d.data.table === 'courses' &&
<>
<Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}
errorType='course'/>
<View className={styles.courseRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>:{d.data['@data'].class_hour}
{d.data['@data'].charge}</View>
</View>
</>
}
</View>
)
}
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}}
className="font-28 mt-3 mb-3">{text}</View>
</>
}
{ !loading && brands.length === 0 && <Empty name='空空如也'/>}
{!loading && brands.length === 0 && <Empty name='空空如也'/>}
</ScrollView>
)
}

@ -142,7 +142,7 @@ const Search: FC = () => {
round
overlay
overlayStyle={'background:rgba(0,0,0,0)'}>
<SearchList name={value} clear={show}/>
{show && <SearchList name={value} clear={show}/>}
</PageContainer>
</View>
)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

1
types/user.d.ts vendored

@ -114,5 +114,6 @@ type ImgErrType = "acquiesce" // 默认
| 'health' // 健康
| 'profession' // 技能
| 'brand' // 品牌
| 'course' // 课程

Loading…
Cancel
Save