临时添加地址

src/router/router-root.ts

@@ -9,6 +9,14 @@ export default [
     }
   },
   {
+    path: '/student-register-form',
+    name: 'student-register-form',
+    component: () => import('@/views/student-register/register-modal/index'),
+    meta: {
+      title: '音乐数字课堂学生报名'
+    }
+  },
+  {
     path: '/register-member',
     name: 'register-member',
     component: () => import('@/views/student-register/register-member'),

src/views/student-register/component/user-auth.tsx

@@ -29,8 +29,8 @@ export default defineComponent({
   mounted() {
     // 初始化数据
     const users = state.user.data;
-    this.form.realName = users?.account.realName;
-    // this.form.idCardNo = users?.idCardNo
+    console.log(users, 'users');
+    this.form.realName = users?.account?.realName;
   },
   methods: {
     async onSubmit() {

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

@@ -0,0 +1,435 @@
+import {
+  Image,
+  Cell,
+  CellGroup,
+  Tag,
+  Button,
+  Stepper,
+  Icon,
+  Popup,
+  showConfirmDialog,
+  showToast
+} 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';
+
+export default defineComponent({
+  name: 'student-register',
+  setup() {
+    const route = useRoute();
+    const studentRegisterStore = useStudentRegisterStore();
+    const router = useRouter();
+    // 初始化学校编号
+    studentRegisterStore.setShoolId(route.query.sId as any);
+    const forms = reactive({
+      schoolId: route.query.sId as any,
+      paymentType: '', // 支付类型
+      popupShow: false,
+      details: [] as any[],
+      schoolType: '', // 学校类型
+      gradeYear: '', // 学制
+      bugGoods: false, // 是否购买AI
+      registerType: '', // 报名类型
+      giftVipDay: 0, // 赠送天数
+      submitLoading: false,
+      showMore: true,
+      showTips: false,
+      showButton: false,
+      showMessage: '请使用微信打开'
+    });
+
+    const getRegisterGoods = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/userOrder/registerGoods/' + forms.schoolId,
+          {
+            noAuthorization: true // 是否请求接口的时候添加toekn
+          }
+        );
+        // 默认选中商品
+        studentRegisterStore.setVip(data.details || []);
+        forms.details = deepClone(data.details || []);
+        if (forms.details.length > 0) {
+          forms.giftVipDay = forms.details[0].membershipDays;
+        }
+        forms.bugGoods = data.bugGoods;
+        forms.schoolType = data.schoolType;
+        forms.gradeYear = data.gradeYear;
+        forms.registerType = data.registerType;
+        if (browser().weixin) {
+          if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效，详情请咨询学校老师';
+            forms.showButton = false;
+          }
+        } else {
+          forms.showTips = true;
+        }
+      } catch {}
+    };
+
+    // 计算金额
+    const calcPrice = computed(() => {
+      let amount: number = 0; //现价
+      let originAmount: number = 0; // 原价
+      const vipList: any[] = studentRegisterStore.getVip;
+      vipList.forEach((vip: any) => {
+        amount += Number(vip.currentPrice);
+        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;
+      });
+      return {
+        amount,
+        originAmount
+      };
+    });
+
+    // 删除商品
+    const onGoodsRemove = (item: any) => {
+      showConfirmDialog({
+        message: '是否删除该商品',
+        confirmButtonColor: '#FF8633'
+      }).then(() => {
+        studentRegisterStore.deleteGoods(item.productSkuId);
+      });
+    };
+
+    // 登记成功之后购买
+    const onRegisterSubmit = async () => {
+      try {
+        forms.submitLoading = true;
+
+        // 检测token是否失效
+        // const Authorization = storage.get(ACCESS_TOKEN) || '';
+        // const authInfo = await request.post('/edu-app/open/user/verification', {
+        //   noAuthorization: true,
+        //   data: { token: Authorization }
+        // });
+        // // 判断当前token是否失效
+        // if (!authInfo.data) {
+        //   storage.remove(ACCESS_TOKEN);
+        //   studentRegisterStore.deleteToken();
+        //   forms.popupRegister = true;
+        //   return;
+        // }
+
+        // // 请求是否有待支付订单，如果有则自动关闭
+        // const status = await paymentOrderUnpaid();
+        // if (status) return;
+        // const schoolInfo = await request.get(
+        //   '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
+        // );
+        // const vipList = studentRegisterStore.getVip;
+
+        // if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
+        //   // setTimeout(() => {
+        //   //   showToast('您已购买乐器AI学练工具，请勿重复购买');
+        //   // }, 100);
+        //   forms.dialogConfirmStatus = true;
+        //   return;
+        // }
+        // await paymentContinue();
+
+        router.push({
+          path: '/student-register-form',
+          query: {
+            schoolId: forms.schoolId
+          }
+        });
+      } finally {
+        forms.submitLoading = false;
+      }
+    };
+
+    onMounted(async () => {
+      try {
+        getRegisterGoods();
+      } catch {}
+    });
+
+    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>
+
+                        <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>
+                        ) : (
+                          ''
+                        )}
+
+                        {/* <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>
+
+                      <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>
+
+        {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>
+
+                              <Stepper
+                                min={1}
+                                max={99}
+                                v-model={goods.quantity}
+                                disableInput
+                              />
+                            </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>
+                ))
+              )}
+            </div>
+            {studentRegisterStore.getGoods &&
+              studentRegisterStore.getGoods.length > 0 && (
+                <Button
+                  class={styles.addButton}
+                  block
+                  onClick={() => {
+                    router.push('/goods-list');
+                  }}>
+                  <Icon name="add-o" />
+                  进入商城选购
+                </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>
+        </MSticky>
+
+        <Popup v-model:show={forms.popupShow} class={styles.videoPopup}>
+          {forms.popupShow && (
+            <MVideo src={'https://oss.dayaedu.com/daya/202105/SWmqmvW.mp4'} />
+          )}
+        </Popup>
+
+        {/* 是否在微信中打开 */}
+        <OWxTip
+          show={forms.showTips}
+          message={forms.showMessage}
+          showButton={forms.showButton}
+          buttonText="刷新"
+          onConfirm={() => window.location.reload()}
+        />
+      </div>
+    );
+  }
+});

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

