小程序适配弹窗

main
king 1 year ago
parent 8687fab500
commit 308294be5b
  1. 7
      src/components/button/MyButton.tsx
  2. 10
      src/components/custom-page-container/custom-page-container.module.scss
  3. 10
      src/components/custom-page-container/custom-page-container.tsx
  4. 2
      src/components/videoCover/videoCover.scss
  5. 2
      src/components/videoCover/videoCover.tsx
  6. 20
      src/pages/business/videoInfo/components/catalogue.tsx
  7. 17
      src/pages/business/videoInfo/components/course.tsx
  8. 14
      src/pages/business/videoInfo/videoInfo.tsx
  9. 2
      src/pages/meeting/meeting.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}`}>

@ -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 {

@ -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} />);
}

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

@ -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>

@ -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>
</>
);
}

@ -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

@ -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'>

@ -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";

Loading…
Cancel
Save