renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 未建立商联，首次登陆页面

Browse Source
This commit is contained in:
rd
2025-09-09 14:08:54 +08:00
parent 9d150ee292
commit e62d14d2f7
12 changed files with 362 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -1,6 +1,6 @@
<template>
<a-config-provider :locale="zhCN" size="small" :theme="redTheme">
<router-view v-if="$route.path === '/login' || ['ExploreList', 'ExploreDetail'].includes($route.name)" />
<router-view v-if="$route.path === '/login' || ['ExploreList', 'ExploreDetail', 'Trial'].includes($route.name)" />
<LayoutBasic v-else />
</a-config-provider>
</template>

13
src/router/index.ts
View File

@ -32,14 +32,23 @@ export const router = createRouter({
requiresAuth: false,
requireLogin: true,
group: GROUP_MAIN_NAME,
}
},
},
{
path: '/chat/:conversationId?',
name: 'Home',
component: () => import('@/views/home/index.vue'),
meta: {
requiresAuth: false,
requiresAuth: true,
requireLogin: true,
},
},
{
path: '/trial',
name: 'Trial',
component: () => import('@/views/trial/index.vue'),
meta: {
requiresAuth: true,
requireLogin: true,
},
},

2
src/styles/components/ant-button.scss
View File

@ -1,5 +1,5 @@
.ant-btn {
border-radius: 2px !important;
border-radius: 4px !important;
border: 1px solid #d7d7d9 !important;
color: #3c4043 !important;
font-family: $font-family-regular;

4
src/styles/components/ant-input.scss
View File

@ -27,7 +27,7 @@
&.ant-input-focus,
&.ant-textarea-focus {
background-color: var(--color-bg-2) !important;
border-color: rgb(var(--primary-6)) !important;
border-color: $color-primary !important;
box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
}
&.ant-input-disabled {
@ -72,7 +72,7 @@ textarea.ant-input {
&:focus,
&-focused {
box-shadow: none !important;
border-color: rgb(var(--primary-6)) !important;
border-color: $color-primary !important;
}
.ant-input {
height: 30px;

16
src/styles/components/ant-step.scss
View File

@ -53,4 +53,20 @@
}
}
}
&.ant-steps-dot {
.ant-steps-item-process {
.ant-steps-item-tail {
&::after {
background-color: #e6e6e8 !important;
}
}
}
.ant-steps-item-finish {
.ant-steps-item-tail {
&::after {
background-color: #6d4cfe !important;
}
}
}
}
}

16
src/styles/font.scss
View File

@ -18,27 +18,27 @@
}
.font-family-regular {
font-family: $font-family-regular;
font-family: $font-family-regular !important;
}
.font-family-medium {
font-family: $font-family-medium;
font-family: $font-family-medium !important;
}
.font-family-light {
font-family: $font-family-light;
font-family: $font-family-light !important;
}
.font-family-bold {
font-family: $font-family-bold;
font-family: $font-family-bold !important;
}
.font-family-manrope-regular {
font-family: $font-family-manrope-regular;
font-family: $font-family-manrope-regular !important;
}
.font-family-manrope-medium {
font-family: $font-family-manrope-medium;
font-family: $font-family-manrope-medium !important;
}
.font-family-manrope-bold {
font-family: $font-family-manrope-bold;
font-family: $font-family-manrope-bold !important;
}
.font-family-manrope-semiBold {
font-family: $font-family-manrope-semiBold;
font-family: $font-family-manrope-semiBold !important;
}

8
src/views/login/components/login-form/index.vue
View File