@@ -0,0 +1,439 @@
+.student-register {
+  min-height: 100vh;
+  background: #FFF4E2;
+  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;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.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;
+  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;
+    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;
+
+    span {
+      color: #FF5A56;
+      font-weight: bold;
+    }
+
+    &.more {
+      height: 36px;
+      overflow: hidden;
+    }
+  }
+
+  .moreBtn {
+    color: #aaa;
+    font-size: 12px;
+
+    :global {
+      .van-icon {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .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;
+    }
+  }
+
+  :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;
+    }
+  }
+}
+
+.priceCell {
+  padding: 16px 14px 10px;
+
+  .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;
+        }
+      }
+
+    }
+
+    del {
+      padding-left: 10px;
+      font-size: 14px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #8C6142;
+      line-height: 16px;
+      opacity: 0.5;
+    }
+  }
+}
+
+.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;
+
+    span {
+      font-size: 15px;
+      color: #FFFC89;
+      padding: 0 5px;
+    }
+  }
+
+  .iconGift {
+    margin-right: 4px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.goodsEmpty {
+  padding: 0 7px;
+  height: 106px;
+  background: #FFFFFF;
+  // box-shadow: 0px 1px 6px 0px #F0D8C8;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+
+  .shopImg {
+    height: 106px;
+    width: 117px;
+  }
+
+  .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;
+    }
+
+    .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;
+        }
+      }
+    }
+  }
+}
+
+.addButton {
+  height: 42px;
+  background: linear-gradient(90deg, #FF8633 0%, #FFB047 100%);
+  border-radius: 22px;
+  margin: 0 12px 12px;
+  width: calc(100% - 24px);
+  border: none;
+
+  :global {
+    .van-icon {
+      margin-right: 5px;
+      font-size: 20px;
+    }
+
+    .van-button__text {
+      font-size: 16px;
+      font-weight: 600;
+      color: #FFFFFF;
+      border: 0 solid;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.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;
+
+  .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;
+    }
+  }
+
+  .allPrice {
+    display: inline-block;
+    font-size: 14px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #8C6142;
+    line-height: 16px;
+    opacity: 0.5;
+  }
+
+  :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;
+    }
+  }
+}
+
+.videoPopup {
+  width: 90%;
+  border-radius: 10px;
+  overflow: hidden;
+  transform: none;
+  margin-top: -95px;
+
+  :global {
+
+    .plyr--video {
+      height: 190px !important;
+    }
+
+    .plyr--video.plyr--fullscreen-fallback {
+      height: 100% !important
+    }
+  }
+}

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

