新增图片默认加载类型和我的页面header动画

1 year ago · 70e61e187e
parent a43fc7498c
commit 70e61e187e
8 changed files with 55 additions and 29 deletions
--- a/.env
+++ b/.env
@ -1,5 +1,5 @@
-#TARO_APP_API=https://yjx.dev.yaojiankang.top
-TARO_APP_API=https://mooc.yaojiankang.top
+TARO_APP_API=https://yjx.dev.yaojiankang.top
+#TARO_APP_API=https://mooc.yaojiankang.top
 #TARO_APP_API=https://shopfix.yaojiankang.top
 #TARO_APP_API=https://playedu.yaojiankang.top
 TARO_APP_LGOIN=true
--- a/src/api/brand.ts
+++ b/src/api/brand.ts
@ -9,6 +9,8 @@ export type BrandRecord = {
  graphic_introduction: string
  disabled: number
  introductory_video_resource: any
+  article_count: number
+  created_at: string
 }
 export type ArticleRecord = {
  title: string
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@ -3,16 +3,19 @@ import {Image, ImageProps, View} from "@tarojs/components";
 import shard from '@/static/img/shard.png'
 import styles from './image.module.scss'
 import Taro from "@tarojs/taro";
+import avatar from '@/static/img/avatar.png'

 interface Props extends ImageProps {
  width?: number | string
  height?: number | string
  fallback?: string
+  errorType?: "acquiesce" | 'avatar'
 }

 const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard, ...props}) => {
  const [isError, setIsError] = useState(false)
  const [loading, setLoading] = useState(true)
+  const [errorUrl, setErrorUrl] = useState(fallback)

  const imgAnimation = Taro.createAnimation({duration: 0}).opacity(0).step()
  const [animationData, setAnimationData] = useState<TaroGeneral.IAnyObject>(imgAnimation.export())
@ -22,6 +25,18 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
    setLoading(!!src)
  }, [src])

