修改课程未登录查看

.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

src/app.tsx

@@ -32,7 +32,6 @@ function updateApp() {
 
 
 function App(props) {
-
   Taro.useLaunch(() => {
     updateApp()
     storageDep.remove()
@@ -65,7 +64,6 @@ function App(props) {
   useDidHide(() => {
   })
 
-
   return (
     <CustomWrapper>
       <Profile.Provider>

src/components/image/image.tsx

@@ -57,14 +57,13 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
         isError && !loading &&
         <Image
           className={styles.imgError}
-          mode='aspectFit'
+          mode='aspectFill'
           src={fallback}
           lazyLoad
           fadeIn
           style={{
-            width: width ? `${width * .7}rpx` : "70%",
-            height: height ? `${height * .7}rpx` : "70%",
-            margin: 'auto'
+            width: "100%",
+            height: "100%",
           }}/>
       }
     </View>

src/components/loginView/index.module.scss

@@ -5,25 +5,28 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
   image {
     width: 320rpx;
     height: 208rpx;
   }
+
   .title {
     font-size: 28rpx;
     font-weight: bold;
     color: #323635;
-    line-height: 80rpx;
   }
+
   .label {
     font-size: 24rpx;
     font-weight: 500;
     color: #909795;
     line-height: 24rpx;
-    margin-bottom: 40rpx;
+    margin: 20rpx 0 ;
   }
+
   .button {
-    width: 520rpx;
+    padding: 0 60rpx;
     height: 76rpx;
     background: #45D4A8;
     border-radius: 38rpx 38rpx 38rpx 38rpx;
@@ -33,6 +36,7 @@
     font-size: 32rpx;
     font-weight: 500;
   }
+
   .nextLabel {
     font-size: 24rpx;
     font-weight: 500;

src/components/loginView/index.tsx

@@ -9,16 +9,18 @@ import {userApi} from "@/api";
 interface Props {
   tips?: string
   height?: number
+  paddingTop?: number
+  style?: CSSProperties
+  offImage?: boolean
 }
 
 const LoginView: FC<Props> = (props) => {
   const [isLoading, setLoading] = useState(false)
   const {setUser, setToken, setCompany} = Profile.useContainer()
-  const text = props.tips ?? '登录后可查看更多内容'
-  const size: string = props.height? `${props.height}px`:'0rpx'
   const sizeStyle: CSSProperties = {
-    height:'1000rpx',
-    paddingTop:size,
+    height: `${props.height || 1000}rpx`,
+    paddingTop: `${props.paddingTop || 0}rpx`,
+    ...props.style,
   }
 
   function login() {
@@ -53,11 +55,14 @@ const LoginView: FC<Props> =  (props) => {
 
   return (
     <View className={styles.content} style={sizeStyle}>
-      <Image src={NoLogin}></Image>
+      {
+        !props.offImage && <>
+          <Image src={NoLogin}/>
           <View className={styles.title}>暂未登录</View>
-      <View className={styles.label}>{text}</View>
-      <View onClick={()=>{login()}} className={styles.button}>立即登录</View>
-      <View className={styles.nextLabel}>点击立即登录完成微信授权以继续使用</View>
+        </>
+      }
+      <View className={styles.label}>点击按钮完成微信授权</View>
+      <View onClick={login} className={styles.button}>立即登录</View>
     </View>
   )
 }

src/pages/business/videoInfo/components/catalogue.tsx

@@ -11,6 +11,7 @@ import curRecord from '@/static/img/curRecord.png'
 import hourRecord from "@/static/img/hourRecord.png"
 import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
 import {Profile} from "@/store";
+import LoginView from "@/components/loginView";
 
 interface Props {
   data: CourseDepData | null
@@ -30,7 +31,7 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
   const [current, setCurrent] = useState(1)
   const [show, setShow] = useState(false)
   const [playing, setPlaying] = useState(false)
-  const {token, empty} = Profile.useContainer()
+  const {token} = Profile.useContainer()
 
 
   videoEvents.onVideoState(({name}) => {
@@ -154,6 +155,19 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
           {current === 0 && <View className='short_desc'>{data?.course.short_desc || data?.course.title}</View>}
           {current === 1 && <View>
             <View className='my-2'>课程目录</View>
+            {!token && <LoginView offImage style={{
+              position: 'absolute',
+              left: 0,
+              height: 'auto',
+              right: 0,
+              bottom: 0,
+              top: 0,
+              margin: 'auto',
+              paddingTop: '100rpx',
+              justifyContent: 'flex-end',
+              flexDirection: 'column-reverse',
+              background: 'rgba(255,255,255,.9)'
+            }}/>}
             {data?.chapters.length
               ? Object.values(data?.chapters || {}).map((d, index) => <View key={d.id}>
                 <Collapse title={`${index + 1}.${d.name}`}>
@@ -175,18 +189,15 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
         </View>
       </View>
 
-      <View className='Videobutton'>
       {
-          token ? <>
+        token && <View className='Videobutton'>
           {
             playing ? <MyButton className='flex-1' onClick={onPause}>暂停</MyButton>
               : <MyButton className='flex-1' onClick={learning}>立即学习</MyButton>
           }
           <View className='px-3' onClick={() => setShow(true)}>...</View>
-            </>
-            : <MyButton className='flex-1' onClick={() => empty()}>立即登录</MyButton>
-        }
         </View>
+      }
 
       <CustomPageContainer
         show={show}

src/pages/business/videoInfo/videoInfo.scss

@@ -8,7 +8,6 @@
   }
 
 
-
   .header {
     margin-bottom: 10px;
     border-radius: 0 0 40rpx 40rpx;
@@ -29,6 +28,11 @@
     line-height: 1.75;
     word-break: break-word;
   }
+
+  .hours {
+    position: relative;
+    min-height: 440rpx;
+  }
 }
 
 .hor {

src/pages/home/home.tsx

@@ -1,4 +1,4 @@
-import {FC, useState} from "react";
+import {FC, useEffect, useState} from "react";
 import {Image, View} from "@tarojs/components";
 import styles from "./home.module.scss";
 import Adware from "@/pages/home/components/adware";
@@ -25,14 +25,15 @@ const Home: FC = () => {
     Taro.navigateTo({url: '/pages/login/login'})
   }
 
-  Taro.useLoad(() => {
+  useEffect(() => {
     HomeApi.home().then(res => {
       setData(res)
     })
     setTimeout(() => {
       setEnable(false)
     }, 600)
-  })
+  }, [])
+
 
   return (
     <>