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

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

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

    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}</div>
                  {item.schoolName && (
                    <div class={styles.schoolname}>{item.schoolName}</div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </RadioGroup>
        <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>
        </div>
      </div>
    );
  }
});