@@ -0,0 +1,640 @@
+import {
+  Image,
+  Cell,
+  CellGroup,
+  Tag,
+  Button,
+  Stepper,
+  Icon,
+  Popup,
+  showConfirmDialog,
+  showToast
+} 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 { storage } from '@/helpers/storage';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+import OWxTip from '@/components/m-wx-tip';
+import MDialog from '@/components/m-dialog';
+import { CurrentTime, useCountDown } from '@vant/use';
+
+export default defineComponent({
+  name: 'student-register',
+  setup() {
+    const route = useRoute();
+    const studentRegisterStore = useStudentRegisterStore();
+    const router = useRouter();
+    // 初始化学校编号
+    studentRegisterStore.setShoolId(route.query.sId as any);
+    const forms = reactive({
+      schoolId: route.query.sId as any,
+      paymentType: '', // 支付类型
+      popupShow: false,
+      popupRegister: false,
+      details: [] as any[],
+      schoolType: '', // 学校类型
+      gradeYear: '', // 学制
+      bugGoods: false, // 是否购买AI
+      registerType: '', // 报名类型
+      giftVipDay: 0, // 赠送天数
+      submitLoading: false,
+      dialogStatus: false,
+      dialogMessage: '',
+      dialogConfirmStatus: false,
+      countDownTime: 60 * 1000,
+      dialogConfig: {} as any,
+      showMore: true,
+      showTips: false,
+      showButton: false,
+      showMessage: '请使用微信打开'
+    });
+
+    const countDown = useCountDown({
+      // 倒计时 60 秒
+      time: forms.countDownTime,
+      onChange(current: CurrentTime) {
+        forms.dialogMessage = `有待支付订单，请在${Math.ceil(
+          current.total / 1000
+        )}s后重试`;
+      },
+      onFinish() {
+        forms.dialogStatus = false;
+      }
+    });
+
+    // 查询未支付订单
+    const paymentOrderUnpaid = async () => {
+      let result = false;
+      try {
+        const { data } = await request.get('/edu-app/userPaymentOrder/unpaid');
+        // 判断是否有待支付订单
+
+        if (!data.id) return false;
+
+        // 判断是否可以取消订单
+        if (data.cancelPayment) {
+          await request.post(
+            '/edu-app/userPaymentOrder/cancelPayment/' + data.orderNo
+          );
+          return false;
+        } else {
+          forms.countDownTime = data.cancelTimes;
+          countDown.reset(Number(data.cancelTimes));
+          countDown.start();
+          forms.dialogMessage = `有待支付订单，请在${Math.ceil(
+            countDown.current.value.total / 1000
+          )}s后重试`;
+          forms.dialogStatus = true;
+          forms.dialogConfig = data;
+          result = true;
+        }
+      } catch {
+        //
+      }
+      return result;
+    };
+
+    const getRegisterGoods = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/userOrder/registerGoods/' + forms.schoolId,
+          {
+            noAuthorization: true // 是否请求接口的时候添加toekn
+          }
+        );
+        // 默认选中商品
+        studentRegisterStore.setVip(data.details || []);
+        forms.details = deepClone(data.details || []);
+        if (forms.details.length > 0) {
+          forms.giftVipDay = forms.details[0].membershipDays;
+        }
+        forms.bugGoods = data.bugGoods;
+        forms.schoolType = data.schoolType;
+        forms.gradeYear = data.gradeYear;
+        forms.registerType = data.registerType;
+        if (browser().weixin) {
+          if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效，详情请咨询学校老师';
+            forms.showButton = false;
+          }
+        } else {
+          forms.showTips = true;
+        }
+      } catch {}
+    };
+
+    // 计算金额
+    const calcPrice = computed(() => {
+      let amount: number = 0; //现价
+      let originAmount: number = 0; // 原价
+      const vipList: any[] = studentRegisterStore.getVip;
+      vipList.forEach((vip: any) => {
+        amount += Number(vip.currentPrice);
+        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;
+      });
+      return {
+        amount,
+        originAmount
+      };
+    });
+
+    // 删除商品
+    const onGoodsRemove = (item: any) => {
+      showConfirmDialog({
+        message: '是否删除该商品',
+        confirmButtonColor: '#FF8633'
+      }).then(() => {
+        studentRegisterStore.deleteGoods(item.productSkuId);
+      });
+    };
+
+    // 登记成功之后购买
+    const onRegisterSubmit = async () => {
+      try {
+        forms.submitLoading = true;
+
+        // 检测token是否失效
+        const Authorization = storage.get(ACCESS_TOKEN) || '';
+        const authInfo = await request.post('/edu-app/open/user/verification', {
+          noAuthorization: true,
+          data: { token: Authorization }
+        });
+        // 判断当前token是否失效
+        if (!authInfo.data) {
+          storage.remove(ACCESS_TOKEN);
+          studentRegisterStore.deleteToken();
+          forms.popupRegister = true;
+          return;
+        }
+
+        // 请求是否有待支付订单，如果有则自动关闭
+        const status = await paymentOrderUnpaid();
+        if (status) return;
+        const schoolInfo = await request.get(
+          '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
+        );
+        const vipList = studentRegisterStore.getVip;
+
+        if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
+          // setTimeout(() => {
+          //   showToast('您已购买乐器AI学练工具，请勿重复购买');
+          // }, 100);
+          forms.dialogConfirmStatus = true;
+          return;
+        }
+        await paymentContinue();
+      } finally {
+        forms.submitLoading = false;
+      }
+    };
+
+    const paymentContinue = async () => {
+      try {
+        const vipList = studentRegisterStore.getVip;
+        const goodsList = studentRegisterStore.getGoods;
+        const params: any[] = [];
+        vipList.forEach((vip: any) => {
+          params.push({
+            giftVipDay: vip.membershipDays,
+            goodsId: vip.goodsId,
+            goodsNum: 1,
+            goodsType: vip.goodsType,
+            paymentCashAmount: vip.currentPrice, // 现金支付金额
+            paymentCouponAmount: 0 // 优惠券金额
+          });
+        });
+
+        goodsList.forEach((goods: any) => {
+          params.push({
+            goodsId: goods.productId,
+            goodsNum: goods.quantity,
+            goodsType: 'INSTRUMENTS',
+            paymentCashAmount: goods.price, // 现金支付金额
+            paymentCouponAmount: 0, // 优惠券金额
+            goodsSkuId: goods.productSkuId
+          });
+        });
+        // 创建订单
+        const result = await request.post(
+          '/edu-app/userPaymentOrder/executeOrder',
+          {
+            hideLoading: false,
+            data: {
+              registerType: forms.registerType,
+              paymentType: forms.paymentType,
+              bizId: forms.schoolId, // 乐团编号
+              orderType: 'SCHOOL_REGISTER',
+              paymentCashAmount: calcPrice.value.amount || 0,
+              paymentCouponAmount: 0,
+              goodsInfos: params,
+              orderName: '学生登记',
+              orderDesc: '学生登记'
+            }
+          }
+        );
+
+        if (result.code === 5436) {
+          forms.showTips = true;
+          forms.showMessage = '二维码已经失效，详情请咨询学校老师';
+          forms.showButton = false;
+          forms.popupRegister = false;
+        } else if (result.code === 5435) {
+          forms.showTips = true;
+          forms.showMessage = result.message;
+          forms.showButton = true;
+          forms.popupRegister = false;
+        } else {
+          router.push({
+            path: '/order-detail',
+            query: {
+              pm: 1, // h5乐团报名
+              config: JSON.stringify({
+                ...result.data.paymentConfig,
+                paymentType: result.data.paymentType
+              }),
+              orderNo: result.data.orderNo
+            }
+          });
+        }
+      } catch {}
+    };
+
+    onMounted(async () => {
+      try {
+        // 获取支付类型
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamName',
+          {
+            requestType: 'form',
+            params: {
+              paramName: 'payment_service_provider'
+            }
+          }
+        );
+        if (data.id) {
+          forms.paymentType = data.paramValue || '';
+        }
+
+        getRegisterGoods();
+      } catch {}
+    });
+
+    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>
+                          {/* {item.goodsName} */}
+                          {/* <Tag class={styles.brandName}>12个月</Tag> */}
+                          <img
+                            src={iconDateMember}
+                            class={styles.iconDateMember}
+                          />
+                        </h2>
+
+                        <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>
+                        ) : (
+                          ''
+                        )}
+
+                        {/* <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>
+
+                      <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>
+
+        {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>
+
+                              <Stepper
+                                min={1}
+                                max={99}
+                                v-model={goods.quantity}
+                                disableInput
+                              />
+                            </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>
+                ))
+              )}
+            </div>
+            {studentRegisterStore.getGoods &&
+              studentRegisterStore.getGoods.length > 0 && (
+                <Button
+                  class={styles.addButton}
+                  block
+                  onClick={() => {
+                    router.push('/goods-list');
+                  }}>
+                  <Icon name="add-o" />
+                  进入商城选购
+                </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;
+                }
+                if (!studentRegisterStore.getToken) {
+                  forms.popupRegister = true;
+                } else {
+                  onRegisterSubmit();
+                }
+              }}>
+              <Button
+                disabled={forms.submitLoading}
+                loading={forms.submitLoading}>
+                确认购买
+              </Button>
+            </div>
+          </div>
+        </MSticky>
+
+        <Popup v-model:show={forms.popupShow} class={styles.videoPopup}>
+          {forms.popupShow && (
+            <MVideo src={'https://oss.dayaedu.com/daya/202105/SWmqmvW.mp4'} />
+          )}
+        </Popup>
+
+        <Popup
+          v-model:show={forms.popupRegister}
+          class={styles.registerPopup}
+          position="bottom"
+          round>
+          <RegisterModal
+            schoolId={forms.schoolId}
+            schoolType={forms.schoolType}
+            gradeYear={forms.gradeYear}
+            registerType={forms.registerType}
+            giftVipDay={forms.giftVipDay}
+            onClose={() => (forms.popupRegister = false)}
+            onSubmit={onRegisterSubmit}
+            onError={(val: any) => {
+              if (val.code === 5436) {
+                forms.showTips = true;
+                forms.showMessage = '二维码已经失效，详情请咨询学校老师';
+                forms.showButton = false;
+                forms.popupRegister = false;
+              } else if (val.code === 5435) {
+                forms.showTips = true;
+                forms.showMessage = val.message;
+                forms.showButton = true;
+                forms.popupRegister = false;
+              }
+            }}
+          />
+        </Popup>
+
+        {/* 已经购买过样品 */}
+        <MDialog
+          title="提示"
+          v-model:show={forms.dialogConfirmStatus}
+          message={'已购买会员，是否确认购买？'}
+          primaryColor="#FF8057"
+          allowHtml={true}
+          confirmButtonText="确定"
+          showCancelButton
+          onConfirm={async () => {
+            await paymentContinue();
+          }}
+        />
+
+        <MDialog
+          title="提示"
+          v-model:show={forms.dialogStatus}
+          message={forms.dialogMessage}
+          allowHtml={true}
+          primaryColor="#FF8057"
+          confirmButtonText="继续支付"
+          onConfirm={() => {
+            const paymentConfig = forms.dialogConfig.paymentConfig;
+            router.push({
+              path: '/order-detail',
+              query: {
+                pm: 1, // h5乐团报名
+                config: JSON.stringify(paymentConfig.paymentConfig),
+                orderNo: paymentConfig.orderNo
+              }
+            });
+            countDown.pause();
+          }}
+          onCancel={(val: any) => {
+            countDown.pause();
+          }}
+        />
+
+        {/* 是否在微信中打开 */}
+        <OWxTip
+          show={forms.showTips}
+          message={forms.showMessage}
+          showButton={forms.showButton}
+          buttonText="刷新"
+          onConfirm={() => window.location.reload()}
+        />
+      </div>
+    );
+  }
+});

src/views/student-register/index.tsx

@@ -23,11 +23,8 @@ 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 { storage } from '@/helpers/storage';
-import { ACCESS_TOKEN } from '@/store/mutation-types';
 import OWxTip from '@/components/m-wx-tip';
 import MDialog from '@/components/m-dialog';
