调整跳转和图片默认高度

v2
xing 1 year ago
parent 93064963a7
commit 56de47bf2c
  1. 13
      src/components/image/image.tsx
  2. 2
      src/components/videoList/videoList.tsx
  3. 23
      src/pages/home/components/feature_recommended.tsx
  4. 2
      src/pages/home/components/search.tsx
  5. 6
      src/pages/home/home.module.scss
  6. 2
      src/pages/manage/courseAdmin/courseAdmin.module.scss
  7. 2
      src/pages/manage/courseAdmin/courseAdmin.tsx
  8. 2
      src/pages/preview/health/health.tsx
  9. 4
      src/pages/preview/videoFull/videoFull.module.scss

@ -14,15 +14,24 @@ interface Props extends ImageProps {
errorType?: ImgErrType errorType?: ImgErrType
} }
const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard, ...props}) => { const Img: FC<Props> = ({src, mode = 'aspectFill', width, fallback = shard, ...props}) => {
const [isError, setIsError] = useState(false) const [isError, setIsError] = useState(false)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [errorUrl, setErrorUrl] = useState(fallback) const [errorUrl, setErrorUrl] = useState(fallback)
const [height, setHeight] = useState(props.height)
const imgAnimation = Taro.createAnimation({duration: 0}).opacity(0).step() const imgAnimation = Taro.createAnimation({duration: 0}).opacity(0).step()
const [animationData, setAnimationData] = useState<TaroGeneral.IAnyObject>(imgAnimation.export()) const [animationData, setAnimationData] = useState<TaroGeneral.IAnyObject>(imgAnimation.export())
useEffect(() => { useEffect(() => {
if (!height && !isError && mode !== 'heightFix') {
Taro.getImageInfo({
src,
success() {
setHeight(undefined)
}
})
}
setIsError(!src) setIsError(!src)
setLoading(!!src) setLoading(!!src)
}, [src]) }, [src])

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

@ -2,7 +2,6 @@ import {FC, useEffect, useState} from "react";
import {Image, Swiper, SwiperItem, View} from "@tarojs/components"; import {Image, Swiper, SwiperItem, View} from "@tarojs/components";
import styles from '../home.module.scss' import styles from '../home.module.scss'
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
import {HomeApi} from "@/api";
import first from '@/static/img/first.png' import first from '@/static/img/first.png'
import second from '@/static/img/second.png' import second from '@/static/img/second.png'
import third from '@/static/img/third.png' import third from '@/static/img/third.png'
@ -27,7 +26,6 @@ interface Data {
detailsUrl: string detailsUrl: string
data: DataContent[] data: DataContent[]
errorType: ImgErrType errorType: ImgErrType
type?: 'health' | 'kill'
} }
interface Props { interface Props {
@ -51,7 +49,6 @@ const FeatureRecommended: FC<Props> = (props) => {
url: '/pages/preview/health/health', url: '/pages/preview/health/health',
detailsUrl: '/pages/preview/videoFull/videoFull', detailsUrl: '/pages/preview/videoFull/videoFull',
data: [], data: [],
type: "health",
errorType: 'health' errorType: 'health'
}, },
{ {
@ -59,7 +56,6 @@ const FeatureRecommended: FC<Props> = (props) => {
url: '/pages/preview/profession/profession', url: '/pages/preview/profession/profession',
detailsUrl: '/pages/preview/videoFull/videoFull', detailsUrl: '/pages/preview/videoFull/videoFull',
data: [], data: [],
type: 'kill',
errorType: 'profession' errorType: 'profession'
}, },
{ {
@ -94,7 +90,7 @@ const FeatureRecommended: FC<Props> = (props) => {
title: d.title, title: d.title,
imageUrl: d.url_path, imageUrl: d.url_path,
description: d.introduction, description: d.introduction,
path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.title}` path: `?id=${d.id}`,
})) }))
} catch (e) { } catch (e) {
} }
@ -109,7 +105,7 @@ const FeatureRecommended: FC<Props> = (props) => {
imageUrl: d.url_path, imageUrl: d.url_path,
description: d.introduction, description: d.introduction,
title: d.title, title: d.title,
path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.title}` path: `?id=${d.id}`,
})) }))
} catch (e) { } catch (e) {
} }
@ -142,15 +138,8 @@ const FeatureRecommended: FC<Props> = (props) => {
}) })
}, [props]) }, [props])
// TODO 后续增加播放量使用公共接口 function jump(url: string, data: any) {
function jump(url: string, playId?: number, type?: 'health' | 'kill') { Taro.preload(data)
if (playId && type) {
if (type === 'health') {
HomeApi.healthSetPlay(playId)
} else if (type === 'kill') {
HomeApi.skillSetPlay(playId)
}
}
Taro.navigateTo({url}) Taro.navigateTo({url})
} }
@ -162,13 +151,13 @@ const FeatureRecommended: FC<Props> = (props) => {
<Image <Image
mode='heightFix' mode='heightFix'
className={styles.featureTitle} className={styles.featureTitle}
onClick={() => jump(d.url)} src={d.titleUrl}/> onClick={() => jump(d.url, d)} src={d.titleUrl}/>
{ {
d.data.length > 0 && d.data.map((c, index) => <View d.data.length > 0 && d.data.map((c, index) => <View
className='flex' className='flex'
style={{marginBottom: '16rpx'}} style={{marginBottom: '16rpx'}}
key={c.id} key={c.id}
onClick={() => jump(d.detailsUrl + c.path, c.id, d.type)}> onClick={() => jump(d.detailsUrl + c.path, d)}>
<View style={{position: 'relative'}}> <View style={{position: 'relative'}}>
<View className={styles.featureImage}> <View className={styles.featureImage}>
<Img src={c.imageUrl} height={100} width={140} errorType={d.errorType}/> <Img src={c.imageUrl} height={100} width={140} errorType={d.errorType}/>

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

@ -61,17 +61,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
justify-content: center; //justify-content: center;
height: 68rpx; height: 68rpx;
margin-bottom: 40rpx; margin-bottom: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC; font-family: PingFang SC-Medium, PingFang SC;
color: #909795; color: #909795;
line-height: 1; line-height: 1;
view {
margin-left: 8rpx;
}
} }
.adware { .adware {

@ -42,8 +42,6 @@
} }
.curImage { .curImage {
width: 280rpx;
height: 164rpx;
border-radius: 10rpx; border-radius: 10rpx;
margin: 0 20px 0 0; margin: 0 20px 0 0;
background: #eee; background: #eee;

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

@ -18,7 +18,7 @@ const Health: FC = () => {
const res = await HomeApi.health(page, 10) const res = await HomeApi.health(page, 10)
setData([ setData([
...data, ...data,
...res.data ...res.data,
]) ])
setTotal(res.total) setTotal(res.total)
} catch (e) { } catch (e) {

@ -10,7 +10,7 @@ page {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: calc(env(safe-area-inset-bottom) + 250rpx); bottom: calc(env(safe-area-inset-bottom) + 320rpx);
margin: auto; margin: auto;
background: #000; background: #000;
} }
@ -21,7 +21,7 @@ page {
bottom: env(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom);
width: 100%; width: 100%;
color: #fff; color: #fff;
padding: 0 30rpx; padding:20rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
background: #000; background: #000;
width: 100%; width: 100%;

Loading…
Cancel
Save