classroom-app/src/views/student-register/modal/select-student/index.tsx

import { defineComponent, onMounted, ref, watch } from 'vue';
import styles from './index.module.less';
import { Button, Cell, Icon, Image, Radio, RadioGroup } from 'vant';
import checkBoxActive from '../../images/new/icon-n-1.png';
import checkBoxDefault from '../../images/new/icon-n-2.png';
import btn2 from '../../../activation-code/activation-register/images/btn2.png'

export default defineComponent({
  name: 'select-student',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    studentItem: {
      type: Object,
      default: () => ({})
    },
    showAdd: {
      type: Boolean,
      default: true
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const radioChecked = ref();

    // 变化时
    watch(
      () => props.studentItem,
      () => {
        if (props.studentItem && props.studentItem.userId) {
          radioChecked.value = props.studentItem.userId;
        } else {
          radioChecked.value = null;
        }
      }
    );

    onMounted(() => {
      if (props.studentItem && props.studentItem.userId) {
        radioChecked.value = props.studentItem.userId;
      }
    });
    return () => (
      <div>
        <div class={styles.popupTitle}>选择学生</div>
        <RadioGroup class={styles.selectStudent} v-model={radioChecked.value}>
          {props.list.map((item: any) => (
            <div
              class={[
                styles.cell,
                radioChecked.value === item.userId && styles.cellSelected
              ]}
              onClick={() => {
                radioChecked.value = item.userId;
                emit('confirm', item);
                emit('close');
              }}>
              <Radio name={item.userId}>
                {{
                  icon: (props: any) => (
                    <Image
                      class={styles.iconImage}
                      src={props.checked ? checkBoxActive : checkBoxDefault}
                    />
                  )
                }}
              </Radio>

              <div class={styles.userInfo}>
                <Image src={item.avatar} class={styles.userImg} fit="cover" />

                <div class={styles.usernames}>
                  <div class={styles.name}>
                    {item.nickname}
                    {!props.showAdd && item.registerFlag && (
                      <span class={styles.tag}></span>
                    )}
                  </div>
                  {item.schoolName && (
                    <div class={styles.schoolname}>{item.schoolName}</div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </RadioGroup>
        {props.showAdd && (
          <div class={styles.addStudentBtn}>
            {/* <Button
              block
              color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
              onClick={() => {
                //
                // radioChecked.value = null;
                emit('confirm', {});
                // emit('close');
              }}>
              <i class={styles.iconAdd}></i>
              <span>新增学生</span>
            </Button> */}
            <img src={btn2} onClick={() => {
                //
                // radioChecked.value = null;
                emit('confirm', {});
                // emit('close');
              }} class={styles.addBtn} />
          </div>
        )}
      </div>
    );
  }
});