更新

src/components/m-message-tip/index.module.less

@@ -41,13 +41,20 @@
     word-break: break-all;
   }
 
+  .btnGroup {
+    display: flex;
+    align-items: center;
+    margin: 0 13px
+  }
+
   .button {
-    padding: 0 44px;
+    // padding: 0 44px;
     height: 40px;
     font-size: 16px;
     color: #333333;
     border-color: #AAAAAA;
     margin: 0 7px;
+    flex: 1;
   }
 
   .confirmBtn {
@@ -55,4 +62,4 @@
     color: #FFFFFF;
     border: none;
   }
-}
+}

src/components/m-message-tip/index.tsx

@@ -29,19 +29,29 @@ export default defineComponent({
       default: false
     },
     /** 取消按钮文案 */
-    showCancelButtonText: {
+    cancelButtonText: {
       type: String,
       default: '取消'
     },
+    /** 取消按钮颜色 */
+    cancelButtonColor: {
+      type: String,
+      default: ''
+    },
     /** 是否展示确认按钮 */
     showConfirmButton: {
       type: Boolean,
       default: true
     },
     /** 确认按钮文案 */
-    showConfirmButtonText: {
+    confirmButtonText: {
       type: String,
       default: '确认'
+    },
+    /** 确认按钮颜色 */
+    confirmButtonColor: {
+      type: String,
+      default: ''
     }
   },
   emits: ['confirm', 'cancel'],
@@ -84,16 +94,18 @@ export default defineComponent({
                   <Button
                     round
                     class={[styles.button, styles.cancelBtn]}
+                    color={props.cancelButtonColor}
                     onClick={() => emit('cancel')}>
-                    {props.showCancelButtonText}
+                    {props.cancelButtonText}
                   </Button>
                 )}
                 {props.showConfirmButton && (
                   <Button
                     round
                     class={[styles.button, styles.confirmBtn]}
+                    color={props.confirmButtonColor}
                     onClick={() => emit('confirm')}>
-                    {props.showConfirmButtonText}
+                    {props.confirmButtonText}
                   </Button>
                 )}
               </div>

src/views/student-register/index.module.less

@@ -302,6 +302,17 @@
       height: 20px;
       background: url('./images/new/icon-n-5.png') no-repeat center;
       background-size: contain;
+
+      &.selectStudentGroupChecked {
+        span::after {
+          transform: rotate(180deg);
+        }
+      }
+
+      &.studentIconAdd {
+        background: url('./images/new/icon-n-4.png') no-repeat center;
+        background-size: contain;
+      }
     }
 
     span {

src/views/student-register/index.tsx

@@ -62,6 +62,7 @@ import { useInterval, useIntervalFn } from '@vueuse/core';
 import MPopup from '@/components/m-popup';
 import UserAuth from './component/user-auth';
 import MMessageTip from '@/components/m-message-tip';
+import SelectStudent from './modal/select-student';
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -121,6 +122,7 @@ export default defineComponent({
     const forms = reactive({
       schoolId: route.query.sId as any,
       paymentType: '', // 支付类型
+      multi_user_limit: 1, // 限制注册学生数量
       // popupShow: false,
       registerDetails: {} as any,
       details: [] as any[],
@@ -128,6 +130,10 @@ export default defineComponent({
       gradeYear: '', // 学制
       schoolInstrumentSetType: null as any,
       // bugGoods: false, // 是否购买AI
+
+      isRegister: '' as 'create' | 'update' | '', // 是否注册学生
+      isChangeSchool: false, // 是否切换学校
+
       registerType: '', // 报名类型
       detailVip: {} as any,
       giftVipDay: 0, // 赠送天数
@@ -145,8 +151,6 @@ export default defineComponent({
       gradeStatus: false,
       classStatus: false,
       loading: false,
-      // dialogStatusVisible: false,
-      // dialogStatusMessage: '',
 
       dialogStatus: false,
       dialogMessage: '',
@@ -158,8 +162,9 @@ export default defineComponent({
       contract_sign: false, // 是否实名认证
       countDownTimePay: 60 * 1000,
       dialogConfig: {} as any,
-      showOtherSchool: false,
-      showOtherMessage: '',
+      showSelectStudent: false, // 选择学生
+      studentList: [], // 手机号关联学生列表
+      studentItem: {} as any, // 选择的学生
       joinType: '' as 'digitalize' | 'tradition',
       gradeList: [] as any,
       classList: [] as any,
@@ -176,6 +181,20 @@ export default defineComponent({
       classPopupIndex: [] as any // 班级下拉索引
     });
 
+    const otherParams = reactive({
+      showOtherSchool: false,
+      showOtherMessage: '',
+      /**  limit 超限制，change 更换学生，nickname 名称不一致  */
+      otherType: '' as 'limit' | 'change' | 'nickname',
+      showCancelButton: true,
+      cancelButtonColor: '',
+      cancelButtonText: '取消',
+      showConfirmButton: true,
+      confirmButtonColor: '',
+      confirmButtonText: '确定',
+      messageAlign: 'left' as 'center' | 'left' | 'right'
+    });
+
     const state = reactive({
       showQrcode: false,
       qrCodeUrl: '',
@@ -208,19 +227,6 @@ export default defineComponent({
     const pageTimer = useInterval(1000, { controls: true });
     pageTimer.pause();
 
-    // const countDown = useCountDown({
-    //   // 倒计时 60 秒
-    //   time: forms.countDownTimePay,
-    //   onChange(current: CurrentTime) {
-    //     forms.dialogStatusMessage = `有待支付订单，请在${Math.ceil(
-    //       current.total / 1000
-    //     )}s后重试`;
-    //   },
-    //   onFinish() {
-    //     forms.dialogStatusVisible = false;
-    //   }
-    // });
-
     const overCountDown = useCountDown({
       time: forms.activeOverTime,
       onFinish() {
@@ -320,10 +326,6 @@ export default defineComponent({
             });
           });
           forms.gradeList.sort((a: any, b: any) => a.value - b.value);
-          // console.log(
-          //   forms.gradeList.sort((a: any, b: any) => a.value - b.value),
-          //   'forms.gradeList.sort((a: any, b: any) => a.value - b.value)'
-          // );
           forms.classList = classList;
         } else if (data.schoolInstrumentSetType === 'CLASS') {
           // 班级
@@ -436,8 +438,10 @@ export default defineComponent({
       return false;
     };
 
-    // 登记成功之后购买
-    const onSubmit = async (isRegister = false) => {
+    /**
+     * 登记成功之后购买
+     */
+    const onSubmit = async () => {
       forms.submitLoading = true;
       try {
         if (checkForm()) {
@@ -445,20 +449,75 @@ export default defineComponent({
           return;
         }
         const { extra, ...res } = studentInfo;
-        if (!isRegister) {
-          const checkSchool = await request.get(
-            `/edu-app/open/student/studentSchool?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
-          );
-          if (checkSchool.data?.schoolId !== forms.schoolId) {
-            forms.showOtherSchool = true;
-            forms.showOtherMessage = `您已绑定【${
-              forms.registerDetails.schoolName || ''
-            }】，提交后将更换到【${
-              checkSchool.data?.schoolName
-            }】，是否确认提交？`;
-            return;
-          }
+        if (
+          forms.studentItem.nickname !== extra.nickname &&
+          forms.isRegister === ''
+        ) {
+          otherParams.showOtherMessage =
+            '学生姓名与上次提交信息不一致，请确认修改学生信息或创建新的学生账号';
+          otherParams.showOtherSchool = true;
+          otherParams.showCancelButton = true;
+          otherParams.cancelButtonColor =
+            'linear-gradient( 224deg, #3FE1E6 0%, #00CDD4 100%)';
+          otherParams.cancelButtonText = '新建学生';
+          otherParams.confirmButtonColor =
+            'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+          otherParams.confirmButtonText = '修改信息';
+          otherParams.otherType = 'nickname';
+          otherParams.messageAlign = 'left';
+          return;
         }
+
+        // 判断新建学员是否上限了
+        if (
+          !forms.studentItem.userId &&
+          forms.studentList.length >= forms.multi_user_limit
+        ) {
+          otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
+          otherParams.showOtherSchool = true;
+          otherParams.showCancelButton = false;
+          otherParams.confirmButtonColor =
+            'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+          otherParams.confirmButtonText = '我知道了';
+          otherParams.otherType = 'limit';
+          otherParams.messageAlign = 'center';
+          return;
+        }
+
+        // 判断是否为同一个学校
+        if (
+          forms.studentItem.schoolId !== forms.registerDetails.schoolId &&
+          !forms.isChangeSchool
+        ) {
+          otherParams.showOtherMessage = `您已绑定【${
+            forms.registerDetails.schoolName || ''
+          }】，提交后将更换到【${
+            forms.studentItem?.schoolName
+          }】，是否确认提交？`;
+          otherParams.showOtherSchool = true;
+          otherParams.showCancelButton = true;
+          otherParams.cancelButtonColor = '';
+          otherParams.cancelButtonText = '取消';
+          otherParams.confirmButtonColor = '';
+          otherParams.confirmButtonText = '确定';
+          otherParams.otherType = 'change';
+          otherParams.messageAlign = 'left';
+          return;
+        }
+        // if (!isRegister) {
+        //   const checkSchool = await request.get(
+        //     `/edu-app/open/student/studentSchool?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
+        //   );
+        //   if (checkSchool.data?.schoolId !== forms.schoolId) {
+        //     forms.showOtherSchool = true;
+        //     forms.showOtherMessage = `您已绑定【${
+        //       forms.registerDetails.schoolName || ''
+        //     }】，提交后将更换到【${
+        //       checkSchool.data?.schoolName
+        //     }】，是否确认提交？`;
+        //     return;
+        //   }
+        // }
         const result = await request.post('/edu-app/userlogin', {
           requestType: 'form',
           data: {
@@ -521,6 +580,9 @@ export default defineComponent({
       } catch {
       } finally {
         forms.submitLoading = false;
+        // 重置信息
+        forms.isRegister = '';
+        forms.isChangeSchool = false;
       }
     };
 
@@ -574,38 +636,31 @@ export default defineComponent({
         const { data } = await request.get(
           `/edu-app/open/student/studentInfo?mobile=${studentInfo.username}&code=${studentInfo.password}&type=REGISTER`
         );
-        if (data) {
-          if (!studentInfo.extra.nickname) {
-            studentInfo.extra.nickname = data.nickname;
-          }
-
-          if (!studentInfo.extra.currentGradeNum) {
-            const tempGrade: any = forms.gradeList || [];
-            // console.log(tempGrade, 'tempGrade');
-            tempGrade?.forEach((i: any) => {
-              if (i.value === data.currentGradeNum) {
-                forms.instrumentCode = i.instrumentCode;
-                forms.gradeNumText = i.text;
-                studentInfo.extra.currentGradeNum = data.currentGradeNum;
-                if (forms.schoolInstrumentSetType === 'CLASS') {
-                  forms.classList = i.classList;
-                }
-              }
-            });
-          }
-
-          if (!studentInfo.extra.currentClass) {
-            forms.classList.forEach((i: any) => {
-              if (i.value === data.currentClass) {
-                forms.currentClassText = i.text;
-                studentInfo.extra.currentClass = data.currentClass;
+        console.log(data, 'studentInfo');
+        forms.studentList = data || [];
+
+        if (forms.studentList.length > 0) {
+          const firstStudent: any = forms.studentList[0];
+          forms.studentItem = firstStudent;
+          studentInfo.extra.nickname = firstStudent.nickname;
+          const tempGrade: any = forms.gradeList || [];
+          tempGrade?.forEach((i: any) => {
+            if (i.value === firstStudent.currentGradeNum) {
+              forms.instrumentCode = i.instrumentCode;
+              forms.gradeNumText = i.text;
+              studentInfo.extra.currentGradeNum = firstStudent.currentGradeNum;
+              if (forms.schoolInstrumentSetType === 'CLASS') {
+                forms.classList = i.classList;
               }
-            });
-          }
-          studentInfo.extra.gender =
-            studentInfo.extra.gender !== data.gender
-              ? data.gender
-              : studentInfo.extra.gender;
+            }
+          });
+          forms.classList.forEach((i: any) => {
+            if (i.value === firstStudent.currentClass) {
+              forms.currentClassText = i.text;
+              studentInfo.extra.currentClass = firstStudent.currentClass;
+            }
+          });
+          studentInfo.extra.gender = firstStudent.gender;
         }
       } catch {
         //
@@ -681,29 +736,6 @@ export default defineComponent({
             state.orderNo = paddingConfig?.orderNo;
             await lastSubmit();
             return true;
-            // 判断是否可以取消订单
-            // if (paddingData.cancelPayment) {
-            //   await request.post(
-            //     '/edu-app/userPaymentOrder/cancelPayment/' +
-            //       paddingConfig.orderNo
-            //   );
-            //   return false;
-            // } else {
-            //   // forms.countDownTime = paddingData.cancelTimes;
-            //   // countDown.reset(Number(paddingData.cancelTimes));
-            //   // countDown.start();
-            //   // forms.dialogStatusMessage = `有待支付订单，请在${Math.ceil(
-            //   //   countDown.current.value.total / 1000
-            //   // )}s后重试`;
-            //   // forms.dialogStatusVisible = true;
-            //   // forms.dialogConfig = paddingData;
-            //   // 继续支付
-            //   // const paymentConfig = forms.dialogConfig;
-            //   state.config = paddingConfig?.paymentConfig;
-            //   state.orderNo = paddingConfig?.orderNo;
-            //   await lastSubmit();
-            //   return true;
-            // }
           }
 
           return false;
@@ -1070,7 +1102,34 @@ export default defineComponent({
     };
 
     onMounted(async () => {
-      await getRegisterGoods();
+      try {
+        // 获取支付类型
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamNameList',
+          {
+            requestType: 'form',
+            params: {
+              paramNames:
+                'payment_service_provider,contract_sign,multi_user_limit'
+            }
+          }
+        );
+        if (data && Array.isArray(data)) {
+          data.forEach((item: any) => {
+            if (item.paramName === 'contract_sign') {
+              forms.contract_sign = item.paramValue === '1' ? true : false;
+            } else if (item.paramName === 'payment_service_provider') {
+              forms.paymentType = item.paramValue || '';
+            } else if (item.paramName === 'multi_user_limit') {
+              forms.multi_user_limit = item.paramValue
+                ? Number(item.paramValue)
+                : 1;
+            }
+          });
+        }
+
+        await getRegisterGoods();
+      } catch {}
     });
 
     onUnmounted(() => {
@@ -1193,10 +1252,22 @@ export default defineComponent({
             <div class={styles.title1}></div>
 
             <Form labelAlign="left" class={styles.registerForm}>
-              <div class={styles.selectStudentGroup}>
-                <i class={styles.studentIcon}></i>
-                <span>新增学生</span>
-              </div>
+              {/* 大于等于2，则可以切换学生 */}
+              {forms.studentList.length > 1 && (
+                <div
+                  class={[
+                    styles.selectStudentGroup,
+                    forms.showSelectStudent && styles.selectStudentGroupChecked
+                  ]}
+                  onClick={() => (forms.showSelectStudent = true)}>
+                  <i
+                    class={[
+                      styles.studentIcon,
+                      !forms.studentItem.userId && styles.studentIconAdd
+                    ]}></i>
+                  <span>新增学生</span>
+                </div>
+              )}
 
               <Field
                 clearable={false}
@@ -1605,29 +1676,6 @@ export default defineComponent({
           }}
         />
 
-        {/* <MDialog
-          title="提示"
-          v-model:show={forms.dialogStatusVisible}
-          message={forms.dialogStatusMessage}
-          allowHtml={true}
-          primaryColor="#FF8057"
-          confirmButtonText="继续支付"
-          onConfirm={async () => {
-            countDown.pause();
-            const paymentConfig = forms.dialogConfig.paymentConfig;
-            state.config = paymentConfig?.paymentConfig;
-            state.orderNo = paymentConfig?.orderNo;
-            await lastSubmit();
-          }}
-          onCancel={(val: any) => {
-            countDown.pause();
-            //取消支付，判断是否有结束时间，是否已经结束
-            if (forms.registerExpireTime && forms.activeOverStatus) {
-              applyOver();
-            }
-          }}
-        /> */}
-
         <MDialog
           title="提示"
           v-model:show={forms.dialogStatus}
@@ -1718,17 +1766,47 @@ export default defineComponent({
         />
 
         <MMessageTip
-          show={forms.showOtherSchool}
-          messageAlign="left"
-          message={forms.showOtherMessage}
-          showCancelButton
-          onCancel={() => (forms.showOtherSchool = false)}
+          show={otherParams.showOtherSchool}
+          messageAlign={otherParams.messageAlign}
+          message={otherParams.showOtherMessage}
+          showCancelButton={otherParams.showCancelButton}
+          cancelButtonColor={otherParams.cancelButtonColor}
+          cancelButtonText={otherParams.cancelButtonText}
+          confirmButtonColor={otherParams.confirmButtonColor}
+          confirmButtonText={otherParams.confirmButtonText}
+          onCancel={() => {
+            otherParams.showOtherSchool = false;
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'create'; // 新建
+              onSubmit();
+            } else if (otherParams.otherType === 'limit') {
+            }
+          }}
           onConfirm={() => {
-            forms.showOtherSchool = false;
-            // 直接注册
-            onSubmit(true);
+            otherParams.showOtherSchool = false;
+            if (otherParams.otherType === 'nickname') {
+              forms.isRegister = 'update'; // 新建
+              // 直接注册
+              onSubmit();
+            } else if (otherParams.otherType === 'change') {
+              forms.isChangeSchool = true;
+              // 直接注册
+              onSubmit();
+            }
           }}
         />
+
+        <Popup
+          v-model:show={forms.showSelectStudent}
+          round
+          position="bottom"
+          safeAreaInsetBottom
+          closeable>
+          <SelectStudent
+            studentItem={forms.studentItem}
+            list={forms.studentList}
+          />
+        </Popup>
       </div>
     );
   }

src/views/student-register/modal/select-student/index.module.less

@@ -0,0 +1,93 @@
+.popupTitle {
+  padding: 16px 0 20px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 18px;
+  color: #131415;
+  line-height: 25px;
+}
+
+.selectStudent {
+  .cell {
+    display: flex;
+    align-items: center;
+    padding: 12px 10px;
+    border-radius: 10px;
+    margin-bottom: 16px;
+  }
+
+  .cellSelected {
+    background: #EDF6FD;
+  }
+
+  .iconImage {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .userInfo {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    .userImg {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 10px;
+      flex-shrink: 0;
+    }
+  }
+
+  .usernames {
+    .name {
+      font-weight: 600;
+      font-size: 16px;
+      color: #131415;
+      line-height: 22px;
+    }
+
+    .schoolname {
+      padding-top: 4px;
+      font-weight: 400;
+      font-size: 13px;
+      color: #777777;
+      line-height: 18px;
+      max-width: 230px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.addStudentBtn {
+  margin: 0 20px 32px;
+
+  .iconAdd {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: url('../../images/new/icon-n-3.png') no-repeat center;
+    background-size: contain;
+    margin-right: 6px;
+    flex-shrink: 0;
+  }
+
+  :global {
+    .van-button {
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 16px;
+      color: #1189FF;
+    }
+
+    .van-button__text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+import { defineComponent, onMounted, ref } 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();
+
+    onMounted(() => {
+      if (props.studentItem && props.studentItem.id) {
+        radioChecked.value = props.studentItem.id;
+      }
+    });
+    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.id && styles.cellSelected
+              ]}>
+              <Radio name={item.id}>
+                {{
+                  icon: (props: any) => (
+                    <Image
+                      class={styles.iconImage}
+                      src={props.checked ? checkBoxActive : checkBoxDefault}
+                    />
+                  )
+                }}
+              </Radio>
+
+              <div class={styles.userInfo}>
+                <Image class={styles.userImg} fit="cover" />
+
+                <div class={styles.usernames}>
+                  <div class={styles.name}>李木子</div>
+                  <div class={styles.schoolname}>
+                    武汉市洪山区第二小学武汉市洪山区第二小学
+                    武汉市洪山区第二小学
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+
+          <div class={styles.addStudentBtn}>
+            <Button
+              block
+              color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
+              onClick={() => {
+                //
+              }}>
+              <i class={styles.iconAdd}></i>
+              <span>新增学生</span>
+            </Button>
+          </div>
+        </RadioGroup>
+      </div>
+    );
+  }
+});