@ -33,7 +33,7 @@
</div>
</template>
</Input>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
{{ errMsg }}
</p>
</FormItem>
@ -43,7 +43,7 @@
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
</Input.Password>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
{{ errMsg }}
</p>
</FormItem>
@ -263,9 +263,9 @@ const getCaptcha = async () => {
};
// 验证码验证通过后
const handleVerificationSubmit = () => {
const handleVerificationSubmit = async () => {
isVerificationVisible.value = false;
postClearRateLimiter();
await postClearRateLimiter();
getCaptcha();
};

6
src/views/login/components/register-form/index.vue
View File

@ -48,7 +48,7 @@
</div>
</template>
</Input>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
{{ errMsg }}
</p>
</FormItem>
@ -283,9 +283,9 @@ const getCaptcha = async () => {
};
// 验证码验证通过后
const handleVerificationSubmit = () => {
const handleVerificationSubmit = async () => {
isVerificationVisible.value = false;
postClearRateLimiter();
await postClearRateLimiter();
getCaptcha();
};

BIN
src/views/trial/img/icon-check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/views/trial/img/icon-info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

221
src/views/trial/index.vue Normal file
View File

@ -0,0 +1,221 @@
<template>
<Layout class="flex justify-center items-center trial-wrap">
<Layout.Header class="header-wrap">
<div class="h-full px-24px">
<div class="w-full h-full relative flex justify-between">
<div class="flex items-center cursor-pointer" @click="handleUserHome">
<img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
</div>
<RightSide />
</div>
</div>
</Layout.Header>
<Layout class="flex trial-content items-center">
<div class="w-800px">
<!-- 未建联 -->
<section class="w-full" v-if="status === 1">
<div class="rounded-16px mb-16px bg-#fff px-24px py-16px flex justify-between">
<div class="flex items-center">
<span class="cts !text-18px !lh-26px !color-#000 mr-8px">申请试用</span>
<div class="rounded-2px bg-#F0EDFF px-8px flex items-center">
<span class="cts !color-#6D4CFE">0-3个工作日</span>
</div>
</div>
</div>
<div class="rounded-16px mb-16px bg-#fff p-24px">
<p class="cts !text-16px !lh-24px !color-#000 mb-32px">基本信息</p>
<Form ref="formRef" :model="formData" :rules="formRules" layout="vertical" class="w-full form-wrap">
<FormItem name="name" label="联系人">
<Input
v-model:value="formData.name"
placeholder="请输入您的姓名"
size="large"
allowClear
class="w-500px"
/>
</FormItem>
<FormItem name="company_name" label="公司名称">
<Input
v-model:value="formData.company_name"
placeholder="请输入您的公司名称，个人用户写无"
size="large"
allowClear
class="w-500px"
/>
</FormItem>
<FormItem name="mobile" label="联系电话">
<Input
v-model:value="formData.mobile"
placeholder="请输入您的联系电话"
size="large"
allowClear
class="w-500px"
/>
</FormItem>
</Form>
</div>
<div class="rounded-16px bg-#fff px-24px py-16px">
<Button type="primary" class="mb-10px" @click="handleSubmit">免费申请</Button>
<span class="cts !font-400 !color-#737478"
>申请成功后，您可开启
<span class="color-#6D4CFE !font-500">7</span>
天免费试用，试用结束后，若满意可直接升级正式版，数据将自动保留</span
>
</div>
</section>
<!-- 建立商务联系中 -->
<section class="w-full" v-if="status === 2">
<div class="rounded-16px bg-#fff px-36px pt-80px pb-60px flex flex-col items-center">
<img :src="icon2" width="96" height="96" class="mb-8px" />
<p class="cts !text-18px !lh-26px mb-8px">您的试用申请已提交</p>
<p class="cts !font-400 !color-#737478 font-family-regular">
我们将在 1-3 个工作日内完成审核，审核结果会通过电话/短信告知您。
</p>
<p class="cts !font-400 !color-#737478 font-family-regular mb-40px">
若超过 3 个工作日未收到通知，可拨打客服电话 <span class="!color-#6D4CFE">153 5932 0192</span> 咨询
</p>
<div class="px-24px py-16px rounded-12px bg-#F2F3F5 w-full">
<p class="mb-16px cts !color-#000 !text-18px !lh-26px">进度</p>
<Steps :current="1" :items="trialingStepsItems">
<template #progressDot="{ prefixCls }">
<span :class="`${prefixCls}-icon-dot`" />
</template>
</Steps>
</div>
</div>
</section>
<!-- 试用到期 -->
<section class="w-full" v-if="status === 3">
<div class="rounded-16px bg-#fff px-36px pt-80px pb-60px flex flex-col items-center">
<img :src="icon1" width="96" height="96" class="mb-8px" />
<p class="cts !text-18px !lh-26px mb-8px">试用已到期</p>
<p class="cts !font-400 !color-#737478 font-family-regular">
您的 7 天产品试用已到期，若想继续使用，可拨打客服电话
</p>
<p class="cts !font-400 !color-#737478 font-family-regular mb-40px">
<span class="!color-#6D4CFE">153 5932 0192</span> 咨询续用事宜
</p>
<div class="px-24px py-16px rounded-12px bg-#F2F3F5 w-full">
<p class="mb-16px cts !color-#000 !text-18px !lh-26px">进度</p>
<Steps :current="2" :items="trialEndStepsItems">
<template #progressDot="{ prefixCls }">
<span :class="`${prefixCls}-icon-dot`" />
</template>
</Steps>
</div>
</div>
</section>
</div>
</Layout>
</Layout>
</template>
<script setup lang="ts">
import { Layout, Form, Button, FormItem, Input, Steps } from 'ant-design-vue';
import RightSide from '@/layouts/components/navbar/components/right-side/index.vue';
import { handleUserHome } from '@/utils/user';
import icon1 from './img/icon-info.png';
import icon2 from './img/icon-check.png';
type Status = 1 | 2 | 3;
const formRef = ref();
const submitting = ref(false);
const status = ref<Status>(1);
const formData = ref({
mobile: '',
name: '',
company_name: '',
});
const formRules = {
name: {
required: true,
trigger: ['blur'],
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请填写姓名');
} else {
return Promise.resolve();
}
},
},
company_name: {
required: true,
trigger: ['blur'],
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请填写公司名称');
} else {
return Promise.resolve();
}
},
},
mobile: {
required: true,
trigger: ['blur'],
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请填写联系电话');
} else {
return Promise.resolve();
}
},
},
};
const trialingStepsItems = computed(() => {
return [
{
title: '提交申请',
description: '2025/09/01 12:00:00',
},
{
title: '人工审核',
description: '处理中',
},
{
title: '开始试用',
description: '等待',
},
];
});
const trialEndStepsItems = computed(() => {
return [
{
title: '提交申请',
description: '2025/09/01 12:00:00',
},
{
title: '人工审核',
description: '已完成',
},
{
title: '试用到期',
description: '已完成',
},
];
});
const handleSubmit = async () => {
submitting.value = true;
formRef.value
.validate()
.then(() => {
console.log('验证通过');
})
.finally(() => {
submitting.value = false;
});
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

95
src/views/trial/style.scss Normal file
View File

@ -0,0 +1,95 @@
.trial-wrap {
background: transparent;
min-width: 1200px;
.cts {
color: #211f24;
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22px;
}
:deep(.ant-steps) {
.ant-steps-item {
margin-left: 0;
.ant-steps-item-icon {
width: 10px;
height: 10px;
}
.ant-steps-item-content {
margin-top: 8px;
.ant-steps-item-title {
color: var(--Text-1, #211f24);
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.ant-steps-item-description {
color: var(--Text-3, #737478);
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
}
&.ant-steps-item-wait {
.ant-steps-icon {
.ant-steps-icon-dot {
background: #d7d7d9;
}
}
}
&.ant-steps-item-active,
&.ant-steps-item-finish {
.ant-steps-icon {
.ant-steps-icon-dot {
background: #6d4cfe;
}
}
.ant-steps-item-content {
.ant-steps-item-title {
padding: 0;
font-family: $font-family-medium;
}
}
}
}
}
.header-wrap {
background: transparent;
height: $navbar-height;
line-height: $navbar-height;
padding-inline: inherit;
color: inherit;
width: 100%;
min-width: $layout-min-width;
:deep(.right-wrap) {
.task-icon,
.agent-entry {
display: none;
}
}
}
.trial-content {
width: 100%;
height: 100%;
background: transparent;
min-height: calc(100vh - $navbar-height);
:deep(.ant-form) {
.ant-form-item {
&:not(:last-child) {
margin-bottom: 24px !important;
}
.ant-form-item-label {
> label {
font-family: $font-family-medium;
font-weight: 500;
}
}
}
}
}
}