小程序适配弹窗

package.json

@@ -14,7 +14,7 @@
     "build:alipay": "taro build --type alipay",
     "build:tt": "taro build --type tt",
     "build:h5": "taro build --type h5",
-    "build:h5Playedu": "taro build --mode playedu --type h5 ",
+    "build:h5Playedu": "taro build --mode playedu --type h5",
     "build:rn": "taro build --type rn",
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
@@ -24,7 +24,7 @@
     "dev:alipay": "npm run build:alipay -- --watch",
     "dev:tt": "npm run build:tt -- --watch",
     "dev:h5": "npm run build:h5 -- --watch",
-    "dev:h5Playedu": "npm run build:h5 --mode playedu -- --watch ",
+    "dev:h5Playedu": "npm run build:h5 --mode playedu -- --watch",
     "dev:rn": "npm run build:rn -- --watch",
     "dev:qq": "npm run build:qq -- --watch",
     "dev:jd": "npm run build:jd -- --watch",

src/components/button/MyButton.tsx

@@ -20,7 +20,12 @@ const MyButton: FC<Props> = (props) => {
         break
       case 'warn':
         style.background = '#c94f4f'
+        style.color = '#fff'
         break
+      case 'primary':
+      case undefined:
+        style.background = '#45D4A8'
+        style.color = '#fff'
     }
 
     if (props.fillet) {
@@ -42,6 +47,8 @@ const MyButton: FC<Props> = (props) => {
 
   return (
     <Button
+      hoverClass='none'
+      plain
       {...props}
       style={buttonStyle()}
       className={`${styles.Mybutton} ${props.className}`}>

src/components/button/myButton.module.scss

@@ -9,6 +9,6 @@
   padding: 0;
   box-sizing: border-box;
   display: flex;
-  justify-content:center;
+  justify-content: center;
   align-items: center;
 }

src/components/custom-page-container/custom-page-container.module.scss

@@ -29,11 +29,11 @@
 }
 
 .overlayEnter {
-  animation: overlayEnter 300ms ease-in-out forwards;
+  animation: overlayEnter 400ms ease-in-out forwards;
 }
 
 .overlayQuit {
-  animation: overlayQuit 300ms ease-in-out forwards;
+  animation: overlayQuit 400ms ease-in-out forwards;
 }
 
 @keyframes overlayQuit {
@@ -56,11 +56,11 @@
 
 
 .childrenButton {
-  animation: childrenButton 300ms ease-in-out forwards;
+  animation: childrenButton 400ms forwards;
 }
 
 .childrenButtonQuit {
-  animation: childrenButton 1000ms ease-in-out forwards alternate-reverse;
+  animation: childrenButton 1000ms forwards alternate-reverse;
 }
 
 @keyframes childrenButton {
@@ -75,7 +75,7 @@
 }
 
 .childrenCenter {
-  animation: childrenCenter 300ms ease-in-out forwards;
+  animation: childrenCenter 400ms ease-in-out forwards;
 }
 
 .childrenCenterQuit {

src/components/custom-page-container/custom-page-container.tsx

@@ -3,7 +3,7 @@ import {CSSProperties, FC, useCallback, useEffect, useState} from "react";
 import styles from './custom-page-container.module.scss'
 import Taro from "@tarojs/taro";
 
-const PageContainerInner: FC<PageContainerProps> = (props) => {
+export const PageContainerInner: FC<PageContainerProps> = (props) => {
   const [visible, setVisible] = useState(props.show)
   const [playing, setPlaying] = useState(false)
 
@@ -14,7 +14,7 @@ const PageContainerInner: FC<PageContainerProps> = (props) => {
         if (playing) {
           setTimeout(() => {
             setVisible(props.show)
-          },300)
+          }, 400)
         } else {
           setVisible(props.show)
         }
@@ -23,7 +23,7 @@ const PageContainerInner: FC<PageContainerProps> = (props) => {
         setTimeout(() => {
           setPlaying(false)
           setVisible(props.show)
-        }, 300)
+        }, 400)
       }
     }
 
@@ -92,7 +92,9 @@ const CustomPageContainer: FC<PageContainerProps> = (props) => {
     return <PageContainerInner {...props} />
   }
   if (process.env.TARO_ENV !== 'h5') {
-    return (<PageContainer {...props} />)
+    return (<PageContainer {...props} round>
+      <View className={styles.content} style={{position: 'relative'}}>{props.children}</View>
+    </PageContainer>)
   }
   return (<PageContainerInner {...props} />);
 }

