新版本官网优化完成

pages/index.vue

@@ -1,68 +1,442 @@
+
 <template>
 
   <Flash/>
 
-
   <CompanyList :param="{official: true,recommend: true,limit: 4}" :fit="`cover`" />
 
-<!--  <ProductList :param="{type:0, official: true,limit: 4}" :fit="`cover`" title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->
-
-<!--  <ArticleList title="开发者社区" comments="分享研发成果 交流技术经验"/>-->
-
 </template>
 <script setup lang="ts">
-import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState";
-import type {BreadcrumbItem} from "~/types/global";
+import {useConfigInfo} from "~/composables/configState";
+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 Flash from './components/Flash.vue';
-import ArticleList from './components/ArticleList.vue';
 
-// 引入状态管理
 const route = useRoute();
-const layout = ref<any>();
-const token = useToken();
-const form = useForm();
-const breadcrumb = ref<BreadcrumbItem>();
+const i18n = useI18n();
+const config = useConfigInfo();
+const productList = ref<CmsNavigation[]>([]);
+const caseList = ref<CmsArticle[]>([]);
+const topNews = ref<CmsArticle[]>([]);
+const topNewsImage = ref<string>('');
+const hotNews = ref<CmsArticle[]>([]);
+const links = ref<CmsLink[]>([]);
+const formRef = ref<FormInstance>()
+// 验证码 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 () => {
 
-  // 页面布局
-  if (form.value?.layout) {
-    layout.value = JSON.parse(form.value?.layout)
-  }
+  // 读取产品系列
+  pageCmsNavigation({
+    limit: 8,
+    parentId: i18n.locale.value == 'en' ? 1073 : 998,
+    lang: i18n.locale.value
+  }).then(data => {
+    if (data) {
+      productList.value = data?.list;
+    }
+  })
 
-  // 未登录状态(是否强制登录)
-  if (!token.value || token.value == '') {
-    // if (config.value.MustLogin) {
-    //   navigateTo('/passport/login');
-    //   return false;
-    // }
-  }
+  // 读取案例
+  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;
+      caseMaxScroll = caseList.value.length * 303 - 1200;
+      setCaseScrollTimer()
+    }
+  })
 
