1

pages/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <!-- 幻灯片轮播 -->
+  <Carousel/>
+  <!-- 新闻中心 -->
+  <Category />
+
+  <!-- 合作伙伴 -->
+  <Partners/>
+
+  <!-- 下单定制 -->
+<!--  <Customized />-->
+</template>
+<script setup lang="ts">
+import type {FormRules, FormInstance} from 'element-plus'
+import type {CmsArticle} from "~/api/cms/cmsArticle/model";
+import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
+import useFormData from "~/utils/use-form-data";
+import type {CmsOrder} from "~/api/cms/cmsOrder/model";
+import type {CmsLink} from "~/api/cms/cmsLink/model";
+import {pageCmsNavigation} from "~/api/cms/cmsNavigation";
+import {pageCmsArticle} from "~/api/cms/cmsArticle";
+import {pageCmsLink} from "~/api/cms/cmsLink";
+import {addCmsOrder} from "~/api/cms/cmsOrder";
+import {getCaptcha} from "~/api/passport/login";
+import Carousel from "~/components/Index/Carousel.vue";
+import LandingHero from "~/components/Index/LandingHero.vue";
+import SiteList from "~/components/Index/SiteList.vue";
+import MarketList from "~/components/Index/MarketList.vue";
+import HotNews from "~/components/Index/HotNews.vue";
+import CaseList from "~/components/Index/CaseList.vue"
+import Partners from "~/components/Index/Partners.vue";
+import Customized from "~/components/Index/Customized.vue";
+import Category from '~/components/Index/Category.vue';
+
+const route = useRoute();
+const i18n = useI18n();
+const productList = ref<CmsNavigation[]>([]);
+const caseList = ref<CmsArticle[]>([]);
+const topNews = ref<CmsArticle[]>([]);
+const topNewsImage = ref<string>('');
+const hotNews = ref<CmsArticle[]>([]);
+const links = ref<CmsLink[]>([]);
+// 验证码 base64 数据
+const captcha = ref('');
+const text = ref<string>('');
+
+const scrollTop = ref(0)
+window.onscroll = e => {
+  scrollTop.value = window.document.documentElement.scrollTop
+}
+
+
+const {form, assignFields, resetFields} = useFormData<CmsOrder>({
+  // 订单号
+  orderId: undefined,
+  // 模型名称
+  model: 'order',
+  // 订单标题
+  title: '-',
+  // 订单编号
+  orderNo: undefined,
+  // 订单类型，0商城 1询价 2留言
+  type: undefined,
+  // 关联项目ID，配合订单类型使用
+  articleId: undefined,
+  // 真实姓名
+  realName: undefined,
+  // 手机号码
+  phone: undefined,
+  // 电子邮箱
+  email: undefined,
+  // 收货地址
+  address: undefined,
+  // 订单内容
+  content: undefined,
+  // 订单总额
+  totalPrice: '0.00',
+  // 实际付款
+  payPrice: '0.00',
+  // 报价询价
+  price: '0.00',
+  // 购买数量
+  totalNum: undefined,
+  // 二维码地址，保存订单号，支付成功后才生成
+  qrcode: undefined,
+  // 下单渠道，0网站 1小程序 2其他
+  channel: undefined,
+  // 过期时间
+  expirationTime: undefined,
+  // 订单是否已结算(0未结算 1已结算)
+  isSettled: undefined,
+  // 用户id
+  userId: undefined,
+  // 备注
+  comments: undefined,
+  // 排序号
+  sortNumber: undefined,
+  // 是否删除, 0否, 1是
+  deleted: undefined,
+  // 租户id
+  tenantId: undefined,
+  // 创建时间
+  createTime: undefined,
+  // 图像验证码
+  code: '',
+})
+const rules = reactive<FormRules<CmsOrder>>({
+  title: [
+    {required: true, message: '请输入产品名称', trigger: 'blur'},
+  ],
+  phone: [
+    {required: true, message: '请输入手机号码', trigger: 'blur'},
+    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
+  ],
+  realName: [
+    {required: true, message: '请输入联系人姓名', trigger: 'blur'},
+  ],
+  content: [
+    {required: true, message: '请输入留言内容', trigger: 'blur'},
+  ]
+})
+
+
+// 提交表单
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  if (form.code !== text.value) {
+    await reload();
+    ElMessage.error('验证码不正确！');
+    return false;
+  }
+  await formEl.validate((valid) => {
+    if (valid) {
+      addCmsOrder(form).then(res => {
+        if (res.code == 0) {
+          ElMessage.success(res.message)
+          resetFields();
+          reload();
+        } else {
+          return ElMessage.error(res.message)
+        }
+      })
+    }
+  })
+}
+
+/* 获取图形验证码 */
+const changeCaptcha = async () => {
+  getCaptcha().then(captchaData => {
+    captcha.value = captchaData.base64;
+    text.value = captchaData.text;
+  })
+};
+
+// 请求数据
+const reload = async () => {
+
+  // 读取产品系列
+  pageCmsNavigation({
+    limit: 8,
+    parentId: i18n.locale.value == 'en' ? 1073 : 998,
+    lang: i18n.locale.value
+  }).then(data => {
+    if (data) {
+      productList.value = data?.list;
+    }
+  })
+
+  // 读取案例
+  pageCmsArticle({
+    limit: 6,
+    status: 0,
+    recommend: 1,
+    parentId: i18n.locale.value == 'en' ? 1074 : 999,
+    lang: i18n.locale.value
+  }).then(res => {
+    if (res) {
+      caseList.value = res?.list;
+    }
+  })
+
+  // 新闻头条
+  pageCmsArticle({
+    limit: 1,
+    status: 0,
+    recommend: 1,
+    categoryId: i18n.locale.value == 'en' ? 1080 : 1005,
+    lang: i18n.locale.value
+  }).then(res => {
+    if (res) {
+      topNews.value = res?.list;
+      topNewsImage.value = res?.list[0]?.image;
+    }
+  })
+
+  // 热门推荐
+  pageCmsArticle({
+    limit: 2,
+    status: 0,
+    recommend: 1,
+    categoryId: i18n.locale.value == 'en' ? 1081 : 1006,
+    lang: i18n.locale.value
+  }).then(res => {
+    if (res) {
+      hotNews.value = res?.list;
+    }
+  })
+
+  // 品牌展示
+  pageCmsLink({
+    limit: 50,
+    lang: i18n.locale.value,
+    categoryId: 1067,
+  }).then(res => {
+    if (res) {
+      links.value = res?.list;
+    }
+  })
+  setTimeout(() => {
+  }, 1500)
+}
+
+watch(
+  () => route.path,
+  (path) => {
+    console.log(path, '=>Path')
+    reload();
+    changeCaptcha();
+  },
+  {immediate: true}
+);
+</script>
+
+
+<style lang="scss">
+
+
+//.imgbig{
+//  width: 289px;
+//  height: 200px;
+//  overflow: hidden;
+//}
+.product-image {
+  width: 289px;
+  height: 425px;
+  overflow: hidden;
+}
+
+.scrollbar-flex-content {
+  display: flex;
+}
+
+.scrollbar-demo-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  width: 289px;
+  border-radius: 4px;
+}
+</style>