src/components/videoCover/videoCover.scss

@@ -44,7 +44,7 @@
 
     Image {
       width: 100%;
-      height: 100px;
+      //height: 100%;
     }
   }
 

src/components/videoCover/videoCover.tsx

@@ -28,7 +28,7 @@ const VideoCover: FC<VideoCoverProps> = (opt: VideoCoverProps) => {
     <View className='videoBox'>
       <View className='video' onClick={jump}>
         <View className='upper'>
-          <Image src={opt.thumb} mode='scaleToFill'/>
+          <Image src={opt.thumb} mode='widthFix'/>
           {opt.content && <View className='content'>{opt.content}</View>}
           {opt.marker && <View className='marker'>{opt.marker}</View>}
         </View>

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

@@ -5,11 +5,11 @@ import {CourseDepData} from "@/api";
 import Collapse from "@/components/collapse/collapse";
 import Hours from "@/pages/business/videoInfo/components/hours";
 import Taro from "@tarojs/taro";
-import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
 import MyButton from "@/components/button/MyButton";
-import curRecord from '@/static/img/curRecord.png'
-import hourRecord from '@/static/img/hourRecord.png'
 import videoEvents from "@/hooks/videoEvents";
+import curRecord from '@/static/img/curRecord.png'
+import hourRecord from "@/static/img/hourRecord.png"
+import {PageContainerInner} from "@/components/custom-page-container/custom-page-container";
 
 interface Props {
   data: CourseDepData | null
@@ -25,7 +25,7 @@ const tabList = [
 ]
 
 
-const Catalogue: FC<Props> = ({data, setHors, id, playId,}) => {
+const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
   const [current, setCurrent] = useState(1)
   const [show, setShow] = useState(false)
   const [playing, setPlaying] = useState(false)
@@ -156,36 +156,32 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId,}) => {
 
       <View className='Videobutton'>
         {
-          playing ? <MyButton onClick={onPause}>暂停</MyButton>
-            : <MyButton onClick={learning}>立即学习</MyButton>
+          playing ? <MyButton style={{flex: '1'}} onClick={onPause}>暂停</MyButton>
+            : <MyButton style={{flex: '1'}} onClick={learning}>立即学习</MyButton>
         }
 
         <View className='px-3' onClick={() => setShow(true)}>...</View>
       </View>
 
-      <CustomPageContainer
+      <PageContainerInner
         show={show}
         position='bottom'
         onClickOverlay={() => setShow(false)}>
         <View className='more'>
           <View>更多操作</View>
-
           <View className='flex justify-around'>
             <View onClick={() => Taro.navigateTo({url: '/pages/business/curHistory/curHistory?course_id=' + id})}>
               <Image src={curRecord} className='image'/>
               课程记录
             </View>
-
             <View onClick={jumCurHistory} className={playId ? undefined : 'filter-saturate'}>
               <Image src={hourRecord} className='image'/>
               当前课时学习记录
             </View>
-
           </View>
-
           <MyButton onClick={() => setShow(false)} type='default' fillet>取消</MyButton>
         </View>
-      </CustomPageContainer>
+      </PageContainerInner>
     </>
   );
 }

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

@@ -8,9 +8,9 @@ import Multi from "@/components/topic/multi";
 import Judge from "@/components/topic/judge";
 import ShortAnswer from "@/components/topic/shortAnswer";
 import unique_ident from "@/hooks/unique_ident";
