443 lines
10 KiB
Vue
443 lines
10 KiB
Vue
|
||
<template>
|
||
|
||
<Flash/>
|
||
|
||
<CompanyList :param="{official: true,recommend: true,limit: 4}" :fit="`cover`" />
|
||
|
||
</template>
|
||
<script setup lang="ts">
|
||
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';
|
||
|
||
const route = useRoute();
|
||
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 () => {
|
||
|
||
// 读取产品系列
|
||
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;
|
||
caseMaxScroll = caseList.value.length * 303 - 1200;
|
||
setCaseScrollTimer()
|
||
}
|
||
})
|
||
|
||
// 新闻头条
|
||
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();
|
||
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>
|