修改样式

src/components/o-sticky/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
         const { height } = useRect((this as any).$refs.div)
         this.sectionStyle.height = `${height}px`
         this.$emit('getHeight', height)
-      }, 100)
+      }, 200)
     })
   },
   render() {

src/school/companion-teacher/companion-detail.module.less

@@ -80,6 +80,17 @@
     height: 24px;
   }
 
+  .avatarContainer {
+    position: relative;
+
+    .avatarType {
+      position: absolute;
+      left: 3px;
+      bottom: 2px;
+      padding: 0 9px;
+    }
+  }
+
   .img {
     width: 48px;
     height: 48px;

src/school/companion-teacher/companion-detail.tsx

@@ -114,7 +114,14 @@ export default defineComponent({
           <Cell center class={styles.detailCell}>
             {{
               icon: () => (
-                <Image class={styles.img} src={state.detail.avatar || iconTeacher} fit="cover" />
+                <div class={styles.avatarContainer}>
+                  <Image class={styles.img} src={state.detail.avatar || iconTeacher} fit="cover" />
+                  {state.detail.delFlag && (
+                    <Tag class={styles.avatarType} round color="#F44541" textColor="#fff">
+                      解绑
+                    </Tag>
+                  )}
+                </div>
               ),
               title: () => (
                 <div class={styles.teacherContent}>
@@ -148,7 +155,12 @@ export default defineComponent({
                     <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
                       {state.detail.subjectNames &&
                         state.detail.subjectNames.map((subject: any) => (
-                          <Tag type="primary" class={styles.tagSubject}>
+                          <Tag
+                            type="primary"
+                            class={styles.tagSubject}
+                            color="#FFE7DA"
+                            textColor="#F67146"
+                          >
                             {subject}
                           </Tag>
                         ))}

src/school/companion-teacher/compontent/teacher.module.less

@@ -21,3 +21,93 @@
     }
   }
 }
+
+.subjectContainer {
+  display: flex;
+  & > span {
+    flex-shrink: 0;
+  }
+  .tagSubject {
+    margin-right: 10px;
+    margin-bottom: 4px;
+  }
+}
+
+.manageCell {
+  padding: 15px 13px;
+  :global {
+    .van-cell__title {
+      flex: 1 auto;
+      flex-basis: 48%;
+    }
+  }
+
+  .teacherContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .content {
+      width: 70px;
+    }
+    .name {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+      max-width: 70px;
+    }
+    .subject {
+    }
+    .classNum {
+      text-align: center;
+      width: 60px;
+    }
+    .num {
+      font-size: 20px;
+      font-weight: bold;
+      color: #f67146;
+      line-height: 24px;
+    }
+    .numText {
+      font-size: 12px;
+      color: #333333;
+      line-height: 17px;
+    }
+
+    .messageImg {
+      margin-top: 5px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .img {
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  .name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 22px;
+  }
+  .phone {
+    font-size: 14px;
+    color: #777777;
+    line-height: 20px;
+  }
+
+  .status {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+  }
+  .frozen {
+    color: #f44541;
+  }
+}

src/school/companion-teacher/compontent/teacher.tsx

@@ -1,7 +1,7 @@
 import OHeader from '@/components/o-header'
 import OSearch from '@/components/o-search'
 import OSticky from '@/components/o-sticky'
-import { Cell, Image, List, Tag } from 'vant'
+import { Cell, CellGroup, Image, List, Tag } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './teacher.module.less'
 import iconTeacher from '@common/images/icon_teacher.png'
@@ -111,24 +111,71 @@ export default defineComponent({
             immediateCheck={false}
           >
             {form.list.map((item: any) => (
-              <Cell onClick={() => onSelectTeacher(item)}>
-                {{
-                  icon: () => <Image class={styles.img} src={item.avatar || iconTeacher} />,
-                  title: () => (
-                    <div class={styles.content}>
-                      <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
+              // <Cell onClick={() => onSelectTeacher(item)}>
+              //   {{
+              //     icon: () => <Image class={styles.img} src={item.avatar || iconTeacher} />,
+              //     title: () => (
+              //       <div class={styles.content}>
+              //         <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
 
-                      <p class={styles.subjects}>
-                        {item.subjectNames &&
-                          item.subjectNames.length > 0 &&
-                          item.subjectNames.map((subject: any) => (
-                            <Tag type="primary">{subject}</Tag>
-                          ))}
-                      </p>
-                    </div>
-                  )
-                }}
-              </Cell>
+              //         <p class={styles.subjects}>
+              //           {item.subjectNames &&
+              //             item.subjectNames.length > 0 &&
+              //             item.subjectNames.map((subject: any) => (
+              //               <Tag type="primary">{subject}</Tag>
+              //             ))}
+              //         </p>
+              //       </div>
+              //     )
+              //   }}
+              // </Cell>
+              <CellGroup
+                inset
+                style={{ marginBottom: '12px' }}
+                onClick={() => onSelectTeacher(item)}
+              >
+                <Cell center class={styles.manageCell} clickable={false}>
+                  {{
+                    icon: () => (
+                      <Image
+                        class={styles.img}
+                        src={item.avatar ? item.avatar : iconTeacher}
+                        fit="cover"
+                      />
+                    ),
+                    title: () => (
+                      <div class={styles.teacherContent}>
+                        <div class={styles.content}>
+                          <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
+                        </div>
+                      </div>
+                    )
+                  }}
+                </Cell>
+                <Cell center>
+                  {{
+                    title: () => (
+                      <div class={styles.subjectContainer}>
+                        <span>声部：</span>
+                        <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+                          {item.subjectNames &&
+                            item.subjectNames.length > 0 &&
+                            item.subjectNames.map((subject: any) => (
+                              <Tag
+                                type="primary"
+                                class={styles.tagSubject}
+                                color="#FFE7DA"
+                                textColor="#F67146"
+                              >
+                                {subject}
+                              </Tag>
+                            ))}
+                        </div>
+                      </div>
+                    )
+                  }}
+                </Cell>
+              </CellGroup>
             ))}
           </List>
         ) : (

src/school/companion-teacher/index.module.less

@@ -21,7 +21,7 @@
   :global {
     .van-cell__title {
       flex: 1 auto;
-      flex-basis: 48%;
+      flex-basis: 20%;
     }
   }
 
@@ -65,6 +65,17 @@
     }
   }
 
+  .avatarContainer {
+    position: relative;
+
+    .avatarType {
+      position: absolute;
+      left: 3px;
+      bottom: 2px;
+      padding: 0 9px;
+    }
+  }
+
   .img {
     width: 48px;
     height: 48px;

src/school/companion-teacher/index.tsx

@@ -57,10 +57,10 @@ export default defineComponent({
         height: 0 // 页面头部高度，为了处理下拉刷新用的
       },
       subjectText: '全部声部',
-      statusText: '状态',
+      statusText: '绑定',
       params: {
         keyword: null,
-        delFlag: null,
+        delFlag: false,
         subjectId: null,
         page: 1,
         rows: 20
@@ -222,17 +222,28 @@ export default defineComponent({
                   <Cell center isLink class={styles.manageCell} clickable={false}>
                     {{
                       icon: () => (
-                        <Image
-                          class={styles.img}
-                          src={item.avatar ? item.avatar : iconTeacher}
-                          fit="cover"
-                        />
+                        <div class={styles.avatarContainer}>
+                          <Image
+                            class={styles.img}
+                            src={item.avatar ? item.avatar : iconTeacher}
+                            fit="cover"
+                          />
+                          {item.delFlag && (
+                            <Tag class={styles.avatarType} round color="#F44541" textColor="#fff">
+                              解绑
+                            </Tag>
+                          )}
+                        </div>
                       ),
                       title: () => (
                         <div class={styles.teacherContent}>
                           <div class={styles.content}>
                             <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
                           </div>
+                        </div>
+                      ),
+                      value: () => (
+                        <div class={styles.teacherContent}>
                           <div class={styles.classNum}>
                             <p class={styles.num}>
                               {item.completedCourseScheduleNum || 0}/
@@ -252,11 +263,6 @@ export default defineComponent({
                             <Image class={styles.messageImg} src={iconMessage} />
                           </div>
                         </div>
-                      ),
-                      value: () => (
-                        <span class={[styles.status, item.delFlag ? styles.frozen : '']}>
-                          {!item.delFlag ? '绑定' : '解绑'}
-                        </span>
                       )
                     }}
                   </Cell>
@@ -269,7 +275,12 @@ export default defineComponent({
                             {item.subjectNames &&
                               item.subjectNames.length > 0 &&
                               item.subjectNames.map((subject: any) => (
-                                <Tag type="primary" class={styles.tagSubject}>
+                                <Tag
+                                  type="primary"
+                                  class={styles.tagSubject}
+                                  color="#FFE7DA"
+                                  textColor="#F67146"
+                                >
                                   {subject}
                                 </Tag>
                               ))}
@@ -348,7 +359,7 @@ export default defineComponent({
           cancelText="取消"
           actions={
             [
-              { name: '全部', id: 'ALL' },
+              // { name: '全部', id: 'ALL' },
               { name: '解绑', id: true },
               { name: '绑定', id: false }
               // { name: '注销', id: 'CANCEL' },

src/school/companion-teacher/unbind.module.less

@@ -80,3 +80,61 @@
     line-height: 20px;
   }
 }
+
+.classCellGroup {
+  margin: 12px 13px;
+  overflow: hidden;
+  border-radius: 10px;
+
+  .classTitle {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+    &::before {
+      content: ' ';
+      display: inline-block;
+      width: 4px;
+      height: 14px;
+      background: #ff8057;
+      border-radius: 2px;
+      margin-right: 6px;
+    }
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .name {
+    padding-top: 8px;
+    font-size: 12px;
+    color: #777777;
+  }
+
+  :global {
+    .van-cell {
+      padding: 15px 20px;
+    }
+    .van-grid-item {
+      &:after {
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        margin-top: -10px;
+        width: 1px;
+        height: 20px;
+        background: #eaeaea;
+        border-radius: 1px;
+      }
+
+      &:last-child {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+}

src/school/companion-teacher/unbind.tsx

@@ -1,6 +1,6 @@
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
-import { Button, Cell, CellGroup, Image, showDialog, showToast } from 'vant'
+import { Button, Cell, CellGroup, Field, Grid, GridItem, Image, showDialog, showToast } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './unbind.module.less'
 import { state as baseState } from '@/state'
@@ -8,6 +8,7 @@ import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import OPopup from '@/components/o-popup'
 import Teacher from './compontent/teacher'
+import { courseEmnu } from '@/constant'
 
 export default defineComponent({
   name: 'unbind',
@@ -22,15 +23,11 @@ export default defineComponent({
     })
     const getClassDetail = async () => {
       try {
-        const { data } = await request.post('/api-school/classGroup/page', {
-          data: {
-            teacherId: state.teacherId,
-            schoolId: baseState.user.data.school.id,
-            page: 1,
-            rows: 100
-          }
-        })
-        state.classList = data.rows || []
+        const { data } = await request.post(
+          '/api-school/classGroup/teacherHandoverList/' + state.teacherId,
+          {}
+        )
+        state.classList = data || []
       } catch {
         //
       }
@@ -58,7 +55,7 @@ export default defineComponent({
 
         if (item.sTeacher) {
           courseInfo.push({
-            classGroupId: item.id,
+            courseType: item.courseType,
             teacherId: item.sTeacher.id
           })
         }
@@ -78,17 +75,12 @@ export default defineComponent({
           const { data } = await request.post('/api-school/classGroup/handoverTeacher', {
             data: {
               teacherId: route.query.id,
-              updateTeacherList: [...courseInfo]
+              courseUpdateList: [...courseInfo]
             }
           })
 
           if (data.finish === true) {
-            setTimeout(() => {
-              showToast('交接成功')
-            }, 100)
-            setTimeout(() => {
-              router.replace('/companion-teacher')
-            }, 1000)
+            router.replace('/companion-teacher')
           } else {
             router.push({
               path: '/course-preview',
@@ -113,39 +105,61 @@ export default defineComponent({
 
         <div class={styles.unbindTips}>该伴学指导存在以下班级及课程未开始，请选择交接伴学指导</div>
 
-        <CellGroup inset class={styles.detailCellGroup}>
-          {state.classList.map((item: any) => (
-            <Cell
-              center
-              class={styles.detailCell}
+        {/* <CellGroup inset class={styles.detailCellGroup}> */}
+        {state.classList.map((item: any) => (
+          // <Cell
+          //   center
+          //   class={styles.detailCell}
+          //   isLink
+          //   onClick={() => onSelectTeacher(item)}
+          //   valueClass={styles.valueClass}
+          // >
+          //   {{
+          //     title: () => (
+          //       <div class={styles.teacherContent}>
+          //         <div class={styles.classInfo}>
+          //           <p class={styles.className}>{item.name}</p>
+          //           <p class={[styles.musicName, 'van-ellipsis']}>{item.orchestraName}</p>
+          //         </div>
+          //         <div class={styles.classNum}>
+          //           <p class={styles.nums}>
+          //             {item.courseScheduleNum - item.completeCourseScheduleNum}
+          //           </p>
+          //           <p class={styles.numTip}>剩余课时</p>
+          //         </div>
+          //       </div>
+          //     ),
+          //     value: () => (
+          //       <div class={[styles.teacherName, 'van-ellipsis']}>
+          //         {item.sTeacher && item.sTeacher.nickname}
+          //       </div>
+          //     )
+          //   }}
+          // </Cell>
+          <CellGroup inset class={styles.classCellGroup} border={false}>
+            {/* <Cell center titleStyle={{ flex: '0 auto' }}></Cell> */}
+            <Field
               isLink
+              placeholder="请选择交接老师"
+              inputAlign="right"
+              readonly
+              modelValue={item.sTeacher ? item.sTeacher.nickname : ''}
               onClick={() => onSelectTeacher(item)}
-              valueClass={styles.valueClass}
             >
-              {{
-                title: () => (
-                  <div class={styles.teacherContent}>
-                    <div class={styles.classInfo}>
-                      <p class={styles.className}>{item.name}</p>
-                      <p class={[styles.musicName, 'van-ellipsis']}>{item.orchestraName}</p>
-                    </div>
-                    <div class={styles.classNum}>
-                      <p class={styles.nums}>
-                        {item.courseScheduleNum - item.completeCourseScheduleNum}
-                      </p>
-                      <p class={styles.numTip}>剩余课时</p>
-                    </div>
-                  </div>
-                ),
-                value: () => (
-                  <div class={[styles.teacherName, 'van-ellipsis']}>
-                    {item.sTeacher && item.sTeacher.nickname}
-                  </div>
-                )
-              }}
-            </Cell>
-          ))}
-        </CellGroup>
+              {{ label: () => <div class={styles.classTitle}>{courseEmnu[item.courseType]}</div> }}
+            </Field>
+            <Grid border={false} columnNum={2}>
+              <GridItem>
+                <p class={styles.title}>{item.classNum}</p>
+                <p class={styles.name}>班级数量</p>
+              </GridItem>
+              <GridItem>
+                <p class={[styles.title]}>{item.courseNum}</p>
+                <p class={styles.name}>剩余课时</p>
+              </GridItem>
+            </Grid>
+          </CellGroup>
+        ))}
 
         <OSticky position="bottom">
           <div class={['btnGroup']} style={{ paddingLeft: '13px', paddingRight: '13px' }}>
@@ -155,7 +169,7 @@ export default defineComponent({
           </div>
         </OSticky>
 
-        <OPopup v-model:modelValue={state.teacherStatus} destroy>
+        <OPopup v-model:modelValue={state.teacherStatus} destroy style={{ background: '#F8F8F8' }}>
           <Teacher
             courseType={state.selectTeacher.courseType}
             teacherId={state.teacherId as any}

src/school/mass-message/component/student-list/index.tsx

@@ -167,7 +167,12 @@ export default defineComponent({
                           <p class={styles.class}>
                             {item.subjectNames &&
                               item.subjectNames.map((subject: any) => (
-                                <Tag type="primary" class={styles.tagSubject}>
+                                <Tag
+                                  type="primary"
+                                  class={styles.tagSubject}
+                                  color="#FFE7DA"
+                                  textColor="#F67146"
+                                >
                                   {subject}
                                 </Tag>
                               ))}

src/school/mass-message/component/teacher-list/teacher-list.tsx

@@ -200,7 +200,12 @@ export default defineComponent({
                           <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
                             {item.subjectNames &&
                               item.subjectNames.map((subject: any) => (
-                                <Tag type="primary" class={styles.tagSubject}>
+                                <Tag
+                                  type="primary"
+                                  class={styles.tagSubject}
+                                  color="#FFE7DA"
+                                  textColor="#F67146"
+                                >
                                   {subject}
                                 </Tag>
                               ))}