222 lines
7.2 KiB
Vue
222 lines
7.2 KiB
Vue
|
<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>
|