添加报名页面

src/router/routes-student.ts

@@ -170,16 +170,14 @@ export default [
       },
       {
         path: '/discount-card',
-        component: () =>
-          import('@/student/discount-card/index'),
+        component: () => import('@/student/discount-card/index'),
         meta: {
           title: '畅学卡'
         }
       },
       {
         path: '/double12Active',
-        component: () =>
-          import('@/student/activePage/double12Active'),
+        component: () => import('@/student/activePage/double12Active'),
         meta: {
           title: '双十二限时特惠'
         }
@@ -241,6 +239,22 @@ export default [
     }
   },
   {
+    path: '/register',
+    name: 'register',
+    component: () => import('@/student/register/index'),
+    meta: {
+      title: '酷乐秀账号注册'
+    }
+  },
+  {
+    path: '/registerDownload',
+    name: 'registerDownload',
+    component: () => import('@/student/register/download'),
+    meta: {
+      title: '下载酷乐秀APP'
+    }
+  },
+  {
     path: '/transfer',
     component: () => import('@/student/down-load/transfer'),
     meta: {

src/student/register/download.module.less

@@ -0,0 +1,65 @@
+.downloadBox {
+  position: relative;
+  min-height: 100vh;
+  background: url('./images/bg2.png') no-repeat center center;
+  background-size: cover;
+
+  .iconTop {
+    padding: 34px 48px;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.bottomBox {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+
+  img {
+    width: 100%;
+  }
+
+  .btnDownload {
+    position: absolute;
+    right: 50%;
+    bottom: 30px;
+    transform: translateX(50%);
+    background-color: #fff;
+    color: #14bc9c;
+    border: none;
+    width: 260px;
+    height: 42px;
+    background: #ffffff;
+    border-radius: 22px;
+    cursor: pointer;
+    font-size: 16px;
+
+    &:hover {
+      background-color: #fff;
+    }
+    &:active {
+      background-color: #fff;
+    }
+  }
+}
+
+
+.wxpopup {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  img {
+    width: 88%;
+    margin: 0 6%;
+  }
+}

src/student/register/download.tsx

@@ -0,0 +1,87 @@
+import { defineComponent, reactive } from 'vue'
+import styles from './download.module.less'
+import centerBg from './images/center_bg.png'
+import bottomBg from './images/bottom_bg.png'
+import wxBg from './images/wx_bg.png'
+import { Button } from 'vant'
+import request from '@/helpers/request'
+import { browser } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'student-register-download',
+  setup() {
+    const urls = reactive({
+      wxStatus: false,
+      androidUrl: ''
+    })
+    const getDownloadUrl = async () => {
+      try {
+        const { data } = await request.get(
+          '/api-student/open/appVersionInfo/queryLatestByPlatform',
+          {
+            params: {
+              platform: 'android-student',
+              status: 'history'
+            }
+          }
+        )
+        urls.androidUrl = data.downloadUrl
+      } catch {
+        //
+      }
+    }
+
+    getDownloadUrl()
+
+    // 下载按钮点击事件
+    const onDownload = () => {
+      if (!browser().weixin) {
+        urls.wxStatus = true
+        return
+      }
+      let urlIos = ''
+      let urlAndroid = ''
+      if (location.origin.indexOf('online.colexiu.com') > -1) {
+        urlIos = 'https://itunes.apple.com/cn/app/id1626971695?mt=8'
+        urlAndroid = urls.androidUrl // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
+      } else {
+        urlIos = 'https://www.pgyer.com/powy'
+        urlAndroid = urls.androidUrl // 'https://www.pgyer.com/70e7'
+      }
+
+      if (
+        browser().ios ||
+        /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
+      ) {
+        window.location.href = urlIos
+      } else {
+        window.location.href = urlAndroid
+      }
+    }
+    return () => (
+      <div class={styles.downloadBox}>
+        <div class={styles.iconTop}>
+          <img src={centerBg} />
+        </div>
+
+        <div class={styles.bottomBox}>
+          <img class={styles.bottomBg} src={bottomBg} />
+          <Button class={styles.btnDownload} onClick={onDownload}>
+            点击下载
+          </Button>
+        </div>
+
+        {urls.wxStatus && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              urls.wxStatus = false
+            }}
+          >
+            <img src={wxBg} alt="" />
+          </div>
+        )}
+      </div>
+    )
+  }
+})

src/student/register/index.module.less

