template-10490/pages/index.vue

<template>

  <!-- 幻灯片轮播 -->
  <Carousel/>

  <Ad421 />

  <Ad422 />

  <!-- 热点新闻 -->
  <BNNews title="百农新闻"/>

  <ZSNews />

  <!-- 媒体视角 -->
  <HotNews title="校园风光" :categoryId="4144"/>

  <!-- 合作伙伴 -->
  <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 HotNews from "~/components/Index/HotNews.vue";
import Partners from "~/components/Index/Partners.vue";
import Customized from "~/components/Index/Customized.vue";
import BNNews from "~/components/Index/BNNews.vue";
import Ad421 from "~/components/Index/Ad421.vue";
import Ad422 from "~/components/Index/Ad422.vue";
import ZSNews from "~/components/Index/ZSNews.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>