添加页面

src/router/routes-teacher.ts

@@ -141,6 +141,14 @@ export default [
         meta: {
           title: '账户充值'
         }
+      },
+      {
+        path: '/myStudent',
+        name: 'myStudent',
+        component: () => import('@/teacher/piano-room/my-student'),
+        meta: {
+          title: '我的学员'
+        }
       }
     ]
   },

src/teacher/piano-room/account-recharge-timer/index.module.less

@@ -1,81 +1,96 @@
+.lastMin {
+  display: flex;
+  align-items: center;
+  margin: 10px 14px 0;
+  padding: 13px 14px;
+  background: linear-gradient(360deg, #ffc390 0%, #ffeccd 100%);
+  border-radius: 8px;
+  // opacity: 0.76;
+  font-size: 16px;
+  color: #814014;
+  line-height: 22px;
+  span {
+    font-weight: 600;
+  }
+  img {
+    width: 24px;
+    height: 22px;
+    margin-right: 8px;
+  }
+}
+
 .memberItem {
-  padding-top: 20px;
   margin: 0 14px;
-  .title {
+  .rTitle {
+    padding: 14px 0;
+    display: flex;
+    align-items: center;
     font-size: 16px;
-    color: #333333;
+    color: #333;
     font-weight: 500;
-    span {
-      color: #f7b500;
+    &::before {
+      margin-right: 8px;
+      content: ' ';
+      display: inline-block;
+      width: 4px;
+      height: 17px;
+      background: linear-gradient(180deg, #59e5d5 0%, #2dc7aa 100%);
+      border-radius: 3px;
     }
   }
 }
 
-.member_function {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  .function_item__content {
-    height: 100%;
-  }
-  .function_item {
-    width: 80px;
-    padding: 12px 0;
-    margin-top: 8px;
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: #faefe3;
-    text-align: center;
-  }
-  .function_text {
-    font-size: 12px;
-    color: #814014;
-    line-height: 16px;
-  }
-}
-
 .system-list {
   width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   position: relative;
   user-select: none;
   box-sizing: content-box;
-  padding-top: 10px;
   padding-bottom: 10px;
-  margin-bottom: 10px;
 }
 .system-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex: 1 0 auto;
-  width: 96px;
+  width: 169px;
   min-height: 120px;
   box-sizing: border-box;
-  background: #ffffff;
+  background: linear-gradient(
+    215deg,
+    #ffe7c4 0%,
+    rgba(250, 211, 156, 0.21) 100%
+  );
   border-radius: 12px;
-  border: 1px solid #e5e5e5;
-  margin-right: 10px;
+  border: 1px solid transparent;
+  margin-bottom: 10px;
   .title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 500;
-    color: #333333;
-    line-height: 20px;
+    color: #666666;
+    line-height: 22px;
+  }
+  .tips {
+    font-size: 12px;
+    color: #666666;
+    line-height: 17px;
   }
   .price {
+    padding-top: 10px;
+    font-size: 24px;
+    font-weight: 500;
     color: #dc9362;
-    font-size: 25px;
-    line-height: 1.5;
+    line-height: 22px;
     span {
       font-size: 16px;
     }
   }
   .originalPrice {
-    color: #937059;
+    color: #999999;
     font-size: 13px;
+    line-height: 1;
   }
 
   &.active {
@@ -86,7 +101,8 @@
     );
     border: 1px solid #b1652e;
     position: relative;
-    .title {
+    .title,
+    .tips {
       color: #814014;
     }
     .price {
@@ -112,3 +128,71 @@
     }
   }
 }
+
+.reminder {
+  margin: 0 14px;
+  // margin-bottom: calc(var(--van-button-default-line-height) + 38px);
+  margin-bottom: calc(var(--van-button-default-height) + 38px);
+  padding: 12px;
+  background: #ffffff;
+  border-radius: 10px;
+
+  .h2 {
+    display: flex;
+    // align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #1a1a1a;
+    line-height: 22px;
+    padding-bottom: 10px;
+    img {
+      width: 19px;
+      height: 19px;
+      margin-right: 7px;
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #696969;
+    line-height: 21px;
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.btnGroup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  justify-content: space-between;
+  border-top: 1px solid #f0f0f0;
+  .btn {
+    padding: 0 28px;
+    color: #fff !important;
+  }
+
+  .priceSection {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: #1a1a1a;
+    .price {
+      font-size: 18px;
+      font-weight: bold;
+      color: #ff3535;
+
+      .priceUnit {
+        font-size: 14px;
+      }
+    }
+  }
+}

src/teacher/piano-room/account-recharge-timer/index.tsx

@@ -1,7 +1,14 @@
 import ColHeader from '@/components/col-header'
+import { Button } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
 export default defineComponent({
   name: 'accountRechargeTimer',
   render() {
@@ -9,44 +16,75 @@ export default defineComponent({
       <>
         <ColHeader />
 
+        <div class={styles.lastMin}>
+          <img src={getAssetsHomeFile('icon_music_account.png')} />
+          <p>
+            琴房剩余时长<span>900</span>分钟
+          </p>
+        </div>
+
         <div class={styles.memberItem}>
-          <div class={styles.title}>
-            会员<span>VIP</span>
+          <div class={styles.rTitle}>
+            <span>选择时长</span>
           </div>
 
           <div class={styles['system-list']}>
             <div class={[styles['system-item'], styles.active]}>
-              <p class={styles.title}>月度会员</p>
+              <p class={styles.title}>900分钟琴房时长</p>
+              <p class={styles.tips}>约10节45分钟1v1课程</p>
               <p class={styles.price}>
                 <span>￥</span>199
               </p>
               <del class={styles.originalPrice}>￥199</del>
             </div>
 
-            <div class={styles['system-item']}>
-              <p class={styles.title}>月度会员</p>
-              <p class={styles.price}>
-                <span>￥</span>199
-              </p>
-              <del class={styles.originalPrice}>￥199</del>
-            </div>
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(item => (
+              <div class={[styles['system-item']]}>
+                <p class={styles.title}>900分钟琴房时长</p>
+                <p class={styles.tips}>约10节45分钟1v1课程</p>
+                <p class={styles.price}>
+                  <span>￥</span>199
+                </p>
+                <del class={styles.originalPrice}>￥199</del>
+              </div>
+            ))}
+          </div>
+        </div>
 
-            <div class={styles['system-item']}>
-              <p class={styles.title}>月度会员</p>
-              <p class={styles.price}>
-                <span>￥</span>199
-              </p>
-              <del class={styles.originalPrice}>￥199</del>
-            </div>
+        <div class={styles.reminder}>
+          <div class={styles.h2}>
+            <img src={getAssetsHomeFile('icon_tips.png')} />
+            <span>温馨提醒</span>
+          </div>
+          <p>
+            1、云酷琴房时长按课程人数扣减（含老师），以45分钟1对1课程师生2人为例，课程结束后将消耗长：2人*45分钟=90分钟；
+          </p>
+          <p>
+            2、每节线上课平台赠送10分钟免费时长，分别为课前5分钟及课后5分钟，赠送时长不计算费用；
+          </p>
+          <p>
+            3、课程消耗时长按排课人数计算，无论实际到课人数是否为排课人数，都会按照排课人数扣费；
+            4、课程结束后费用立即结算；
+          </p>
+          <p>5、琴房时长不足时，您将无法排课，请确保琴房剩 余时长充足；</p>
+          <p>6、琴房时长一经购买不予退费。</p>
+        </div>
 
-            <div class={styles['system-item']}>
-              <p class={styles.title}>月度会员</p>
-              <p class={styles.price}>
-                <span>￥</span>199
-              </p>
-              <del class={styles.originalPrice}>￥199</del>
+        <div class={styles.btnGroup}>
+          <div class={styles.priceSection}>
+            支付金额：
+            <div class={styles.price}>
+              <span class={styles.priceUnit}>￥</span>
+              <span class={styles.priceNum}>0</span>
             </div>
           </div>
+          <Button
+            color="linear-gradient(360deg, #FF0909 0%, #FF4D4D 69%, #FF7B7B 100%)"
+            round
+            class={styles.btn}
+          >
+            立即支付
+          </Button>
         </div>
       </>
     )

src/teacher/piano-room/components/student/index.module.less

@@ -0,0 +1,28 @@
+.student {
+  margin: 10px 14px;
+  border-radius: 10px;
+  width: auto;
+  .studentImg {
+    margin-right: 10px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .subject {
+    margin-right: 5px;
+    background: #fff1de;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #ff8c00;
+    line-height: 16px;
+    padding: 0px 4px;
+  }
+
+  .studentName {
+    font-size: 15px;
+    color: #1a1a1a;
+    line-height: 28px;
+  }
+}

src/teacher/piano-room/components/student/index.tsx

@@ -0,0 +1,30 @@
+import { Cell } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+import iconStudent from '@common/images/icon_student.png'
+
+export default defineComponent({
+  name: 'student',
+  render() {
+    return (
+      <Cell
+        center
+        class={styles.student}
+        v-slots={{
+          icon: () => <img src={iconStudent} class={styles.studentImg} />,
+          title: () => (
+            <div class={styles.info}>
+              <p class={styles.studentName}>学生</p>
+              <p>
+                <span class={styles.subject}>长笛</span>
+              </p>
+            </div>
+          )
+        }}
+      >
+        {this.$slots.default && this.$slots.default()}
+      </Cell>
+    )
+  }
+})

src/teacher/piano-room/index.tsx

@@ -64,6 +64,7 @@ export default defineComponent({
               title={'我的学员 19 人'}
               titleClass={styles.studentCount}
               isLink
+              to={'/myStudent'}
               border={false}
             />
             <Cell valueClass={styles.btnGroupInvite}>

src/teacher/piano-room/my-student/index.tsx

@@ -0,0 +1,16 @@
+import ColHeader from '@/components/col-header'
+import { defineComponent } from 'vue'
+import Student from '../components/student'
+
+export default defineComponent({
+  name: 'myStudent',
+  render() {
+    return (
+      <>
+        <ColHeader />
+
+        <Student />
+      </>
+    )
+  }
+})