Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
xiongzhu
/
chatgpt-web
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

.

xiongzhu 2 lat temu
rodzic
b0a8c644cb
commit
76159ff5ed
14 zmienionych plików z 348 dodań i 395 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 2 1
      .eslintrc.cjs
  2. 1 0
      index.html
  3. 2 2
      src/api/index.ts
  4. 334 0
      src/components/common/LoginForm.vue
  5. 0 182
      src/components/common/LoginForm/index.vue
  6. 1 1
      src/components/common/index.ts
  7. 4 4
      src/router/index.ts
  8. 3 1
      src/typings/global.d.ts
  9. 0 0
      src/views/page/HomeView.vue
  10. 0 203
      src/views/page/Login1.vue
  11. 0 0
      src/views/page/LoginView.vue
  12. 0 0
      src/views/page/MineView.vue
  13. 0 0
      src/views/page/VipView.vue
  14. 1 1
      tsconfig.json

+ 2 - 1
.eslintrc.cjs
Wyświetl plik 

@@ -22,6 +22,7 @@ module.exports = {
 
         '@typescript-eslint/no-unused-vars': 'off'
 
         '@typescript-eslint/no-unused-vars': 'off'
 
     },
 
     },
 
     globals: {
 
     globals: {
 
-        Chat: 'readonly'
 
+        Chat: 'readonly',
 
+        NoCaptcha: 'readonly'
 
     }
 
     }
 
 }
 
 }

+ 1 - 0
index.html
Wyświetl plik 

@@ -8,6 +8,7 @@
 
 	<meta name="viewport"
 
 	<meta name="viewport"
 
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
 
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
 
 	<title>CHILLGPT</title>
 
 	<title>CHILLGPT</title>
 
+    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
 
 </head>
 
 </head>
 
 
 
 <body class="dark:bg-black">
 
 <body class="dark:bg-black">

+ 2 - 2
src/api/index.ts
Wyświetl plik 

@@ -77,9 +77,9 @@ export function fetchMy<T>() {
 
     })
 
     })
 
 }
 
 }
 
 
 
-export function fetchSendVerify<T>(phone: string | number) {
 
+export function fetchSendVerify<T>(data: { phone: string | number; token: string; sig: string; sessionId: string }) {
 
     return post<T>({
 
     return post<T>({
 
         url: '/sms/sendVerify',
 
         url: '/sms/sendVerify',
 
-        data: { phone }
 
+        data
 
     })
 
     })
 
 }
 
 }

+ 334 - 0
src/components/common/LoginForm.vue
Wyświetl plik 

@@ -0,0 +1,334 @@
 
+<template>
 
+    <NConfigProvider :theme-overrides="themeOverrides">
 
+        <n-form ref="loginForm" :model="form" :rules="rules" :show-label="false">
 
+            <n-form-item ref="phoneRef" path="phone" label="">
 
+                <n-input v-model:value="form.phone" placeholder="请输入手机号" :allow-input="onlyAllowNumber">
 
+                    <template #prefix>
 
+                        <n-icon size="24" class="input-icon mr-3">
 
+                            <user />
 
+                        </n-icon>
 
+                    </template>
 
+                </n-input>
 
+            </n-form-item>
 
+            <n-form-item path="code" label="" class="w-100">
 
+                <div class="flex flex-1">
 
+                    <n-input
 
+                        class="flex-1"
 
+                        v-model:value="form.code"
 
+                        placeholder="请输入验证码"
 
+                        :allow-input="onlyAllowNumber"
 
+                    >
 
+                        <template #prefix>
 
+                            <n-icon size="24" class="input-icon mr-3">
 
+                                <Lock />
 
+                            </n-icon>
 
+                        </template>
 
+                    </n-input>
 
+                    <div class="ml-3">
 
+                        <n-button
 
+                            style="width: 100px"
 
+                            :disabled="countDown > 0"
 
+                            type="primary"
 
+                            secondary
 
