lex 1 år sedan
förälder
incheckning
1de4c05673

BIN
src/views/student-register/images/new/icon-5.png


BIN
src/views/student-register/images/new/icon-6.png


BIN
src/views/student-register/images/new/tuangou.png


+ 109 - 14
src/views/student-register/index.module.less

@@ -14,6 +14,74 @@
   }
 }
 
+.countdownSection {
+  position: relative;
+  background: linear-gradient(90deg, #FFBBD1 0%, #FFEFE2 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
+  border-radius: 16px;
+  margin: 0 14px 12px;
+  padding: 14px 16px 10px;
+  border: 2px solid #FFFFFF;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 13px;
+    display: inline-block;
+    width: 32px;
+    height: 48px;
+    background: url('./images/new/icon-1.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .timer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .timerAll {
+    font-size: 12px;
+    color: #131415;
+    line-height: 17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 22px;
+      min-width: 22px;
+      padding: 0 3px;
+      background: #FF3A5F;
+      border-radius: 4px;
+      font-weight: 600;
+      font-size: 12px;
+      color: #FFFFFF;
+      margin: 0 4px;
+    }
+  }
+
+  .timerTitle {
+    width: 80px;
+    height: 15px;
+    margin-right: 4px;
+  }
+
+  .timerTip {
+    margin-top: 10px;
+    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+    border-radius: 12px;
+    text-align: center;
+    padding: 4px 10px;
+    font-size: 11px;
+    color: #69717C;
+    line-height: 16px;
+  }
+}
+
 .paymentContainer {
   display: flex;
   align-items: center;
@@ -164,9 +232,12 @@
     color: #728088;
     transform: skewX(-15deg);
 
+
+
+
     .goodsInner {
       transform: skewX(15deg);
-      background: #EBF3F8;
+      // background: #EBF3F8;
       width: 100%;
       text-align: center;
       border-radius: 20px;
@@ -178,7 +249,7 @@
       font-weight: 600;
 
       .goodsInner {
-        background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
+        // background: linear-gradient(315deg, #31C7FF 0%, #007AFE 100%);
       }
     }
 
@@ -316,8 +387,9 @@
   position: relative;
   min-width: 32px;
   justify-content: center;
-  padding-left: 19px;
-  padding-right: 19px;
+  // padding-left: 19px;
+  // padding-right: 19px;
+  padding: 5px 19px;
   font-size: 15px;
   font-weight: 500;
 }
@@ -405,8 +477,9 @@
     margin-right: 13px;
     width: 98px;
     height: 98px;
-    border-radius: 10px;
+    // border-radius: 10px;
     overflow: hidden;
+    flex-shrink: 0;
   }
 
   h2 {
@@ -418,8 +491,14 @@
     line-height: 22px;
   }
 
