465 lines
15 KiB
Vue
465 lines
15 KiB
Vue
<template>
|
||
<div class="main-page">
|
||
<!-- banner图 -->
|
||
<div class="top-box">
|
||
<div class="title">
|
||
<p class="title-top">
|
||
<span class="name">开元云</span> 您身边的AI管家
|
||
</p>
|
||
<p class="title-btm">
|
||
全球领先的AI服务运营商
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 云筑企业基座 -->
|
||
<div class="base-box">
|
||
<div class="text">
|
||
<div class="text-top">云筑企业基座</div>
|
||
<div class="text-btm">多云结合 让上云更简单</div>
|
||
</div>
|
||
<!-- 内容 -->
|
||
<div class="content">
|
||
<div class="item-box" v-for="(item, key) in baseData" :key="key">
|
||
|
||
<div class="item-title">{{ item.title }}</div>
|
||
<div class="item-description">{{ item.description }}</div>
|
||
|
||
<!-- 优势列表 -->
|
||
<div class="advantage-list" v-if="item.list && item.list.length">
|
||
<div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
|
||
<p>
|
||
<img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
|
||
<span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
|
||
<span class="advantage-content">{{ listItem.content }}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item-price">
|
||
<span class="price-icon">￥</span>
|
||
<span class="price">{{ item.price }}</span> {{ item.price_unit }}
|
||
</div>
|
||
<div class="item-button">
|
||
<div class="item-button-text" @click="openConsultDialog(item, '云筑企业基座')">立即咨询</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 智算未来征程 -->
|
||
<div class="journey-box">
|
||
<div class="text">
|
||
<div class="text-top">智算未来征程</div>
|
||
<div class="text-btm">多元异构 灵活短租</div>
|
||
</div>
|
||
<!-- 内容 -->
|
||
<div class="content">
|
||
<div class="item-box" v-for="(item, key) in journeyData" :key="key">
|
||
<div class="item-title">{{ item.title }}</div>
|
||
<div class="item-description">{{ item.description }}</div>
|
||
|
||
<!-- 优势列表 -->
|
||
<div class="advantage-list" v-if="item.list && item.list.length">
|
||
<div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
|
||
<p>
|
||
<img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
|
||
<span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
|
||
<span class="advantage-content">{{ listItem.content }}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item-price">
|
||
<span class="price-icon">￥</span>
|
||
<span class="price">{{ item.price }}</span> {{ item.price_unit }}
|
||
</div>
|
||
<div class="item-button">
|
||
<div class="item-button-text" @click="openConsultDialog(item, '智算未来征程')">立即咨询</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 网织智能经纬 -->
|
||
<div class="latitude-box">
|
||
<div class="text">
|
||
<div class="text-top">网织智能经纬</div>
|
||
<div class="text-btm">云算网结合 让连接更简单</div>
|
||
</div>
|
||
<!-- 内容 -->
|
||
<div class="content">
|
||
<div class="item-box" v-for="(item, key) in latitude" :key="key">
|
||
<div class="item-title">{{ item.title }}</div>
|
||
<div class="item-description">{{ item.description }}</div>
|
||
|
||
<!-- 优势列表 -->
|
||
<div class="advantage-list" v-if="item.advantageList && item.advantageList.length">
|
||
<div class="advantage-item" v-for="advantage in item.advantageList" :key="advantage.id">
|
||
<p>
|
||
<img v-if="advantage.icon" :src="getIconPath(advantage.icon)" alt="" class="advantage-icon" />
|
||
<span class="advantage-name">{{ advantage.name }}：</span>
|
||
<span class="advantage-content">{{ advantage.content }}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标签列表 - 添加边框 -->
|
||
<div class="tag-list" v-if="item.tagList && item.tagList.length">
|
||
<span class="tag-item" v-for="tag in item.tagList" :key="tag.id">
|
||
{{ tag.name }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="item-button">
|
||
<div class="item-button-text" @click="openConsultDialog(item, '网织智能经纬')">立即咨询</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合作伙伴 -->
|
||
<div class="partner">
|
||
<div class="text">
|
||
<div class="text-top">合作伙伴</div>
|
||
<div class="text-btm">Partners</div>
|
||
</div>
|
||
<!-- 滚动合作伙伴内容 -->
|
||
<div class="partner-scroll">
|
||
<div class="logo-scroll-wrapper">
|
||
<div class="logo-scroll-container">
|
||
<div v-for="(image, index) in duplicatedImages" :key="index" class="logo-item">
|
||
<img :src="image" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改footer部分 -->
|
||
<div class="footer">
|
||
<div class="footer-content">
|
||
<!-- 顶部信息 -->
|
||
<div class="footer-top">
|
||
<div class="logo-footer">
|
||
<img :src="logoImg" alt="公司logo" v-if="logoImg">
|
||
<!-- <img src="@/assets/kyy/LOGO.png" alt="公司logo" class="img"> -->
|
||
</div>
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<i class="iconfont icon-dizhi"></i>
|
||
<span class="label">地址：</span>
|
||
<span class="value">{{ address }}</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="iconfont icon-dianhua"></i>
|
||
<span class="label">电话：</span>
|
||
<div class="phone-numbers">
|
||
<a href="tel:400-6150805" class="phone-link">400-6150805</a>
|
||
<span class="phone-separator">/</span>
|
||
<a href="tel:010-65917875" class="phone-link">010-65917875</a>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="iconfont icon-youxiang"></i>
|
||
<span class="label">邮箱：</span>
|
||
<a href="mailto:Open-computing@kaiyuancloud.cn" class="email-link">
|
||
Open-computing@kaiyuancloud.cn
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 备案信息 -->
|
||
<div class="footer-bottom">
|
||
<div class="icp-info">
|
||
<div class="icp-item">
|
||
<span class="icp-text">ICP备案号：</span>
|
||
<span class="icp-number">{{ ICP }}</span>
|
||
</div>
|
||
<div class="copyright">
|
||
版权所有 © kaiyuanyun 2023
|
||
</div>
|
||
</div>
|
||
|
||
<div class="record-info">
|
||
<div class="police-record">
|
||
<img src="@/image/login/policeInsignia/policeInsignia.png" alt="公安备案图标" class="police-icon">
|
||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank"
|
||
class="police-link">
|
||
京公网安备 11010502054007号
|
||
</a>
|
||
</div>
|
||
<div class="license-record">
|
||
<router-link tag="a" target="_blank" class="license-link" :to="{ name: 'homePageImage' }">
|
||
经营许可证：京B2-20232313
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端显示的二维码 -->
|
||
<div class="mobile-qr">
|
||
<div class="qr-item">
|
||
<div class="qr-code">
|
||
<img src="@/assets/kyy/kyy公众号.jpg" alt="微信客服二维码">
|
||
</div>
|
||
<span class="qr-desc">扫描关注二维码</span>
|
||
</div>
|
||
<div class="qr-item">
|
||
<div class="qr-code">
|
||
<img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
|
||
</div>
|
||
<span class="qr-desc">微信客服</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PC端显示的二维码（移动端隐藏） -->
|
||
<div class="pc-qr">
|
||
<div class="qr-box">
|
||
<div class="qr-code">
|
||
<img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
|
||
</div>
|
||
<span class="qr-content">微信客服</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 产品咨询弹窗 -->
|
||
<ProductConsultDialog :visible.sync="showConsultDialog" :platform-name="platformName" :qr-code="qrCode"
|
||
:default-form-data="consultFormData" :submit-api="submitConsultApi" @success="handleConsultSuccess"
|
||
@close="handleDialogClose" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { reqHotProduct } from '@/api/H5/index.js'
|
||
import { getLogoAPI } from "@/api/login"
|
||
import ProductConsultDialog from '../H5_dialog/index.vue'
|
||
import { reqProductConsult } from '@/api/H5/index'
|
||
|
||
export default {
|
||
name: 'MainPage',
|
||
components: {
|
||
ProductConsultDialog
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
baseData: {},
|
||
journeyData: {},
|
||
latitude: {},
|
||
images: [
|
||
require('../images/top/img.png'),
|
||
require('../images/top/img_1.png'),
|
||
require('../images/top/img_2.png'),
|
||
require('../images/top/img_3.png'),
|
||
require('../images/top/img_4.png'),
|
||
require('../images/top/img_5.png'),
|
||
require('../images/top/img_6.png'),
|
||
require('../images/top/img_8.png'),
|
||
require('../images/top/img_9.png')
|
||
],
|
||
logoImg: require("@/assets/logo/colorLogo.png"),
|
||
logoText: "开元云(北京)科技有限公司",
|
||
url: window.location.href,
|
||
photosUrl: [],
|
||
ICP: "京ICP备2022001945号-1",
|
||
address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
|
||
|
||
// 咨询弹窗相关
|
||
showConsultDialog: false,
|
||
platformName: '开元云',
|
||
qrCode: '',
|
||
consultFormData: {
|
||
content: '',
|
||
custom_type: '1',
|
||
name: '',
|
||
phone: '',
|
||
company: '',
|
||
email: '',
|
||
checked: false
|
||
},
|
||
currentItem: null,
|
||
currentCategory: null
|
||
}
|
||
},
|
||
computed: {
|
||
duplicatedImages() {
|
||
return [...this.images, ...this.images]
|
||
}
|
||
},
|
||
created() {
|
||
this.loadData()
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
try {
|
||
await this.getHotProduct()
|
||
await this.getCompanyInfo()
|
||
} catch (error) {
|
||
console.error('数据加载失败:', error)
|
||
}
|
||
},
|
||
|
||
async getHotProduct() {
|
||
const res = await reqHotProduct()
|
||
console.log('热门产品数据', res)
|
||
|
||
if (res.status) {
|
||
// 直接使用对象结构
|
||
this.baseData = res.data.base || {}
|
||
this.journeyData = res.data.suan || {}
|
||
this.latitude = res.data.net || {}
|
||
}
|
||
},
|
||
|
||
async getCompanyInfo() {
|
||
const params = {
|
||
url_link: this.parseURL(this.url)
|
||
}
|
||
|
||
const res = await getLogoAPI(params)
|
||
|
||
if (res.status && res.data && res.data.length) {
|
||
this.photosUrl = res.data[0]
|
||
|
||
if (this.photosUrl.orgname !== '业主机构') {
|
||
this.logoImg = this.photosUrl.logo || this.logoImg
|
||
this.logoText = this.photosUrl.orgname || this.logoText
|
||
this.ICP = this.photosUrl.license_number || this.ICP
|
||
this.address = this.photosUrl.address || this.address
|
||
}
|
||
} else {
|
||
this.showErrorMessage(res.msg || '获取公司信息失败')
|
||
}
|
||
},
|
||
|
||
parseURL(url) {
|
||
if (url.includes("#")) {
|
||
return url.split("#")[0]
|
||
}
|
||
return url
|
||
},
|
||
|
||
showErrorMessage(message) {
|
||
this.$message({
|
||
message,
|
||
type: "error"
|
||
})
|
||
},
|
||
|
||
// 获取图标路径
|
||
getIconPath(iconPath) {
|
||
// 如果图标路径是绝对路径或网络路径，直接返回
|
||
if (iconPath.startsWith('http') || iconPath.startsWith('//') || iconPath.startsWith('data:')) {
|
||
return iconPath
|
||
}
|
||
// 如果是相对路径，尝试使用 require 加载
|
||
try {
|
||
// 注意：这里可能需要根据实际路径调整
|
||
// 假设图标在 @/views/homePage/mainPage/ 目录下
|
||
return require(`@/views/homePage/mainPage/${iconPath}`)
|
||
} catch (e) {
|
||
console.warn('图标加载失败:', iconPath)
|
||
return ''
|
||
}
|
||
},
|
||
|
||
// 打开咨询弹窗
|
||
openConsultDialog(item, category) {
|
||
this.currentItem = item
|
||
this.currentCategory = category
|
||
|
||
// 构建优势列表文本
|
||
let advantageText = ''
|
||
if (item.list && item.list.length) {
|
||
advantageText = item.list.map(listItem => {
|
||
return listItem.name ? `${listItem.name}：${listItem.content}` : listItem.content
|
||
}).join('\n')
|
||
} else if (item.advantageList && item.advantageList.length) {
|
||
advantageText = item.advantageList.map(advantage => {
|
||
return advantage.name ? `${advantage.name}：${advantage.content}` : advantage.content
|
||
}).join('\n')
|
||
}
|
||
|
||
// 构建标签列表文本
|
||
let tagText = ''
|
||
if (item.tagList && item.tagList.length) {
|
||
tagText = item.tagList.map(tag => tag.name).join('、')
|
||
}
|
||
|
||
// 设置咨询表单的预填内容
|
||
this.consultFormData = {
|
||
...this.consultFormData,
|
||
content: `我想咨询关于【${item.title}】（${category}）的产品信息\n产品描述：${item.description}\n${advantageText ? '产品优势：\n' + advantageText : ''}${tagText ? '\n产品标签：' + tagText : ''}${item.price ? '\n参考价格：' + item.price + (item.price_unit || '') : ''}`
|
||
}
|
||
|
||
this.showConsultDialog = true
|
||
},
|
||
|
||
// 提交咨询API
|
||
async submitConsultApi(data) {
|
||
// 如果有额外的产品信息，可以添加到提交数据中
|
||
const submitData = {
|
||
...data,
|
||
product_name: this.currentItem?.title || '',
|
||
product_description: this.currentItem?.description || '',
|
||
product_category: this.currentCategory || '',
|
||
product_price: this.currentItem?.price || '',
|
||
product_price_unit: this.currentItem?.price_unit || '',
|
||
page_type: 'main_page'
|
||
}
|
||
|
||
return await reqProductConsult(submitData)
|
||
|
||
},
|
||
|
||
// 咨询成功回调
|
||
handleConsultSuccess(response) {
|
||
console.log('咨询提交成功:', response)
|
||
// 可以在这里添加后续逻辑，比如记录咨询历史等
|
||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||
},
|
||
|
||
// 弹窗关闭回调
|
||
handleDialogClose() {
|
||
this.currentItem = null
|
||
this.currentCategory = null
|
||
// 重置表单数据
|
||
this.consultFormData = {
|
||
content: '',
|
||
custom_type: '1',
|
||
name: '',
|
||
phone: '',
|
||
company: '',
|
||
email: '',
|
||
checked: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
html,
|
||
body {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
overflow-y: auto !important;
|
||
background-color: #f8fafd;
|
||
}
|
||
</style>
|
||
|
||
<style lang="less" scoped>
|
||
@import url('../less/official/index.less');
|
||
</style>
|