+                            @click="verifyCaptcha"
 
+                            :loading="sending"
 
+                        >
 
+                            {{ sending ? '' : countDown > 0 ? `${countDown}秒` : '发送验证码' }}
 
+                        </n-button>
 
+                    </div>
 
+                </div>
 
+            </n-form-item>
 
+            <div class="mt-3">
 
+                <n-button class="h-10" @click="submit" block type="primary" size="large" :loading="loading" circle>
 
+                    登录
 
+                </n-button>
 
+            </div>
 
+
 
+            <n-el class="agree mt-5 text-center text-xs">
 
+                <n-checkbox v-model:checked="agree">
 
+                    已阅读并同意
 
+                    <span class="prim" @click.stop="">《用户服务协议》</span>和
 
+                    <span class="prim" @click.stop="">《平台隐私协议》</span>
 
+                </n-checkbox>
 
+            </n-el>
 
+        </n-form>
 
+        <NModal v-model:show="showCpatchaModal">
 
+            <div class="w-11/12 md:w-4/5 max-w-sm">
 
+                <n-card title="请先完成滑动验证" :bordered="false" size="medium" role="dialog" aria-modal="true">
 
+                    <NEl style="min-height: 55px">
 
+                        <div id="nc"></div>
 
+                    </NEl>
 
+                </n-card>
 
+            </div>
 
+        </NModal>
 
+    </NConfigProvider>
 
+</template>
 
+<script setup lang="ts">
 
+import { ref, Ref } from 'vue'
 
+import {
 
+    NForm,
 
+    NFormItem,
 
+    NInput,
 
+    NCheckbox,
 
+    NButton,
 
+    NIcon,
 
+    useMessage,
 
+    FormInst,
 
+    NEl,
 
+    NConfigProvider,
 
+    GlobalThemeOverrides,
 
+    NModal,
 
+    NCard
 
+} from 'naive-ui'
 
+import { User, Lock } from '@vicons/tabler'
 
+import { fetchSendVerify } from '../../api'
 
+import { useStorage } from '@vueuse/core'
 
+import { useAuthStore } from '@/store'
 
+
 
+const themeOverrides: GlobalThemeOverrides = {
 
+    Input: {
 
+        heightMedium: '40px'
 
+    },
 
+    Button: {
 
+        heightMedium: '40px'
 
+    }
 
+}
 
+const emit = defineEmits(['success'])
 
+const ms = useMessage()
 
+const authStore = useAuthStore()
 
+const form = ref({
 
+    phone: '',
 
+    code: ''
 
+})
 
+const rules = {
 
+    phone: [
 
+        {
 
+            validator(rule: any, value: any) {
 
+                if (!value) {
 
+                    return new Error('请输入手机号')
 
+                } else if (!/^1[3-9]\d{9}$/.test(value)) {
 
+                    return new Error('手机号格式错误')
 
+                }
 
+
 
+                return true
 
+            },
 
+            trigger: ['submit']
 
+        }
 
+    ],
 
+    code: [
 
+        {
 
+            validator(rule: any, value: any) {
 
+                if (!value) {
 
+                    return new Error('请输入验证码')
 
+                } else if (!/^\d{4}$/.test(value)) {
 
+                    return new Error('验证码格式错误')
 
+                }
 
+
 
+                return true
 
+            },
 
+            trigger: ['submit']
 
+        }
 
+    ]
 
+}
 
+const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
 
+const countDown = ref(0)
 
+const agree = useStorage('agree', false)
 
+const loading = ref(false)
 
+const loginForm: Ref<FormInst | null> = ref(null)
 
+const showCpatchaModal = ref(false)
 
+const sending = ref(false)
 
+const cpatchaData = ref({ token: '', sessionId: '', sig: '' })
 
+
 
+function checkRule() {
 
+    if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
 
+        ms.error('请输入正确的手机号')
 
+        return false
 
+    }
 
