Przeglądaj źródła

Merge branch 'iteration-classroom-listen' into online

lex 1 rok temu
rodzic
commit
b495f956c5

BIN
src/views/student-register/images/icon-delete-active.png


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


BIN
src/views/student-register/images/new/title-3.png


BIN
src/views/student-register/images/shop-empty.png


+ 319 - 8
src/views/student-register/index.module.less

@@ -82,7 +82,8 @@
   border: 2px solid #FFFFFF;
 
   .title1,
-  .title2 {
+  .title2,
+  .titleBuy {
     width: 285px;
     height: 22px;
     background: url('./images/new/title-1.png') no-repeat center;
@@ -91,10 +92,17 @@
   }
 
   .title2 {
+    width: 267px;
     background: url('./images/new/title-2.png') no-repeat center;
     background-size: contain;
   }
 
+  .titleBuy {
+    width: 248px;
+    background: url('./images/new/title-3.png') no-repeat center;
+    background-size: contain;
+  }
+
   .content {
     padding-top: 12px;
     padding-bottom: 10px;
@@ -189,14 +197,14 @@
       line-height: 17px;
     }
   }
+}
 
-  .tipInfo {
-    margin: 12px 9px 0;
+.tipInfo {
+  margin: 6px 10px 12px 11px;
 
-    img {
-      width: 100%;
-      height: 28px;
-    }
+  img {
+    width: 100%;
+    height: 66px;
   }
 }
 
@@ -234,4 +242,307 @@
 //       height: 100% !important
 //     }
 //   }
-// }
+// }
+
+
+.goodsSection {
+  margin-top: 12px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #FFFFFF;
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.studentInstrumentSection {
+  background: linear-gradient(180deg, rgba(202, 244, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
+}
+
+.goodsEmpty {
+  margin-top: 19px;
+  padding: 12px 9px 18px;
+  height: 106px;
+  background: #FFFFFF;
+  // box-shadow: 0px 1px 6px 0px #F0D8C8;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+
+  .shopImg {
+    flex-shrink: 0;
+    width: 100px;
+    height: 80px;
+    margin-right: 12px;
+  }
+
+  .goodsContainer {
+    h2 {
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+      font-weight: 400;
+
+      span {
+        color: #19A1FE;
+        font-weight: bold;
+      }
+    }
+
+    .tips {
+      font-size: 14px;
+      color: #BE7332;
+      line-height: 20px;
+    }
+
+    .goSelect {
+      margin-top: 5px;
+      height: 29px;
+      background-color: transparent;
+      border: 0;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #fff;
+
+      :global {
+        .van-icon {
+          margin-left: 2px;
+          font-size: 12px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+.addButton {
+  height: 40px;
+  background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+  border-radius: 8px;
+  // margin: 0 0 12px;
+  // width: calc(100% - 24px);
+  border: none;
+
+  :global {
+    .van-icon {
+      margin-right: 8px;
+      font-size: 20px;
+    }
+
+    .van-button__text {
+      font-size: 16px;
+      font-weight: 600;
+      color: #FFFFFF;
+      border: 0 solid;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.goodsCell {
+  position: relative;
+  border-radius: 12px 12px 0px 0px;
+  padding: 12px 12px 0;
+
+  .noSelected,
+  .selected,
+  .delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 28px;
+    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: 5px;
+    overflow: hidden;
+  }
+
+  h2 {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #131415;
+    line-height: 22px;
+  }
+
+  .brandName {
+    margin-left: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #19A1FE;
+    line-height: 17px;
+    height: 18px;
+    background: #F4FAFF;
+    border-radius: 4px;
+    border: 1px solid rgba(52, 173, 255, 0.55);
+  }
+
+  .iconDateMember {
+    height: 20px;
+    width: 108px;
+  }
+
+  .model {
+    margin: 4px 0 4px;
+    font-size: 13px;
+    color: #60769C;
+    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: #F0F3F6;
+    }
+
+    .van-stepper__minus,
+    .van-stepper__plus {
+      color: #83909F;
+    }
+
+    .van-stepper__input {
+      color: #131415;
+      font-weight: 600;
+    }
+
+    .van-stepper__minus {
+      border-radius: 100px 0px 0px 100px;
+    }
+
+    .van-stepper__plus {
+      border-radius: 0px 100px 100px 0px;
+    }
+  }
+}
+
+.priceCell {
+  padding: 12px 12px 10px;
+
+  .sPriceGroup {
+    display: flex;
+    align-items: center;
+    padding: 7px 16px 5px;
+    height: 34px;
+    background: linear-gradient(135deg, #FFF5E6 0%, #E3FAF8 49%, #E2F2FF 100%);
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+
+    .tg {
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+
+      span {
+        font-size: 22px;
+        font-family: DINAlternate-Bold, DINAlternate;
+        font-weight: bold;
+        color: #F22423;
+
+        i {
+          font-style: normal;
+          font-size: 14px;
+        }
+      }
+
+    }
+
+    del {
+      padding-left: 10px;
+      font-size: 14px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 0.3);
+      line-height: 16px;
+    }
+  }
+}

+ 150 - 30
src/views/student-register/index.tsx

@@ -27,6 +27,7 @@ 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';
+import shopEmpty from './images/shop-empty.png';
 import dayjs from 'dayjs';
 
 export default defineComponent({
@@ -44,7 +45,14 @@ export default defineComponent({
       details: [] as any[],
       schoolType: '', // 学校类型
       gradeYear: '', // 学制
-      bugGoods: false, // 是否购买AI
+      // bugGoods: false, // 是否购买AI
+      //       @ApiModelProperty("购买课堂乐器 新 自选乐器 SELECT_INSTRUMENT 不购买乐器 NOT_BUY_INSTRUMENT 赠送乐器 GIVE_INSTRUMENT")
+      // private EBuyGoodsType buyGoodsType;
+
+      // @ApiModelProperty("学生信息收集 REGISTER 注册收集 LOGIN 登陆收集")
+      // private EStudentInfoType studentInfoType;
+      buyGoodsType: null, // 报名乐器设置
+      studentInfoType: null, // 学生信息收集
       registerType: '', // 报名类型
       detailVip: {} as any,
       giftVipDay: 0, // 赠送天数
@@ -70,20 +78,22 @@ export default defineComponent({
           forms.detailVip = forms.details[0];
           forms.giftVipDay = forms.details[0].membershipDays;
         }
-        forms.bugGoods = data.bugGoods;
+        // forms.bugGoods = data.bugGoods;
+        forms.buyGoodsType = data.buyGoodsType;
+        forms.studentInfoType = data.studentInfoType;
         forms.schoolType = data.schoolType;
         forms.gradeYear = data.gradeYear;
         forms.registerType = data.registerType;
         if (browser().weixin) {
-          if (
-            data.schoolStatus === 0 &&
-            forms.schoolId == '1770035687490105346'
-          ) {
-            forms.showTips = true;
-            forms.showMessage = '团购时间已截止,感谢您的参与';
-            forms.showButton = false;
-            return;
-          }
+          // if (
+          //   data.schoolStatus === 0 &&
+          //   forms.schoolId == '1770035687490105346'
+          // ) {
+          //   forms.showTips = true;
+          //   forms.showMessage = '团购时间已截止,感谢您的参与';
+          //   forms.showButton = false;
+          //   return;
+          // }
           if (data.registerType !== 'BUG_GOODS' || data.schoolStatus === 0) {
             forms.showTips = true;
             forms.showMessage = '二维码已经失效,详情请咨询学校老师';
@@ -106,11 +116,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
@@ -118,14 +128,14 @@ export default defineComponent({
     });
 
     // 删除商品
-    // const onGoodsRemove = (item: any) => {
-    //   showConfirmDialog({
-    //     message: '是否删除该商品',
-    //     confirmButtonColor: '#FF8633'
-    //   }).then(() => {
-    //     studentRegisterStore.deleteGoods(item.productSkuId);
-    //   });
-    // };
+    const onGoodsRemove = (item: any) => {
+      showConfirmDialog({
+        message: '是否删除该商品',
+        confirmButtonColor: '#19A1FE'
+      }).then(() => {
+        studentRegisterStore.deleteGoods(item.productSkuId);
+      });
+    };
 
     // 登记成功之后购买
     const onRegisterSubmit = async () => {
@@ -217,11 +227,13 @@ export default defineComponent({
                 </p>
               </div>
             </div>
-
+          </div>
+          {/* 赠送乐器 */}
+          {forms.buyGoodsType === 'GIVE_INSTRUMENT' && (
             <div class={styles.tipInfo}>
               <img src={iconTip2} />
             </div>
-          </div>
+          )}
 
           {/* <div class={styles.videoGroup}>
             <MVideo
@@ -246,10 +258,117 @@ export default defineComponent({
             </div>
           )}
 
+          {forms.buyGoodsType === 'SELECT_INSTRUMENT' && (
+            <>
+              <div
+                class={[
+                  styles.studentSection,
+                  styles.studentInstrumentSection
+                ]}>
+                <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');
+                        }}>
+                        {/* 进入商城选购 */}
+                        <span>去选购</span>
+                        <Icon name="arrow" />
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  studentRegisterStore.getGoods.map((goods: any) => (
+                    <CellGroup class={styles.goodsSection} border={false}>
+                      <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>
+                  ))
+                )}
+                {studentRegisterStore.getGoods &&
+                  studentRegisterStore.getGoods.length > 0 && (
+                    <Button
+                      class={styles.addButton}
+                      block
+                      onClick={() => {
+                        router.push('/goods-list');
+                      }}>
+                      <Icon name="add-o" />
+                      添加购买
+                    </Button>
+                  )}
+              </div>
+            </>
+          )}
+
           <MSticky position="bottom">
             <div class={styles.paymentContainer}>
               <div class={styles.payemntPrice}>
-                <img src={giftTip} class={styles.giftTip} />
+                {/* 赠送乐器 */}
+                {forms.buyGoodsType === 'GIVE_INSTRUMENT' && (
+                  <img src={giftTip} class={styles.giftTip} />
+                )}
+
                 <div>
                   <span class={styles.needPrice}>
                     <i style="font-style: normal">¥ </i>
@@ -282,7 +401,8 @@ export default defineComponent({
                   round
                   disabled={forms.submitLoading}
                   loading={forms.submitLoading}>
-                  下一步
+                  {forms.studentInfoType === 'REGISTER' ? '下一步' : ''}
+                  {forms.studentInfoType === 'LOGIN' ? '确认购买' : ''}
                 </Button>
               </div>
             </div>
@@ -296,13 +416,13 @@ export default defineComponent({
         </Popup> */}
 
         {/* 是否在微信中打开 */}
-        <OWxTip
+        {/* <OWxTip
           show={forms.showTips}
           message={forms.showMessage}
           showButton={forms.showButton}
           buttonText="刷新"
           onConfirm={() => window.location.reload()}
-        />
+        /> */}
       </div>
     );
   }

+ 1 - 0
vite.config.ts

@@ -17,6 +17,7 @@ function resolve(dir: string) {
 // const proxyUrl = 'https://kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7989/';
 const proxyUrl = 'https://dev.kt.colexiu.com/';
+// const proxyUrl = 'https://test.kt.colexiu.com/';
 export default defineConfig({
   base: './',
   plugins: [