医学道
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
video/src/pages/manage/addCur/addCur.tsx

111 lines
3.0 KiB

import {Image, Radio, View} from "@tarojs/components";
import {getCurrentInstance} from "@tarojs/runtime";
import {ManageApi} from "@/api/manage";
import React, {FC, useCallback, useEffect, useState} from "react";
import Taro from "@tarojs/taro";
import styles from './addCur.module.scss'
import Empty from "@/components/empty/empty";
import MyButton from "@/components/button/MyButton";
const AddCur: FC = () => {
const {id} = getCurrentInstance()?.router?.params as { id: string }
const [courseId, setCourseId] = useState<number[]>([])
const [data, setData] = useState<Curriculum[]>([])
const [page] = useState(1)
const getData = useCallback(async () => {
try {
const res = await ManageApi.optionalCur(Number(id), page, 10)
if (res.length) {
setData(res)
}
} catch (e) {
}
}, [page])
useEffect(() => {
getData()
}, [])
function addCur(id: number) {
const index = courseId.indexOf(id)
if (index === -1) {
setCourseId([...courseId, id])
} else {
const old: number[] = JSON.parse(JSON.stringify(courseId))
old.splice(index, 1)
setCourseId(old)
}
}
function addAll() {
if (courseId.length === data.length) {
setCourseId([])
} else {
const courseIds = data.map(d => d.id)
setCourseId(courseIds)
}
}
function addCourses() {
console.log(courseId)
if (!courseId.length) return;
Taro.showModal({
title: "请选择课程类型",
cancelText: '选修',
confirmText: '必修',
async success({confirm}) {
try {
Taro.showLoading()
const is_required = confirm ? 1 : 0
await ManageApi.addCur({course_id: courseId, dep_id: [Number(id)], is_required: [is_required]})
const newData = data.reduce((pre, cur) => {
if (!courseId.includes(cur.id)) {
pre.push(cur)
}
return pre
}, [] as Curriculum[])
setData(newData)
Taro.showToast({title: "添加成功"})
} catch (e) {
}
Taro.hideLoading()
}
})
}
return (
<>
{
data.length ?
<View className='flex flex-wrap bg-white'>
{data?.map((d) =>
<View key={d.id} className={styles.curBox} onClick={() => addCur(d.id)}>
<Radio checked={courseId.includes(d.id)} onClick={() => addCur(d.id)} color='#45d4a8'/>
<View className='flex'>
<Image fadeIn lazyLoad src={d.thumb} className={styles.image}/>
<View>{d.title}</View>
</View>
</View>
)}
<View className={styles.fixed}>
<View className={styles.addAll}>
<Radio checked={courseId.length === data.length} onClick={addAll}></Radio>
<MyButton size='mini' onClick={addCourses}>{courseId.length}</MyButton>
</View>
</View>
</View>
: <Empty name='无更多课程'/>
}
</>
)
}
export default AddCur