+    if (!agree.value) {
 
+        ms.error('请先阅读并同意用户服务协议和平台隐私协议')
 
+        return false
 
+    }
 
+    return true
 
+}
 
+
 
+async function verifyCaptcha() {
 
+    if (!checkRule()) {
 
+        return
 
+    }
 
+    showCpatchaModal.value = true
 
+    setTimeout(() => {
 
+        initCaptcha()
 
+    }, 100)
 
+}
 
+
 
+async function sendVerify() {
 
+    if (!checkRule()) {
 
+        return
 
+    }
 
+    try {
 
+        sending.value = true
 
+        await fetchSendVerify({
 
+            ...cpatchaData.value,
 
+            phone: form.value.phone
 
+        })
 
+        sending.value = false
 
+        countDown.value = 60
 
+        const timer = setInterval(() => {
 
+            countDown.value--
 
+            if (countDown.value <= 0) {
 
+                clearInterval(timer)
 
+            }
 
+        }, 1000)
 
+    } catch (e: any) {
 
+        sending.value = false
 
+        ms.error(e.message)
 
+    }
 
+}
 
+
 
+async function submit() {
 
+    try {
 
+        await loginForm.value?.validate()
 
+    } catch (e: any) {
 
+        return
 
+    }
 
+    if (!checkRule()) {
 
+        return
 
+    }
 
+    try {
 
+        loading.value = true
 
+        await authStore.phoneLogin(form.value.phone, form.value.code)
 
+        emit('success')
 
+    } catch (e: any) {
 
+        ms.error(e.message)
 
+    } finally {
 
+        loading.value = false
 
+    }
 
+}
 
+
 
+function initCaptcha() {
 
+    var nc_token = ['FFFF0N0000000000A8BD', new Date().getTime(), Math.random()].join(':')
 
+    var nc = window.NoCaptcha.init({
 
+        renderTo: '#nc',
 
+        appkey: 'FFFF0N0000000000A8BD',
 
+        scene: 'nc_activity_h5',
 
+        token: nc_token,
 
+        trans: { key1: 'code200' },
 
+        elementID: ['usernameID'],
 
+        is_Opt: 0,
 
+        language: 'cn',
 
+        timeout: 10000,
 
+        retryTimes: 5,
 
+        errorTimes: 5,
 
+        inline: true,
 
+        apimap: {
 
+            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
 
+            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
 
+        },
 
+        bannerHidden: false,
 
+        initHidden: false,
 
+        callback: function (data: any) {
 
+            console.log('success', data)
 
+            cpatchaData.value = { token: nc_token, sessionId: data.csessionid, sig: data.sig }
 
+            setTimeout(() => {
 
+                showCpatchaModal.value = false
 
+            }, 300)
 
+            sendVerify()
 
+        },
 
+        error: function (s: any) {}
 
+    })
 
+    window.NoCaptcha.setEnabled(true)
 
+    nc.reset() //请务必确保这里调用一次reset()方法
 
+    window.nc = nc
 
+    window.NoCaptcha.upLang('cn', {
 
+        LOADING: '加载中...', //加载
 
+        SLIDER_LABEL: '请向右滑动进行验证', //等待滑动
 
+        CHECK_Y: '验证通过', //通过
 
+        ERROR_TITLE: '非常抱歉，这出错了...', //拦截
 
+        CHECK_N: '验证未通过', //准备唤醒二次验证
 
+        OVERLAY_INFORM: '经检测你当前操作环境存在风险，请输入验证码', //二次验证
 
+        TIPS_TITLE: '验证码错误，请重新输入' //验证码输错时的提示
 
+    })
 
+}
 
+</script>
 
+<style lang="less" scoped>
 
+.input-icon {
 
+    color: var(--n-text-color) !important;
 
+}
 
+.agree {
 
+    color: var(--text-color-3);
 
+    :deep(.n-checkbox) {
 
+        font-size: 12px;
 
+        line-height: 24px;
 
+    }
 
+    :deep(.n-checkbox__label) {
 
+        color: var(--text-color-3);
 
+    }
 
+    .prim {
 
+        color: var(--primary-color);
 
+    }
 
+}
 
