添加报名缴费

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

@@ -1,439 +1,232 @@
 .student-register {
   min-height: 100vh;
-  background: #FFF4E2;
+  // background: #FFF4E2;
+  background: linear-gradient(180deg, #C9EDFD 0%, #CCF0FF 100%);
   overflow: hidden;
-
-  --k-font-primary: #FF8021;
-}
-
-.studentSection {
   position: relative;
-  z-index: 1;
-  margin: 12px;
-  overflow: inherit;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    content: ' ';
-    background: linear-gradient(180deg, #FFFFFF 0%, #FFDAB4 53%, #FFFFFF 100%);
-    box-shadow: 0px 1px 6px 0px #F0DDC8;
-    border-radius: 18px;
-    height: 120px;
-    z-index: -1;
-  }
 
-  .goodsSection {
-    border-radius: 18px 18px;
-    box-shadow: 0px 1px 6px 0px #F0D8C8;
-    border-radius: 18px;
-    overflow: hidden;
-    background: transparent;
-    margin-bottom: 12px;
+  --k-font-primary: #007AFE;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  .studentRegisterContainer {
+    padding-top: 142px;
+    background: url('./images/new/banner-bg.png') no-repeat top center;
+    background-size: contain;
   }
 }
 
-.titleTool {
-  position: relative;
-  z-index: 9;
-  margin: 14px auto 4px;
-  width: 314px;
-  height: 35px;
-  background: url('./images/tool-title.png') no-repeat center;
-  background-size: contain;
-}
-
-.titleBuy {
-  margin: 14px auto 4px;
-  width: 259px;
-  height: 35px;
-  background: url('./images/buy-title.png') no-repeat center;
-  background-size: contain;
-}
-
-.goodsCell {
-  position: relative;
+.paymentContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 14px 14px calc(15px + env(safe-area-inset-bottom)) 14px;
+  background: #FFFFFF;
+  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
   border-radius: 18px 18px 0px 0px;
-  padding: 12px 14px 0;
-
-  .noSelected,
-  .selected,
-  .delete {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 29px;
-    height: 23px;
-  }
-
-  .selected {
-    background: url('./images/icon-checkbox-active.png') no-repeat center;
-    background-size: contain;
-  }
-
-  .noSelected {
-    background: url('./images/icon-checkbox-default.png') no-repeat center;
-    background-size: contain;
-  }
 
-  .delete {
-    background: url('./images/icon-delete-active.png') no-repeat center;
-    background-size: contain;
-  }
 
-  .img {
-    margin-right: 16px;
-    width: 98px;
-    height: 98px;
-    border-radius: 10px;
-    overflow: hidden;
-  }
-
-  h2 {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333333;
-    line-height: 22px;
-  }
-
-  .brandName {
-    margin-left: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #BE7332;
-    line-height: 17px;
+  .giftTip {
+    width: 88px;
     height: 18px;
-    background-color: #FFF5E6;
-    border-radius: 4px;
-    border: 1px solid #FFE9D9;
   }
 
-  .iconDateMember {
-    height: 20px;
-    width: 108px;
-  }
-
-  .model {
-    margin: 10px 0 6px;
-    font-size: 13px;
-    color: #E44D0F;
-    line-height: 18px;
+  .needPrice {
+    color: #333333;
+    padding-bottom: 7px;
+    font-size: 14px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #FC1A19;
+    padding-right: 6px;
 
     span {
-      color: #FF5A56;
-      font-weight: bold;
-    }
-
-    &.more {
-      height: 36px;
-      overflow: hidden;
+      font-size: 28px;
+      margin-right: 2px;
     }
-  }
-
-  .moreBtn {
-    color: #aaa;
-    font-size: 12px;
 
-    :global {
-      .van-icon {
-        margin-left: 4px;
-      }
+    i {
+      // margin-top: -3px;
+      vertical-align: text-bottom;
     }
   }
 
-  .sbtnGroup {
-    display: flex;
-
-    &>span {
-      font-size: 12px;
-      font-weight: 600;
-      color: #AF540D;
-      line-height: 18px;
-      border-radius: 9px;
-      border: 1px solid rgba(175, 84, 13, .62);
-      padding: 0 6px;
-    }
-
-    .btnDetail,
-    .btnVideo {
-      display: flex;
-      align-items: center;
-
-      &:after {
-        content: ' ';
-        background: url('./images/icon-btn-right.png') no-repeat center;
-        width: 12px;
-        height: 12px;
-        background-size: contain;
-        margin-left: 6px;
-        display: inline-block;
-      }
-    }
-
-    .btnDetail {
-      margin-right: 6px;
-    }
-
-    .btnVideo:after {
-      content: ' ';
-      background: url('./images/icon-btn-video.png') no-repeat center;
-      background-size: contain;
-    }
+  .allPrice {
+    display: inline-block;
+    font-size: 14px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #AAAAAA;
+    line-height: 16px;
   }
 
   :global {
-
-    .van-stepper__minus,
-    .van-stepper__plus,
-    .van-stepper__input {
-      background-color: #FFF4E7;
-    }
-
-    .van-stepper__minus,
-    .van-stepper__plus {
-      color: #BF7434;
-    }
-
-    .van-stepper__input {
-      color: #8C6142;
-    }
-
-    .van-stepper__minus {
-      border-radius: 100px 0px 0px 100px;
-    }
-
-    .van-stepper__plus {
-      border-radius: 0px 100px 100px 0px;
+    .van-button {
+      height: 40px;
+      line-height: 40px;
+      width: 148px;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      font-size: 16px;
+      color: #fff;
+      font-weight: 500;
+      border: 0;
     }
   }
 }
 
-.priceCell {
-  padding: 16px 14px 10px;
+.studentSection {
+  margin: 0 14px 12px;
+  padding: 12px 15px;
+  background: linear-gradient(180deg, rgba(219, 246, 253, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
+  border-radius: 16px;
+  border: 2px solid #FFFFFF;
+
+  .title1,
+  .title2 {
+    width: 285px;
+    height: 22px;
+    background: url('./images/new/title-1.png') no-repeat center;
+    background-size: contain;
+  }
 
-  .sPriceGroup {
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    height: 34px;
-    background: #FFF1EC;
-    border-radius: 20px;
-
-    .tg {
-      font-size: 14px;
-      color: #333333;
-      line-height: 20px;
-
-      span {
-        font-size: 22px;
-        font-family: DINAlternate-Bold, DINAlternate;
-        font-weight: bold;
-        color: #FC1A19;
-
-        i {
-          font-style: normal;
-          font-size: 14px;
-        }
-      }
+  .title2 {
+    background: url('./images/new/title-2.png') no-repeat center;
+    background-size: contain;
+  }
 
-    }
+  .content {
+    padding-top: 12px;
+    padding-bottom: 10px;
+    font-size: 14px;
+    color: #506995;
+    line-height: 22px;
+  }
 
-    del {
-      padding-left: 10px;
-      font-size: 14px;
-      font-family: DINAlternate-Bold, DINAlternate;
-      font-weight: bold;
-      color: #8C6142;
-      line-height: 16px;
-      opacity: 0.5;
+  .functionGroup {
+    padding-top: 20px;
+
+    img {
+      width: 100%;
     }
   }
 }
 
-.giftCell {
-  padding: 0 19px;
-  background: linear-gradient(90deg, #FF8633 0%, #FFB047 100%);
-  border-radius: 0px 0px 18px 18px;
-
-  .gift {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    font-weight: 600;
-    color: #FFFFFF;
-    height: 34px;
+.memberGroup {
+  position: relative;
+  font-weight: 500;
+  font-size: 16px;
+  color: #070F67;
+  line-height: 22px;
 
-    span {
-      font-size: 15px;
-      color: #FFFC89;
-      padding: 0 5px;
-    }
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 62px;
+    height: 42px;
+    background: url('./images/new/icon-free.png') no-repeat center;
+    background-size: contain;
+    position: absolute;
+    right: 9px;
+    top: -7px;
   }
 
-  .iconGift {
-    margin-right: 4px;
-    width: 18px;
-    height: 18px;
+  span {
+    margin: 0 4px;
+    background: #FFE22A;
+    border-radius: 4px;
+    font-family: DINAlternate, DINAlternate;
+    font-weight: bold;
+    font-size: 18px;
+    color: #070F67;
+    line-height: 21px;
+    padding: 2px 6px;
   }
 }
 
-.goodsEmpty {
-  padding: 0 7px;
-  height: 106px;
-  background: #FFFFFF;
-  // box-shadow: 0px 1px 6px 0px #F0D8C8;
-  border-radius: 18px;
-  display: flex;
-  align-items: center;
+.truns {
+  position: relative;
 
-  .shopImg {
-    height: 106px;
-    width: 117px;
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: -26px;
+    left: 12px;
+    width: 9px;
+    height: 36px;
+    background: url('./images/new/icon-pre.png') no-repeat center;
+    background-size: contain;
   }
 
-  .goodsContainer {
-    h2 {
-      font-size: 16px;
-      color: #333333;
-      line-height: 22px;
-      font-weight: 400;
-
-      span {
-        color: #FF5A56;
-        font-weight: bold;
-      }
-    }
-
-    .tips {
-      font-size: 14px;
-      color: #BE7332;
-      line-height: 20px;
-    }
+  &::after {
+    left: auto;
+    right: 12px;
+  }
 
-    .goSelect {
-      margin-top: 5px;
-      height: 29px;
-      background-color: transparent;
-      border: 0;
-      background: #FF8057 linear-gradient(121deg, #FFD892 0%, #FFCB75 100%);
-      border-radius: 6px;
-      font-size: 14px;
-      font-weight: 600;
-      color: #5B2C03;
-
-      :global {
-        .van-button__text {
-          display: flex;
-          align-items: center;
-        }
-
-        .van-icon {
-          font-size: 12px;
-          font-weight: bold;
-        }
-      }
-    }
+  .trunList {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
   }
-}
 
-.addButton {
-  height: 42px;
-  background: linear-gradient(90deg, #FF8633 0%, #FFB047 100%);
-  border-radius: 22px;
-  margin: 0 12px 12px;
-  width: calc(100% - 24px);
-  border: none;
+  .trunItem {
+    line-height: 0;
 
-  :global {
-    .van-icon {
-      margin-right: 5px;
-      font-size: 20px;
+    img {
+      width: 55px;
+      height: 55px;
     }
 
-    .van-button__text {
-      font-size: 16px;
-      font-weight: 600;
-      color: #FFFFFF;
-      border: 0 solid;
-      display: flex;
-      align-items: center;
+    p {
+      padding-top: 6px;
+      font-size: 12px;
+      color: #506995;
+      line-height: 17px;
     }
   }
-}
 
-.paymentContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding: 18px 12px calc(15px + env(safe-area-inset-bottom)) 12px;
-  background: #FFFFFF;
-  box-shadow: 0px 1px 6px 0px #F0D7C8, inset 0px 1px 3px 0px #FFFFFF;
-  border-radius: 18px 18px 0px 0px;
+  .tipInfo {
+    margin: 12px 9px 0;
 
-  .needPrice {
-    color: #333333;
-    padding-bottom: 7px;
-    font-size: 18px;
-    font-family: DINAlternate-Bold, DINAlternate;
-    font-weight: bold;
-    color: #FC1A19;
-    padding-right: 6px;
-
-    span {
-      font-size: 28px;
-      margin-right: 2px;
+    img {
+      width: 100%;
+      height: 28px;
     }
   }
+}
 
-  .allPrice {
-    display: inline-block;
-    font-size: 14px;
-    font-family: DINAlternate-Bold, DINAlternate;
-    font-weight: bold;
-    color: #8C6142;
-    line-height: 16px;
-    opacity: 0.5;
-  }
+.videoGroup {
+  margin: 0 14px 12px;
+  background: url('./images/new/video-bg.png') no-repeat center;
+  background-size: contain;
+  height: 243px;
+  overflow: hidden;
 
-  :global {
-    .van-button {
-      height: 40px;
-      line-height: 40px;
-      width: 148px;
-      background: #FF8057 linear-gradient(121deg, #FFD892 0%, #FFCB75 100%);
-      border-radius: 12px;
-      font-size: 16px;
-      color: #5B2C03;
-      font-weight: 600;
-      border: 0;
-    }
+  .videoB {
+    margin-left: 16px;
+    margin-top: 24px;
+    width: 315px;
+    height: 177px;
+    border-radius: 24px;
+    overflow: hidden;
   }
 }
 
-.videoPopup {
-  width: 90%;
-  border-radius: 10px;
-  overflow: hidden;
-  transform: none;
-  margin-top: -95px;
+// .videoPopup {
+//   width: 90%;
+//   border-radius: 10px;
+//   overflow: hidden;
+//   transform: none;
+//   margin-top: -95px;
 
-  :global {
+//   :global {
 
-    .plyr--video {
-      height: 190px !important;
-    }
+//     .plyr--video {
+//       height: 190px !important;
+//     }
 
-    .plyr--video.plyr--fullscreen-fallback {
-      height: 100% !important
-    }
-  }
-}
+//     .plyr--video.plyr--fullscreen-fallback {
+//       height: 100% !important
+//     }
+//   }
+// }

src/views/student-register/index.tsx

@@ -12,19 +12,21 @@ import {
 } from 'vant';
 import { computed, defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
-import iconGift from './images/icon-gift.png';
-import shopEmpty from './images/shop-empty.png';
-import iconDateMember from './images/icon-date-member.png';
 import MSticky from '@/components/m-sticky';
 import MVideo from '@/components/m-video';
 import { useRoute, useRouter } from 'vue-router';
-import RegisterModal from './register-modal';
 import { useStudentRegisterStore } from '@/store/modules/student-register-store';
 import request from '@/helpers/request';
 import { browser, moneyFormat } from '@/helpers/utils';
 import deepClone from '@/helpers/deep-clone';
 import OWxTip from '@/components/m-wx-tip';
 import MDialog from '@/components/m-dialog';
+import f1 from './images/new/f-1.png';
+import f2 from './images/new/f-2.png';
+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 giftTip from './images/new/gift-tip.png';
 
 export default defineComponent({
   name: 'student-register',
@@ -43,6 +45,7 @@ export default defineComponent({
       gradeYear: '', // 学制
       bugGoods: false, // 是否购买AI
       registerType: '', // 报名类型
+      detailVip: {} as any,
       giftVipDay: 0, // 赠送天数
       submitLoading: false,
       showMore: true,
@@ -63,6 +66,7 @@ export default defineComponent({
         studentRegisterStore.setVip(data.details || []);
         forms.details = deepClone(data.details || []);
         if (forms.details.length > 0) {
+          forms.detailVip = forms.details[0];
           forms.giftVipDay = forms.details[0].membershipDays;
         }
         forms.bugGoods = data.bugGoods;
@@ -91,11 +95,11 @@ export default defineComponent({
         originAmount += Number(vip.originalPrice);
       });
 
-      const goodsList: any[] = studentRegisterStore.getGoods;
-      goodsList.forEach((good: any) => {
-        amount += Number(good.price) * good.quantity;
-        originAmount += Number(good.originalPrice) * good.quantity;
-      });
+      // const goodsList: any[] = studentRegisterStore.getGoods;
+      // goodsList.forEach((good: any) => {
+      //   amount += Number(good.price) * good.quantity;
+      //   originAmount += Number(good.originalPrice) * good.quantity;
+      // });
       return {
         amount,
         originAmount
@@ -103,14 +107,14 @@ export default defineComponent({
     });
 
     // 删除商品
-    const onGoodsRemove = (item: any) => {
-      showConfirmDialog({
-        message: '是否删除该商品',
-        confirmButtonColor: '#FF8633'
-      }).then(() => {
-        studentRegisterStore.deleteGoods(item.productSkuId);
-      });
-    };
+    // const onGoodsRemove = (item: any) => {
+    //   showConfirmDialog({
+    //     message: '是否删除该商品',
+    //     confirmButtonColor: '#FF8633'
+    //   }).then(() => {
+    //     studentRegisterStore.deleteGoods(item.productSkuId);
+    //   });
+    // };
 
     // 登记成功之后购买
     const onRegisterSubmit = async () => {
@@ -167,259 +171,118 @@ export default defineComponent({
 
     return () => (
       <div class={styles['student-register']}>
-        <div class={styles.studentSection} style={{ marginTop: '18px' }}>
-          <div class={styles.titleTool}></div>
-          {forms.details.map((item: any) => (
-            <CellGroup
-              class={styles.goodsSection}
-              onClick={() => {
-                if (studentRegisterStore.selectedVip(item.goodsId)) {
-                  studentRegisterStore.deleteVip(item.goodsId);
-                } else {
-                  studentRegisterStore.setVip([item]);
-                }
-              }}>
-              <Cell border={false} class={styles.goodsCell}>
-                {{
-                  icon: () => <Image class={styles.img} src={item.goodsUrl} />,
-                  title: () => (
-                    <div class={styles.section}>
-                      <div class={styles.sectionContent}>
-                        <h2>
-                          <img
-                            src={iconDateMember}
-                            class={styles.iconDateMember}
-                          />
-                        </h2>
+        <div class={styles.studentRegisterContainer}>
+          <div class={styles.studentSection}>
+            <div class={styles.title1}></div>
 
-                        <p
-                          class={[
-                            styles.model,
-                            forms.showMore ? styles.more : ''
-                          ]}>
-                          {item.description}
-                        </p>
-                        {item.description &&
-                        item.description.length >= 36 &&
-                        forms.showMore ? (
-                          <span
-                            class={styles.moreBtn}
-                            onClick={(e: MouseEvent) => {
-                              e.stopPropagation();
-                              forms.showMore = false;
-                            }}>
-                            查看更多
-                            <Icon name="arrow-down" color="#aaa" />
-                          </span>
-                        ) : (
-                          ''
-                        )}
+            <p class={styles.content}>
+              提供在乐器学练中的AI智能学练工具、数字化乐谱与课件，解决学生不会练习、家长无法辅导的乐器学练痛点，学生可实现自主学练，家长即时全面了解学练情况。
+            </p>
+          </div>
+          <div class={[styles.studentSection, styles.truns]}>
+            <div class={styles.trunList}>
+              <div class={styles.trunItem}>
+                <img src={f1} />
+                <p>
+                  随身云教练
+                  <br />
+                  无需请老师
+                </p>
+              </div>
+              <div class={styles.trunItem}>
+                <img src={f2} />
+                <p>
+                  简单易操作
+                  <br />
+                  学生都会练
+                </p>
+              </div>
+              <div class={styles.trunItem}>
+                <img src={f3} />
+                <p>
+                  练习可测评
+                  <br />
+                  家长可省心
+                </p>
+              </div>
+            </div>
 
-                        {/* <div class={styles.sbtnGroup}>
-                          <span
-                            class={styles.btnDetail}
-                            onClick={(e: MouseEvent) => {
-                              e.stopPropagation();
-                              router.push('/student-digital-tools');
-                            }}>
-                            查看详情
-                          </span>
-                          <span
-                            class={styles.btnVideo}
-                            onClick={(e: MouseEvent) => {
-                              e.stopPropagation();
-                              forms.popupShow = true;
-                            }}>
-                            介绍视频
-                          </span>
-                        </div> */}
-                      </div>
+            <div class={styles.tipInfo}>
+              <img src={iconTip2} />
+            </div>
+          </div>
 
-                      <i
-                        class={
-                          studentRegisterStore.selectedVip(item.goodsId)
-                            ? styles.selected
-                            : styles.noSelected
-                        }></i>
-                    </div>
-                  )
-                }}
-              </Cell>
-              <Cell border={false} class={styles.priceCell}>
-                {{
-                  title: () => (
-                    <div class={styles.sPriceGroup}>
-                      <div class={styles.tg}>
-                        团购价：
-                        <span>
-                          <i>¥ </i>
-                          {moneyFormat(item.currentPrice)}
-                        </span>
-                      </div>
-                      {item.currentPrice < item.originalPrice && (
-                        <del>¥{moneyFormat(item.originalPrice)}</del>
-                      )}
-                    </div>
-                  )
-                }}
-              </Cell>
-              {item.membershipDays > 0 && (
-                <Cell border={false} class={styles.giftCell}>
-                  {{
-                    title: () => (
-                      <div class={styles.gift}>
-                        <img src={iconGift} class={styles.iconGift} />
-                        现在购买赠送 <span>{item.membershipDays || 0}</span>
-                        天有效期
-                      </div>
-                    )
-                  }}
-                </Cell>
-              )}
-            </CellGroup>
-          ))}
-        </div>
+          <div class={styles.videoGroup}>
+            <MVideo
+              class={styles.videoB}
+              src={'https://oss.dayaedu.com/daya/202105/SWmqmvW.mp4'}
+            />
+          </div>
 
-        {forms.bugGoods && (
-          <>
-            <div class={styles.studentSection}>
-              <div class={styles.titleBuy}></div>
-              {studentRegisterStore.getGoods &&
-              studentRegisterStore.getGoods.length <= 0 ? (
-                <div class={styles.goodsEmpty}>
-                  <img src={shopEmpty} class={styles.shopImg} />
-                  <div class={styles.goodsContainer}>
-                    <h2>
-                      为你的<span>音乐之旅</span>做好准备
-                    </h2>
-                    <p class={styles.tips}>快去选购乐器吧～</p>
-                    <Button
-                      class={styles.goSelect}
-                      type="primary"
-                      onClick={() => {
-                        router.push('/goods-list');
-                      }}>
-                      进入商城选购
-                      <Icon name="arrow" />
-                    </Button>
-                  </div>
-                </div>
-              ) : (
-                studentRegisterStore.getGoods.map((goods: any) => (
-                  <CellGroup class={styles.goodsSection}>
-                    <Cell border={false} class={styles.goodsCell}>
-                      {{
-                        icon: () => (
-                          <Image class={styles.img} src={goods.pic} />
-                        ),
-                        title: () => (
-                          <div class={styles.section}>
-                            <div class={styles.sectionContent}>
-                              <h2>
-                                {goods.name}
-                                <Tag class={styles.brandName}>
-                                  {goods.brandName}
-                                </Tag>
-                              </h2>
-                              <p class={[styles.model]}>
-                                规格：{goods.spDataJson}
-                              </p>
-                              <p class={[styles.model]}>{goods.productSn}</p>
+          <div class={styles.studentSection}>
+            <div class={styles.title2}></div>
 
-                              <Stepper
-                                min={1}
-                                max={99}
-                                v-model={goods.quantity}
-                                disableInput
-                              />
-                            </div>
+            <div class={styles.functionGroup}>
+              <img src={functionBg} />
+            </div>
+          </div>
 
-                            <i
-                              class={styles.delete}
-                              onClick={() => onGoodsRemove(goods)}></i>
-                          </div>
-                        )
-                      }}
-                    </Cell>
-                    <Cell border={false} class={styles.priceCell}>
-                      {{
-                        title: () => (
-                          <div class={styles.sPriceGroup}>
-                            <div class={styles.tg}>
-                              团购价：
-                              <span>
-                                <i>¥ </i>
-                                {moneyFormat(goods.price)}
-                              </span>
-                            </div>
-                            {goods.price < goods.originalPrice && (
-                              <del>¥{moneyFormat(goods.originalPrice)}</del>
-                            )}
-                          </div>
-                        )
-                      }}
-                    </Cell>
-                  </CellGroup>
-                ))
-              )}
+          {forms.giftVipDay > 0 && (
+            <div class={[styles.studentSection, styles.memberGroup]}>
+              <p>
+                现在购买赠送会员有效期<span>{forms.giftVipDay || 0}</span>天
+              </p>
             </div>
-            {studentRegisterStore.getGoods &&
-              studentRegisterStore.getGoods.length > 0 && (
+          )}
+
+          <MSticky position="bottom">
+            <div class={styles.paymentContainer}>
+              <div class={styles.payemntPrice}>
+                <img src={giftTip} class={styles.giftTip} />
+                <div>
+                  <span class={styles.needPrice}>
+                    <i style="font-style: normal">¥ </i>
+                    <span>{moneyFormat(calcPrice.value.amount)}</span>
+                    <i style="font-style: normal">/年</i>
+                  </span>
+                  {calcPrice.value.originAmount > calcPrice.value.amount ? (
+                    <del class={styles.allPrice}>
+                      ¥ {moneyFormat(calcPrice.value.originAmount)}
+                    </del>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+              <div
+                class={styles.paymentBtn}
+                onClick={() => {
+                  // const vipList = studentRegisterStore.getVip;
+                  // const goodsList = studentRegisterStore.getGoods;
+                  // if (vipList.length <= 0 && goodsList.length <= 0) {
+                  //   setTimeout(() => {
+                  //     showToast('请选择需要购买的商品');
+                  //   }, 100);
+                  //   return;
+                  // }
+                  onRegisterSubmit();
+                }}>
                 <Button
-                  class={styles.addButton}
-                  block
-                  onClick={() => {
-                    router.push('/goods-list');
-                  }}>
-                  <Icon name="add-o" />
-                  进入商城选购
+                  round
+                  disabled={forms.submitLoading}
+                  loading={forms.submitLoading}>
+                  下一步
                 </Button>
-              )}
-          </>
-        )}
-
-        <MSticky position="bottom">
-          <div class={styles.paymentContainer}>
-            <div class={styles.payemntPrice}>
-              <span class={styles.needPrice}>
-                <i style="font-style: normal">¥ </i>
-                <span>{moneyFormat(calcPrice.value.amount)}</span>
-              </span>
-              {calcPrice.value.originAmount > calcPrice.value.amount ? (
-                <del class={styles.allPrice}>
-                  ¥ {moneyFormat(calcPrice.value.originAmount)}
-                </del>
-              ) : (
-                ''
-              )}
-            </div>
-            <div
-              class={styles.paymentBtn}
-              onClick={() => {
-                const vipList = studentRegisterStore.getVip;
-                const goodsList = studentRegisterStore.getGoods;
-                if (vipList.length <= 0 && goodsList.length <= 0) {
-                  setTimeout(() => {
-                    showToast('请选择需要购买的商品');
-                  }, 100);
-                  return;
-                }
-                onRegisterSubmit();
-              }}>
-              <Button
-                disabled={forms.submitLoading}
-                loading={forms.submitLoading}>
-                确认购买
-              </Button>
+              </div>
             </div>
-          </div>
-        </MSticky>
+          </MSticky>
+        </div>
 
-        <Popup v-model:show={forms.popupShow} class={styles.videoPopup}>
+        {/* <Popup v-model:show={forms.popupShow} class={styles.videoPopup}>
           {forms.popupShow && (
             <MVideo src={'https://oss.dayaedu.com/daya/202105/SWmqmvW.mp4'} />
           )}
-        </Popup>
+        </Popup> */}
 
         {/* 是否在微信中打开 */}
         <OWxTip

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

@@ -1,46 +1,79 @@
 .registerModal {
-  background: linear-gradient(180deg, #FFFFFF 0%, #FFDAB4 15%, #FFFFFF 100%);
-  box-shadow: 0px 1px 6px 0px #DCC8F0;
-  border-radius: 18px 18px 0px 0px;
+  background: linear-gradient(180deg, #D0EFFD 0%, #DBF4FF 100%);
   overflow: hidden;
+  min-height: 100vh;
+
+  .registerModalSection {
+    background: url('../images/new/banner2.png') no-repeat top center;
+    background-size: contain;
+    overflow: hidden;
+  }
 }
 
 .infoTitle {
-  width: 315px;
-  height: 31px;
+  width: 323px;
+  height: 19px;
   display: block;
-  margin: 14px auto 10px;
+  margin: 34px auto 25px;
 }
 
 .registerForm {
   background: #FFFFFF;
-  box-shadow: 0px 1px 6px 0px #F0D8C8;
+  border-radius: 16px;
   border-radius: 18px;
   margin: 0 12px;
   overflow: hidden;
 
+  .fieldTipsGroup {
+    margin: 0 14px 0;
+    padding-bottom: 9px;
+  }
+
+  .fieldTips {
+    font-size: 13px;
+    color: #EC763B;
+    line-height: 18px;
+    background: #FFF8EB;
+    border-radius: 8px;
+    padding: 8px 10px;
+  }
+
   .tips {
     display: inline-block;
-    padding-left: 5px;
-    padding-top: 4px;
+    // padding-left: 5px;
+    // padding-top: 2px;
     font-size: 12px;
     font-weight: 400;
     color: #777;
     line-height: 17px;
   }
 
+  .username {
+    padding-bottom: 8px !important;
+
+    :global {
+      .van-field__label {
+        display: flex;
+        align-items: center;
+        width: 170px;
+      }
+    }
+  }
+
+  .countDown {
+    min-width: 50px;
+    text-align: center;
+  }
+
   :global {
     .van-cell {
-      padding: 14px 14px;
-
+      padding: 18px 14px;
     }
 
     .van-field__label {
       font-size: 16px;
-      font-weight: 600;
-      color: #5B2C03;
+      color: #666666;
       line-height: 22px;
-      margin-bottom: 8px;
     }
 
     .van-field__control {
@@ -49,33 +82,118 @@
   }
 
   .codeText {
-    color: #FFCF7C;
+    color: #1189FF;
     font-size: 14px;
+
+    // &.codeTextDisabled {
+    //   color: #ccc;
+    // }
+  }
+
+  .memberNumer {
+    margin: 12px 12px 0;
+    background: #E8F8FF;
+    border-radius: 8px;
+    padding: 8px 0 8px 10px;
+    display: flex;
+    align-items: center;
     font-weight: 600;
+    font-size: 13px;
+    color: #2B85FF;
+    line-height: 18px;
+    margin-bottom: 16px;
+
+    .iconGift {
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+    }
 
-    &.codeTextDisabled {
-      color: #ccc;
+    span {
+      font-size: 15px;
+      color: #F62C2C;
+      padding: 0 5px;
     }
   }
 }
 
-.submitBtn {
-  margin: 16px 12px 22px;
-  width: calc(100% - 24px);
-  height: 46px;
-  border-radius: 12px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #5B2C03 !important;
-  line-height: 22px;
+// .submitBtn {
+//   margin: 16px 12px 22px;
+//   width: calc(100% - 24px);
+//   height: 46px;
+//   border-radius: 12px;
+//   font-size: 16px;
+//   font-weight: 600;
+//   color: #5B2C03 !important;
+//   line-height: 22px;
+// }
+
+.paymentContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 14px 14px calc(15px + env(safe-area-inset-bottom)) 14px;
+  background: #FFFFFF;
+  box-shadow: 0px -1px 0px 0px #F2F2F2, inset 0px 1px 3px 0px #FFFFFF;
+  border-radius: 18px 18px 0px 0px;
+
+
+  .giftTip {
+    width: 88px;
+    height: 18px;
+  }
+
+  .needPrice {
+    padding-bottom: 7px;
+    font-size: 14px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #FC1A19;
+    padding-right: 6px;
+
+    span {
+      font-size: 28px;
+      margin-right: 2px;
+    }
+
+    i {
+      // margin-top: -3px;
+      vertical-align: text-bottom;
+    }
+  }
+
+  .allPrice {
+    display: inline-block;
+    font-size: 14px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #AAAAAA;
+    line-height: 16px;
+  }
+
+  :global {
+    .van-button {
+      height: 40px;
+      line-height: 40px;
+      width: 148px;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      font-size: 16px;
+      color: #fff;
+      font-weight: 500;
+      border: 0;
+    }
+  }
 }
 
 .radioSection {
   position: relative;
   min-width: 32px;
   justify-content: center;
-  padding-left: 14px;
-  padding-right: 14px;
+  padding-left: 19px;
+  padding-right: 19px;
+  font-size: 15px;
+  font-weight: 500;
 }
 
 .radioItem {

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

@@ -8,7 +8,9 @@ import {
   watch
 } from 'vue';
 import styles from './index.module.less';
-import infoTitle from '../images/info-title.png';
+import infoTitle from '../images/new/r-title.png';
+import giftTip from '../images/new/gift-tip.png';
+import iconGift from '../images/new/icon-gift.png';
 import {
   Button,
   CountDown,
@@ -25,7 +27,7 @@ import MProtocol from '@/components/m-protocol';
 import { state as baseState, setLogin } from '@/state';
 import qs from 'query-string';
 import MImgCode from '@/components/m-img-code';
-import { browser, checkPhone } from '@/helpers/utils';
+import { browser, checkPhone, moneyFormat } from '@/helpers/utils';
 import request from '@/helpers/request';
 import { useStudentRegisterStore } from '@/store/modules/student-register-store';
 import { setLoginInit, state } from '@/state';
@@ -41,6 +43,7 @@ import UserAuth from '../component/user-auth';
 import Payment from '@/views/adapay/payment';
 import { beforeSubmit } from '../order-state';
 import OPopup from '@/components/m-popup';
+import MSticky from '@/components/m-sticky';
 const studentRegisterStore = useStudentRegisterStore();
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -629,146 +632,197 @@ export default defineComponent({
 
     return () => (
       <div class={styles.registerModal}>
-        <img src={infoTitle} class={styles.infoTitle} />
-
-        <Form labelAlign="top" class={styles.registerForm}>
-          <Field
-            clearable
-            label="学生姓名"
-            placeholder="请输入学生姓名"
-            autocomplete="off"
-            maxlength={14}
-            v-model={studentInfo.extra.nickname}
-          />
-          <Field
-            clearable
-            label="学生性别"
-            placeholder="请选择性别"
-            autocomplete="off"
-            // v-model={studentInfo.extra.nickname}
-          >
-            {{
-              input: () => (
-                <RadioGroup
-                  checked-color="#ffcb75"
-                  v-model={studentInfo.extra.gender}
-                  direction="horizontal">
-                  <Tag
-                    size="large"
-                    type="primary"
-                    color={
-                      !(studentInfo.extra.gender === 1) ? '#EAEAEA' : '#ffcb75'
-                    }
-                    textColor={
-                      !(studentInfo.extra.gender === 1) ? '#AAA' : '#5B2C03'
-                    }
-                    class={styles.radioSection}
-                    round>
-                    <Radio class={styles.radioItem} name={1}></Radio>男
-                  </Tag>
-                  <Tag
-                    size="large"
-                    type="primary"
-                    color={
-                      !(studentInfo.extra.gender === 0) ? '#EAEAEA' : '#ffcb75'
-                    }
-                    textColor={
-                      !(studentInfo.extra.gender === 0) ? '#AAA' : '#5B2C03'
-                    }
-                    class={styles.radioSection}
-                    round>
-                    <Radio class={styles.radioItem} name={0}></Radio>女
-                  </Tag>
-                </RadioGroup>
-              )
-            }}
-          </Field>
-          <Field
-            clearable
-            label="所在年级"
-            placeholder="请选择年级"
-            isLink
-            readonly
-            clickable={false}
-            modelValue={forms.gradeNumText}
-            onClick={() => (forms.gradeStatus = true)}
-          />
-          <Field
-            clearable
-            label="所在班级"
-            placeholder="请选择班级"
-            isLink
-            readonly
-            clickable={false}
-            modelValue={forms.currentClassText}
-            onClick={() => (forms.classStatus = true)}
-          />
-          <Field
-            clearable
-            label="联系方式（直接监护人）"
-            placeholder="请输入手机号码"
-            type="tel"
-            autocomplete="off"
-            v-model={studentInfo.username}
-            maxlength={11}>
-            {{
-              label: () => (
-                <div>
-                  联系方式
-                  {/* （直接监护人） */}
-                  <p class={styles.tips}>手机号是音乐数字课堂的唯一登录账户</p>
-                </div>
-              )
-            }}
-          </Field>
-          <Field
-            center
-            clearable
-            label="验证码"
-            placeholder="请输入验证码"
-            autocomplete="off"
-            type="number"
-            v-model={studentInfo.password}
-            maxlength={6}>
-            {{
-              button: () =>
-                forms.countDownStatus ? (
-                  <span
-                    class={[
-                      styles.codeText,
-                      !validatePhone.value ? styles.codeTextDisabled : ''
-                    ]}
-                    onClick={onSendCode}>
-                    获取验证码
-                  </span>
-                ) : (
-                  <CountDown
-                    ref={(el: any) => (countDownRef.value = el)}
-                    auto-start={false}
-                    time={forms.countDownTime}
-                    onFinish={onFinished}
-                    format="ss秒"
-                  />
+        <div class={styles.registerModalSection}>
+          <img src={infoTitle} class={styles.infoTitle} />
+
+          <Form labelAlign="left" class={styles.registerForm}>
+            <Field
+              clearable
+              label="联系方式（直接监护人）"
+              placeholder="请输入手机号码"
+              type="tel"
+              required
+              autocomplete="off"
+              inputAlign="right"
+              class={styles.username}
+              v-model={studentInfo.username}
+              border={false}
+              maxlength={11}>
+              {{
+                label: () => (
+                  <div>
+                    联系方式
+                    {/* （直接监护人） */}
+                    <p class={styles.tips}>（直接监护人）</p>
+                  </div>
                 )
-            }}
-          </Field>
-        </Form>
-        {/* <MProtocol
+              }}
+            </Field>
+            <div class={['van-hairline--bottom', styles.fieldTipsGroup]}>
+              <div class={[styles.fieldTips]}>
+                手机号是数字化器乐课堂的唯一登录账户
+              </div>
+            </div>
+
+            <Field
+              center
+              clearable
+              required
+              inputAlign="right"
+              label="验证码"
+              placeholder="请输入验证码"
+              autocomplete="off"
+              type="number"
+              v-model={studentInfo.password}
+              maxlength={6}>
+              {{
+                button: () =>
+                  forms.countDownStatus ? (
+                    <span
+                      class={[
+                        styles.codeText,
+                        !validatePhone.value ? styles.codeTextDisabled : ''
+                      ]}
+                      onClick={onSendCode}>
+                      获取验证码
+                    </span>
+                  ) : (
+                    <CountDown
+                      ref={(el: any) => (countDownRef.value = el)}
+                      auto-start={false}
+                      class={styles.countDown}
+                      time={forms.countDownTime}
+                      onFinish={onFinished}
+                      format="ss秒"
+                    />
+                  )
+              }}
+            </Field>
+            <Field
+              clearable
+              required
+              inputAlign="right"
+              label="学生姓名"
+              placeholder="请输入学生姓名"
+              autocomplete="off"
+              maxlength={14}
+              v-model={studentInfo.extra.nickname}
+            />
+            <Field
+              clearable
+              required
+              inputAlign="right"
+              label="学生性别"
+              placeholder="请选择性别"
+              autocomplete="off"
+              // v-model={studentInfo.extra.nickname}
+            >
+              {{
+                input: () => (
+                  <RadioGroup
+                    checked-color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)"
+                    v-model={studentInfo.extra.gender}
+                    direction="horizontal">
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={
+                        !(studentInfo.extra.gender === 1)
+                          ? '#F5F6FA'
+                          : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
+                      }
+                      textColor={
+                        !(studentInfo.extra.gender === 1) ? '#626264' : '#fff'
+                      }
+                      class={styles.radioSection}>
+                      <Radio class={styles.radioItem} name={1}></Radio>男
+                    </Tag>
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={
+                        !(studentInfo.extra.gender === 0)
+                          ? '#F5F6FA'
+                          : 'linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)'
+                      }
+                      textColor={
+                        !(studentInfo.extra.gender === 0) ? '#626264' : '#fff'
+                      }
+                      class={styles.radioSection}>
+                      <Radio class={styles.radioItem} name={0}></Radio>女
+                    </Tag>
+                  </RadioGroup>
+                )
+              }}
+            </Field>
+            <Field
+              clearable
+              required
+              inputAlign="right"
+              label="所在年级"
+              placeholder="请选择年级"
+              isLink
+              readonly
+              clickable={false}
+              modelValue={forms.gradeNumText}
+              onClick={() => (forms.gradeStatus = true)}
+            />
+            <Field
+              clearable
+              required
+              inputAlign="right"
+              label="所在班级"
+              placeholder="请选择班级"
+              isLink
+              readonly
+              clickable={false}
+              modelValue={forms.currentClassText}
+              onClick={() => (forms.classStatus = true)}
+            />
+            {forms.giftVipDay > 0 && (
+              <div class={styles.memberNumer}>
+                <img src={iconGift} class={styles.iconGift} />
+
+                <p>
+                  注册成功即可获得乐器AI学练工具
+                  <span>{forms.giftVipDay || 0}</span>天
+                </p>
+              </div>
+            )}
+          </Form>
+          {/* <MProtocol
           center
           v-model:modelValue={forms.modelValue}
           prototcolType="REGISTER"
         /> */}
 
-        <Button
-          type="primary"
-          class={styles.submitBtn}
-          color="linear-gradient(121deg, #FFD892 0%, #FFCB75 100%)"
-          block
-          onClick={onSubmit}
-          disabled={forms.loading}
-          loading={forms.loading}>
-          确认
-        </Button>
+          <MSticky position="bottom">
+            <div class={styles.paymentContainer}>
+              <div class={styles.payemntPrice}>
+                <img src={giftTip} class={styles.giftTip} />
+                <div>
+                  <span class={styles.needPrice}>
+                    <i style="font-style: normal">¥ </i>
+                    <span>{moneyFormat(calcPrice.value.amount)}</span>
+                    <i style="font-style: normal">/年</i>
+                  </span>
+                  {calcPrice.value.originAmount > calcPrice.value.amount ? (
+                    <del class={styles.allPrice}>
+                      ¥ {moneyFormat(calcPrice.value.originAmount)}
+                    </del>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+              <div class={styles.paymentBtn} onClick={onSubmit}>
+                <Button round disabled={forms.loading} loading={forms.loading}>
+                  立即支付
+                </Button>
+              </div>
+            </div>
+          </MSticky>
+        </div>
 
         {forms.imgCodeStatus ? (
           <MImgCode