+  useEffect(() => {
+    switch (props.errorType) {
+      case undefined:
+      case "acquiesce":
+        setErrorUrl(fallback)
+        break
+      case "avatar":
+        setErrorUrl(avatar)
+        break
+    }
+  }, [props.errorType])
+
  // 图片加载失败
  function onErrorHandler() {
    setLoading(false)
@ -40,7 +55,7 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
      style={{
        width: `${width}rpx`,
        height: `${height}rpx`,
-        backgroundColor: '#F8F8F8'
+        backgroundColor: (isError || !loading) ? 'transparent' : '#F8F8F8'
      }}
      className={`${props?.className} ${styles.imgBox}`}>
      {!isError &&
@ -51,8 +66,12 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
            mode={mode}
            lazyLoad
            fadeIn
-            defaultSource={fallback}
-            style={{width: width ? `${width}rpx` : "100%", height: height ? `${height}rpx` : "100%"}}
+            defaultSource={errorUrl}
+            style={{
+              width: width ? `${width}rpx` : "100%",
+              height: height ? `${height}rpx` : "100%",
+              verticalAlign: 'middle'
+            }}
            onError={onErrorHandler}
            onLoad={onLoadHandler}/>
        </View>
@ -62,7 +81,7 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
        <Image
          className={styles.imgError}
          mode='aspectFill'
-          src={fallback}
+          src={errorUrl}
          lazyLoad
          fadeIn
          style={{
--- a/src/components/learningRecord/learningRecord.tsx
+++ b/src/components/learningRecord/learningRecord.tsx
@ -59,7 +59,6 @@ const LearningRecord: FC<Props> = ({userId}) => {
  }, [userId])

  return (<View className={styles.box} style={{display: 'block'}}>
-    <View className='font-weight font-32 mb-4'>学习记录</View>
    <Tabs tabList={tabList} onChange={tabChange} backMode/>
    <View className={styles.total}>
      总共学习
--- a/src/pages/my/components/header/header.tsx
+++ b/src/pages/my/components/header/header.tsx
@ -4,6 +4,7 @@ import styles from "@/pages/my/my.module.scss";
 import avatar from "@/static/img/avatar.png"
 import blacktriang from "@/static/img/blacktriangle.png"
 import {FC} from "react";
+import Img from "@/components/image/image";

 interface Props {
  companyList: Company[]
@ -16,13 +17,13 @@ const Header: FC<Props> = ({companyList, showCompany}) => {
  return (
    <View className={styles.header}>
      <View className='flex'>
-        <Image  src={user?.avatar || avatar} className={styles.avatar}/>
+        <Img width={100} height={100} src={user?.avatar || avatar} className={styles.avatar} errorType='avatar'/>
        {
          token ? <View className='flex-1 mt-1'>
              <View className='font-32'>{user?.name}</View>
              <View className='flex align-center mt-2' onClick={showCompany}>
                <Text style={{fontSize: '24rpx', fontWeight: '500', color: '#323635'}}>{company?.name}</Text>
-                {companyList.length > 2 && <Image src={blacktriang} style={{width: '20rpx', height: '20rpx'}}></Image>}
+                {companyList.length > 2 && <Image src={blacktriang} style={{width: '20rpx', height: '20rpx'}}/>}
              </View>
            </View>
            : <View className='flex-1'>
--- a/src/pages/my/my.module.scss
+++ b/src/pages/my/my.module.scss
@ -4,6 +4,12 @@ page {
  overflow-x: hidden;
 }

+.navigation {
+  transition: all 300ms;
+  display: flex;
+  align-items: center;
+}
+
 .page {
  background: linear-gradient(180deg, #45D4A8 0%, rgba(69, 212, 168, 0) 100%) no-repeat;
  background-size: 100% 458rpx;
@ -47,8 +53,6 @@ page {
  font-size: 10rpx;

  .avatar {
-    width: 100px;
-    height: 100px;
    margin-right: 30px;
  }
 }
@ -59,7 +63,7 @@ page {
  box-sizing: border-box;
  height: 136rpx;

-  &:nth-child(n) {
+  &:nth-child(odd) {
    padding-right: 11rpx;
  }

--- a/src/pages/my/my.tsx
+++ b/src/pages/my/my.tsx
@ -69,9 +69,10 @@ const My: FC = () => {
        backgroundColor={`rgba(255,255,255,${navbarOpacity})`}
        cancelBack>
        {
-          Number(navbarOpacity) > .5 && <View className='flex align-center'>
-            <Img src={user?.avatar || avatar} mode='heightFix' width={60} height={60}/>
-            <Text className='pl-1'>{user?.name}</Text>
+          <View className={styles.navigation}
+                style={{transform: `translate(0,${Number(navbarOpacity) > .5 ? "0%" : '-300%'})`}}>
+            <Img src={user?.avatar || avatar} mode='heightFix' width={50} height={50} errorType='avatar'/>
+            <Text className='pl-2'>{user?.name}</Text>
          </View>
        }
      </NavigationBar>
@ -139,7 +140,6 @@ const My: FC = () => {
          </PageContainer>
        </View>
      </ScrollView>
-
    </View>
  )
 }
--- a/src/pages/preview/brand/list/list.tsx
+++ b/src/pages/preview/brand/list/list.tsx
@ -5,6 +5,7 @@ import Taro, {useReachBottom} from "@tarojs/taro";
 import Empty from "@/components/empty/empty";
 import Spinner from "@/components/spinner";
 import Img from "@/components/image/image";
+import {formatDate} from "@/utils/time";

 const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onClick}) => {
  let media: ReactNode
@ -45,10 +46,10 @@ const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onCl
          {data.graphic_introduction}
        </View>
        <View className="flex gap20rpx font-24 text-muted">
-          <View>2023/03.29 12:22:01</View>
+          <View>{formatDate(new Date(data.created_at), "YY-MM-dd hh:mm:ss")}</View>
          <View className="flex-1"></View>
-          <View>文章：123</View>
-          <View>点赞：234</View>
+          <View>文章：{data.article_count}</View>
+          <View>点赞：{(Math.random() * 100).toFixed(0)}</View>
        </View>
      </View>
    </View>
@ -108,7 +109,7 @@ const BrandList: FC = () => {
      </>
    )
  } else {
-    content = <Empty name='空空如也'/>
+    content = <Empty name='暂无品牌入驻'/>
  }

  return (