-import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
 import MyButton from "@/components/button/MyButton";
 import {formatMinute} from "@/utils/time";
+import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
 
 interface Props {
   id: number,
@@ -22,7 +22,7 @@ interface Props {
 
 let seek: (time: number) => void
 let record: boolean[] = [] //答案记录
-const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
+const Course: FC<Props> = ({id, courseId, preview, curEnd}) => {
   const [breakpoint, setBreakpoint] = useState<number[]>([])   // 断点
   const [show, setShow] = useState(false)  // 题
   const [data, setData] = useState<HourPlayData | null>(null)
@@ -217,14 +217,12 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
         setTime={videoSeek}
       />
 
-
-      <View>
       <CustomPageContainer
         show={show}
         position='bottom'
-          round
         onAfterLeave={again}
       >
+        <View>
           <View className='text-center mt-2 text-muted'>
             <Text className='mr-2'>{formatMinute(time)}考题</Text>
             <Text>{index + 1}/{examAll?.[time]?.length}</Text>
@@ -268,13 +266,15 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
               <View>
                 {
                   index !== 0 &&
-                  <MyButton type='default' size='mini' width={150} onClick={() => setIndex(index - 1)}>上一题</MyButton>
+                  <MyButton type='default' size='mini' width={150}
+                            onClick={() => setIndex(index - 1)}>上一题</MyButton>
                 }
               </View>
               <View>
                 {
                   (index + 1) !== examAll?.[time]?.length &&
-                  <MyButton size='mini' width={150} type='default' onClick={() => setIndex(index + 1)}>下一题</MyButton>
+                  <MyButton size='mini' width={150} type='default'
+                            onClick={() => setIndex(index + 1)}>下一题</MyButton>
                 }
               </View>
             </View>
@@ -290,10 +290,9 @@ const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
               }
             </View>
           </View>
-        </CustomPageContainer>
         </View>
+      </CustomPageContainer>
     </>
-
   )
 }
 export default Course

src/pages/business/videoInfo/videoInfo.tsx

@@ -10,6 +10,7 @@ import {formatMinute} from "@/utils/time";
 import unique_ident from "@/hooks/unique_ident";
 import videoEvents from "@/hooks/videoEvents";
 
+
 const VideoInfo: FC = () => {
   const {id, depId} = Taro.getCurrentInstance()?.router?.params as any
   const [data, setData] = useState<CourseDepData | null>(null)
@@ -18,7 +19,6 @@ const VideoInfo: FC = () => {
   const [playing, setPlaying] = useState(false)  // 学习中
 
   const getData = useCallback(async (playing: boolean) => {
-    console.log({id})
     const res = await curriculum.courseDep(id, depId)
     if (res) {
       setData(res)
@@ -109,9 +109,15 @@ const VideoInfo: FC = () => {
     <>
       <View className='content'>
         <View className='content-video'>
-          {playId ?
-            <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
-            : <Image src={data?.course.thumb || ''} className='image' mode='scaleToFill'/>}
+          {
+            playId
+              ? <Course
+                id={playId}
+                courseId={id}
+                curEnd={curEnd}
+                preview={preview}/>
+              : <Image src={data?.course.thumb || ''} className='image' mode='scaleToFill'/>
+          }
         </View>
 
         <View className='header'>

src/pages/meeting/meeting.tsx

@@ -50,7 +50,7 @@ const Meeting: FC = () => {
       }
       location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
         "appid=" + h5params!.appid +
-        "&redirect_uri=" + encodeURIComponent(h5params!.route + `?depid=1&phone_number=${value.phone_number}&user_name=${value.user_name}`) +
+        "&redirect_uri=" + encodeURIComponent(h5params!.route + `?depid=1&phone_number=${value.phone_number}&user_name=${value.user_name}&meeting_id=${meeting_id}`) +
         "&response_type=code" +
         "&scope=snsapi_userinfo" +
         "#wechat_redirect";