修改课程管理

src/pages/manage/courseAdmin/components/search.tsx

@@ -1,23 +1,45 @@
 import {FC, useCallback, useEffect, useState} from "react";
-import {Input, Radio, View} from "@tarojs/components";
+import {Image, Input, Radio, View} from "@tarojs/components";
 import styles from "../courseAdmin.module.scss";
 import Icon from "@/components/icon";
 import {CourseAllParam, curriculum} from "@/api";
 import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
 import Empty from "@/components/empty/empty";
 import MyButton from "@/components/button/MyButton";
+import downArrow from '@/static/img/downArrow.png'
+import downArrowKey from '@/static/img/downArrowKey.png'
+import omit from '@/static/img/omit.png'
+import Taro from "@tarojs/taro";
 
 interface Props {
   param: CourseAllParam
   setParam: (data: CourseAllParam) => void
+  total: number
+  setBatch: (data: boolean) => void
 }
 
-export const Search: FC<Props> = ({param, setParam}) => {
+export const Search: FC<Props> = ({param, setParam, total, setBatch}) => {
   const [show, setShow] = useState(false)
   const [deps, setDeps] = useState<Manage[]>([])
   const [depId, setDepId] = useState<number>(param.dep_id)
   const [title, setTitle] = useState(param.title)
 
+
+  function onBatch() {
+    Taro.showActionSheet({
+      itemList: ['批量添加部门'],
+      success({tapIndex}) {
+        switch (tapIndex) {
+          case 0:
+            setBatch(true)
+            break
+        }
+      },
+      fail() {
+      }
+    })
+  }
+
   async function getDepList() {
     try {
       const res = await curriculum.department()
@@ -69,14 +91,32 @@ export const Search: FC<Props> = ({param, setParam}) => {
             })}
           />
         </View>
-        <View className='mt-3'>
-          <View onClick={() => setShow(true)} className={styles.select}>
-            选择部门
+        <View className='mt-3 flex justify-between font-24 text-dark align-center'>
+          <View className="flex">
+            <View onClick={() => setShow(true)} className={styles.select}>
+              选择部门
+              <Image src={downArrow} mode='widthFix' className={styles.icon}/>
+            </View>
+
+            {
+              param.dep_id > 0
+              && <View className={'ml-5' + ` ${styles.select}`}
+                       style={{background: 'rgba(68,215,170,.08)', color: '#44d7aa'}}>
+                {deps.find(d => d.id === param.dep_id)?.name}
+                <Image src={downArrowKey} mode='widthFix' className={styles.icon}/>
+              </View>
+            }
+            <View>
+            </View>
+          </View>
+
+          <View className='flex align-center' onClick={onBatch}>
+            {total}个课程
+            <Image src={omit} className={styles.icon}/>
           </View>
         </View>
       </View>
 
-      {param.dep_id > 0 && <View className='mt-2'>{deps.find(d => d.id === param.dep_id)?.name}：</View>}
 
       <CustomPageContainer show={show} position='top' onClickOverlay={() => setShow(false)}>
         <View className={styles.custom}>

src/pages/manage/courseAdmin/courseAdmin.module.scss

@@ -21,8 +21,8 @@ page {
   overflow: hidden;
 }
 
-.select{
-  width: 172rpx;
+.select {
+  padding: 0 30rpx;
   height: 56rpx;
   background: #F6F6F6;
   border-radius: 28rpx;
@@ -35,6 +35,12 @@ page {
   color: #323635;
 }
 
+.icon {
+  width: 20rpx;
+  height: 20rpx;
+  margin-left: 10rpx;
+}
+
 .radioBox {
   border-bottom: 1px solid #F5F8F7;
   padding: 20px 0;
@@ -49,6 +55,9 @@ page {
 .curBox {
   background: #fff;
   margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .curTitle {
@@ -61,22 +70,20 @@ page {
   border-radius: 10rpx;
   margin: 0 20px 0 0;
   background: #eee;
-}
-
-.Operation {
-  display: flex;
-  justify-content: space-around;
-
-  taro-view-core,
-  View {
-    padding: 20rpx 0;
-    flex: 1;
-    width: 100%;
-    text-align: center;
+  overflow: hidden;
+  position: relative;
 
-    &:last-child {
-      border: 1px solid #F5F8F7;
-    }
+  .classHour {
+    position: absolute;
+    font-size: 24rpx;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 50;
+    background: rgba(#000, .6);
+    top: 0;
+    left: 0;
+    padding: 5rpx 20rpx;
+    color: #FFFFFF;
+    border-radius: 0 0 10rpx 0;
   }
 }
 

src/pages/manage/courseAdmin/courseAdmin.tsx

@@ -1,5 +1,5 @@
 import {FC, useCallback, useEffect, useState} from "react";
-import {Radio, Text, View} from "@tarojs/components";
+import {Image, Radio, Text, View} from "@tarojs/components";
 import {Search} from "./components/search";
 import {CourseAllParam, courseApi, ManageApi} from "@/api";
 import styles from './courseAdmin.module.scss'
@@ -9,6 +9,7 @@ import storageDep from "@/hooks/storageDep";
 import Spin from "@/components/spinner";
 import Img from "@/components/image/image";
 import PageScript from "@/components/pageScript/pageScript";
+import omit from '@/static/img/omit.png'
 
 const CourseAdmin: FC = () => {
   const [total, setTotal] = useState(0)
@@ -106,6 +107,27 @@ const CourseAdmin: FC = () => {
     batchChangDep([id], depList, required)
   }
 
+  function changeCourse(data: Curriculum, index: number) {
+    Taro.showActionSheet({
+      itemList: [
+        '修改部门',
+        "删除"
+      ],
+      success({tapIndex}) {
+        switch (tapIndex) {
+          case 0:
+            changeDep(data.id, data.data)
+            break
+          case 1:
+            del(data.id, index)
+            break
+        }
+      },
+      fail() {
+      }
+    })
+  }
+
   /**
    * 批量添加部门
    * @param ids 课程id
@@ -153,8 +175,8 @@ const CourseAdmin: FC = () => {
 
   return (
     <>
-      <Search param={param} setParam={setParam}/>
       <Spin enable={enable} overlay/>
+      <Search param={param} setParam={setParam} total={total} setBatch={setBatch}/>
       <View className={styles.curList}>
         {
           data?.map((d, index) => <View key={d.id} className={styles.curBox}>
@@ -164,24 +186,23 @@ const CourseAdmin: FC = () => {
                 checked={curs.includes(d.id)}
                 style={{marginTop: '30px'}}
                 onClick={() => addCurs(d.id)}/>}
-              <Img src={d.thumb} className={styles.curImage} width={280} height={164} errorType='course'/>
-              <View>{d.title}</View>
-            </View>
-            <View className={styles.Operation}>
-              <View onClick={() => del(d.id, index)}>删除</View>
-              <View onClick={() => changeDep(d.id, d.data)}>添加部门</View>
+              <View className={styles.curImage}>
+                <Img src={d.thumb} width={280} height={164} errorType='course'/>
+                <View className={styles.classHour}>共{d.class_hour}节</View>
+              </View>
+              <View>
+                <View>{d.title}</View>
+                <View className='mt-1 text-dark font-26'>{d.short_desc}</View>
+              </View>
             </View>
+            <Image src={omit} mode='widthFix' style={{width: '30rpx', height: '30rpx', padding: '30rpx'}}
+                   onClick={() => changeCourse(d, index)}/>
           </View>)
         }
         <PageScript/>
       </View>
 
       <View className={styles.add}>
-        {
-          !batch
-          && data.length > 0
-          && <View style={{margin: 'auto', padding: '15px'}} onClick={() => setBatch(true)}>分配部门</View>
-        }
         {
           batch && <View className={styles.addBatch}>
             <Radio onClick={all} checked={data.length === curs.length} color='#45D4A8'> 全选</Radio>