-import { CurrentTime, useCountDown } from '@vant/use';
 
 export default defineComponent({
   name: 'student-register',
@@ -41,7 +38,6 @@ export default defineComponent({
       schoolId: route.query.sId as any,
       paymentType: '', // 支付类型
       popupShow: false,
-      popupRegister: false,
       details: [] as any[],
       schoolType: '', // 学校类型
       gradeYear: '', // 学制
@@ -49,62 +45,12 @@ export default defineComponent({
       registerType: '', // 报名类型
       giftVipDay: 0, // 赠送天数
       submitLoading: false,
-      dialogStatus: false,
-      dialogMessage: '',
-      dialogConfirmStatus: false,
-      countDownTime: 60 * 1000,
-      dialogConfig: {} as any,
       showMore: true,
       showTips: false,
       showButton: false,
       showMessage: '请使用微信打开'
     });
 
-    const countDown = useCountDown({
-      // 倒计时 60 秒
-      time: forms.countDownTime,
-      onChange(current: CurrentTime) {
-        forms.dialogMessage = `有待支付订单，请在${Math.ceil(
-          current.total / 1000
-        )}s后重试`;
-      },
-      onFinish() {
-        forms.dialogStatus = false;
-      }
-    });
-
-    // 查询未支付订单
-    const paymentOrderUnpaid = async () => {
-      let result = false;
-      try {
-        const { data } = await request.get('/edu-app/userPaymentOrder/unpaid');
-        // 判断是否有待支付订单
-
-        if (!data.id) return false;
-
-        // 判断是否可以取消订单
-        if (data.cancelPayment) {
-          await request.post(
-            '/edu-app/userPaymentOrder/cancelPayment/' + data.orderNo
-          );
-          return false;
-        } else {
-          forms.countDownTime = data.cancelTimes;
-          countDown.reset(Number(data.cancelTimes));
-          countDown.start();
-          forms.dialogMessage = `有待支付订单，请在${Math.ceil(
-            countDown.current.value.total / 1000
-          )}s后重试`;
-          forms.dialogStatus = true;
-          forms.dialogConfig = data;
-          result = true;
-        }
-      } catch {
-        //
-      }
-      return result;
-    };
-
     const getRegisterGoods = async () => {
       try {
         const { data } = await request.get(
@@ -172,127 +118,49 @@ export default defineComponent({
         forms.submitLoading = true;
 
         // 检测token是否失效
-        const Authorization = storage.get(ACCESS_TOKEN) || '';
-        const authInfo = await request.post('/edu-app/open/user/verification', {
-          noAuthorization: true,
-          data: { token: Authorization }
-        });
-        // 判断当前token是否失效
-        if (!authInfo.data) {
-          storage.remove(ACCESS_TOKEN);
-          studentRegisterStore.deleteToken();
-          forms.popupRegister = true;
-          return;
-        }
+        // const Authorization = storage.get(ACCESS_TOKEN) || '';
+        // const authInfo = await request.post('/edu-app/open/user/verification', {
+        //   noAuthorization: true,
+        //   data: { token: Authorization }
+        // });
+        // // 判断当前token是否失效
+        // if (!authInfo.data) {
+        //   storage.remove(ACCESS_TOKEN);
+        //   studentRegisterStore.deleteToken();
+        //   forms.popupRegister = true;
+        //   return;
+        // }
 
-        // 请求是否有待支付订单，如果有则自动关闭
-        const status = await paymentOrderUnpaid();
-        if (status) return;
-        const schoolInfo = await request.get(
-          '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
-        );
-        const vipList = studentRegisterStore.getVip;
+        // // 请求是否有待支付订单，如果有则自动关闭
+        // const status = await paymentOrderUnpaid();
+        // if (status) return;
+        // const schoolInfo = await request.get(
+        //   '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
+        // );
+        // const vipList = studentRegisterStore.getVip;
 
-        if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
-          // setTimeout(() => {
-          //   showToast('您已购买乐器AI学练工具，请勿重复购买');
-          // }, 100);
-          forms.dialogConfirmStatus = true;
-          return;
-        }
-        await paymentContinue();
+        // if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
+        //   // setTimeout(() => {
+        //   //   showToast('您已购买乐器AI学练工具，请勿重复购买');
+        //   // }, 100);
+        //   forms.dialogConfirmStatus = true;
+        //   return;
+        // }
+        // await paymentContinue();
+
+        router.push({
+          path: '/student-register-form',
+          query: {
+            schoolId: forms.schoolId
+          }
+        });
       } finally {
         forms.submitLoading = false;
       }
     };
 
-    const paymentContinue = async () => {
-      try {
-        const vipList = studentRegisterStore.getVip;
-        const goodsList = studentRegisterStore.getGoods;
-        const params: any[] = [];
-        vipList.forEach((vip: any) => {
-          params.push({
-            giftVipDay: vip.membershipDays,
-            goodsId: vip.goodsId,
-            goodsNum: 1,
-            goodsType: vip.goodsType,
-            paymentCashAmount: vip.currentPrice, // 现金支付金额
-            paymentCouponAmount: 0 // 优惠券金额
-          });
-        });
-
-        goodsList.forEach((goods: any) => {
-          params.push({
-            goodsId: goods.productId,
-            goodsNum: goods.quantity,
-            goodsType: 'INSTRUMENTS',
-            paymentCashAmount: goods.price, // 现金支付金额
-            paymentCouponAmount: 0, // 优惠券金额
-            goodsSkuId: goods.productSkuId
-          });
-        });
-        // 创建订单
-        const result = await request.post(
-          '/edu-app/userPaymentOrder/executeOrder',
-          {
-            hideLoading: false,
-            data: {
-              registerType: forms.registerType,
-              paymentType: forms.paymentType,
-              bizId: forms.schoolId, // 乐团编号
-              orderType: 'SCHOOL_REGISTER',
-              paymentCashAmount: calcPrice.value.amount || 0,
-              paymentCouponAmount: 0,
-              goodsInfos: params,
-              orderName: '学生登记',
-              orderDesc: '学生登记'
-            }
-          }
-        );
-
-        if (result.code === 5436) {
-          forms.showTips = true;
-          forms.showMessage = '二维码已经失效，详情请咨询学校老师';
-          forms.showButton = false;
-          forms.popupRegister = false;
-        } else if (result.code === 5435) {
-          forms.showTips = true;
-          forms.showMessage = result.message;
-          forms.showButton = true;
-          forms.popupRegister = false;
-        } else {
-          router.push({
-            path: '/order-detail',
-            query: {
-              pm: 1, // h5乐团报名
-              config: JSON.stringify({
-                ...result.data.paymentConfig,
-                paymentType: result.data.paymentType
-              }),
-              orderNo: result.data.orderNo
-            }
-          });
-        }
-      } catch {}
-    };
-
     onMounted(async () => {
       try {
-        // 获取支付类型
-        const { data } = await request.get(
-          '/edu-app/open/paramConfig/queryByParamName',
-          {
-            requestType: 'form',
-            params: {
-              paramName: 'payment_service_provider'
-            }
-          }
-        );
-        if (data.id) {
-          forms.paymentType = data.paramValue || '';
-        }
-
         getRegisterGoods();
       } catch {}
     });
@@ -318,8 +186,6 @@ export default defineComponent({
                     <div class={styles.section}>
                       <div class={styles.sectionContent}>
                         <h2>
-                          {/* {item.goodsName} */}
-                          {/* <Tag class={styles.brandName}>12个月</Tag> */}
                           <img
                             src={iconDateMember}
                             class={styles.iconDateMember}
@@ -538,11 +404,7 @@ export default defineComponent({
                   }, 100);
                   return;
                 }
-                if (!studentRegisterStore.getToken) {
-                  forms.popupRegister = true;
-                } else {
-                  onRegisterSubmit();
-                }
+                onRegisterSubmit();
               }}>
               <Button
                 disabled={forms.submitLoading}
@@ -559,73 +421,6 @@ export default defineComponent({
           )}
         </Popup>
 
-        <Popup
-          v-model:show={forms.popupRegister}
-          class={styles.registerPopup}
-          position="bottom"
-          round>
-          <RegisterModal
-            schoolId={forms.schoolId}
-            schoolType={forms.schoolType}
-            gradeYear={forms.gradeYear}
-            registerType={forms.registerType}
-            giftVipDay={forms.giftVipDay}
-            onClose={() => (forms.popupRegister = false)}
-            onSubmit={onRegisterSubmit}
-            onError={(val: any) => {
-              if (val.code === 5436) {
-                forms.showTips = true;
-                forms.showMessage = '二维码已经失效，详情请咨询学校老师';
-                forms.showButton = false;
-                forms.popupRegister = false;
-              } else if (val.code === 5435) {
-                forms.showTips = true;
-                forms.showMessage = val.message;
-                forms.showButton = true;
-                forms.popupRegister = false;
-              }
-            }}
-          />
-        </Popup>
-
-        {/* 已经购买过样品 */}
-        <MDialog
-          title="提示"
-          v-model:show={forms.dialogConfirmStatus}
-          message={'已购买会员，是否确认购买？'}
-          primaryColor="#FF8057"
-          allowHtml={true}
-          confirmButtonText="确定"
-          showCancelButton
-          onConfirm={async () => {
-            await paymentContinue();
-          }}
-        />
-
-        <MDialog
-          title="提示"
-          v-model:show={forms.dialogStatus}
-          message={forms.dialogMessage}
-          allowHtml={true}
-          primaryColor="#FF8057"
-          confirmButtonText="继续支付"
-          onConfirm={() => {
-            const paymentConfig = forms.dialogConfig.paymentConfig;
-            router.push({
-              path: '/order-detail',
-              query: {
-                pm: 1, // h5乐团报名
-                config: JSON.stringify(paymentConfig.paymentConfig),
-                orderNo: paymentConfig.orderNo
-              }
-            });
-            countDown.pause();
-          }}
-          onCancel={(val: any) => {
-            countDown.pause();
-          }}
-        />
-
         {/* 是否在微信中打开 */}
         <OWxTip
           show={forms.showTips}

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

@@ -0,0 +1,442 @@
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import infoTitle from '../images/info-title.png';
+import {
+  Button,
+  CountDown,
+  Field,
+  Form,
+  Picker,
+  Popup,
+  Radio,
+  RadioGroup,
+  Tag,
+  showToast
+} from 'vant';
+import MProtocol from '@/components/m-protocol';
+import MImgCode from '@/components/m-img-code';
+import { checkPhone } from '@/helpers/utils';
+import request from '@/helpers/request';
+import { useStudentRegisterStore } from '@/store/modules/student-register-store';
+import { setLoginInit, state } from '@/state';
+const studentRegisterStore = useStudentRegisterStore();
+const classList: any = [];
+for (let i = 1; i <= 40; i++) {
+  classList.push({ text: i + '班', value: i });
+}
+
+export default defineComponent({
+  name: 'register-modal',
+  props: {
+    schoolId: {
+      type: String,
+      default: ''
+    },
+    gradeYear: {
+      type: String,
+      default: ''
+    },
+    schoolType: {
+      type: String,
+      default: ''
+    },
+    giftVipDay: {
+      type: [String, Number],
+      default: ''
+    },
+    registerType: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['close', 'submit', 'error'],
+  setup(props, { emit }) {
+    const studentDetails = sessionStorage.getItem('register-student');
+    const countDownRef = ref();
+    const gradeList = ref([]);
+    const forms = reactive({
+      countDownStatus: true,
+      countDownTime: 1000 * 120, // 倒计时时间
+      modelValue: false, // 是否选中协议
+      imgCodeStatus: false,
+      gradeNumText: '',
+      currentClassText: '',
+      gradeStatus: false,
+      classStatus: false,
+      loading: false
+    });
+    const studentInfo = reactive({
+      autoRegister: true,
+      client_id: 'cooleshow-student',
+      client_secret: 'cooleshow-student',
+      extra: {
+        nickname: '',
+        currentGradeNum: '',
+        currentClass: '',
+        gender: 1,
+        registerType: props.registerType, // 报名类型
+        giftVipDay: props.giftVipDay || 0 // 赠送会员天数
+      },
+      grant_type: 'password',
+      loginType: 'SMS',
+      password: '',
+      username: ''
+    });
+
+    const onCodeSend = () => {
+      forms.countDownStatus = false;
+      nextTick(() => {
+        countDownRef.value.start();
+      });
+    };
+
+    const onSendCode = () => {
+      // 发送验证码
+      if (!checkPhone(studentInfo.username)) {
+        return showToast('请输入正确的手机号码');
+      }
+      forms.imgCodeStatus = true;
+    };
+
+    const validatePhone = computed(() => {
+      return checkPhone(studentInfo.username) ? true : false;
+    });
+
+    const onFinished = () => {
+      forms.countDownStatus = true;
+      countDownRef.value.reset();
+    };
+
+    const onSubmit = async () => {
+      try {
+        if (checkForm()) return;
+        forms.loading = true;
+        const { extra, ...res } = studentInfo;
+        const result = await request.post('/edu-app/userlogin', {
+          hideLoading: false,
+          requestType: 'form',
+          data: {
+            ...res,
+            extra: JSON.stringify({
+              ...extra,
+              schoolId: props.schoolId
+            })
+          }
+        });
+
+        if (result.code !== 200) {
+          sessionStorage.setItem(
+            'register-student',
+            JSON.stringify({
+              ...res,
+              extra: JSON.stringify({
+                ...extra,
+                schoolId: props.schoolId
+              })
+            })
+          );
+          emit('close');
+          emit('error', {
+            code: result.code,
+            message: result.message
+          });
+        } else {
+          console.log(111);
+          studentRegisterStore.setToken(
+            result.data.token_type + ' ' + result.data.access_token
+          );
+          setLoginInit();
+
+          emit('close');
+          emit('submit');
+        }
+      } catch {
+      } finally {
+        forms.loading = false;
+      }
+    };
+
+    const checkForm = () => {
+      if (!studentInfo.extra.nickname) {
+        showToast('请输入学生姓名');
+        return true;
+      } else if (!studentInfo.extra.currentGradeNum) {
+        showToast('请选择所在年级');
+        return true;
+      } else if (!studentInfo.extra.currentClass) {
+        showToast('请选择所在班级');
+        return true;
+      } else if (!checkPhone(studentInfo.username)) {
+        showToast('请输入正确的手机号码');
+        return true;
+      } else if (!studentInfo.password) {
+        showToast('请输入验证码');
+        return true;
+      }
+      return false;
+    };
+
+    const getGradeList = () => {
+      let tempList: any = [];
+      const five = [
+        { text: '一年级', value: 1 },
+        { text: '二年级', value: 2 },
+        { text: '三年级', value: 3 },
+        { text: '四年级', value: 4 },
+        { text: '五年级', value: 5 }
+      ];
+      const one = [{ text: '六年级', value: 6 }];
+      const three = [
+        { text: '七年级', value: 7 },
+        { text: '八年级', value: 8 },
+        { text: '九年级', value: 9 }
+      ];
+      if (props.gradeYear === 'FIVE_YEAR_SYSTEM') {
+        tempList.push([...five]);
+      } else if (props.gradeYear === 'SIX_YEAR_SYSTEM') {
+        tempList.push([...five, ...one]);
+      } else if (props.gradeYear === 'THREE_YEAR_SYSTEM') {
+        tempList.push([...three]);
+      } else if (props.gradeYear === 'FORE_YEAR_SYSTEM') {
+        tempList.push([...one, ...three]);
+      } else {
+        tempList.push([...five, ...one, ...three]);
+      }
+      return tempList;
+    };
+
+    onMounted(() => {
+      gradeList.value = getGradeList();
+      if (studentDetails) {
+        const studentJson = JSON.parse(studentDetails);
+        const extraJson = studentJson.extra
+          ? JSON.parse(studentJson.extra)
+          : {};
+        studentInfo.extra.nickname = extraJson.nickname;
+        studentInfo.extra.currentGradeNum = extraJson.currentGradeNum;
+        studentInfo.extra.currentClass = extraJson.currentClass;
+        studentInfo.extra.gender = extraJson.gender;
+        studentInfo.username = studentJson.username;
+
+        classList.forEach((i: any) => {
+          if (i.value === extraJson.currentClass) {
+            forms.currentClassText = i.text;
+          }
+        });
+
+        const tempGrade: any = gradeList.value[0] || [];
+        tempGrade?.forEach((i: any) => {
+          if (i.value === extraJson.currentGradeNum) {
+            forms.gradeNumText = i.text;
+          }
+        });
+
+        sessionStorage.removeItem('register-student');
+      }
+    });
+
+    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秒"
+                  />
+                )
+            }}
+          </Field>
+        </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>
+
+        {forms.imgCodeStatus ? (
+          <MImgCode
+            v-model:value={forms.imgCodeStatus}
+            phone={studentInfo.username}
+            type="REGISTER"
+            onClose={() => {
+              forms.imgCodeStatus = false;
+            }}
+            onSendCode={onCodeSend}
+          />
+        ) : null}
+
+        {/* 年级 */}
+        <Popup
+          v-model:show={forms.gradeStatus}
+          position="bottom"
+          round
+          safeAreaInsetBottom
+          lazyRender={false}
+          class={'popupBottomSearch'}>
+          <Picker
+            showToolbar
+            columns={gradeList.value as any}
+            onCancel={() => (forms.gradeStatus = false)}
+            onConfirm={(val: any) => {
+              const selectedOption = val.selectedOptions[0];
+              studentInfo.extra.currentGradeNum = selectedOption.value;
+              forms.gradeNumText = selectedOption.text;
+              forms.gradeStatus = false;
+            }}
+          />
+        </Popup>
+        {/* 班级 */}
+        <Popup
+          v-model:show={forms.classStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}>
+          <Picker
+            showToolbar
+            columns={classList}
+            onCancel={() => (forms.classStatus = false)}
+            onConfirm={(val: any) => {
+              const selectedOption = val.selectedOptions[0];
+              studentInfo.extra.currentClass = selectedOption.value;
+              forms.currentClassText = selectedOption.text;
+              forms.classStatus = false;
+            }}
+          />
+        </Popup>
+      </div>
+    );
+  }
+});

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

@@ -22,11 +22,25 @@ import {
   showToast
 } from 'vant';
 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 { checkPhone } from '@/helpers/utils';
+import { browser, checkPhone } from '@/helpers/utils';
 import request from '@/helpers/request';
 import { useStudentRegisterStore } from '@/store/modules/student-register-store';
 import { setLoginInit, state } from '@/state';
+import deepClone from '@/helpers/deep-clone';
+import { useRoute, useRouter } from 'vue-router';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+import { storage } from '@/helpers/storage';
+import OWxTip from '@/components/m-wx-tip';
+import MDialog from '@/components/m-dialog';
+import { CurrentTime, useCountDown } from '@vant/use';
+import QrcodePayment from '../qrcode-payment';
+import UserAuth from '../component/user-auth';
+import Payment from '@/views/adapay/payment';
+import { beforeSubmit } from '../order-state';
+import OPopup from '@/components/m-popup';
 const studentRegisterStore = useStudentRegisterStore();
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -35,34 +49,14 @@ for (let i = 1; i <= 40; i++) {
 
 export default defineComponent({
   name: 'register-modal',
-  props: {
-    schoolId: {
-      type: String,
-      default: ''
-    },
-    gradeYear: {
-      type: String,
-      default: ''
-    },
-    schoolType: {
-      type: String,
-      default: ''
-    },
-    giftVipDay: {
-      type: [String, Number],
-      default: ''
-    },
-    registerType: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['close', 'submit', 'error'],
-  setup(props, { emit }) {
+  setup() {
     const studentDetails = sessionStorage.getItem('register-student');
     const countDownRef = ref();
+    const route = useRoute();
+    const router = useRouter();
     const gradeList = ref([]);
     const forms = reactive({
+      schoolId: route.query.schoolId as any,
       countDownStatus: true,
       countDownTime: 1000 * 120, // 倒计时时间
       modelValue: false, // 是否选中协议
@@ -71,7 +65,34 @@ export default defineComponent({
       currentClassText: '',
       gradeStatus: false,
       classStatus: false,
-      loading: false
+      loading: false,
+      schoolType: '', // 学校类型
+      gradeYear: '', // 学制
+      bugGoods: false, // 是否购买AI
+      registerType: '', // 报名类型
+      giftVipDay: 0, // 赠送天数
+      dialogStatus: false,
+      dialogMessage: '',
+      dialogConfirmStatus: false,
+      paymentType: '', // 支付类型
+      contract_sign: false, // 是否实名认证
+      countDownTimePay: 60 * 1000,
+      dialogConfig: {} as any,
+      showMore: true,
+      showTips: false,
+      showButton: false,
+      showMessage: '请使用微信打开'
+    });
+    const state = reactive({
+      showQrcode: false,
+      qrCodeUrl: '',
+      pay_channel: '',
+      orderInfo: {} as any, // 订单信息
+      authShow: false,
+      orderNo: null as any,
+      config: {} as any,
+      paymentStatus: false,
+      orderTimer: null as any
     });
     const studentInfo = reactive({
       autoRegister: true,
@@ -82,8 +103,8 @@ export default defineComponent({
         currentGradeNum: '',
         currentClass: '',
         gender: 1,
-        registerType: props.registerType, // 报名类型
-        giftVipDay: props.giftVipDay || 0 // 赠送会员天数
+        registerType: null as any, // 报名类型
+        giftVipDay: 0 // 赠送会员天数
       },
       grant_type: 'password',
       loginType: 'SMS',
@@ -91,6 +112,19 @@ export default defineComponent({
       username: ''
     });
 
+    const countDown = useCountDown({
+      // 倒计时 60 秒
+      time: forms.countDownTimePay,
+      onChange(current: CurrentTime) {
+        forms.dialogMessage = `有待支付订单，请在${Math.ceil(
+          current.total / 1000
+        )}s后重试`;
+      },
+      onFinish() {
+        forms.dialogStatus = false;
+      }
+    });
+
     const onCodeSend = () => {
       forms.countDownStatus = false;
       nextTick(() => {
@@ -110,6 +144,10 @@ export default defineComponent({
       return checkPhone(studentInfo.username) ? true : false;
     });
 
+    const orderType = computed(() => {
+      return state.orderInfo.orderType;
+    });
+
     const onFinished = () => {
       forms.countDownStatus = true;
       countDownRef.value.reset();
@@ -121,13 +159,13 @@ export default defineComponent({
         forms.loading = true;
         const { extra, ...res } = studentInfo;
         const result = await request.post('/edu-app/userlogin', {
-          hideLoading: false,
+          // hideLoading: false,
           requestType: 'form',
           data: {
             ...res,
             extra: JSON.stringify({
               ...extra,
-              schoolId: props.schoolId
+              schoolId: forms.schoolId
             })
           }
         });
@@ -139,24 +177,33 @@ export default defineComponent({
               ...res,
               extra: JSON.stringify({
                 ...extra,
-                schoolId: props.schoolId
+                schoolId: forms.schoolId
               })
             })
           );
-          emit('close');
-          emit('error', {
-            code: result.code,
-            message: result.message
-          });
+
+          if (result.code === 5436) {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效，详情请咨询学校老师';
+            forms.showButton = false;
+          } else if (result.code === 5435) {
+            forms.showTips = true;
+            forms.showMessage = result.message;
+            forms.showButton = true;
+          }
         } else {
-          console.log(111);
           studentRegisterStore.setToken(
             result.data.token_type + ' ' + result.data.access_token
           );
           setLoginInit();
 
-          emit('close');
-          emit('submit');
+          // 获取用户信息
+          const res = await request.get('/edu-app/user/getUserInfo', {
+            requestType: 'form'
+          });
+          setLogin(res.data);
+
+          await onRegisterSubmit();
         }
       } catch {
       } finally {
@@ -199,13 +246,13 @@ export default defineComponent({
         { text: '八年级', value: 8 },
         { text: '九年级', value: 9 }
       ];
-      if (props.gradeYear === 'FIVE_YEAR_SYSTEM') {
+      if (forms.gradeYear === 'FIVE_YEAR_SYSTEM') {
         tempList.push([...five]);
-      } else if (props.gradeYear === 'SIX_YEAR_SYSTEM') {
+      } else if (forms.gradeYear === 'SIX_YEAR_SYSTEM') {
         tempList.push([...five, ...one]);
-      } else if (props.gradeYear === 'THREE_YEAR_SYSTEM') {
+      } else if (forms.gradeYear === 'THREE_YEAR_SYSTEM') {
         tempList.push([...three]);
-      } else if (props.gradeYear === 'FORE_YEAR_SYSTEM') {
+      } else if (forms.gradeYear === 'FORE_YEAR_SYSTEM') {
         tempList.push([...one, ...three]);
       } else {
         tempList.push([...five, ...one, ...three]);
@@ -213,7 +260,344 @@ export default defineComponent({
       return tempList;
     };
 
-    onMounted(() => {
+    const getRegisterGoods = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/userOrder/registerGoods/' + forms.schoolId,
+          {
+            noAuthorization: true // 是否请求接口的时候添加toekn
+          }
+        );
+        // 默认选中商品
+        // studentRegisterStore.setVip(data.details || []);
+        const details = deepClone(data.details || []);
+        if (details.length > 0) {
+          forms.giftVipDay = details[0].membershipDays;
+        }
+        forms.bugGoods = data.bugGoods;
+        forms.schoolType = data.schoolType;
+        forms.gradeYear = data.gradeYear;
+        forms.registerType = data.registerType;
+        studentInfo.extra.giftVipDay = forms.giftVipDay;
+        studentInfo.extra.registerType = forms.registerType;
+        if (browser().weixin) {
+          if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效，详情请咨询学校老师';
+            forms.showButton = false;
+          }
+        } else {
+          forms.showTips = true;
+        }
+      } catch {}
+    };
+
+    // 计算金额
+    const calcPrice = computed(() => {
+      let amount: number = 0; //现价
+      let originAmount: number = 0; // 原价
+      const vipList: any[] = studentRegisterStore.getVip;
+      vipList.forEach((vip: any) => {
+        amount += Number(vip.currentPrice);
+        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;
+      });
+      return {
+        amount,
+        originAmount
+      };
+    });
+
+    // 登记成功之后购买
+    const onRegisterSubmit = async () => {
+      try {
+        // 请求是否有待支付订单，如果有则自动关闭
+        const status = await paymentOrderUnpaid();
+        if (status) return;
+        const schoolInfo = await request.get(
+          '/edu-app/userPaymentOrder/registerStatus/' + forms.schoolId
+        );
+        const vipList = studentRegisterStore.getVip;
+
+        if (schoolInfo.data.hasBuyCourse && vipList.length > 0) {
+          forms.dialogConfirmStatus = true;
+          return;
+        }
+        await paymentContinue();
+      } catch {
+        //
+      }
+    };
+
+    // 查询未支付订单
+    const paymentOrderUnpaid = async () => {
+      let result = false;
+      try {
+        const { data } = await request.get('/edu-app/userPaymentOrder/unpaid');
+        // 判断是否有待支付订单
+
+        if (!data.id) return false;
+
+        // 判断是否可以取消订单
+        if (data.cancelPayment) {
+          await request.post(
+            '/edu-app/userPaymentOrder/cancelPayment/' + data.orderNo
+          );
+          return false;
+        } else {
+          forms.countDownTime = data.cancelTimes;
+          countDown.reset(Number(data.cancelTimes));
+          countDown.start();
+          forms.dialogMessage = `有待支付订单，请在${Math.ceil(
+            countDown.current.value.total / 1000
+          )}s后重试`;
+          forms.dialogStatus = true;
+          forms.dialogConfig = data;
+          result = true;
+        }
+      } catch {
+        //
+      }
+      return result;
+    };
+
+    const paymentContinue = async () => {
+      try {
+        const vipList = studentRegisterStore.getVip;
+        const goodsList = studentRegisterStore.getGoods;
+        const params: any[] = [];
+        vipList.forEach((vip: any) => {
+          params.push({
+            giftVipDay: vip.membershipDays,
+            goodsId: vip.goodsId,
+            goodsNum: 1,
+            goodsType: vip.goodsType,
+            paymentCashAmount: vip.currentPrice, // 现金支付金额
+            paymentCouponAmount: 0 // 优惠券金额
+          });
+        });
+
+        goodsList.forEach((goods: any) => {
+          params.push({
+            goodsId: goods.productId,
+            goodsNum: goods.quantity,
+            goodsType: 'INSTRUMENTS',
+            paymentCashAmount: goods.price, // 现金支付金额
+            paymentCouponAmount: 0, // 优惠券金额
+            goodsSkuId: goods.productSkuId
+          });
+        });
+        // 创建订单
+        const result = await request.post(
+          '/edu-app/userPaymentOrder/executeOrder',
+          {
+            // hideLoading: false,
+            data: {
+              registerType: forms.registerType,
+              paymentType: forms.paymentType,
+              bizId: forms.schoolId, // 乐团编号
+              orderType: 'SCHOOL_REGISTER',
+              paymentCashAmount: calcPrice.value.amount || 0,
+              paymentCouponAmount: 0,
+              goodsInfos: params,
+              orderName: '学生登记',
+              orderDesc: '学生登记'
+            }
+          }
+        );
+
+        if (result.code === 5436) {
+          forms.showTips = true;
+          forms.showMessage = '二维码已经失效，详情请咨询学校老师';
+          forms.showButton = false;
+        } else if (result.code === 5435) {
+          forms.showTips = true;
+          forms.showMessage = result.message;
+          forms.showButton = true;
+        } else {
+          state.config = {
+            ...result.data.paymentConfig,
+            paymentType: result.data.paymentType
+          };
+          state.orderNo = result.data.orderNo;
+
+          const users = baseState.user.data;
+          // 判断是否需要实名认证, 姓名，卡号 - 参数设置可以控制
+          if (
+            forms.contract_sign &&
+            (!users?.account.realName || !users?.account.idCardNo)
+          ) {
+            state.authShow = true;
+            return;
+          }
+          const { data } = await request.post(
+            '/edu-app/userPaymentOrder/updateReceiveAddress',
+            {
+              // hideLoading: false,
+              data: {
+                orderNo: state.orderNo,
+                orderType: 'SCHOOL_REGISTER'
+              }
+            }
+          );
+          state.pay_channel = data.paymentChannel;
+          if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
+            router.replace({
+              path: '/payment-result',
+              query: {
+                orderNo: state.orderNo
+              }
+            });
+          } else {
+            onCallback();
+          }
+        }
+      } catch (e: any) {
+        console.log(e, 'any');
+      }
+    };
+
+    /**
+     * @description 回调，判断是否有支付渠道，如果有则直接去支付
+     * @returns void
+     */
+    const onCallback = () => {
+      const pt = state.pay_channel;
+      // 判断是否有支付方式
+      if (pt) {
+        const payCode: string = beforeSubmit(state.pay_channel);
+        onConfirm({
+          payCode,
+          pay_channel: pt
+        });
+      } else {
+        if (orderType.value === 'VIP') {
+          state.paymentStatus = true;
+        } else {
+          // 直接去拉取微信支付
+          onConfirm({
+            payCode: 'payResult',
+            pay_channel: 'wx_pub'
+          });
+        }
+      }
+    };
+
+    const onConfirm = (val: any) => {
+      const config: any = state.config;
+      state.pay_channel = val.pay_channel;
+
+      const params = qs.stringify({
+        pay_channel: val.pay_channel,
+        wxAppId: config.wxAppId,
+        alipayAppId: config.alipayAppId,
+        paymentType: forms.paymentType,
+        body: config.body,
+        price: config.price,
+        orderNo: config.merOrderNo,
+        userId: config.userId
+      });
+      if (val.payCode === 'payResult') {
+        window.location.href =
+          window.location.origin + '/classroom-app/#/payResult?' + params;
+      } else {
+        state.qrCodeUrl =
+          window.location.origin + '/classroom-app/#/payDefine?' + params;
+        state.showQrcode = true;
+        state.paymentStatus = false;
+
+        setTimeout(() => {
+          getPaymentOrderStatus();
+        }, 300);
+      }
+    };
+
+    // 放弃支付时，则取消订单
+    const onBackOut = async () => {
+      try {
+        await request.post(
+          '/edu-app/userPaymentOrder/cancelPayment/' + state.orderNo
+        );
+        // router.back();
+      } catch {
+        //
+      }
+    };
+
+    // 轮询查询订单状态
+    const getPaymentOrderStatus = async () => {
+      // 循环查询订单
+      // const orderNo = state.orderNo
+      const orderTimer = setInterval(async () => {
+        // 判断是否在当前路由，如果不是则清除定时器
+        if (route.name != 'student-register-form') {
+          clearInterval(orderTimer);
+          return;
+        }
+        state.orderTimer = orderTimer;
+        try {
+          const { data } = await request.post(
+            '/edu-app/open/userOrder/paymentStatus/' + state.orderNo,
+            {
+              hideLoading: true
+            }
+          );
+
+          if (data.status !== 'WAIT_PAY' && data.status !== 'PAYING') {
+            // 默认关闭支付二维码弹窗
+            state.showQrcode = false;
+            clearInterval(state.orderTimer);
+            setTimeout(() => {
+              router.replace({
+                path: '/payment-result',
+                query: {
+                  orderNo: state.orderNo
+                }
+              });
+            }, 100);
+          }
+        } catch {
+          //
+          clearInterval(state.orderTimer);
+        }
+      }, 5000);
+    };
+    // 实名认证成功
+    const onAuthSuccess = () => {
+      //
+      state.authShow = false;
+      paymentContinue(); // 实名成功后自动支付
+    };
+
+    onMounted(async () => {
+      try {
+        // 获取支付类型
+        const { data } = await request.get(
+          '/edu-app/open/paramConfig/queryByParamNameList',
+          {
+            requestType: 'form',
+            params: {
+              paramNames: 'payment_service_provider,contract_sign'
+            }
+          }
+        );
+        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 || '';
+            }
+          });
+        }
+
+        getRegisterGoods();
+      } catch {}
       gradeList.value = getGradeList();
       if (studentDetails) {
         const studentJson = JSON.parse(studentDetails);
@@ -436,6 +820,63 @@ export default defineComponent({
             }}
           />
         </Popup>
+
+        {/* 已经购买过样品 */}
+        <MDialog
+          title="提示"
+          v-model:show={forms.dialogConfirmStatus}
+          message={'已购买会员，是否确认购买？'}
+          primaryColor="#FF8057"
+          allowHtml={true}
+          confirmButtonText="确定"
+          showCancelButton
+          onConfirm={async () => {
+            await paymentContinue();
+          }}
+        />
+
+        <Popup
+          show={state.paymentStatus}
+          closeOnClickOverlay={false}
+          position="bottom"
+          round
+          closeOnPopstate
+          safeAreaInsetBottom
+          style={{ minHeight: '30%' }}>
+          <Payment
+            paymentConfig={state.orderInfo}
+            onClose={() => (state.paymentStatus = false)}
+            onBackOut={onBackOut}
+            onConfirm={(val: any) => onConfirm(val)}
+          />
+        </Popup>
+
+        <Popup
+          v-model:show={state.showQrcode}
+          round
+          onClose={() => {
+            // 二维码关闭时清除定时器
+            clearInterval(state.orderTimer);
+          }}>
+          <QrcodePayment
+            url={state.qrCodeUrl}
+            pay_channel={state.pay_channel}
+            orderType={orderType.value}
+          />
+        </Popup>
+
+        <OPopup v-model:modelValue={state.authShow}>
+          <UserAuth onSuccess={onAuthSuccess} hideHeader={!browser().isApp} />
+        </OPopup>
+
+        {/* 是否在微信中打开 */}
+        <OWxTip
+          show={forms.showTips}
+          message={forms.showMessage}
+          showButton={forms.showButton}
+          buttonText="刷新"
+          onConfirm={() => window.location.reload()}
+        />
       </div>
     );
   }