@@ -0,0 +1,145 @@
+.registerBox {
+  min-height: 100vh;
+  background: url('./images/bg.png') no-repeat center center;
+  background-size: cover;
+}
+
+.iconTop {
+  display: block;
+  width: calc(100% - 56px);
+  padding: 20px 28px 5px;
+}
+.iconBird {
+  display: block;
+  width: calc(100% - 32px);
+  padding: 0 16px 15px;
+}
+
+.contentBox {
+  background: url('./images/icon-range.png') no-repeat center center;
+  background-size: contain;
+  position: relative;
+  margin: 15px 16px 0;
+  min-height: 359px;
+  overflow: hidden;
+  .title {
+    margin-top: 12px;
+    margin-left: 16px;
+    img {
+      width: 116px;
+      height: 34px;
+    }
+  }
+
+  .codeText {
+    font-size: 14px;
+    color: #14bc9c;
+  }
+
+  :global {
+    .van-cell-group {
+      padding: 19px 18px 0;
+      background-color: transparent;
+    }
+    .van-field {
+      line-height: 20px;
+      background: #f5f6f7;
+      border-radius: 20px;
+      font-size: 14px;
+      color: #131415;
+      padding: 10px 16px;
+      margin-bottom: 16px;
+
+      .van-field__button {
+        border-left: 1px solid #2dc7aa;
+        padding-left: 16px;
+      }
+      .van-count-down {
+        font-size: 14px;
+        color: #9bdfd3;
+      }
+    }
+    .van-field__control::placeholder {
+      color: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .phoneField {
+    margin-bottom: 12px;
+  }
+
+  .tips {
+    margin-left: 5px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: #ff5c30;
+    line-height: 16px;
+
+    img {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+    }
+  }
+}
+
+.icon1 {
+  position: absolute;
+  top: -4px;
+  right: 22px;
+  width: 59px;
+  height: 60px;
+}
+
+.protocol {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  padding: 0 0 20px;
+  text-align: center;
+  color: #aaa;
+  margin-left: 24px;
+
+  .protocolText {
+    color: var(--van-primary);
+    line-height: 15px;
+  }
+
+  :global {
+    .van-checkbox__icon {
+      font-size: 15px;
+      display: flex !important;
+      align-items: center;
+    }
+    .van-checkbox__label {
+      margin-left: 6px;
+    }
+  }
+
+  .boxStyle {
+    background: transparent !important;
+    width: 15px !important;
+    height: 15px !important;
+    border: transparent !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+}
+
+.btnBox {
+  padding: 0 18px;
+
+  :global {
+    .van-button {
+      background: #2dc7aa;
+      border-radius: 22px;
+      font-weight: 600;
+      font-size: 16px;
+      color: #eef8fe;
+      border: none;
+    }
+  }
+}

src/student/register/index.tsx

@@ -0,0 +1,231 @@
+import { defineComponent, reactive, ref } from 'vue'
+import styles from './index.module.less'
+import iconTop from './images/icon-top.png'
+import iconBird from './images/icon-bird.png'
+import iconTitle from './images/icon-title.png'
+import icon1 from './images/icon-1.png'
+import ImgCode from '@/components/col-img-code'
+import activeButtonIcon from '@common/images/icon_checkbox.png'
+import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
+import iconTips from './images/icon-tips.png'
+import {
+  Button,
+  CellGroup,
+  Checkbox,
+  CountDown,
+  Field,
+  Icon,
+  Toast
+} from 'vant'
+import { checkPhone } from '@/helpers/utils'
+import { useRoute, useRouter } from 'vue-router'
+import request from '@/helpers/request'
+
+// 用户注册
+export default defineComponent({
+  name: 'student-register',
+  setup() {
+    const router = useRouter()
+    const route = useRoute()
+    const forms = reactive({
+      username: null,
+      phone: null as any,
+      smsCode: null
+    })
+    const checked = ref(false) // 是否同意协议
+
+    const imgCodeStatus = ref(false) // 是否显示图片验证码
+
+    const countDownTime = ref(1000 * 60) // 倒计时时间，单位毫秒
+    const countDownStatus = ref(true)
+
+    const countDownRef = ref<any>(null)
+
+    const onSendCode = async () => {
+      // 发送验证码
+      if (!checkPhone(forms.phone)) {
+        return Toast('请输入正确的手机号码')
+      }
+      imgCodeStatus.value = true
+    }
+    const onCodeSend = () => {
+      countDownStatus.value = false
+      countDownRef.value?.start()
+    }
+    const onFinished = () => {
+      countDownStatus.value = true
+      countDownRef.value?.reset()
+    }
+
+    // 跳转协议
+    const onPreviewProtocol = (type: string) => {
+      if (type === 'user') {
+        router.push({
+          path: '/registerProtocol',
+          query: {
+            showHeader: 1
+          }
+        })
+      } else if (type === 'privacy') {
+        router.push({
+          path: '/privacyProtocol',
+          query: {
+            showHeader: 1
+          }
+        })
+      }
+    }
+
+    // 提交
+    const onSubmit = async () => {
+      try {
+        if (!forms.username) {
+          return Toast('请输入您的姓名')
+        }
+
+        if (!checkPhone(forms.phone)) {
+          return Toast('请输入正确的手机号码')
+        }
+
+        if (!forms.smsCode) {
+          return Toast('请输入验证码')
+        }
+
+        if (!checked.value) {
+          return Toast('请同意用户注册协议和隐私政策')
+        }
+        // 提交注册信息
+        await request.post('/api-auth/smsLogin', {
+          requestType: 'form',
+          data: {
+            clientId: 'student',
+            clientSecret: 'student',
+            phone: forms.phone,
+            smsCode: forms.smsCode,
+            username: forms.username,
+            inviteUserId: route.query.inviteUserId || null
+          }
+        })
+
+        // 登录成功后，跳转到注册页
+        router.push('/registerDownload')
+      } catch {
+        //
+      }
+    }
+    return () => (
+      <div class={styles.registerBox}>
+        <img class={styles.iconTop} src={iconTop} />
+        <img class={styles.iconBird} src={iconBird} />
+
+        <div class={styles.contentBox}>
+          <img class={styles.icon1} src={icon1} />
+          <div class={styles.title}>
+            <img src={iconTitle} />
+          </div>
+
+          <CellGroup border={false}>
+            <Field
+              border={false}
+              v-model={forms.username}
+              name="姓名"
+              placeholder="请输入您的姓名"
+              type="tel"
+              maxlength={11}
+            />
+            <Field
+              border={false}
+              v-model={forms.phone}
+              type="tel"
+              maxlength={11}
+              name="手机号码"
+              placeholder="请输入手机号码"
+              class={styles.phoneField}
+            />
+
+            <div class={styles.tips}>
+              <img src={iconTips} />
+              <span>该手机号码即为酷乐秀APP登录账号</span>
+            </div>
+
+            <Field
+              border={false}
+              v-model={forms.smsCode}
+              name="验证码"
+              placeholder="请输入验证码"
+              type="tel"
+              maxlength={6}
+              // @ts-ignore
+              vSlots={{
+                button: () =>
+                  countDownStatus.value ? (
+                    <span class={styles.codeText} onClick={onSendCode}>
+                      获取验证码
+                    </span>
+                  ) : (
+                    <CountDown
+                      ref={countDownRef.value}
+                      auto-start={false}
+                      time={countDownTime.value}
+                      onFinish={onFinished}
+                      format="sss后重试"
+                    />
+                  )
+              }}
+            />
+          </CellGroup>
+          <div class={styles.protocol}>
+            <Checkbox
+              v-model={checked.value}
+              v-slots={{
+                icon: (props: any) => (
+                  <Icon
+                    class={styles.boxStyle}
+                    name={props.checked ? activeButtonIcon : inactiveButtonIcon}
+                    size="15"
+                  />
+                )
+              }}
+            >
+              我已阅读并同意
+            </Checkbox>
+            <span
+              class={styles.protocolText}
+              onClick={() => {
+                onPreviewProtocol('user')
+              }}
+            >
+              《用户注册协议》
+            </span>
+            和
+            <span
+              class={styles.protocolText}
+              onClick={() => {
+                onPreviewProtocol('privacy')
+              }}
+            >
+              《隐私政策》
+            </span>
+          </div>
+          <div class={styles.btnBox}>
+            <Button round block type="primary" onClick={onSubmit}>
+              立即登录
+            </Button>
+          </div>
+        </div>
+
+        {imgCodeStatus.value ? (
+          <ImgCode
+            v-model:value={imgCodeStatus.value}
+            phone={forms.phone}
+            registerType="REGISTER"
+            onClose={() => {
+              imgCodeStatus.value = false
+            }}
+            onSendCode={onCodeSend}
+          />
+        ) : null}
+      </div>
+    )
+  }
+})

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.colexiu.com/'
-const proxyUrl = 'https://dev.colexiu.com/'
+const proxyUrl = 'https://test.colexiu.com/'
 // const proxyUrl = 'http://192.168.3.14:8000/'
 export default defineConfig({
   base: './',