xinkeaboard/xinkeaboard-promotion-portal/src/components/TopContent.vue

<template>
  <div class="head-content">
    <div class="head-content-logo">
      <img :src="Logo" />
    </div>
    <div class="head-content-wrap">
      <span class="head-content-wrap__label">市场迷雾？罗经开路！</span>
      <span class="head-content-wrap__title">
        Lookeen 是一个服务于首次出海客户的 AI 商情系统(GTM Analytics
        Tools 市场进入分析工具)。目的是提供客户自己的产品品类在目标市场的商业情报，降低用户对产品在目标市场的不确定性。
      </span>
      <div class="head-content-wrap__step">
        <span class="label">只需三步</span>
        <span class="tip">(每月可免费获取3次商品分析)</span>
      </div>
      <div class="head-content-wrap__info">
        <CountrySelct ref="CountrySelctRef" v-show="currentStep === 1"></CountrySelct>
        <ProductDescription
          ref="ProductDescriptionRef"
          v-show="currentStep === 2"
        ></ProductDescription>
        <CompetitorWebsite
          ref="CompetitorWebsiteRef"
          v-show="currentStep === 3"
        ></CompetitorWebsite>
        <el-button v-if="currentStep !== 1" @click="prevStep">上一步</el-button>
        <el-button v-if="currentStep !== 3" @click="nextStep">下一步</el-button>
        <el-button v-if="currentStep === 3" :loading="btnLoading" @click="acceptRecod"
          >获取报告</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, nextTick } from 'vue';
import { useMainStore } from '../store';

import { useRouter } from 'vue-router';
import CountrySelct from '@/components/CountrySelct.vue';
import ProductDescription from '@/components/ProductDescription.vue';
import CompetitorWebsite from '@/components/CompetitorWebsite.vue';
import Logo from '@/assets/images/logo.png';

import { showMessage } from '@/utils/common';
const mainStore = useMainStore();
const router = useRouter();

const currentStep = computed(() => mainStore.getCurrentStep);

const CountrySelctRef = ref();
const ProductDescriptionRef = ref();
const CompetitorWebsiteRef = ref();

const btnLoading = ref<boolean>(false);

const validate = () => {
  const { locationName, productName, description } = getFormData();
  let message: string = '';
  switch (currentStep.value) {
    case 1:
      if (!productName) {
        message = '请输入产品名称';
        break;
      }

      // if (!locationName) {
      //   message = '请选择目标区域市场';
      //   break;
      // }
      break;
    // case 2:
    //   if (!description) {
    //     message = '请输入产品描述';
    //     break;
    //   }
    //   break;
    default:
      break;
  }
  return message;
};

const nextStep = () => {
  const message = validate();
  if (message) {
    return showMessage({
      type: 'error',
      message
    });
  }
  mainStore.setCurrentStep(currentStep.value + 1);
};

const prevStep = () => {
  mainStore.setCurrentStep(currentStep.value - 1);
};

const getFormData = () => {
  const locationName = CountrySelctRef.value.getLocationName();
  const productName = CountrySelctRef.value.getProductName();
  const description = ProductDescriptionRef.value.getDescription();
  const competitorWebsite = CompetitorWebsiteRef.value.getWebsite();

  return {
    locationName,
    productName,
    description,
    competitorWebsite
  };
};

const isValidUrl = (url: string) => {
  const pattern = /^(https?:\/\/|ftp:\/\/)([a-zA-Z0-9.-]+)(:[0-9]+)?(\/[^\s]*)?$/;
  return pattern.test(url);
};

const validateCompetitorWebsite = (site: string) => {
  if (!site.trim()) return true;
  const list = site.split(',');
  return list.every((item) => isValidUrl(item));
};

const acceptRecod = async () => {
  btnLoading.value = true;
  const formData = getFormData();
  const { competitorWebsite } = formData;
  const result = validateCompetitorWebsite(competitorWebsite);

  if (!result) {
    showMessage({
      type: 'error',
      message: '请输入正确的竞品网站'
    });
    btnLoading.value = false;
    return;
  }
  mainStore.setFormData(formData);

  router.push('/record');
};
</script>

<style lang="scss" scoped>
.head-content {
  width: 100%;
  height: 100%;
  position: relative;

  &-logo {
    position: absolute;
    width: 320px;
    height: 88px;
    left: 260px;
    top: 32px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &-wrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 663px;
    height: 548px;
    left: 280px;
    top: 125px;

    &__label {
      font-weight: bold;
      font-size: 40px;
      color: #282e30;
      margin-top: 60px;
    }

    &__title {
      display: inline-block;
      width: 100%;
      height: 66px;
      font-weight: 400;
      font-size: 16px;
      color: #282e30;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 20px;
    }

    &__step {
      margin-top: 60px;

      .label {
        font-weight: bold;
        font-size: 24px;
        color: var(--promotion--color-primary);
      }

      .tip {
        font-weight: 400;
        font-size: 12px;
        color: #282e30;
        margin-left: 10px;
      }
    }

    &__info {
      display: flex;
      align-items: center;
      height: 68px;
      margin-top: 10px;

      :deep(.el-button) {
        width: 110px;
        height: 48px;
        background-color: var(--promotion--color-primary);
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        border-radius: 0;
        margin-left: 10px;
      }
    }
  }
}
</style>