-  // seo
-  useHead({
-    title: `构建现代WEB应用 · WEBSOFT`,
-    meta: [{name: form.value.design?.keywords, content: form.value.design?.description}],
-    bodyAttrs: {
-      class: "page-container",
-    },
-    script: [
-      {
-        children: `console.log(${JSON.stringify(form.value)})`,
-      },
-    ],
-  });
-  // 面包屑
-  breadcrumb.value = form.value
+  // 新闻头条
+  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;
+      linksMaxScroll = links.value.length * 148 - 1200;
+      setLinksScroll()
+    }
+  })
+  setTimeout(() => {
+    setRegionNum()
+    setCountryNum()
+    setOrgNum()
+    setProjectNum()
+  }, 1500)
+}
+
+const regionNum = ref(0);
+const countryNum = ref(0);
+const orgNum = ref(480);
+const projectNum = ref(970);
+
+const setRegionNum = () => {
+  if (regionNum.value < 20) {
+    setTimeout(() => {
+      regionNum.value += 1;
+      setRegionNum();
+    }, 70)
+  }
+}
+
+const setCountryNum = () => {
+  if (countryNum.value < 15) {
+    setTimeout(() => {
+      countryNum.value += 1;
+      setCountryNum();
+    }, 70)
+  }
+}
+
+const setOrgNum = () => {
+  if (orgNum.value < 500) {
+    setTimeout(() => {
+      orgNum.value += 1;
+      setOrgNum();
+    }, 70)
+  }
+}
+
+const setProjectNum = () => {
+  if (projectNum.value < 999) {
+    setTimeout(() => {
+      projectNum.value += 1;
+      setProjectNum();
+    }, 70)
+  }
+}
+
+const onScroll = (e: any) => {
+  currentScrollLeft = e.scrollLeft
+  if (currentScrollLeft === 0) currentScrollLeftEnd = 0
+  // console.log(currentScrollLeft)
+}
+
+let currentScrollLeft = 0
+let currentScrollLeftEnd = 0
+let currentScroll = 0
+let scrollNum = 0
+const scrollbarRef = ref()
+const scroll = (dir: string) => {
+  const maxScrollLeft = 309 * 5 - 1120 - 20
+  if (dir === 'left') {
+    if (currentScrollLeft === 0) scrollNum = maxScrollLeft
+    else if (currentScrollLeft < 309) {
+      scrollNum = -currentScrollLeft
+    } else scrollNum = -309
+  } else {
+    if (currentScrollLeftEnd === maxScrollLeft) scrollNum = -maxScrollLeft
+    else if (maxScrollLeft - currentScrollLeftEnd < 309 && maxScrollLeft - currentScrollLeftEnd > 0) {
+      scrollNum = maxScrollLeft - currentScrollLeftEnd
+    } else if ((maxScrollLeft + 10) === currentScrollLeft || (maxScrollLeft - 10) === currentScrollLeft) {
+      scrollNum = -maxScrollLeft
+    } else scrollNum = 309
+  }
+  setScroll()
+}
+
+const setScroll = () => {
+  if (scrollNum > 0) {
+    if (currentScroll < scrollNum) {
+      setTimeout(() => {
+        currentScroll += 5
+        scrollbarRef.value?.setScrollLeft(currentScrollLeftEnd + currentScroll)
+        setScroll()
+      }, 5)
+    } else {
+      currentScroll = 0
+      currentScrollLeftEnd += scrollNum
+    }
+  } else {
+    if (currentScroll > scrollNum) {
+      setTimeout(() => {
+        currentScroll -= 5
+        scrollbarRef.value?.setScrollLeft(currentScrollLeftEnd + currentScroll)
+        setScroll()
+      }, 5)
+    } else {
+      currentScroll = 0
+      currentScrollLeftEnd += scrollNum
+    }
+  }
+  // console.log(currentScrollLeftEnd, scrollNum)
+}
+
+const setScrollTimer = () => {
+  setInterval(() => {
+    scroll('right')
+  }, 2000)
+}
+setScrollTimer()
+
+const linksScrollbarRef = ref()
+let linksCurrentScroll = 0
+const onLinksScroll = (e: any) => {
+  linksCurrentScroll = e.scrollLeft
+}
+
+let linksMaxScroll = 0
+const setLinksScroll = () => {
+  setTimeout(() => {
+    if (linksCurrentScroll < linksMaxScroll) {
+      linksCurrentScroll += 1
+    } else {
+      linksCurrentScroll = 0
+    }
+    // console.log(linksCurrentScroll, linksMaxScroll)
+    linksScrollbarRef.value?.setScrollLeft(linksCurrentScroll)
+    setLinksScroll()
+  }, 15)
+
+}
+
+const caseScrollbarRef = ref()
+let caseCurrentScroll = 0
+const onCaseScroll = (e: any) => {
+  caseCurrentScroll = e.scrollLeft
+}
+
+let caseMaxScroll = 0
+let caseScrollNum = 0
+let caseCurrentScrollLeftEnd = 0
+const setCaseScroll = () => {
+  if (caseCurrentScrollLeftEnd === caseMaxScroll) {
+    caseScrollNum = 0
+    caseCurrentScrollLeftEnd = 0
+  } else if (caseMaxScroll - caseCurrentScrollLeftEnd < 303 && caseMaxScroll - caseCurrentScrollLeftEnd > 0) {
+    caseScrollNum = caseMaxScroll - caseCurrentScrollLeftEnd
+  } else if ((caseMaxScroll + 20) === caseCurrentScroll || (caseMaxScroll - 20) === caseCurrentScroll) {
+    scrollNum = 0
+  } else caseScrollNum = 303
+  console.log(caseCurrentScrollLeftEnd, caseMaxScroll, caseScrollNum)
+  setCaseScrollJob()
+}
+
+const setCaseScrollJob = () => {
+  if (caseScrollNum > 0) {
+    if (caseCurrentScroll < caseScrollNum) {
+      setTimeout(() => {
+        caseCurrentScroll += 5
+        caseScrollbarRef.value?.setScrollLeft(caseCurrentScrollLeftEnd + caseCurrentScroll)
+        setCaseScrollJob()
+      }, 5)
+    } else {
+      caseCurrentScroll = 0
+      caseCurrentScrollLeftEnd += caseScrollNum
+    }
+  } else {
+    if (caseCurrentScroll > caseScrollNum) {
+      setTimeout(() => {
+        caseCurrentScroll -= 5
+        caseScrollbarRef.value?.setScrollLeft(caseCurrentScrollLeftEnd + caseCurrentScroll)
+        setCaseScrollJob()
+      }, 5)
+    } else {
+      caseCurrentScroll = 0
+      caseCurrentScrollLeftEnd += caseScrollNum
+    }
+  }
+}
+
+let caseScrollTimer = null
+const setCaseScrollTimer = () => {
+  if (caseScrollTimer) clearInterval(caseScrollTimer)
+  caseScrollTimer = setInterval(() => {
+    setCaseScroll()
+  }, 2000)
 }
 
 watch(
-    () => route.path,
-    (path) => {
-      console.log(path, '=>Path')
-
-      reload();
-    },
-    {immediate: true}
+  () => 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>