添加云琴房功能

src/router/routes-teacher.ts

@@ -125,6 +125,22 @@ export default [
         meta: {
           title: '云酷琴房'
         }
+      },
+      {
+        path: '/courseRecord',
+        name: 'courseRecord',
+        component: () => import('@/teacher/piano-room/course-record'),
+        meta: {
+          title: '课程记录'
+        }
+      },
+      {
+        path: '/accountRechargeTimer',
+        name: 'accountRechargeTimer',
+        component: () => import('@/teacher/piano-room/account-recharge-timer'),
+        meta: {
+          title: '账户充值'
+        }
       }
     ]
   },

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

@@ -0,0 +1,114 @@
+.memberItem {
+  padding-top: 20px;
+  margin: 0 14px;
+  .title {
+    font-size: 16px;
+    color: #333333;
+    font-weight: 500;
+    span {
+      color: #f7b500;
+    }
+  }
+}
+
+.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;
+  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;
+  min-height: 120px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #e5e5e5;
+  margin-right: 10px;
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 20px;
+  }
+  .price {
+    color: #dc9362;
+    font-size: 25px;
+    line-height: 1.5;
+    span {
+      font-size: 16px;
+    }
+  }
+  .originalPrice {
+    color: #937059;
+    font-size: 13px;
+  }
+
+  &.active {
+    background: linear-gradient(
+      215deg,
+      #ffe7c4 0%,
+      rgba(250, 211, 156, 0.21) 100%
+    );
+    border: 1px solid #b1652e;
+    position: relative;
+    .title {
+      color: #814014;
+    }
+    .price {
+      color: #b1652e;
+    }
+    .originalPrice {
+      color: #937059;
+    }
+    &::before {
+      content: '\e728';
+      font: 14px/1 'vant-icon';
+      color: #fff;
+      background-color: #b1652e;
+      width: 27px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      right: 0;
+      border-radius: 0 12px 0 12px;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+import ColHeader from '@/components/col-header'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'accountRechargeTimer',
+  render() {
+    return (
+      <>
+        <ColHeader />
+
+        <div class={styles.memberItem}>
+          <div class={styles.title}>
+            会员<span>VIP</span>
+          </div>
+
+          <div class={styles['system-list']}>
+            <div class={[styles['system-item'], styles.active]}>
+              <p class={styles.title}>月度会员</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>
+
+            <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['system-item']}>
+              <p class={styles.title}>月度会员</p>
+              <p class={styles.price}>
+                <span>￥</span>199
+              </p>
+              <del class={styles.originalPrice}>￥199</del>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

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

@@ -0,0 +1,93 @@
+.course {
+  margin: 10px 14px 0;
+  overflow: hidden;
+  border-radius: 10px;
+}
+.courseItem {
+  :global {
+    .van-cell__title,
+    .van-cell__value {
+      flex: 1 auto;
+    }
+  }
+}
+
+.courseTimer {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #666;
+  img {
+    margin-right: 6px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.courseNum {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #999;
+  img {
+    width: 18px;
+    height: 18px;
+  }
+
+  .munis {
+    font-size: 14px;
+    color: var(--van-primary);
+  }
+}
+
+.courseInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  :global {
+    .van-button {
+      padding: 5px 15px;
+    }
+  }
+}
+.courseImg {
+  margin-right: 12px;
+  width: 42px;
+  height: 42px;
+  background: linear-gradient(180deg, #ffbc90 0%, #ff7021 100%);
+  border-radius: 50%;
+}
+
+.courseName {
+  flex: 1 auto;
+  .name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #1a1a1a;
+    line-height: 28px;
+  }
+
+  .subject {
+    margin-right: 5px;
+    background: #fff1de;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #ff8c00;
+    line-height: 16px;
+    padding: 0px 4px;
+  }
+}
+
+.courseOperation {
+  padding-top: 15px;
+  font-size: 14px;
+  color: var(--van-primary);
+  line-height: 20px;
+  :global {
+    .van-col {
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+import { Button, Cell, CellGroup, Col, Row } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconTimer from '@/common/images/icon_timer2.png'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../images/${fileName}`
+  const modules = import.meta.globEager('../../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'course',
+  props: {
+    operation: {
+      type: Boolean,
+      default: true
+    }
+  },
+  render() {
+    return (
+      <CellGroup class={styles.course} border={false}>
+        <Cell
+          center
+          class={styles.courseItem}
+          v-slots={{
+            title: () => (
+              <div class={styles.courseTimer}>
+                <img src={iconTimer} />
+                <span>2021/09/17 14:00~14:25</span>
+              </div>
+            ),
+            value: () => (
+              <div class={styles.courseNum}>
+                <span>6人</span>
+                <img
+                  src={getAssetsHomeFile('icon_num.png')}
+                  style={{ marginRight: '14px' }}
+                />
+                {/* <img src={getAssetsHomeFile('icon_message.png')} /> */}
+
+                <span class={styles.munis}>-45分钟</span>
+              </div>
+            )
+          }}
+        />
+        <Cell>
+          <div class={styles.courseInfo}>
+            <div class={styles.courseImg}></div>
+            <div class={styles.courseName}>
+              <p class={styles.name}>单簧管第二期</p>
+              <p>
+                <span class={styles.subject}>长笛</span>
+              </p>
+            </div>
+            {/* <Button type="primary" round size="small">
+                  未开始
+                </Button> */}
+            <Button type="default" round size="small">
+              已结束
+            </Button>
+          </div>
+          {this.operation}
+          {this.operation && (
+            <Row class={styles.courseOperation}>
+              <Col span={8} class="van-hairline--right">
+                <span>学员调整</span>
+              </Col>
+              <Col span={8} class="van-hairline--right">
+                <span>时间调整</span>
+              </Col>
+              <Col span={8}>
+                <span>删除课程</span>
+              </Col>
+            </Row>
+          )}
+        </Cell>
+      </CellGroup>
+    )
+  }
+})

src/teacher/piano-room/course-record/index.module.less

@@ -0,0 +1,34 @@
+.searchList {
+  display: flex;
+  padding: 12px 16px;
+  background-color: #ffffff;
+}
+.dataItem {
+  font-size: 14px;
+  color: #333333;
+  padding-right: 24px;
+}
+
+.countTimer {
+  padding: 32px 24px 22px;
+  background-color: #ffffff;
+
+  .timer {
+    padding-left: 2px;
+    font-size: 32px;
+    font-weight: 600;
+    color: #333333;
+    padding-bottom: 10px;
+    span {
+      color: #666666;
+      font-size: 14px;
+    }
+  }
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #333333;
+    line-height: 17px;
+  }
+}

src/teacher/piano-room/course-record/index.tsx

@@ -0,0 +1,51 @@
+import ColHeader from '@/components/col-header'
+import { Col, Icon, Row } from 'vant'
+import { defineComponent } from 'vue'
+import Course from '../components/course'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'courseRecord',
+  render() {
+    return (
+      <>
+        <ColHeader />
+        <Row class={[styles.countTimer, 'van-hairline--bottom']}>
+          <Col span={9}>
+            <p class={styles.timer}>
+              900<span>分钟</span>
+            </p>
+            <p class={styles.title}>
+              <span>琴房剩余时长</span>
+            </p>
+          </Col>
+        </Row>
+        <div class={styles.searchList}>
+          <div class={styles.dataItem}>
+            2021年9月
+            <Icon
+              classPrefix="iconfont"
+              name="down"
+              size={8}
+              style={{ marginLeft: '4px' }}
+              color="#CCCCCC"
+            />
+          </div>
+
+          <div class={styles.dataItem}>
+            所有课程
+            <Icon
+              classPrefix="iconfont"
+              name="down"
+              size={8}
+              style={{ marginLeft: '4px' }}
+              color="#CCCCCC"
+            />
+          </div>
+        </div>
+
+        <Course operation={false} />
+      </>
+    )
+  }
+})

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

@@ -1,3 +1,101 @@
 .roomHeader {
-  
-}
+  background: url('./images/room_bg.png') top center no-repeat;
+  background-size: 100%;
+  overflow: hidden;
+
+  :global {
+    .van-row {
+      align-items: center;
+    }
+  }
+}
+
+.countTimer {
+  padding: 32px 24px 22px;
+
+  .timer {
+    padding-left: 2px;
+    font-size: 26px;
+    font-weight: 600;
+    color: #333333;
+    padding-bottom: 10px;
+    span {
+      color: #666666;
+      font-size: 14px;
+    }
+  }
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #333333;
+    line-height: 17px;
+    img {
+      width: 15px;
+      height: 15px;
+      margin-right: 5px;
+    }
+  }
+}
+
+.chargeTimer {
+  :global {
+    .van-button__text {
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      img {
+        margin-left: 2px;
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+}
+
+.studentList {
+  margin: 0 14px 15px;
+  background: #ffffff;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.studentCount {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333333;
+}
+
+.btnGroupInvite {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 4px;
+  :global {
+    .van-button {
+      width: 48%;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333 !important;
+      img {
+        margin-right: 8px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .van-button__text {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.searchList {
+  display: flex;
+  padding: 12px 16px;
+  background-color: #ffffff;
+}
+.dataItem {
+  font-size: 14px;
+  color: #333333;
+  padding-right: 24px;
+}

src/teacher/piano-room/index.tsx

@@ -1,15 +1,108 @@
 import ColHeader from '@/components/col-header'
+import { Row, Col, Button, CellGroup, Cell, Grid, GridItem, Icon } from 'vant'
 import { defineComponent } from 'vue'
+import Course from './components/course'
 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: 'PianoRoom',
   render() {
     return (
       <>
         <div class={styles.roomHeader}>
-          <ColHeader background="transparent" rightText="课程记录" />
+          <ColHeader
+            background="transparent"
+            rightText="课程记录"
+            onClickRight={() => {
+              this.$router.push('/courseRecord')
+            }}
+            border={false}
+          />
+          <Row class={styles.countTimer}>
+            <Col span={9}>
+              <p class={styles.timer}>
+                900<span>分钟</span>
+              </p>
+              <p class={styles.title}>
+                <img src={getAssetsHomeFile('icon_last_timer.png')} />
+                <span>琴房剩余时长</span>
+              </p>
+            </Col>
+            <Col span={9}>
+              <p class={styles.timer}>
+                900<span>分钟</span>
+              </p>
+              <p class={styles.title}>
+                <img src={getAssetsHomeFile('icon_freeze_timer.png')} />
+                <span>冻结时长</span>
+              </p>
+            </Col>
+            <Col span={6}>
+              <Button
+                type="primary"
+                round
+                size="small"
+                class={styles.chargeTimer}
+                onClick={() => {
+                  this.$router.push('/accountRechargeTimer')
+                }}
+              >
+                时长充值
+                <img src={getAssetsHomeFile('icon_arrow.png')} />
+              </Button>
+            </Col>
+          </Row>
+
+          <CellGroup class={styles.studentList} border={false}>
+            <Cell
+              title={'我的学员 19 人'}
+              titleClass={styles.studentCount}
+              isLink
+              border={false}
+            />
+            <Cell valueClass={styles.btnGroupInvite}>
+              <Button color="#E0F7F3" round block>
+                <img src={getAssetsHomeFile('icon_invite_student.png')} />
+                邀请学员
+              </Button>
+              <Button color="#E0F7F3" round block>
+                <img src={getAssetsHomeFile('icon_class_plan.png')} />
+                排课
+              </Button>
+            </Cell>
+          </CellGroup>
         </div>
+        <div class={styles.searchList}>
+          <div class={styles.dataItem}>
+            2021年9月
+            <Icon
+              classPrefix="iconfont"
+              name="down"
+              size={8}
+              style={{ marginLeft: '4px' }}
+              color="#CCCCCC"
+            />
+          </div>
+
+          <div class={styles.dataItem}>
+            所有课程
+            <Icon
+              classPrefix="iconfont"
+              name="down"
+              size={8}
+              style={{ marginLeft: '4px' }}
+              color="#CCCCCC"
+            />
+          </div>
+        </div>
+
+        <Course />
       </>
     )
   }