253 lines
8.3 KiB
Vue
253 lines
8.3 KiB
Vue
<template>
|
||
<Layout class="flex justify-center items-center trial-wrap">
|
||
<Layout.Header class="header-wrap cursor-pointer" @click="onLogoClick">
|
||
<div class="h-full px-24px">
|
||
<div class="w-full h-full relative flex justify-between">
|
||
<div class="flex items-center">
|
||
<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="!primary_enterprise">
|
||
<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="contact" label="联系人">
|
||
<Input
|
||
v-model:value="formData.contact"
|
||
placeholder="请输入您的姓名"
|
||
size="large"
|
||
allowClear
|
||
class="w-500px"
|
||
/>
|
||
</FormItem>
|
||
<FormItem name="name" label="公司名称">
|
||
<Input
|
||
v-model:value="formData.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="enterpriseStore.enterpriseInfo?.audit_status === 1">
|
||
<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="enterpriseStore.enterpriseInfo?.subscribe_status === 4">
|
||
<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 { Button, Form, FormItem, Input, Layout, Steps } from 'ant-design-vue';
|
||
import RightSide from '@/layouts/components/navbar/components/right-side/index.vue';
|
||
|
||
import { useRouter } from 'vue-router';
|
||
import { postCreateEnterprises } from '@/api/all/login';
|
||
import { exactFormatTime } from '@/utils/tools';
|
||
import { handleUserHome } from '@/utils/user';
|
||
import { useUserStore } from '@/stores';
|
||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||
|
||
import icon1 from './img/icon-info.png';
|
||
import icon2 from './img/icon-check.png';
|
||
|
||
// 0-未开通，1-已开通，2-试用中，3-已到期，4-试用结束
|
||
type Status = 0 | 1 | 2 | 3 | 4;
|
||
|
||
const router = useRouter();
|
||
const userStore = useUserStore();
|
||
const enterpriseStore = useEnterpriseStore();
|
||
|
||
const formRef = ref();
|
||
const submitting = ref(false);
|
||
// const status = ref<Status>(1);
|
||
const formData = ref({
|
||
mobile: '',
|
||
contact: '',
|
||
name: '',
|
||
});
|
||
const formRules = {
|
||
contact: {
|
||
required: true,
|
||
trigger: ['blur'],
|
||
|
||
validator: (_rule, value) => {
|
||
if (!value) {
|
||
return Promise.reject('请填写姓名');
|
||
} else {
|
||
return Promise.resolve();
|
||
}
|
||
},
|
||
},
|
||
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 primary_enterprise = computed(() => userStore.userInfo?.primary_enterprise);
|
||
const hasOpenEnterprise = computed(() => enterpriseStore.isOpenEnterprise);
|
||
|
||
const trialingStepsItems = computed(() => {
|
||
return [
|
||
{
|
||
title: '提交申请',
|
||
description: exactFormatTime(enterpriseStore.enterpriseInfo?.created_at),
|
||
},
|
||
{
|
||
title: '人工审核',
|
||
description: '处理中',
|
||
},
|
||
{
|
||
title: '开始试用',
|
||
description: '等待',
|
||
},
|
||
];
|
||
});
|
||
const trialEndStepsItems = computed(() => {
|
||
return [
|
||
{
|
||
title: '提交申请',
|
||
description: exactFormatTime(enterpriseStore.enterpriseInfo?.created_at),
|
||
},
|
||
{
|
||
title: '人工审核',
|
||
description: '已完成',
|
||
},
|
||
{
|
||
title: '试用到期',
|
||
description: '已完成',
|
||
},
|
||
];
|
||
});
|
||
|
||
const onLogoClick = () => {
|
||
if (hasOpenEnterprise.value) {
|
||
handleUserHome();
|
||
} else {
|
||
router.push({
|
||
name: 'Trial',
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
submitting.value = true;
|
||
formRef.value
|
||
.validate()
|
||
.then(async () => {
|
||
const { code } = await postCreateEnterprises(formData.value);
|
||
if (code === 200) {
|
||
await userStore.getUserInfo();
|
||
|
||
const { primary_enterprise } = userStore.userInfo;
|
||
if (primary_enterprise) {
|
||
enterpriseStore.setEnterpriseInfo(primary_enterprise);
|
||
}
|
||
}
|
||
})
|
||
.finally(() => {
|
||
submitting.value = false;
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import './style.scss';
|
||
</style>
|