修改

src/router/router-root.ts

@@ -276,7 +276,7 @@ export default [
     path: '/activationRegister',
     component: () => import('@/views/activation-code/activation-register/index'),
     meta: {
-      title: '音乐数字课堂激活'
+      title: '音乐数字课堂AI学练工具激活'
     }
   },
   {

src/views/activation-code/activation-register/index.module.less

@@ -14,11 +14,21 @@
     // padding-top: 155px;
     // background: url('./images/banner-bg.png') no-repeat top center;
     // background-size: contain;
+
+    .title1 {
+      position: absolute;
+      position: absolute;
+      top: -6px;
+      left: 50%;
+      margin-left: -100.5px;
+      width: 201px;
+      height: 38px;
+    }
   }
 
   .bannerBg {
     width: 100%;
-    margin-bottom: -41%;
+    margin-bottom: -18.3%;
   }
 
 
@@ -36,39 +46,49 @@
 .paymentContainer {
   font-size: 14px;
   padding: 12px 25px calc(12px + env(safe-area-inset-bottom)) 25px;
-  background: #FFFFFF;
-  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
-  border-radius: 18px 18px 0px 0px;
-
-  :global {
-    .van-button {
-      // height: 40px;
-      // line-height: 40px;
-      --van-button-default-height: 41px;
-      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
-      font-size: 16px;
-      color: #fff;
-      font-weight: 500;
-      border: 0;
+  // background: #FFFFFF;
+  // box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
+  // border-radius: 18px 18px 0px 0px;
+
+  // :global {
+  //   .van-button {
+  //     // height: 40px;
+  //     // line-height: 40px;
+  //     // --van-button-default-height: 41px;
+  //     // background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+  //     // font-size: 16px;
+  //     // color: #fff;
+  //     // font-weight: 500;
+  //     border: 0;
+  //     background: url('./images/btn1.png') no-repeat center;
+  //     background-size: contain;
+  //   }
+  // }
+
+  .submitBtn {
+    width: 100%;
+    &.loading {
+      opacity: 0.8;
     }
   }
 
 }
 
 .studentSection {
-  margin: 0 14px 12px;
+  margin: 0 7px 12px;
   padding: 0;
   // background: linear-gradient(180deg, rgba(219, 246, 253) 0%, rgba(255, 255, 255) 3%);
-  background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 4%, #FFFFFF 100%);
+  // background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 4%, #FFFFFF 100%);
   border-radius: 16px;
-  border: 2px solid #FFFFFF;
-
+  border: 6px solid rgba(255,255,255,0.56);
 }
 
 .registerForm {
-  border-radius: 18px;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #DBF6FD 0%, #FFFFFF 4%, #FFFFFF 100%);
   // margin: 0 12px;
   overflow: hidden;
+  padding-top: 24px;
 
   .selectStudentGroup {
     margin-left: 10px;
@@ -109,7 +129,7 @@
 
   :global {
     .van-cell {
-      padding: 14px 18px;
+      padding: 13px 14px;
     }
 
 

src/views/activation-code/activation-register/index.tsx

@@ -32,7 +32,7 @@ import { browser, checkPhone, getUrlCode, moneyFormat } from '@/helpers/utils';
 import OWxTip from '@/components/m-wx-tip';
 
 import MImgCode from '@/components/m-img-code';
-import MMessageTip from '@/components/m-message-tip';
+import MMessageTip from '../m-message-tip';
 import SelectStudent from '@/views/student-register/modal/select-student';
 import { api_sysAreaQueryAllProvince } from '@/views/school-register/api';
 import CodeDialog from '../modal/code-dialog';
@@ -42,6 +42,8 @@ import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 import { api_verification } from '@/views/creation/api';
 import bannerBg from './images/banner-bg.png';
+import submitBtn from './images/btn1.png'
+import title1 from './images/title1.png'
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -101,7 +103,7 @@ export default defineComponent({
       isLoginRegister: false, // 是否已经登录或已注册
       schoolId: null as any,
       schoolAreaId: null, // 学校区域编号
-      activationCode: null as any, // 互通码
+      activationCode: null as any, // 激活码
       paymentType: '', // 支付类型
       paymentChannel: '',
       multi_user_limit: 1, // 限制注册学生数量
@@ -127,7 +129,7 @@ export default defineComponent({
       cityCode: null,
       regionCode: null,
 
-      showResultPopup: false,
+      showResultPopup: true,
       reslutPopupType: '' as any,
       resultPopupContent: '',
       registerType: '', // 报名类型
@@ -295,7 +297,7 @@ export default defineComponent({
         status && showToast('请选择所在班级');
         return true;
       } else if (!forms.activationCode) {
-        status && showToast('请输入互通码');
+        status && showToast('请输入激活码');
         return true;
       }
       return false;
@@ -679,7 +681,7 @@ export default defineComponent({
       forms.schoolLoading = false;
     };
 
-    // 格式化互通码
+    // 格式化激活码
     const maskMiddleDigits = (str: string) => {
       if (!str) {
         return '';
@@ -781,6 +783,16 @@ export default defineComponent({
     };
 
     onMounted(async () => {
+      // otherParams.showOtherMessage = `同一手机号最多创建${forms.multi_user_limit}个学生`;
+      //             otherParams.showOtherSchool = true;
+      //             otherParams.showCancelButton = false;
+      //             otherParams.showCloseButton = true;
+      //             otherParams.confirmButtonColor =
+      //               'linear-gradient( 305deg, #40C8FF 0%, #3192FF 100%)';
+      //             otherParams.confirmButtonText = '我知道了';
+      //             otherParams.otherType = 'limit';
+      //             otherParams.messageAlign = 'center';
+      //             return true;
       try {
         storage.remove(ACCESS_TOKEN);
         removeAuth();
@@ -824,6 +836,7 @@ export default defineComponent({
       <div class={[styles['student-register']]}>
         <img src={bannerBg} class={styles.bannerBg} />
         <div class={styles.studentRegisterContainer}>
+          <img src={title1} class={styles.title1} />
           <div class={[styles.studentSection]}>
             <Form labelAlign="left" class={styles.registerForm}>
               <Field
@@ -1044,7 +1057,7 @@ export default defineComponent({
                   clearable={false}
                   required
                   inputAlign="right"
-                  label="互通码"
+                  label="激活码"
                   readonly={route.query.code ? true : false}
                   modelValue={maskMiddleDigits(forms.activationCode)}
                 />
@@ -1053,8 +1066,8 @@ export default defineComponent({
                   clearable={false}
                   required
                   inputAlign="right"
-                  label="互通码"
-                  placeholder="请输入互通码"
+                  label="激活码"
+                  placeholder="请输入激活码"
                   autocomplete="off"
                   v-model={forms.activationCode}
                 />
@@ -1064,21 +1077,14 @@ export default defineComponent({
 
           <MSticky position="bottom">
             <div class={styles.paymentContainer}>
-              <Button
-                onClick={() => {
-                  // onSubmit();
+              <img class={[styles.submitBtn, forms.submitLoading && styles.loading]} onClick={() => {
+                  if(forms.submitLoading) return
                   if (checkForm() || checkSubmit()) {
                     forms.submitLoading = false;
                     return;
                   }
                   forms.showConfirmPopup = true;
-                }}
-                round
-                block
-                disabled={forms.submitLoading}
-                loading={forms.submitLoading}>
-                提交
-              </Button>
+                }} src={submitBtn} />
             </div>
           </MSticky>
         </div>
@@ -1456,7 +1462,7 @@ export default defineComponent({
               {!route.query.code && (
                 <Cell
                   border={false}
-                  title="互通码"
+                  title="激活码"
                   value={forms.activationCode}></Cell>
               )}
             </div>
@@ -1517,7 +1523,7 @@ export default defineComponent({
             )}
             {forms.reslutPopupType === 'ACTIVATING-TWO' && (
               <p>
-                您已使用该互通码，请勿重复提交，请下载
+                您已使用该激活码，请勿重复提交，请下载
                 <span style={{ color: '#2B85FF' }}>【音乐数字课堂】</span>
                 实现互通互联
               </p>

src/views/activation-code/m-message-tip/index.module.less

@@ -0,0 +1,80 @@
+.wxPopupDialog {
+  // position: relative;
+  overflow: initial;
+  margin: 0 40px;
+  width: calc(100% - 75px) !important;
+  // margin-top: -160px;
+  border-radius: 20px !important;
+
+  &::before {
+    position: absolute;
+    content: ' ';
+    top: -38px;
+    left: 50%;
+    margin-left: -34px;
+    display: inline-block;
+    background: url('../activation-register/images/message-top.png') no-repeat top center;
+    background-size: contain;
+    width: 78px;
+    height: 76px;
+  }
+}
+
+.popupContainer {
+  background: url('../activation-register/images/message-bg2.png') no-repeat top center;
+
+  background-size: contain;
+  border-radius: 20px;
+  overflow: hidden;
+  padding-bottom: 20px;
+  text-align: center;
+
+  .title1 {
+    padding-top: 53px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: #000000;
+  }
+
+  .popupTips {
+    font-size: 15px;
+    color: #666666;
+    line-height: 21px;
+    padding: 16px 20px 20px;
+    word-break: break-all;
+  }
+
+  .btnGroup {
+    display: flex;
+    align-items: center;
+    margin: 0 13px
+  }
+
+  .button {
+    // padding: 0 44px;
+    height: 40px;
+    font-size: 16px;
+    color: #333333;
+    border-color: #AAAAAA;
+    margin: 0 7px;
+    flex: 1;
+  }
+
+  .confirmBtn {
+    background: linear-gradient(305deg, #40C8FF 0%, #3192FF 100%);
+    color: #FFFFFF;
+    border: none;
+  }
+
+  .iconClose {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    display: inline-block;
+    background: url('../../common/images/message-close.png') no-repeat top center;
+    background-size: cover;
+    width: 18px;
+    height: 18px;
+  }
+}

src/views/activation-code/m-message-tip/index.tsx

@@ -0,0 +1,127 @@
+import { Button, Popup } from 'vant';
+import { PropType, defineComponent, onMounted, ref, watch } from 'vue';
+import styles from './index.module.less';
+import { browser } from '@/helpers/utils';
+
+export default defineComponent({
+  name: 'm-wx-tip',
+  props: {
+    // 是否显示微信弹窗
+    show: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '温馨提示'
+    },
+    message: {
+      type: String,
+      default: '请使用微信打开'
+    },
+    messageAlign: {
+      type: String as PropType<'center' | 'left' | 'right'>,
+      default: 'center'
+    },
+    /** 是否展示取消按钮 */
+    showCancelButton: {
+      type: Boolean,
+      default: false
+    },
+    /** 取消按钮文案 */
+    cancelButtonText: {
+      type: String,
+      default: '取消'
+    },
+    /** 取消按钮颜色 */
+    cancelButtonColor: {
+      type: String,
+      default: ''
+    },
+    /** 是否展示确认按钮 */
+    showConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    /** 确认按钮文案 */
+    confirmButtonText: {
+      type: String,
+      default: '确认'
+    },
+    /** 确认按钮颜色 */
+    confirmButtonColor: {
+      type: String,
+      default: ''
+    },
+    /** 是否有关闭按钮 */
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['confirm', 'cancel', 'close'],
+  setup(props, { emit }) {
+    const showPopup = ref(false);
+    onMounted(() => {
+      if (props.show) {
+        showPopup.value = true;
+      }
+    });
+
+    watch(
+      () => [props.show, props.message],
+      () => {
+        if (props.show) {
+          showPopup.value = true;
+        } else {
+          showPopup.value = false;
+        }
+      }
+    );
+    return () => (
+      <>
+        <Popup
+          v-model:show={showPopup.value}
+          round
+          style={{ width: '100%', maxWidth: '520px' }}
+          closeOnClickOverlay={false}
+          class={styles.wxPopupDialog} closeable={false}>
+          <div class={styles.popupContainer}>
+            {props.showCloseButton && (
+              <i class={styles.iconClose} onClick={() => emit('close')}></i>
+            )}
+
+            <p class={styles.title1} v-html={props.title}></p>
+            <p
+              class={styles.popupTips}
+              style={{ 'text-align': props.messageAlign }}
+              v-html={props.message}></p>
+
+            {(props.showConfirmButton || props.showConfirmButton) && (
+              <div class={styles.btnGroup}>
+                {props.showCancelButton && (
+                  <Button
+                    round
+                    class={[styles.button, styles.cancelBtn]}
+                    color={props.cancelButtonColor}
+                    onClick={() => emit('cancel')}>
+                    {props.cancelButtonText}
+                  </Button>
+                )}
+                {props.showConfirmButton && (
+                  <Button
+                    round
+                    class={[styles.button, styles.confirmBtn]}
+                    color={props.confirmButtonColor}
+                    onClick={() => emit('confirm')}>
+                    {props.confirmButtonText}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </Popup>
+      </>
+    );
+  }
+});

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

@@ -88,28 +88,31 @@
 .addStudentBtn {
   margin: 0 20px 22px;
 
-  .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;
-  }
+  // .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;
-    }
+  // :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;
-    }
+  //   .van-button__text {
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: center;
+  //   }
+  // }
+  .addBtn {
+    width: 100%;
   }
 }

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

@@ -3,6 +3,7 @@ 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',
@@ -87,7 +88,7 @@ export default defineComponent({
         </RadioGroup>
         {props.showAdd && (
           <div class={styles.addStudentBtn}>
-            <Button
+            {/* <Button
               block
               color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
               onClick={() => {
@@ -98,7 +99,13 @@ export default defineComponent({
               }}>
               <i class={styles.iconAdd}></i>
               <span>新增学生</span>
-            </Button>
+            </Button> */}
+            <img src={btn2} onClick={() => {
+                //
+                // radioChecked.value = null;
+                emit('confirm', {});
+                // emit('close');
+              }} class={styles.addBtn} />
           </div>
         )}
       </div>