修改课程未登录查看

1 year ago · 178c227b1a
parent 4605f01aeb
commit 178c227b1a
8 changed files with 91 additions and 69 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/app.tsx
+++ b/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>
--- a/src/components/image/image.tsx
+++ b/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>
--- a/src/components/loginView/index.module.scss
+++ b/src/components/loginView/index.module.scss
@ -5,25 +5,28 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  image{
+
+  image {
    width: 320rpx;
    height: 208rpx;
  }
-  .title{
+
+  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #323635;
-    line-height: 80rpx;
  }
-  .label{
+
+  .label {
    font-size: 24rpx;
    font-weight: 500;
    color: #909795;
    line-height: 24rpx;
-    margin-bottom: 40rpx;
+    margin: 20rpx 0 ;
  }
-  .button{
-    width: 520rpx;
+
+  .button {
+    padding: 0 60rpx;
    height: 76rpx;
    background: #45D4A8;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
@ -33,7 +36,8 @@
    font-size: 32rpx;
    font-weight: 500;
  }
-  .nextLabel{
+
+  .nextLabel {
    font-size: 24rpx;
    font-weight: 500;
    color: #909795;
--- a/src/components/loginView/index.tsx
+++ b/src/components/loginView/index.tsx
@ -1,5 +1,5 @@
 import {CSSProperties, FC, useState} from "react";
-import {View,Image} from "@tarojs/components";
+import {View, Image} from "@tarojs/components";
 import styles from './index.module.scss'
 import NoLogin from '@/static/img/noLogin.png'
 import {Profile} from "@/store";
@ -9,55 +9,60 @@ import {userApi} from "@/api";
 interface Props {
  tips?: string
  height?: number
+  paddingTop?: number
+  style?: CSSProperties
+  offImage?: boolean
 }

-const LoginView: FC<Props> =  (props) => {
+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 {setUser, setToken, setCompany} = Profile.useContainer()
  const sizeStyle: CSSProperties = {
-    height:'1000rpx',
-    paddingTop:size,
+    height: `${props.height || 1000}rpx`,
+    paddingTop: `${props.paddingTop || 0}rpx`,
+    ...props.style,
  }

  function login() {
    if (isLoading) return;
-    Taro.showLoading({title:'微信授权中...'})
+    Taro.showLoading({title: '微信授权中...'})
    setLoading(true)
-      Taro.login({
-        success: async (res) => {
-          try {
-            const {catch_key, user, token, company} = await userApi.login(res.code)
-            Taro.hideLoading()
-            if (token) {
-              Taro.showToast({title:'授权成功',duration:1500,icon:'success',mask:true})
-              setTimeout(()=>{
-                setUser(user)
-                setToken(token)
-                setCompany(company)
-                setLoading(false)
-                Taro.switchTab({url: '/pages/home/home'})
-              },1500)
-            } else {
-              Taro.setStorageSync('openid', catch_key)
-              Taro.reLaunch({url: '/pages/check/check'})
-            }
-          } catch (e) {
-            Taro.hideLoading()
+    Taro.login({
+      success: async (res) => {
+        try {
+          const {catch_key, user, token, company} = await userApi.login(res.code)
+          Taro.hideLoading()
+          if (token) {
+            Taro.showToast({title: '授权成功', duration: 1500, icon: 'success', mask: true})
+            setTimeout(() => {
+              setUser(user)
+              setToken(token)
+              setCompany(company)
+              setLoading(false)
+              Taro.switchTab({url: '/pages/home/home'})
+            }, 1500)
+          } else {
+            Taro.setStorageSync('openid', catch_key)
+            Taro.reLaunch({url: '/pages/check/check'})
          }
-          setLoading(false)
+        } catch (e) {
+          Taro.hideLoading()
        }
-      })
+        setLoading(false)
+      }
+    })
  }

  return (
    <View className={styles.content} style={sizeStyle}>
-      <Image src={NoLogin}></Image>
-      <View className={styles.title}>暂未登录</View>
-      <View className={styles.label}>{text}</View>
-      <View onClick={()=>{login()}} className={styles.button}>立即登录</View>
-      <View className={styles.nextLabel}>点击立即登录完成微信授权以继续使用</View>
+      {
+        !props.offImage && <>
+          <Image src={NoLogin}/>
+          <View className={styles.title}>暂未登录</View>
+        </>
+      }
+      <View className={styles.label}>点击按钮完成微信授权</View>
+      <View onClick={login} className={styles.button}>立即登录</View>
    </View>
  )
 }
--- a/src/pages/business/videoInfo/components/catalogue.tsx
+++ b/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 ? <>
-              {
-                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>
+      {
+        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>
+        </View>
+      }

      <CustomPageContainer
        show={show}
--- a/src/pages/business/videoInfo/videoInfo.scss
+++ b/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 {
--- a/src/pages/home/home.tsx
+++ b/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 (
    <>
@ -41,7 +42,7 @@ const Home: FC = () => {
                     cancelBack/>
      <View className={styles.content}>
        <Spin enable={enable} overlay/>
-        <Search />
+        <Search/>
        <Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/>
        <Feature/>
        <FeatureRecommended