更新

src/router/routes-student.ts

@@ -172,6 +172,13 @@ export default [
   },
   ...rootRouter,
   {
+    path: '/inviteTeacher',
+    component: () => import('@/student/invite-teacher/index'),
+    meta: {
+      title: '邀请学员'
+    }
+  },
+  {
     path: '/transfer',
     component: () => import('@/student/down-load/transfer'),
     meta: {

src/student/invite-teacher/index.module.less

@@ -0,0 +1,60 @@
+.login {
+  min-height: 100vh;
+  background: url('./images/top_bg.png') no-repeat top center,
+    url('./images/bottom_bg.png') no-repeat bottom center;
+  background-color: #fff;
+  background-size: 100%;
+
+  .loginTitle {
+    display: flex;
+    align-items: center;
+    padding-top: 100px;
+    padding-left: 20px;
+    padding-bottom: 70px;
+    color: #1a1a1a;
+
+    img {
+      width: 46px;
+      height: 46px;
+      margin-right: 10px;
+    }
+
+    p {
+      display: flex;
+      flex-direction: column;
+      font-size: 12px;
+      .txt {
+        font-size: 22px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .codeText {
+    color: var(--van-primary);
+  }
+
+  .margin34 {
+    margin: 0 34px;
+  }
+
+  .formTitle {
+    font-size: 18px;
+    color: #000;
+    font-weight: 500;
+  }
+
+  :global {
+    .van-cell-group {
+      margin-bottom: 35px;
+    }
+    .van-field {
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .van-button + .van-button {
+      margin-top: 20px;
+      color: #000 !important;
+    }
+  }
+}

src/student/invite-teacher/index.tsx

@@ -0,0 +1,131 @@
+import { defineComponent } from 'vue'
+import { CellGroup, Field, Button, CountDown, Row, Col, Toast } from 'vant'
+import { checkPhone } from '@/helpers/validate'
+import request from '@/helpers/request'
+import { setLogin, state } from '@/state'
+import { removeAuth, setAuth } from '@/helpers/utils'
+import styles from './index.module.less'
+import logo from './images/logo.png'
+
+type loginType = 'PWD' | 'SMS'
+export default defineComponent({
+  name: 'login',
+  data() {
+    return {
+      loginType: 'SMS' as loginType,
+      username: '',
+      smsCode: '',
+      countDownStatus: true, // 是否发送验证码
+      countDownTime: 1000 * 120, // 倒计时时间
+      countDownRef: null as any, // 倒计时实例
+      imgCodeStatus: false
+    }
+  },
+  computed: {
+    codeDisable() {
+      return (this as any).username ? true : false
+    }
+  },
+  mounted() {
+    removeAuth()
+    this.directNext()
+  },
+  methods: {
+    directNext() {
+      if (state.user.status === 'login' || state.user.status === 'error') {
+        const { returnUrl, isRegister, ...rest } = this.$route.query
+        this.$router.replace({
+          path: returnUrl as any,
+          query: {
+            ...rest
+          }
+        })
+      }
+    },
+    async onLogin() {
+      try {
+        let res = await request.post('/api-auth/smsLogin', {
+          requestType: 'form',
+          data: {
+            clientId: 'student',
+            clientSecret: 'student',
+            phone: this.username,
+            smsCode: this.smsCode
+          }
+        })
+
+        const { authentication } = res.data
+        setAuth(authentication.token_type + ' ' + authentication.access_token)
+
+        let userCash = await request.get('/api-student/student/queryUserInfo', {
+          initRequest: true // 初始化接口
+        })
+        setLogin(userCash.data)
+
+        this.directNext()
+      } catch {}
+    },
+    async onSendCode() {
+      // 发送验证码
+      if (!checkPhone(this.username)) {
+        return Toast('请输入正确的手机号码')
+      }
+      this.imgCodeStatus = true
+    },
+    onCodeSend() {
+      this.countDownStatus = false
+      this.countDownRef.start()
+    },
+    onFinished() {
+      this.countDownStatus = true
+      this.countDownRef.reset()
+    },
+    onChange() {
+      if (this.loginType === 'PWD') {
+        this.loginType = 'SMS'
+      } else if (this.loginType === 'SMS') {
+        this.loginType = 'PWD'
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={styles.login}>
+        <div class={styles.loginTitle}>
+          <img src={logo} alt="" />
+          <p>
+            <span class={styles.txt}>酷乐秀</span>
+            <span>你的器乐学习好帮手</span>
+          </p>
+        </div>
+        <CellGroup class={styles.margin34} border={false}>
+          <Row style={{ marginBottom: '16px' }}>
+            <Col span={24} class={styles.formTitle}>
+              手机号
+            </Col>
+            <Col span={24} class="van-hairline--bottom">
+              <Field
+                v-model={this.username}
+                name="手机号"
+                placeholder="请输入您的手机号"
+                type="tel"
+                maxlength={11}
+              />
+            </Col>
+          </Row>
+        </CellGroup>
+        <div class={styles.margin34}>
+          <Button
+            round
+            block
+            type="primary"
+            disabled={this.codeDisable}
+            onClick={this.onLogin}
+          >
+            获取短信验证码
+          </Button>
+        </div>
+      </div>
+    )
+  }
+})

src/student/layout/login.tsx

@@ -148,7 +148,7 @@ export default defineComponent({
           ) : (
             <Row>
               <Col span={24} class={styles.formTitle}>
-                密码
+                验证码
               </Col>
               <Col span={24} class="van-hairline--bottom">
                 <Field

src/teacher/layout/login.tsx

@@ -148,7 +148,7 @@ export default defineComponent({
           ) : (
             <Row>
               <Col span={24} class={styles.formTitle}>
-                密码
+                验证码
               </Col>
               <Col span={24} class="van-hairline--bottom">
                 <Field

src/teacher/piano-room/index.tsx

@@ -1,18 +1,9 @@
 import ColHeader from '@/components/col-header'
-import {
-  Row,
-  Col,
-  Button,
-  CellGroup,
-  Cell,
-  Grid,
-  GridItem,
-  Icon,
-  Popup
-} from 'vant'
+import { Row, Col, Button, CellGroup, Cell, Icon, Popup } from 'vant'
 import { defineComponent } from 'vue'
 import Course from './components/course'
 import styles from './index.module.less'
+import Share from './model/share'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -24,7 +15,7 @@ export default defineComponent({
   name: 'PianoRoom',
   data() {
     return {
-      shareStatus: false
+      shareStatus: true
     }
   },
   render() {
@@ -127,8 +118,8 @@ export default defineComponent({
 
         <Course />
 
-        <Popup show={this.shareStatus} round>
-          <div style={{ height: '500px', background: '#fff' }}></div>
+        <Popup v-model:show={this.shareStatus} round>
+          <Share />
         </Popup>
       </>
     )

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

@@ -0,0 +1,74 @@
+.shareSection {
+  width: 305px;
+  // height: 304px;
+  padding: 14px;
+  background: url('../../images/share_bg.png') center no-repeat;
+  background-size: 100%;
+
+  .img {
+    width: 54px;
+    height: 54px;
+    border-radius: 50%;
+    margin-right: 12px;
+  }
+
+  .name {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1a1a1a;
+    line-height: 18px;
+  }
+
+  .titleTips {
+    padding-top: 5px;
+    font-size: 14px;
+    color: #8a8a8a;
+    line-height: 18px;
+  }
+}
+
+.section {
+  background: #ffffff;
+  border-radius: 11px;
+  overflow: hidden;
+  padding: 14px 16px 20px;
+}
+
+.txt {
+  font-size: 16px;
+  color: #333333;
+  line-height: 1.5;
+
+  span {
+    font-size: 18px;
+    font-weight: 500;
+    color: #2dc7aa;
+  }
+}
+
+.teacherName {
+  padding-top: 20px;
+}
+
+.download {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .logo {
+    font-size: 13px;
+    color: #349784;
+    line-height: 18px;
+    img {
+      width: 93px;
+      vertical-align: middle;
+      margin-bottom: 11px;
+    }
+  }
+
+  .qrcode {
+    background: #ccc;
+    width: 76px;
+    height: 76px;
+  }
+}

src/teacher/piano-room/model/share/index.tsx

@@ -0,0 +1,44 @@
+import { Cell } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+import iconTeacher from '@/common/images/icon_teacher.png'
+import logo from '../../images/logo.png'
+
+export default defineComponent({
+  name: 'share',
+  render() {
+    return (
+      <div class={styles.shareSection}>
+        <div class={styles.section}>
+          <Cell
+            center
+            border={false}
+            style={{ padding: 0 }}
+            v-slots={{
+              icon: () => <img src={iconTeacher} class={styles.img} />,
+              title: () => (
+                <div>
+                  <p class={styles.name}>分享</p>
+                  <p class={styles.titleTips}>酷乐秀入驻老师</p>
+                </div>
+              )
+            }}
+          />
+          <p class={[styles.txt, styles.teacherName]}>
+            <span>李老师</span>邀请您加入酷乐秀
+          </p>
+          <p class={styles.txt}>来与我一起踏入音</p>
+        </div>
+
+        <div class={[styles.section, styles.download]}>
+          <div class={styles.logo}>
+            <img src={logo} />
+            <p>扫码下载酷乐秀开启教学之旅</p>
+          </div>
+          <div class={styles.qrcode}></div>
+        </div>
+      </div>
+    )
+  }
+})