+  .goodsName {
+    width: 112px;
+    height: 16px;
+    line-height: 0;
+  }
+
   .brandName {
-    margin-left: 4px;
+    margin-left: 6px;
     font-size: 12px;
     font-weight: 400;
     color: #19A1FE;
@@ -433,17 +512,33 @@
 
   .model {
     margin: 6px 0 4px;
+    font-weight: 500;
     font-size: 13px;
-    color: #1480EC;
-    line-height: 18px;
+    color: #FF711B;
+
+    p {
+      display: flex;
+      align-items: center;
+
+      i {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 6px;
+        background: #FF711B;
+      }
+    }
   }
 
   .sendInstrument {
-    background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
-    border-radius: 4px;
-    font-size: 12px;
-    color: #FFFFFF;
-    padding: 2px 6px 3px;
+    // background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
+    // border-radius: 4px;
+    // font-size: 12px;
+    // color: #FFFFFF;
+    // padding: 2px 6px 3px;
+    width: 106px;
+    height: 23px;
   }
 
   .moreBtn {
@@ -492,7 +587,7 @@
     height: 44px;
     background: url('./images/new/title-5.png') no-repeat center;
     background-size: contain;
-    margin: 0 auto;
+    margin: 0 auto 11px;
   }
 
   .steps {}

+ 123 - 28
src/views/student-register/index.tsx

@@ -48,6 +48,10 @@ import MDialog from '@/components/m-dialog';
 // import f3 from './images/new/f-3.png';
 // import iconTip2 from './images/new/icon-tip2.png';
 // import functionBg from './images/new/function-bg.png';
+import tuangou from './images/new/tuangou.png';
+import icon3 from './images/new/icon-3.png';
+import icon5 from './images/new/icon-5.png';
+import icon6 from './images/new/icon-6.png';
 import giftTip from './images/new/icon-4.png';
 import iconGift from './images/new/icon-gift.png';
 import dayjs from 'dayjs';
@@ -122,6 +126,7 @@ export default defineComponent({
       details: [] as any[],
       // schoolType: '', // 学校类型
       gradeYear: '', // 学制
+      schoolInstrumentSetType: null as any,
       // bugGoods: false, // 是否购买AI
       registerType: '', // 报名类型
       detailVip: {} as any,
@@ -154,7 +159,10 @@ export default defineComponent({
       saveId: null as any,
       openId: null as any,
       code: null as any,
-      intervalFnRef: null as any // 页面订时器
+      intervalFnRef: null as any, // 页面订时器
+      registerExpireTime: null as any, // 结束时间
+      activeOverTime: 0, // 活动结束时间
+      activeOverStatus: true // 活动是否结束 默认已结束
     });
 
     const state = reactive({
@@ -202,6 +210,17 @@ export default defineComponent({
       }
     });
 
+    const overCountDown = useCountDown({
+      time: forms.activeOverTime,
+      onFinish() {
+        if (forms.submitLoading) return;
+        forms.showTips = true;
+        forms.showMessage = '团购时间已截止,感谢您的参与';
+        forms.showButton = false;
+        forms.activeOverStatus = true;
+      }
+    });
+
     const onCodeSend = () => {
       forms.countDownStatus = false;
       nextTick(() => {
@@ -241,17 +260,35 @@ export default defineComponent({
         // 默认选中商品
         studentRegisterStore.setVip(data.details || []);
         forms.details = deepClone(data.details || []);
+
+        forms.registerExpireTime = data.registerExpireTime; // '2024-03-26 21:10:52'; //
+        if (forms.registerExpireTime) {
+          if (dayjs(new Date()).isBefore(forms.registerExpireTime)) {
+            // 活动没有结束
+            forms.activeOverStatus = false;
+            // 默认返回毫秒
+            forms.activeOverTime = dayjs(forms.registerExpireTime).diff(
+              dayjs(new Date())
+            );
+            overCountDown.reset(forms.activeOverTime);
+            overCountDown.start();
+          } else {
+            forms.showTips = true;
+            forms.showMessage = '团购时间已截止,感谢您的参与';
+            forms.showButton = false;
+            forms.activeOverStatus = true;
+          }
+        }
         if (forms.details.length > 0) {
           forms.detailVip = forms.details[0];
           // forms.giftVipDay = forms.details[0].membershipDays;
         }
         forms.giftVipDay = data.giftVipDay || 0;
         forms.gradeYear = data.gradeYear;
+        forms.schoolInstrumentSetType = data.schoolInstrumentSetType;
         forms.registerType = data.registerType;
         studentInfo.extra.registerType = data.registerType;
-
         const schoolInstrumentList = data.schoolInstrumentList || [];
-
         if (data.schoolInstrumentSetType === 'SCHOOL') {
           forms.gradeList = getGradeList(data.gradeYear);
           forms.classList = classList;
@@ -278,21 +315,30 @@ export default defineComponent({
             const list = {
               text: GRADE_ENUM[temp],
               value: temp,
-              children: [] as any
+              instrumentId: '',
+              instrumentName: '',
+              classList: [] as any
             };
             schoolInstrumentList.forEach((item: any) => {
-              if (item === item.gradeNum) {
-                list.children.push({
+              if (temp === item.gradeNum) {
+                list.instrumentId = item.instrumentId;
+                list.instrumentName = item.instrumentName;
+                list.classList.push({
                   text: item.classNum + '班',
                   value: item.classNum
                 });
               }
             });
+            // 排序班级
+            list.classList.sort((a: any, b: any) => a.value - b.value);
 
             lastGradeList.push(list);
           });
           forms.gradeList = lastGradeList;
           forms.classList = [];
+        } else {
+          forms.gradeList = getGradeList(data.gradeYear);
+          forms.classList = classList;
         }
         if (browser().weixin) {
           // if (
@@ -361,7 +407,10 @@ export default defineComponent({
     const onSubmit = async () => {
       forms.submitLoading = true;
       try {
-        if (checkForm()) return;
+        if (checkForm()) {
+          forms.submitLoading = false;
+          return;
+        }
         const { extra, ...res } = studentInfo;
         const result = await request.post('/edu-app/userlogin', {
           requestType: 'form',
@@ -490,7 +539,6 @@ export default defineComponent({
               }
             });
           }
-          // if (!studentInfo.extra.gender) {
           studentInfo.extra.gender =
             studentInfo.extra.gender !== data.gender
               ? data.gender
@@ -761,7 +809,7 @@ export default defineComponent({
      * @param schoolId 学校编号
      */
     const updateStat = async (
-      pageBrowseTime = 10,
+      pageBrowseTime = 5,
       joinType?: string,
       userId?: string,
       schoolId?: string
@@ -822,6 +870,14 @@ export default defineComponent({
       }
     }
 
+    const formatTimerTo = (num: number): string => {
+      if (num > 9) {
+        return num + '';
+      } else {
+        return '0' + num;
+      }
+    };
+
     onMounted(async () => {
       try {
         getRegisterGoods();
@@ -860,6 +916,33 @@ export default defineComponent({
     return () => (
       <div class={styles['student-register']}>
         <div class={styles.studentRegisterContainer}>
+          {!forms.activeOverStatus && (
+            <div class={styles.countdownSection}>
+              <div class={styles.timer}>
+                <img src={icon3} class={styles.timerTitle} />
+                <div class={styles.timerAll}>
+                  <span>{formatTimerTo(overCountDown.current.value.days)}</span>
+                  天
+                  <span>
+                    {formatTimerTo(overCountDown.current.value.hours)}
+                  </span>
+                  时
+                  <span>
+                    {formatTimerTo(overCountDown.current.value.minutes)}
+                  </span>
+                  分
+                  <span>
+                    {formatTimerTo(overCountDown.current.value.seconds)}
+                  </span>
+                  秒
+                </div>
+              </div>
+              <div class={styles.timerTip}>
+                请在规定时间内报名,超过截止时间,将无法使用个人账号
+              </div>
+            </div>
+          )}
+
           <div
             class={[styles.studentSection, styles.studentSectionForm]}
             // style={{ display: 'none' }}
@@ -1011,7 +1094,16 @@ export default defineComponent({
                 readonly
                 clickable={false}
                 modelValue={forms.currentClassText}
-                onClick={() => (forms.classStatus = true)}
+                onClick={() => {
+                  if (
+                    forms.schoolInstrumentSetType === 'CLASS' &&
+                    forms.classList.length <= 0
+                  ) {
+                    showToast('请先选择年级');
+                    return;
+                  }
+                  forms.classStatus = true;
+                }}
               />
               {forms.giftVipDay > 0 ? (
                 <div class={styles.memberNumer}>
@@ -1058,23 +1150,30 @@ export default defineComponent({
               <i class={styles.iconArrow}></i>
               <Cell border={false} class={styles.goodsCell}>
                 {{
-                  icon: () => (
-                    <Image class={styles.img} src={forms.detailVip.goodsUrl} />
-                  ),
+                  icon: () => <Image class={styles.img} src={tuangou} />,
                   title: () => (
                     <div class={styles.section}>
                       <div class={styles.sectionContent}>
                         <h2>
-                          {forms.detailVip.goodsName}
+                          {/* {forms.detailVip.goodsName} */}
+                          <img src={icon5} class={styles.goodsName} />
                           <Tag class={styles.brandName}>
-                            {forms.detailVip.brandName}
+                            {/* {forms.detailVip.brandName} */}
+                            12个月
                           </Tag>
                         </h2>
                         <p class={[styles.model]}>
                           {/* 解决学生不会练、不知练的对错、家长无法辅导、无需再额外请老师 */}
-                          {forms.detailVip.description}
+                          {/* {forms.detailVip.description} */}
+                          <p>
+                            <i></i>解决学生不会练、不知练的对错
+                          </p>
+                          <p>
+                            <i></i>家长无法辅导、无需再额外请老师
+                          </p>
                         </p>
-                        <span class={styles.sendInstrument}>赠送课堂乐器</span>
+                        {/* <span class={styles.sendInstrument}>赠送课堂乐器</span> */}
+                        <img src={icon6} class={styles.sendInstrument} />
                       </div>
                     </div>
                   )
@@ -1209,6 +1308,13 @@ export default defineComponent({
               studentInfo.extra.currentGradeNum = selectedOption.value;
               forms.gradeNumText = selectedOption.text;
               forms.gradeStatus = false;
+              if (forms.schoolInstrumentSetType === 'CLASS') {
+                forms.classList = selectedOption.classList;
+              }
+              if (['CLASS', 'GRADE'].includes(forms.schoolInstrumentSetType)) {
+                forms.currentClassText = '';
+                studentInfo.extra.currentClass = '';
+              }
             }}
           />
         </Popup>
@@ -1253,17 +1359,6 @@ export default defineComponent({
           primaryColor="#FF8057"
           confirmButtonText="继续支付"
           onConfirm={async () => {
-            // const paymentConfig = forms.dialogConfig.paymentConfig;
-            // router.push({
-            //   path: '/order-detail',
-            //   query: {
-            //     pm: 1, // h5乐团报名
-            //     config: JSON.stringify(paymentConfig.paymentConfig),
-            //     orderNo: paymentConfig.orderNo
-            //   }
-            // });
-            // console.log(forms.dialogConfig, 'dialogConfig');
-
             countDown.pause();
             const paymentConfig = forms.dialogConfig.paymentConfig;
             state.config = paymentConfig?.paymentConfig;

+ 1 - 1
src/views/tenantAllData/tenantDataSchool.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
       sortList: [
         { value: 'desc', text: '报名人数降序' },
         { value: 'asc', text: '报名人数升序' },
-        { value: 'mdesc', text: '会员人数序' },
+        { value: 'mdesc', text: '会员人数序' },
         { value: 'masc', text: '会员人数升序' }
       ] as any,
       page: 1,