lingji-work-fe/src/views/trial/index.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>