+
 
+// captcha stylel
 
+@captcha-color: #b17dff;
 
+:deep(._nc) {
 
+    .stage1 {
 
+        .slider {
 
+            height: 40px !important;
 
+            border-radius: var(--border-radius) !important;
 
+            box-shadow: none !important;
 
+            background-color: rgba(255, 255, 255, 0.1) !important;
 
+            .label {
 
+                height: 40px !important;
 
+                line-height: 40px !important;
 
+                font-size: 13px !important;
 
+                background: -webkit-gradient(
 
+                    linear,
 
+                    left top,
 
+                    right top,
 
+                    color-stop(0, shade(#ffffff, 30%)),
 
+                    color-stop(0.4, shade(#ffffff, 30%)),
 
+                    color-stop(0.5, white),
 
+                    color-stop(0.6, shade(#ffffff, 30%)),
 
+                    color-stop(1, shade(#ffffff, 30%))
 
+                );
 
+                background-clip: text;
 
+            }
 
+        }
 
+        .track div {
 
+            border-radius: var(--border-radius) !important;
 
+            color: #fff !important;
 
+        }
 
+        .bg-green {
 
+            height: 40px !important;
 
+            line-height: 40px !important;
 
+            background-color: shade(@captcha-color, 40%) !important;
 
+            font-size: 13px !important;
 
+        }
 
+        .bg-red {
 
+            background-color: #78c430 !important;
 
+        }
 
+        .button {
 
+            height: 40px !important;
 
+            line-height: 40px !important;
 
+            font-size: 13px !important;
 
+            border-radius: 4px !important;
 
+            background-color: @captcha-color !important;
 
+            color: #fff !important;
 
+            .icon {
 
+                font-size: 20px;
 
+                display: flex;
 
+                align-items: center;
 
+                justify-content: center;
 
+                width: 52px !important;
 
+                height: 40px !important;
 
+                left: 0 !important;
 
+                right: 0 !important;
 
+                top: 0;
 
+                bottom: 0;
 
+                padding-top: 0;
 
+                color: var(--text-color-1) !important;
 
+            }
 
+        }
 
+    }
 
+}
 
+</style>

+ 0 - 182
src/components/common/LoginForm/index.vue
Wyświetl plik 

@@ -1,182 +0,0 @@
 
-<template>
 
-    <NConfigProvider :theme-overrides="themeOverrides">
 
-        <n-form ref="loginForm" :model="form" :rules="rules" :show-label="false">
 
-            <n-form-item ref="phoneRef" path="phone" label="">
 
-                <n-input v-model:value="form.phone" placeholder="请输入手机号" :allow-input="onlyAllowNumber">
 
-                    <template #prefix>
 
-                        <n-icon size="24" class="input-icon mr-3">
 
-                            <user />
 
-                        </n-icon>
 
-                    </template>
 
-                </n-input>
 
-            </n-form-item>
 
-            <n-form-item path="code" label="" class="w-100">
 
-                <div class="flex flex-1">
 
-                    <n-input
 
-                        class="flex-1"
 
-                        v-model:value="form.code"
 
-                        placeholder="请输入验证码"
 
-                        :allow-input="onlyAllowNumber"
 
-                    >
 
-                        <template #prefix>
 
-                            <n-icon size="24" class="input-icon mr-3">
 
-                                <Lock />
 
-                            </n-icon>
 
-                        </template>
 
-                    </n-input>
 
-                    <div class="ml-3">
 
-                        <n-button :disabled="countDown > 0" type="primary" secondary @click="sendVerify">
 
-                            {{ countDown > 0 ? `${countDown}秒后重新发送` : '发送验证码' }}
 
-                        </n-button>
 
-                    </div>
 
-                </div>
 
-            </n-form-item>
 
-            <div class="mt-3">
 
-                <n-button class="h-10" @click="submit" block type="primary" size="large" :loading="loading" circle>
 
-                    登录
 
-                </n-button>
 
-            </div>
 
-
 
-            <n-el class="agree mt-5 text-center text-xs">
 
-                <n-checkbox v-model:checked="agree">
 
-                    已阅读同意
 
-                    <span class="prim" @click.stop="">《用户服务协议》</span>和
 
-                    <span class="prim" @click.stop="">《平台隐私协》</span>
 
-                </n-checkbox>
 
-            </n-el>
 
-        </n-form>
 
-    </NConfigProvider>
 
-</template>
 
-<script setup lang="ts">
 
-import { ref, Ref } from 'vue'
 
-import {
 
-    NForm,
 
-    NFormItem,
 
-    NInput,
 
-    NCheckbox,
 
-    NButton,
 
-    NIcon,
 
-    useMessage,
 
-    FormInst,
 
-    NEl,
 
-    NConfigProvider,
 
-    GlobalThemeOverrides
 
-} from 'naive-ui'
 
-import { User, Lock } from '@vicons/tabler'
 
-import { fetchSendVerify } from '../../../api'
 
-import { useStorage } from '@vueuse/core'
 
-import { useAuthStore } from '@/store'
 
-
 
-const themeOverrides: GlobalThemeOverrides = {
 
-    Input: {
 
-        heightMedium: '40px'
 
-    },
 
-    Button: {
 
-        heightMedium: '40px'
 
-    }
 
-}
 
-const emit = defineEmits(['success'])
 
-const ms = useMessage()
 
-const authStore = useAuthStore()
 
-const form = ref({
 
-    phone: '',
 
-    code: ''
 
-})
 
-const rules = {
 
-    phone: [
 
-        {
 
-            validator(rule: any, value: any) {
 
-                if (!value) {
 
-                    return new Error('请输入手机号')
 
-                } else if (!/^1[3-9]\d{9}$/.test(value)) {
 
-                    return new Error('手机号格式错误')
 
-                }
 
-
 
-                return true
 
-            },
 
-            trigger: ['submit']
 
-        }
 
-    ],
 
-    code: [
 
-        {
 
-            validator(rule: any, value: any) {
 
-                if (!value) {
 
-                    return new Error('请输入验证码')
 
-                } else if (!/^\d{4}$/.test(value)) {
 
-                    return new Error('验证码格式错误')
 
-                }
 
-
 
-                return true
 
-            },
 
-            trigger: ['submit']
 
-        }
 
-    ]
 
-}
 
-const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
 
-const countDown = ref(0)
 
-const agree = useStorage('agree', false)
 
-const loading = ref(false)
 
-const loginForm: Ref<FormInst | null> = ref(null)
 
-
 
-async function sendVerify() {
 
-    if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
 
-        ms.error('请输入正确的手机号')
 
-        return
 
-    }
 
-    if (!agree.value) {
 
-        ms.error('请先阅读并同意用户服务协议和平台隐私协议')
 
-        return
 
-    }
 
-    try {
 
-        await fetchSendVerify(form.value.phone)
 
-        countDown.value = 60
 
-        const timer = setInterval(() => {
 
-            countDown.value--
 
-            if (countDown.value <= 0) {
 
-                clearInterval(timer)
 
-            }
 
-        }, 1000)
 
-    } catch (e: any) {
 
-        ms.error(e.message)
 
-    }
 
-}
 
-
 
-async function submit() {
 
-    try {
 
-        await loginForm.value?.validate()
 
-    } catch (e: any) {
 
-        return
 
-    }
 
-    if (!agree.value) {
 
-        ms.error('请先阅读并同意用户服务协议和平台隐私协议')
 
-        return
 
-    }
 
-    try {
 
-        loading.value = true
 
-        await authStore.phoneLogin(form.value.phone, form.value.code)
 
-        emit('success')
 
-    } catch (e: any) {
 
-        ms.error(e.message)
 
-    } finally {
 
-        loading.value = false
 
-    }
 
-}
 
-</script>
 
-<style lang="less" scoped>
 
-.input-icon {
 
-    color: var(--n-text-color) !important;
 
-}
 
-.agree {
 
-    color: var(--text-color-3);
 
-    :deep(.n-checkbox) {
 
-        font-size: 12px;
 
-        line-height: 24px;
 
-    }
 
-    :deep(.n-checkbox__label) {
 
-        color: var(--text-color-3);
 
-    }
 
-    .prim {
 
-        color: var(--primary-color);
 
-    }
 
-}
 
-</style>

+ 1 - 1
src/components/common/index.ts
Wyświetl plik 

@@ -6,6 +6,6 @@ import VipCard from './VipCard/index.vue'
 
 import Share from './Share/index.vue'
 
 import Share from './Share/index.vue'
 
 import Setting from './Setting/index.vue'
 
 import Setting from './Setting/index.vue'
 
 import PromptStore from './PromptStore/index.vue'
 
 import PromptStore from './PromptStore/index.vue'
 
-import LoginForm from './LoginForm/index.vue'
 
+import LoginForm from './LoginForm.vue'
 
 
 
 export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting, PromptStore, VipCard, Share, LoginForm }
 
 export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting, PromptStore, VipCard, Share, LoginForm }

+ 4 - 4
src/router/index.ts
Wyświetl plik 

@@ -25,19 +25,19 @@ const routes: RouteRecordRaw[] = [
 
     {
 
     {
 
         path: '/login',
 
         path: '/login',
 
         name: 'login',
 
         name: 'login',
 
-        component: () => import('@/views/page/Login.vue')
 
+        component: () => import('@/views/page/LoginView.vue')
 
     },
 
     },
 
 
 
     {
 
     {
 
         path: '/vip',
 
         path: '/vip',
 
         name: 'vip',
 
         name: 'vip',
 
-        component: () => import('@/views/page/Vip.vue')
 
+        component: () => import('@/views/page/VipView.vue')
 
     },
 
     },
 
 
 
     {
 
     {
 
         path: '/home',
 
         path: '/home',
 
         name: 'home',
 
         name: 'home',
 
-        component: () => import('@/views/page/Home.vue'),
 
+        component: () => import('@/views/page/HomeView.vue'),
 
         meta: {
 
         meta: {
 
             public: true
 
             public: true
 
         }
 
         }
 
@@ -46,7 +46,7 @@ const routes: RouteRecordRaw[] = [
 
     {
 
     {
 
         path: '/mine',
 
         path: '/mine',
 
         name: 'mine',
 
         name: 'mine',
 
-        component: () => import('@/views/page/Mine.vue')
 
+        component: () => import('@/views/page/MineView.vue')
 
     },
 
     },
 
 
 
     {
 
     {

+ 3 - 1
src/typings/global.d.ts
Wyświetl plik 

@@ -2,6 +2,8 @@ interface Window {
 
     $loadingBar?: import('naive-ui').LoadingBarProviderInst
 
     $loadingBar?: import('naive-ui').LoadingBarProviderInst
 
     $dialog?: import('naive-ui').DialogProviderInst
 
     $dialog?: import('naive-ui').DialogProviderInst
 
     $message?: import('naive-ui').MessageProviderInst
 
     $message?: import('naive-ui').MessageProviderInst
 
-    $notification?: import('naive-ui').NotificationProviderInst
 
+    $notification?: import('naive-ui').NotificationProviderInst,
 
+    NoCaptcha?: any,
 
+    nc?: any
 
 }
 
 }
 
 declare module 'resolve-url';
 
 declare module 'resolve-url';

+ 0 - 0
src/views/page/Home.vue → src/views/page/HomeView.vue
Wyświetl plik


+ 0 - 203
src/views/page/Login1.vue
Wyświetl plik 

@@ -1,203 +0,0 @@
 
-<template>
 
-    <n-el class="page">
 
-        <n-el class="back" @click="goBack">
 
-            <n-icon size="24">
 
-                <ChevronLeft />
 
-            </n-icon>
 
-        </n-el>
 
-        <n-el class="title">
 
-            <template v-if="step === 0">
 
-                <n-el class="text1">登陆ChillGPT</n-el>
 
-                <n-el class="text2">未注册手机验证后自动注册登陆</n-el>
 
-            </template>
 
-            <template v-else>
 
-                <n-el class="text1">输入验证码</n-el>
 
-                <n-el class="text2">验证码已发送到 {{ showPhone }}</n-el>
 
-            </template>
 
-        </n-el>
 
-
 
-        <n-form class="login-form" ref="formRef" :model="loginForm" :show-label="false">
 
-            <n-form-item path="phone" label="" :rule="phoneRule">
 
-                <n-input
 
-                    placeholder="请输入手机号"
 
-                    :allow-input="onlyAllowNumber"
 
-                    v-model:value="loginForm.phone"
 
-                    clearable
 
-                    :disabled="loading"
 
-                />
 
-            </n-form-item>
 
-            <n-form-item path="code" label="" :rule="codeRule">
 
-                <n-input
 
-                    placeholder="请输入验证码"
 
-                    :allow-input="onlyAllowNumber"
 
-                    v-model:value="loginForm.code"
 
-                    maxlength="4"
 
-                    clearable
 
-                    :disabled="loading"
 
-                />
 
-            </n-form-item>
 
-            <n-form-item class="submit">
 
-                <n-button
 
-                    block
 
-                    type="primary"
 
-                    size="large"
 
-                    :loading="loading"
 
-                    circle
 
-                    @click="step === 0 ? send() : submit()"
 
-                >
 
-                    {{ step === 0 ? '获取验证码' : '立即登录' }}
 
-                </n-button>
 
-            </n-form-item>
 
-
 
-            <n-form-item class="check" v-if="step === 0">
 
-                <n-checkbox v-model:checked="agree">
 
-                    已阅读同意
 
-                    <span class="prim" @click.stop="">《用户服务协议》</span>和
 
-                    <span class="prim" @click.stop=""> 《平台隐私协》 </span>
 
-                </n-checkbox>
 
-            </n-form-item>
 
-        </n-form>
 
-    </n-el>
 
-</template>
 
-
 
-<script setup lang="ts">
 
-import { ref, computed } from 'vue'
 
-import { NForm, NFormItem, NInput, NButton, NCheckbox, useMessage, NIcon, NEl, FormItemRule } from 'naive-ui'
 
-import { fetchSendVerify } from '@/api'
 
-import { useUserStore, useAuthStore } from '@/store'
 
-import { useRouter } from 'vue-router'
 
-import { ChevronLeft } from '@vicons/tabler'
 
-
 
-const router = useRouter()
 
-const authStore = useAuthStore()
 
-
 
-const loginForm = ref({
 
-    phone: '',
 
-    code: ''
 
-})
 
-const step = ref(1)
 
-const agree = ref(false)
 
-const message = useMessage()
 
-const formRef: any = ref(null)
 
-const loading = ref(false)
 
-const phoneRule: FormItemRule = {
 
-    type: 'regexp',
 
-    pattern: /^1[3-9]\d{9}$/,
 
-    message: '请输入正确的手机号',
 
-    trigger: 'submit'
 
-}
 
-const codeRule: FormItemRule = {
 
-    type: 'regexp',
 
-    pattern: /^\d{4}$/,
 
-    message: '请输入正确的验证码',
 
-    trigger: 'submit'
 
-}
 
-const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
 
-async function send() {
 
-    if (!agree.value) {
 
-        message.error('请先阅读并同意协议')
 
-        return
 
-    }
 
-    try {
 
-        await formRef.value.validate().catch((e: any) => {
 
-            throw 'validate error'
 
-        })
 
-        loading.value = true
 
-        await fetchSendVerify(loginForm.value.phone)
 
-        loading.value = false
 
-        step.value = 1
 
-    } catch (e: any) {
 
-        loading.value = false
 
-        if (e === 'validate error') return
 
-        message.error(e.message)
 
-    }
 
-}
 
-
 
-const showPhone = computed(() => {
 
-    return loginForm.value.phone.substr(0, 3) + '****' + loginForm.value.phone.substr(-4)
 
-})
 
-
 
-const codeStr = computed(() => {
 
-    let str = ''
 
-    for (let i = 0; i < 4; i++) {
 
-        str += '<span>' + (loginForm.value.code.length > i ? loginForm.value.code[i] : '') + '</span>'
 
-    }
 
-    return str
 
-})
 
-
 
-async function submit() {
 
-    try {
 
-        loading.value = true
 
-        await authStore.phoneLogin(loginForm.value.phone, loginForm.value.code)
 
-        message.success('登录成功')
 
-        router.replace({ name: 'Chat' })
 
-    } catch (e: any) {
 
-        console.log(e)
 
-        loading.value = false
 
-        message.error(e.message)
 
-    }
 
-}
 
-function goBack() {
 
-    if (step.value === 1) {
 
-        step.value = 0
 
-    } else {
 
-        router.back()
 
-    }
 
-}
 
-</script>
 
-
 
-<style lang="less" scoped>
 
-.page {
 
-    padding: 80px 48px;
 
-}
 
-.title {
 
-    .text1 {
 
-        font-size: 24px;
 
-        font-weight: bold;
 
-        line-height: 30px;
 
-        color: var(--text-color-1);
 
-    }
 
-
 
-    .text2 {
 
-        font-size: 12px;
 
-        line-height: 24px;
 
-        margin-top: 8px;
 
-        color: var(--text-color-3);
 
-    }
 
-}
 
-
 
-.back {
 
-    font-size: 0;
 
-    position: fixed;
 
-    top: 0;
 
-    left: 0;
 
-    padding: 12px 20px;
 
-    color: var(--text-color-1);
 
-}
 
-
 
-.login-form {
 
-    padding: 38px 0;
 
-}
 
-
 
-.submit {
 
-}
 
-
 
-:deep(.n-checkbox) {
 
-    --n-font-size: 12px !important;
 
-    --n-text-color: var(--text-color-3) !important;
 
-    .n-checkbox-box {
 
-        --n-size: 16px;
 
-        --n-border-radius: 100px;
 
-        --n-border: 1px solid var(--text-color-3);
 
-        --n-check-mark-color: var(--text-color-1);
 
-    }
 
-
 
-    .prim {
 
-        color: var(--primary-color);
 
-    }
 
-}
 
-
 
-.check {
 
-    padding: 25px 0;
 
-}
 
-</style>

+ 0 - 0
src/views/page/Login.vue → src/views/page/LoginView.vue
Wyświetl plik


+ 0 - 0
src/views/page/Mine.vue → src/views/page/MineView.vue
Wyświetl plik


+ 0 - 0
src/views/page/Vip.vue → src/views/page/VipView.vue
Wyświetl plik


+ 1 - 1
tsconfig.json
Wyświetl plik 

@@ -19,7 +19,7 @@
 
         },
 
         },
 
         "types": ["vite/client", "node", "naive-ui/volar"],
 
         "types": ["vite/client", "node", "naive-ui/volar"],
 
         "typeRoots": ["./node_modules/@types", "./src/typings"],
 
         "typeRoots": ["./node_modules/@types", "./src/typings"],
 
-        "allowJs": false,
 
+        "allowJs": false
 
     },
 
     },
 
     "exclude": ["node_modules", "dist", "service"]
 
     "exclude": ["node_modules", "dist", "service"]
 
 }
 
 }