updata
This commit is contained in:
parent
0e357e5303
commit
3757ad4a95
@ -29,4 +29,15 @@ export const reqProductConsult = (data) => {
|
||||
data
|
||||
})
|
||||
}
|
||||
// 获取产品详情
|
||||
export const reqProductDetail = (data) => {
|
||||
return request({
|
||||
url: '/product/get_firstpage_net_detail.dspy',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -833,7 +833,7 @@ export default {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
width: .38rem;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
|
||||
@ -55,14 +55,14 @@ export const constantRoutes = [
|
||||
path: "/redirect/:path(.*)", component: () => import("@/views/redirect/index"),
|
||||
},],
|
||||
},
|
||||
{
|
||||
{
|
||||
path: '/h5HomePage',
|
||||
name: 'H5HomePage',
|
||||
title: 'H5首页',
|
||||
component: () => import('@/views/H5/index.vue'),
|
||||
hidden: true,
|
||||
redirect:"/h5HomePage/index",
|
||||
children: [
|
||||
redirect: "/h5HomePage/index",
|
||||
children: [
|
||||
{
|
||||
path: "index",
|
||||
title: 'H5首页',
|
||||
@ -91,7 +91,7 @@ export const constantRoutes = [
|
||||
path: "net",
|
||||
title: '网',
|
||||
component: () => import('@/views/H5/net/index.vue'),
|
||||
meta: {
|
||||
meta: {
|
||||
title: "网", fullPath: "/h5HomePage/net",
|
||||
},
|
||||
},
|
||||
@ -105,14 +105,38 @@ export const constantRoutes = [
|
||||
},
|
||||
{
|
||||
path: "details",
|
||||
title: '产品详情',
|
||||
title: '算产品详情',
|
||||
component: () => import('@/views/H5/details/index.vue'),
|
||||
meta: {
|
||||
title: "产品详情", fullPath: "/h5HomePage/details",
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "netDetail",
|
||||
title: '网产品详情',
|
||||
component: () => import('@/views/H5/netDetails/index.vue'),
|
||||
meta: {
|
||||
title: "产品详情", fullPath: "/h5HomePage/netDetail",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "useDetail",
|
||||
title: 'AI产品详情',
|
||||
component: () => import('@/views/H5/useDetails/index.vue'),
|
||||
meta: {
|
||||
title: "AI产品详情", fullPath: "/h5HomePage/useDetail",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "service",
|
||||
title: '智能客服详情',
|
||||
component: () => import('@/views/H5/useDetails/service.vue'),
|
||||
meta: {
|
||||
title: "智能客服详情", fullPath: "/h5HomePage/service",
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/beforeLogin',
|
||||
@ -944,7 +968,7 @@ export const asyncRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// 工单管理 - 变为一级菜单
|
||||
// 工单管理 - 变为一级菜单
|
||||
{
|
||||
path: "/workOrderManagement",
|
||||
component: Layout,
|
||||
@ -1221,7 +1245,7 @@ export const asyncRoutes = [
|
||||
name: "menuMangement",
|
||||
meta: { title: "ncmatch菜单管理", fullPath: "/menuMangement/index" },
|
||||
},
|
||||
{
|
||||
{
|
||||
path: "productsServices",
|
||||
component: () => import("@/views/operation/productsServices/index.vue"),
|
||||
name: "productsServices",
|
||||
|
||||
@ -76,28 +76,14 @@
|
||||
</template>
|
||||
</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 { reqNavList } from '@/api/H5/index'
|
||||
import ProductConsultDialog from '../H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
import ProductConsultDialog from '../components/H5_dialog/index.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProductConsultDialog
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
@ -166,66 +152,22 @@ export default {
|
||||
// 跳转到详情页
|
||||
goToDetail(productId) {
|
||||
// 使用路由跳转到详情页，携带productId作为参数
|
||||
this.$router.push({
|
||||
path: '/h5HomePage/details',
|
||||
query: {
|
||||
id: productId
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 打开咨询弹窗
|
||||
openConsultDialog(product, category) {
|
||||
this.currentProduct = product
|
||||
this.currentCategory = category
|
||||
|
||||
// 设置咨询表单的预填内容
|
||||
this.consultFormData = {
|
||||
...this.consultFormData,
|
||||
content: `我想咨询关于【${product.name}】的产品信息\n产品分类：智算`
|
||||
if (productId === '2113') {
|
||||
this.$router.push({
|
||||
path: '/h5HomePage/details',
|
||||
query: {
|
||||
id: productId
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.$router.push({
|
||||
path: '/h5HomePage/netDetail',
|
||||
query: {
|
||||
id: productId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.showConsultDialog = true
|
||||
},
|
||||
|
||||
// 提交咨询API
|
||||
async submitConsultApi(data) {
|
||||
// 如果有额外的产品信息，可以添加到提交数据中
|
||||
const submitData = {
|
||||
...data,
|
||||
product_name: this.currentProduct?.name || '',
|
||||
product_description: this.currentProduct?.description || '',
|
||||
product_label: '智算',
|
||||
product_category: this.currentCategory?.thrTitle || '',
|
||||
supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
|
||||
page_type: 'product_list'
|
||||
}
|
||||
|
||||
return await reqProductConsult(submitData)
|
||||
},
|
||||
|
||||
// 咨询成功回调
|
||||
handleConsultSuccess(response) {
|
||||
console.log('咨询提交成功:', response)
|
||||
// 显示成功提示
|
||||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||||
},
|
||||
|
||||
// 弹窗关闭回调
|
||||
handleDialogClose() {
|
||||
this.currentProduct = null
|
||||
this.currentCategory = null
|
||||
// 重置表单数据
|
||||
this.consultFormData = {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
|
||||
<script>
|
||||
import { reqNavList } from '@/api/H5/index'
|
||||
import ProductConsultDialog from '../H5_dialog/index.vue'
|
||||
import ProductConsultDialog from '../components/H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
|
||||
export default {
|
||||
|
||||
@ -53,10 +53,10 @@
|
||||
|
||||
<el-checkbox v-model="formData.checked" class="agreement-checkbox">
|
||||
<p>勾选表示：您同意<span v-if="platformName">{{ platformName }}</span>
|
||||
及其授权的合作伙伴通过您填写的联系方式联系您，且数据仅用于与您沟通。
|
||||
及其授权的合作伙伴通过您填写的联系方式联系您，
|
||||
</p>
|
||||
<p>
|
||||
当您注销平台账号后，您的数据会被销毁。
|
||||
且数据仅用于与您沟通。当您注销平台账号后，您的数据会被销毁。
|
||||
</p>
|
||||
</el-checkbox>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
@ -398,5 +398,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import url('../less/dialog/index.less');
|
||||
@import url('../../less/dialog/index.less');
|
||||
</style>
|
||||
481
f/web-kboss/src/views/H5/components/footer/footer.vue
Normal file
481
f/web-kboss/src/views/H5/components/footer/footer.vue
Normal file
@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
<!-- footer部分 -->
|
||||
<div class="footer">
|
||||
<div class="footer-content">
|
||||
<!-- 顶部信息 -->
|
||||
<div class="footer-center">
|
||||
<div class="footer-top">
|
||||
<div class="logo-footer">
|
||||
<img :src="logoImg" alt="公司logo" v-if="logoImg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<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 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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLogoAPI } from "@/api/login"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
// 公司信息
|
||||
logoImg: require("@/assets/logo/colorLogo.png"),
|
||||
logoText: "开元云(北京)科技有限公司",
|
||||
url: window.location.href,
|
||||
photosUrl: [],
|
||||
ICP: "京ICP备2022001945号-1",
|
||||
address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
duplicatedImages() {
|
||||
return [...this.images, ...this.images]
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getCompanyInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取公司信息
|
||||
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 || '获取公司信息失败')
|
||||
}
|
||||
},
|
||||
|
||||
// 解析URL
|
||||
parseURL(url) {
|
||||
if (url.includes("#")) {
|
||||
return url.split("#")[0]
|
||||
}
|
||||
return url
|
||||
},
|
||||
|
||||
// 显示错误信息
|
||||
showErrorMessage(message) {
|
||||
this.$message({
|
||||
message,
|
||||
type: "error"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer样式 */
|
||||
.footer {
|
||||
width: 100%;
|
||||
background: #f6f8fd;
|
||||
color: #333;
|
||||
padding: 0.4rem 0.2rem 0.4rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #e8edf5;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 12.8rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 顶部信息区域 */
|
||||
.footer-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo-footer {
|
||||
width: 2.4rem;
|
||||
height: .8rem;
|
||||
margin-bottom: 0.4rem;
|
||||
border-radius: 0.12rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-center {
|
||||
font-size: 0.24rem;
|
||||
padding: 0.3rem 0.2rem;
|
||||
background: #fff;
|
||||
border-radius: 0.16rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #eef2f9;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.3rem 0.6rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 0.16rem 0.2rem;
|
||||
border-radius: 0.12rem;
|
||||
|
||||
.iconfont {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
margin-right: 0.12rem;
|
||||
margin-top: 0.02rem;
|
||||
color: #275AFF;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
margin-right: 0.08rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #444;
|
||||
flex: 1;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.phone-numbers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.08rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.16rem;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-link {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
font-size: 0.208rem;
|
||||
|
||||
&:hover {
|
||||
color: #275AFF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-separator {
|
||||
color: #999;
|
||||
font-weight: 300;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.email-link {
|
||||
color: #275AFF;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
font-weight: 500;
|
||||
font-size: 0.208rem;
|
||||
|
||||
&:hover {
|
||||
color: #2ebdfa;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端二维码 */
|
||||
.mobile-qr {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 0.4rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qr-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 0.16rem;
|
||||
padding: 0.24rem;
|
||||
box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
|
||||
border: 1px solid #eef2f9;
|
||||
width: 100%;
|
||||
max-width: 2.4rem;
|
||||
margin-right: 0.4rem;
|
||||
|
||||
.qr-code {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
background: #fff;
|
||||
border-radius: 0.12rem;
|
||||
padding: 0.12rem;
|
||||
border: 1px solid #eef2f9;
|
||||
margin-bottom: 0.16rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-desc {
|
||||
color: #333;
|
||||
font-size: 0.208rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部信息区域 */
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0.3rem 0.2rem;
|
||||
background: #fff;
|
||||
border-radius: 0.16rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
margin-top: 0.4rem;
|
||||
border: 1px solid #eef2f9;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 0.3rem 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icp-info {
|
||||
margin-bottom: 0.24rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icp-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
margin-bottom: 0.12rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icp-text {
|
||||
color: #888;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
|
||||
.icp-number {
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: #888;
|
||||
font-size: 0.24rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.record-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.16rem;
|
||||
margin-bottom: 0.24rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.police-record {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
padding: 0.08rem 0.16rem;
|
||||
background: #f9fafc;
|
||||
border-radius: 0.24rem;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #eef2f9;
|
||||
|
||||
&:hover {
|
||||
background: #f0f5ff;
|
||||
border-color: #275AFF;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.police-icon {
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
}
|
||||
|
||||
.police-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.24rem;
|
||||
|
||||
&:hover {
|
||||
color: #275AFF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.license-record {
|
||||
.license-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.24rem;
|
||||
padding: 0.08rem 0.16rem;
|
||||
background: #f9fafc;
|
||||
border-radius: 0.24rem;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #eef2f9;
|
||||
|
||||
&:hover {
|
||||
background: #f0f5ff;
|
||||
color: #275AFF;
|
||||
text-decoration: underline;
|
||||
transform: translateY(-2px);
|
||||
border-color: #275AFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +1,335 @@
|
||||
<template>
|
||||
<div>
|
||||
详情页
|
||||
<div class="banner">
|
||||
<!-- 介绍 -->
|
||||
<div class="introduce">
|
||||
<div class="title">
|
||||
<span>{{ productList.title }}</span>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<div class="details">
|
||||
<span>{{ productList.description }}</span>
|
||||
</div>
|
||||
<div class="btn" @click="openConsultDialog(productList, 'banner')">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 规格 -->
|
||||
<div class="specification">
|
||||
<div class="title">
|
||||
产品<span class="color">规格</span>
|
||||
</div>
|
||||
<!-- 产品列表 -->
|
||||
<div class="product-list">
|
||||
<!-- 列表项 -->
|
||||
<div class="list-box" v-for="(item, index) in productList.products" :key="index">
|
||||
<div class="box-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<div class="box-details">
|
||||
<div class="details-item" v-for="(items, index) in item.list" :key="index">
|
||||
<span>
|
||||
<span class="item-title">
|
||||
<span>{{ items.name }}</span>
|
||||
</span>
|
||||
<span class="item-details">
|
||||
<span>{{ items.content }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
<div class="price">
|
||||
￥<span class="price-dig">{{ item.price }}</span><span class="price-color">{{ item.price_unit }}(可短租)</span>
|
||||
</div>
|
||||
<!-- 咨询 -->
|
||||
<div class="box-btn" @click="openConsultDialog(item, 'spec')">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品咨询弹窗 -->
|
||||
<ProductConsultDialog
|
||||
:visible.sync="showConsultDialog"
|
||||
:platform-name="platformName"
|
||||
:qr-code="qrCode"
|
||||
:default-form-data="consultFormData"
|
||||
:submit-api="submitConsultApi"
|
||||
@success="handleConsultSuccess"
|
||||
@close="handleDialogClose"
|
||||
/>
|
||||
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqProductDetail, reqProductConsult } from '@/api/H5/index'
|
||||
import Footer from '../components/footer/footer.vue';
|
||||
import ProductConsultDialog from '../components/H5_dialog/index.vue'
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
Footer,
|
||||
ProductConsultDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
productList: [],
|
||||
|
||||
// 咨询弹窗相关
|
||||
showConsultDialog: false,
|
||||
platformName: '产品详情页',
|
||||
qrCode: '',
|
||||
consultFormData: {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
},
|
||||
currentProduct: null,
|
||||
consultSource: '' // 记录咨询来源：banner 或 spec
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 获取id
|
||||
this.id = this.$route.query.id
|
||||
console.log('ID:', this.id)
|
||||
this.getProductList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取产品列表
|
||||
async getProductList() {
|
||||
const res = await reqProductDetail({ id: this.id })
|
||||
console.log('产品详情是', res)
|
||||
if (res.status === true) {
|
||||
this.productList = res.data
|
||||
}
|
||||
},
|
||||
|
||||
// 打开咨询弹窗
|
||||
openConsultDialog(product, source) {
|
||||
this.currentProduct = product
|
||||
this.consultSource = source
|
||||
|
||||
// 根据来源设置不同的咨询内容
|
||||
let content = ''
|
||||
if (source === 'banner') {
|
||||
// 从banner咨询
|
||||
content = `我想咨询关于【${product.title || '产品'}】的详细信息`
|
||||
} else if (source === 'spec') {
|
||||
// 从规格列表咨询
|
||||
content = `我想咨询【${product.title || '产品规格'}】的价格和租赁详情，价格：${product.price}${product.price_unit || ''}`
|
||||
}
|
||||
|
||||
// 设置咨询表单的预填内容
|
||||
this.consultFormData = {
|
||||
...this.consultFormData,
|
||||
content: content
|
||||
}
|
||||
|
||||
this.showConsultDialog = true
|
||||
},
|
||||
|
||||
// 提交咨询API
|
||||
async submitConsultApi(data) {
|
||||
// 构建提交数据
|
||||
const submitData = {
|
||||
...data,
|
||||
product_id: this.id,
|
||||
product_title: this.productList.title || '',
|
||||
product_name: this.currentProduct?.title || '',
|
||||
product_price: this.currentProduct?.price || '',
|
||||
product_unit: this.currentProduct?.price_unit || '',
|
||||
consult_source: this.consultSource || '',
|
||||
page_type: 'product_detail',
|
||||
page_url: window.location.href
|
||||
}
|
||||
|
||||
return await reqProductConsult(submitData)
|
||||
},
|
||||
|
||||
// 咨询成功回调
|
||||
handleConsultSuccess(response) {
|
||||
console.log('咨询提交成功:', response)
|
||||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||||
},
|
||||
|
||||
// 弹窗关闭回调
|
||||
handleDialogClose() {
|
||||
this.currentProduct = null
|
||||
this.consultSource = ''
|
||||
// 重置表单数据
|
||||
this.consultFormData = {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.color {
|
||||
background: linear-gradient(to right, #0066FF, #66CCFF);
|
||||
/* 蓝到浅蓝渐变 */
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.banner {
|
||||
height: 4.2rem;
|
||||
background: url(../images/calculateBanner.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.introduce {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 14%;
|
||||
transform: translate(-90%);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.32rem;
|
||||
/* 修改为0.32rem */
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: 0.18rem;
|
||||
/* 修改为0.18rem */
|
||||
color: #8890ab;
|
||||
line-height: 2 !important;
|
||||
margin-top: .1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: .1rem;
|
||||
width: 2rem;
|
||||
height: .4rem;
|
||||
border-radius: .1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: .2rem;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
color: #fff;
|
||||
cursor: pointer; /* 添加手型光标 */
|
||||
}
|
||||
}
|
||||
|
||||
// 规格
|
||||
.specification {
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #fff, #f2f6fb, #fff);
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 0.32rem;
|
||||
/* 修改为0.32rem */
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// 产品列表
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 0 1%;
|
||||
|
||||
// 列表项
|
||||
.list-box {
|
||||
position: relative;
|
||||
margin: .2rem 2%;
|
||||
width: 46%;
|
||||
box-shadow: 0 .02rem .08rem rgba(39, 90, 255, 0.08);
|
||||
border-radius: .3rem;
|
||||
padding: .2rem .2rem;
|
||||
background-color: #fff;
|
||||
|
||||
// 标题
|
||||
.box-title {
|
||||
font-size: 0.24rem;
|
||||
/* 修改为0.24rem */
|
||||
font-weight: 600;
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
// 详情
|
||||
.box-details {
|
||||
.details-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 1;
|
||||
|
||||
.item-title {
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
margin-right: 0.07rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
font-size: .16rem;
|
||||
color: #8890ab;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 价格
|
||||
.price {
|
||||
font-size: .16rem;
|
||||
color: #F62424;
|
||||
margin-top: .2rem;
|
||||
padding-top: .2rem;
|
||||
// 虚线
|
||||
border-top: .02rem dashed #e0e0e0;
|
||||
margin-bottom: .8rem;
|
||||
.price-dig {
|
||||
font-size: 0.28rem;
|
||||
/* 修改为0.28rem */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-color {
|
||||
color: #8890ab;
|
||||
}
|
||||
}
|
||||
|
||||
.box-btn {
|
||||
width: calc(100% - 0.4rem); /* 减去左右 padding */
|
||||
margin-top: .2rem; /* 增加上边距 */
|
||||
padding: .1rem .2rem;
|
||||
text-align: center;
|
||||
border-radius: .1rem;
|
||||
font-size: .2rem;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 0.2rem;
|
||||
right: 0.2rem;
|
||||
bottom: 0.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
f/web-kboss/src/views/H5/images/calculateBanner.jpg
Normal file
BIN
f/web-kboss/src/views/H5/images/calculateBanner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
f/web-kboss/src/views/H5/images/image.png
Normal file
BIN
f/web-kboss/src/views/H5/images/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
f/web-kboss/src/views/H5/images/keyueBanner.png
Normal file
BIN
f/web-kboss/src/views/H5/images/keyueBanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
BIN
f/web-kboss/src/views/H5/images/netBanner.jpg
Normal file
BIN
f/web-kboss/src/views/H5/images/netBanner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
f/web-kboss/src/views/H5/images/netDetails/1.png
Normal file
BIN
f/web-kboss/src/views/H5/images/netDetails/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
f/web-kboss/src/views/H5/images/netDetails/2.png
Normal file
BIN
f/web-kboss/src/views/H5/images/netDetails/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
f/web-kboss/src/views/H5/images/netDetails/3.png
Normal file
BIN
f/web-kboss/src/views/H5/images/netDetails/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
f/web-kboss/src/views/H5/images/netDetails/4.png
Normal file
BIN
f/web-kboss/src/views/H5/images/netDetails/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
f/web-kboss/src/views/H5/images/netDetails/5.png
Normal file
BIN
f/web-kboss/src/views/H5/images/netDetails/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
f/web-kboss/src/views/H5/images/netDetails/6.png
Normal file
BIN
f/web-kboss/src/views/H5/images/netDetails/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
f/web-kboss/src/views/H5/images/netDetails/7.png
Normal file
BIN
f/web-kboss/src/views/H5/images/netDetails/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
f/web-kboss/src/views/H5/images/scene.jpg
Normal file
BIN
f/web-kboss/src/views/H5/images/scene.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
BIN
f/web-kboss/src/views/H5/images/use.jpg
Normal file
BIN
f/web-kboss/src/views/H5/images/use.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
f/web-kboss/src/views/H5/img/img.png
Normal file
BIN
f/web-kboss/src/views/H5/img/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
f/web-kboss/src/views/H5/img/map.png
Normal file
BIN
f/web-kboss/src/views/H5/img/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
f/web-kboss/src/views/H5/img/net/1.png
Normal file
BIN
f/web-kboss/src/views/H5/img/net/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
f/web-kboss/src/views/H5/img/net/2.png
Normal file
BIN
f/web-kboss/src/views/H5/img/net/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
f/web-kboss/src/views/H5/img/net/3.png
Normal file
BIN
f/web-kboss/src/views/H5/img/net/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
f/web-kboss/src/views/H5/img/net/4.png
Normal file
BIN
f/web-kboss/src/views/H5/img/net/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
f/web-kboss/src/views/H5/img/suan/1.png
Normal file
BIN
f/web-kboss/src/views/H5/img/suan/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
f/web-kboss/src/views/H5/img/suan/2.png
Normal file
BIN
f/web-kboss/src/views/H5/img/suan/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
f/web-kboss/src/views/H5/img/suan/3.png
Normal file
BIN
f/web-kboss/src/views/H5/img/suan/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
f/web-kboss/src/views/H5/img/suan/4.png
Normal file
BIN
f/web-kboss/src/views/H5/img/suan/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
f/web-kboss/src/views/H5/img/suan/5.png
Normal file
BIN
f/web-kboss/src/views/H5/img/suan/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
f/web-kboss/src/views/H5/img/suanBg.png
Normal file
BIN
f/web-kboss/src/views/H5/img/suanBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
f/web-kboss/src/views/H5/img/tiyanBg.png
Normal file
BIN
f/web-kboss/src/views/H5/img/tiyanBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
@ -164,7 +164,7 @@
|
||||
margin-top: 0.15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.243rem;
|
||||
font-size: 0.26rem;
|
||||
/* 增大35%: .18rem * 1.35 = .243rem */
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
|
||||
@ -191,7 +191,7 @@
|
||||
margin-top: .15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .243rem; /* 增大35%: .18rem * 1.35 = .243rem */
|
||||
font-size: .26rem; /* 增大35%: .18rem * 1.35 = .243rem */
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
.journey-box .content .item-box .advantage-list .advantage-item .advantage-name,
|
||||
.latitude-box .content .item-box .advantage-list .advantage-item .advantage-name {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
font-size: 0.2rem;
|
||||
margin-right: 0.05rem;
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
|
||||
.advantage-name {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
font-size: .2rem;
|
||||
margin-right: 0.05rem;
|
||||
|
||||
@ -63,8 +63,11 @@
|
||||
</div>
|
||||
<!-- 立即咨询 -->
|
||||
<div class="item-btn">
|
||||
<div class="btn" @click="openConsultDialog(product, thrMenu)">
|
||||
<!-- <div class="btn" @click="openConsultDialog(product, thrMenu)">
|
||||
立即咨询
|
||||
</div> -->
|
||||
<div class="btn" @click="goToDetail(product.id)">
|
||||
查看详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,27 +75,13 @@
|
||||
</template>
|
||||
</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 { reqNavList } from '@/api/H5/index'
|
||||
import ProductConsultDialog from '../H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
export default {
|
||||
components: {
|
||||
ProductConsultDialog,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
@ -132,7 +121,16 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到详情页
|
||||
goToDetail(productId) {
|
||||
// 使用路由跳转到详情页，携带productId作为参数
|
||||
this.$router.push({
|
||||
path: '/h5HomePage/netDetail',
|
||||
query: {
|
||||
id: productId
|
||||
}
|
||||
})
|
||||
},
|
||||
// 处理搜索
|
||||
handleSearch() {
|
||||
this.isSearching = !!this.searchValue.trim()
|
||||
@ -156,59 +154,6 @@ export default {
|
||||
selectSupplier(index) {
|
||||
this.activeSupplierIndex = index
|
||||
},
|
||||
|
||||
// 打开咨询弹窗
|
||||
openConsultDialog(product, category) {
|
||||
this.currentProduct = product
|
||||
this.currentCategory = category
|
||||
|
||||
// 设置咨询表单的预填内容
|
||||
this.consultFormData = {
|
||||
...this.consultFormData,
|
||||
content: `我想咨询关于【${product.name}】的产品信息\n产品分类：算力网络`
|
||||
}
|
||||
|
||||
this.showConsultDialog = true
|
||||
},
|
||||
|
||||
// 提交咨询API
|
||||
async submitConsultApi(data) {
|
||||
// 如果有额外的产品信息，可以添加到提交数据中
|
||||
const submitData = {
|
||||
...data,
|
||||
product_name: this.currentProduct?.name || '',
|
||||
product_description: this.currentProduct?.description || '',
|
||||
product_label: '算力网络',
|
||||
product_category: this.currentCategory?.thrTitle || '',
|
||||
supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
|
||||
page_type: 'product_list'
|
||||
}
|
||||
|
||||
return await reqProductConsult(submitData)
|
||||
},
|
||||
|
||||
// 咨询成功回调
|
||||
handleConsultSuccess(response) {
|
||||
console.log('咨询提交成功:', response)
|
||||
// 显示成功提示
|
||||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||||
},
|
||||
|
||||
// 弹窗关闭回调
|
||||
handleDialogClose() {
|
||||
this.currentProduct = null
|
||||
this.currentCategory = null
|
||||
// 重置表单数据
|
||||
this.consultFormData = {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
573
f/web-kboss/src/views/H5/netDetails/index.vue
Normal file
573
f/web-kboss/src/views/H5/netDetails/index.vue
Normal file
@ -0,0 +1,573 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="banner">
|
||||
<!-- 介绍 -->
|
||||
<div class="introduce">
|
||||
<div class="title">
|
||||
<span>{{ productList.title }}</span>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<div class="details">
|
||||
<span>{{ productList.description }}</span>
|
||||
</div>
|
||||
<div class="btn" @click="openConsultDialog">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据 -->
|
||||
<div class="data">
|
||||
<!-- 优势 -->
|
||||
<div class="advantage">
|
||||
<div class="title">
|
||||
产品<span class="color">优势</span>
|
||||
</div>
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-list">
|
||||
<!-- 优势项 -->
|
||||
<div class="advantage-item" v-for="(item, index) in productList.adList" :key="index">
|
||||
<div class="icon">
|
||||
<img :src="item.img ? item.img : ''" alt="">
|
||||
</div>
|
||||
<!-- 描述 -->
|
||||
<div class="advantage-desc">
|
||||
<span class="desc-title">{{ item.title }}</span>
|
||||
<span class="desc-details">{{ item.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 功能 -->
|
||||
<div class="function">
|
||||
<div class="title">
|
||||
产品<span class="color">功能</span>
|
||||
</div>
|
||||
<!-- 功能列表 -->
|
||||
<div class="function-list" v-for="(group, groupIndex) in productList.useList" :key="group.id || groupIndex">
|
||||
<!-- 功能项 -->
|
||||
<div class="function-box" v-for="(item, itemIndex) in group.content" :key="item.id">
|
||||
<!-- 图标 -->
|
||||
<div class="function-icon">
|
||||
<img :src="getFunctionIcon(itemIndex)" alt="">
|
||||
</div>
|
||||
<!-- 描述 -->
|
||||
<div class="function-desc">
|
||||
<span class="desc-title">{{ item.title }}</span>
|
||||
<span class="desc-details">{{ item.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 场景 -->
|
||||
<div class="scene" v-if="productList.applicationList && productList.applicationList.length > 0">
|
||||
<div class="title">
|
||||
产品<span class="color">场景</span>
|
||||
</div>
|
||||
<!-- 场景列表 -->
|
||||
<div class="scene-list">
|
||||
<!-- 场景切换 -->
|
||||
<div class="scene-switch">
|
||||
<div
|
||||
class="scene-item"
|
||||
v-for="(scene, index) in productList.applicationList"
|
||||
:key="scene.id"
|
||||
:class="{ active: activeSceneIndex === index }"
|
||||
@click="switchScene(index)"
|
||||
>
|
||||
{{ scene.memuName }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 场景描述 -->
|
||||
<div class="scene-desc">
|
||||
<!-- 上数据 -->
|
||||
<div class="top" v-if="currentScene">
|
||||
<!-- 标题 -->
|
||||
<div class="top-tit">
|
||||
{{ currentScene.title_r }}
|
||||
</div>
|
||||
<!-- 描述 -->
|
||||
<div class="top-desc">
|
||||
{{ currentScene.description_r }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下数据 -->
|
||||
<div class="bottom" v-if="currentScene && currentScene.provide">
|
||||
<div class="bottom-item" v-for="(provideItem, index) in currentScene.provide" :key="index">
|
||||
<!-- 标题 -->
|
||||
<div class="bottom-tit">
|
||||
{{ provideItem.title }}
|
||||
</div>
|
||||
<!-- 描述 -->
|
||||
<div class="bottom-desc">
|
||||
{{ provideItem.content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品咨询弹窗 -->
|
||||
<ProductConsultDialog
|
||||
v-if="showConsultDialog"
|
||||
:visible.sync="showConsultDialog"
|
||||
:platform-name="platformName"
|
||||
:qr-code="qrCode"
|
||||
:default-form-data="consultFormData"
|
||||
:submit-api="submitConsultApi"
|
||||
@success="handleConsultSuccess"
|
||||
@close="handleDialogClose"
|
||||
/>
|
||||
|
||||
<!-- 底部 -->
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqProductDetail, reqProductConsult } from '@/api/H5/index'
|
||||
import Footer from '../components/footer/footer.vue';
|
||||
import ProductConsultDialog from '../components/H5_dialog/index.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Footer,
|
||||
ProductConsultDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
productList: {},
|
||||
activeSceneIndex: 0, // 修改为索引控制
|
||||
|
||||
// 咨询弹窗相关
|
||||
showConsultDialog: false,
|
||||
platformName: '产品详情页',
|
||||
qrCode: '',
|
||||
consultFormData: {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 计算所有功能项的图标数组
|
||||
functionIcons() {
|
||||
const icons = [
|
||||
require('../images/netDetails/1.png'),
|
||||
require('../images/netDetails/2.png'),
|
||||
require('../images/netDetails/3.png'),
|
||||
require('../images/netDetails/4.png'),
|
||||
require('../images/netDetails/5.png'),
|
||||
require('../images/netDetails/6.png'),
|
||||
require('../images/netDetails/7.png'),
|
||||
];
|
||||
return icons;
|
||||
},
|
||||
|
||||
// 当前场景
|
||||
currentScene() {
|
||||
if (this.productList.applicationList && this.productList.applicationList.length > 0) {
|
||||
return this.productList.applicationList[this.activeSceneIndex];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 获取id
|
||||
this.id = this.$route.query.id
|
||||
console.log('ID:', this.id)
|
||||
this.getProductList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取产品列表
|
||||
async getProductList() {
|
||||
const res = await reqProductDetail({ id: this.id })
|
||||
console.log('产品详情是', res)
|
||||
if (res.status === true) {
|
||||
this.productList = res.data
|
||||
// 如果有场景数据，默认显示第一个
|
||||
if (this.productList.applicationList && this.productList.applicationList.length > 0) {
|
||||
this.activeSceneIndex = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 根据索引获取功能图标
|
||||
getFunctionIcon(index) {
|
||||
// 使用模运算循环使用图标
|
||||
return this.functionIcons[index % this.functionIcons.length];
|
||||
},
|
||||
|
||||
// 切换场景
|
||||
switchScene(index) {
|
||||
this.activeSceneIndex = index;
|
||||
},
|
||||
|
||||
// 打开咨询弹窗
|
||||
openConsultDialog() {
|
||||
// 准备咨询内容
|
||||
let content = `我想咨询关于【${this.productList.title || '产品'}】的详细信息`
|
||||
|
||||
// 如果有当前场景，添加到咨询内容中
|
||||
if (this.currentScene) {
|
||||
content += `\n\n当前查看的应用场景：${this.currentScene.memuName}`
|
||||
if (this.currentScene.title_r) {
|
||||
content += `\n场景标题：${this.currentScene.title_r}`
|
||||
}
|
||||
}
|
||||
|
||||
// 如果有产品描述，添加到咨询内容中
|
||||
if (this.productList.description) {
|
||||
content += `\n\n产品描述：${this.productList.description}`
|
||||
}
|
||||
|
||||
// 设置咨询表单的预填内容
|
||||
this.consultFormData = {
|
||||
...this.consultFormData,
|
||||
content: content
|
||||
}
|
||||
|
||||
this.showConsultDialog = true
|
||||
},
|
||||
|
||||
// 提交咨询API
|
||||
async submitConsultApi(data) {
|
||||
// 构建提交数据
|
||||
const submitData = {
|
||||
...data,
|
||||
product_id: this.id,
|
||||
product_title: this.productList.title || '',
|
||||
product_description: this.productList.description || '',
|
||||
product_advantages: this.productList.adList ? this.productList.adList.length : 0,
|
||||
product_features: this.productList.useList ? this.productList.useList.length : 0,
|
||||
current_scene: this.currentScene?.memuName || '',
|
||||
current_scene_title: this.currentScene?.title_r || '',
|
||||
consult_source: 'product_detail_banner',
|
||||
page_type: 'product_detail_h5',
|
||||
page_url: window.location.href
|
||||
}
|
||||
|
||||
return await reqProductConsult(submitData)
|
||||
},
|
||||
|
||||
// 咨询成功回调
|
||||
handleConsultSuccess(response) {
|
||||
console.log('咨询提交成功:', response)
|
||||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||||
},
|
||||
|
||||
// 弹窗关闭回调
|
||||
handleDialogClose() {
|
||||
// 重置表单数据（保留部分信息）
|
||||
this.consultFormData = {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.banner {
|
||||
height: 4.2rem;
|
||||
background: url(../images/netBanner.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.introduce {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 14%;
|
||||
transform: translate(-90%);
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 0.32rem;
|
||||
/* 修改为0.32rem */
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: 0.18rem;
|
||||
/* 修改为0.18rem */
|
||||
color: #8890ab;
|
||||
line-height: 2 !important;
|
||||
margin-top: .1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: .1rem;
|
||||
width: 2rem;
|
||||
height: .4rem;
|
||||
border-radius: .1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: .2rem;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
color: #fff;
|
||||
cursor: pointer; /* 添加手型光标 */
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: .2rem 0;
|
||||
font-size: 0.32rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
|
||||
.color {
|
||||
background: linear-gradient(to right, #0066FF, #66CCFF);
|
||||
/* 蓝到浅蓝渐变 */
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.data {
|
||||
background: linear-gradient(to bottom, #fff, #f2f6fb, #fff);
|
||||
}
|
||||
|
||||
// 优势
|
||||
.advantage-list {
|
||||
padding: 0 .2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.advantage-item {
|
||||
background: linear-gradient(to bottom, #ecf0fd, #fff);
|
||||
border-radius: .12rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 48%;
|
||||
padding: .2rem 0;
|
||||
padding-left: .1rem;
|
||||
margin-bottom: .1rem;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 0;
|
||||
padding-left: .1rem;
|
||||
img {
|
||||
width: .4rem;
|
||||
height: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.advantage-desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: .2rem;
|
||||
|
||||
.desc-title {
|
||||
font-size: .18rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
.desc-details {
|
||||
font-size: .14rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 功能
|
||||
.function {
|
||||
.title {
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.function-list {
|
||||
width: 100%;
|
||||
padding: 0 .2rem;
|
||||
display: flex;
|
||||
// flex-wrap: wrap;
|
||||
|
||||
.function-group {
|
||||
margin-bottom: .3rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.function-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 33.33%;
|
||||
/* 每行显示3个 */
|
||||
margin-bottom: .2rem;
|
||||
padding: .15rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
// 图标
|
||||
.function-icon {
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: .1rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// 描述
|
||||
.function-desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.desc-title {
|
||||
font-size: .18rem;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: .08rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.desc-details {
|
||||
font-size: .14rem;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 场景
|
||||
.scene {
|
||||
.scene-switch {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scene-item {
|
||||
padding: .2rem 0;
|
||||
font-size: .2rem;
|
||||
color: #000;
|
||||
transition: all 0.3s ease;
|
||||
width: 34%;
|
||||
text-align: center;
|
||||
cursor: pointer; /* 添加手型光标 */
|
||||
|
||||
&.active {
|
||||
border-bottom: .025rem solid #275AFF;
|
||||
color: #275AFF;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.scene-list {
|
||||
background: url('../images/scene.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
min-height: 4.5rem;
|
||||
border-radius: .12rem;
|
||||
overflow: hidden;
|
||||
margin: 0 .2rem;
|
||||
}
|
||||
|
||||
.scene-desc {
|
||||
padding: .3rem;
|
||||
|
||||
.top {
|
||||
padding-bottom: .2rem;
|
||||
border-bottom: .01rem solid rgba(216, 216, 216, 0.5);
|
||||
margin-bottom: .2rem;
|
||||
|
||||
.top-tit {
|
||||
font-weight: 600;
|
||||
font-size: .22rem;
|
||||
color: #000;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
.top-desc {
|
||||
font-size: .16rem;
|
||||
color: #6d7696;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.bottom-item {
|
||||
width: 50% !important;
|
||||
padding: .15rem 0;
|
||||
// padding-right: .15rem;
|
||||
// box-sizing: border-box;
|
||||
|
||||
.bottom-tit {
|
||||
font-weight: 600;
|
||||
font-size: .18rem;
|
||||
color: #000;
|
||||
margin-bottom: .05rem;
|
||||
}
|
||||
|
||||
.bottom-desc {
|
||||
font-size: .16rem;
|
||||
color: #6d7696;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式调整
|
||||
@media (max-width: 768px) {
|
||||
.function-box {
|
||||
width: 50% !important; /* 小屏幕每行显示2个 */
|
||||
}
|
||||
|
||||
.scene-desc .bottom .bottom-item {
|
||||
width: 100% !important; /* 小屏幕每行显示1个 */
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
f/web-kboss/src/views/H5/newImg/banner.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
BIN
f/web-kboss/src/views/H5/newImg/baseBg.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/baseBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
BIN
f/web-kboss/src/views/H5/newImg/computing.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/computing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
f/web-kboss/src/views/H5/newImg/computingActive.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/computingActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
f/web-kboss/src/views/H5/newImg/container.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/container.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
f/web-kboss/src/views/H5/newImg/containerActive.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/containerActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
f/web-kboss/src/views/H5/newImg/cun.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/cun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
f/web-kboss/src/views/H5/newImg/cunActive.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/cunActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
f/web-kboss/src/views/H5/newImg/database.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/database.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
f/web-kboss/src/views/H5/newImg/databaseActive.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/databaseActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
f/web-kboss/src/views/H5/newImg/footerLogo.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/footerLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
f/web-kboss/src/views/H5/newImg/hotBg.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/hotBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
f/web-kboss/src/views/H5/newImg/map.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 499 KiB |
BIN
f/web-kboss/src/views/H5/newImg/netBg.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/netBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
f/web-kboss/src/views/H5/newImg/niu.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/niu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
f/web-kboss/src/views/H5/newImg/niuActive.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/niuActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
f/web-kboss/src/views/H5/newImg/rescourceBg.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/rescourceBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
f/web-kboss/src/views/H5/newImg/tag.png
Normal file
BIN
f/web-kboss/src/views/H5/newImg/tag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
@ -135,97 +135,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
<!-- footer部分 -->
|
||||
<div class="footer">
|
||||
<div class="footer-content">
|
||||
<!-- 顶部信息 -->
|
||||
|
||||
<div class="footer-center">
|
||||
<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>
|
||||
<div class="center">
|
||||
<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 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 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>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- 产品咨询弹窗 -->
|
||||
<ProductConsultDialog :visible.sync="showConsultDialog" :platform-name="platformName" :qr-code="qrCode"
|
||||
:default-form-data="consultFormData" :submit-api="submitConsultApi" @success="handleConsultSuccess"
|
||||
@ -236,13 +147,15 @@
|
||||
<script>
|
||||
import { reqHotProduct } from '@/api/H5/index.js'
|
||||
import { getLogoAPI } from "@/api/login"
|
||||
import ProductConsultDialog from '../H5_dialog/index.vue'
|
||||
import ProductConsultDialog from '../components/H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
import Footer from '../components/footer/footer.vue';
|
||||
|
||||
export default {
|
||||
name: 'MainPage',
|
||||
components: {
|
||||
ProductConsultDialog
|
||||
ProductConsultDialog,
|
||||
Footer
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
@ -8,12 +8,7 @@
|
||||
<div class="search">
|
||||
<div class="search-box">
|
||||
<div class="input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入产品名称"
|
||||
v-model="searchValue"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<input type="text" placeholder="请输入产品名称" v-model="searchValue" @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="search-btn" @click="handleSearch">
|
||||
搜索
|
||||
@ -50,8 +45,8 @@
|
||||
</div>
|
||||
<!-- 立即咨询 -->
|
||||
<div class="item-btn">
|
||||
<div class="btn" @click="openConsultDialog(product, thrMenu)">
|
||||
立即咨询
|
||||
<div class="btn" @click="goToDetail(product)">
|
||||
查看详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -59,45 +54,19 @@
|
||||
</template>
|
||||
</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 { reqNavList } from '@/api/H5/index'
|
||||
import ProductConsultDialog from '../H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProductConsultDialog
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
cloudData: {},
|
||||
activeSupplierIndex: 0, // 默认选中第一个供应商
|
||||
searchValue: '', // 搜索关键词
|
||||
isSearching: false, // 是否正在搜索
|
||||
|
||||
// 咨询弹窗相关
|
||||
showConsultDialog: false,
|
||||
platformName: '开元云',
|
||||
qrCode: '',
|
||||
consultFormData: {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
},
|
||||
currentProduct: null,
|
||||
currentCategory: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -139,57 +108,18 @@ export default {
|
||||
this.activeSupplierIndex = index
|
||||
},
|
||||
|
||||
// 打开咨询弹窗
|
||||
openConsultDialog(product, category) {
|
||||
this.currentProduct = product
|
||||
this.currentCategory = category
|
||||
|
||||
// 设置咨询表单的预填内容
|
||||
this.consultFormData = {
|
||||
...this.consultFormData,
|
||||
content: `我想咨询关于【${product.name}】的产品信息\n产品分类：${category.thrTitle}\n产品类型：AI应用`
|
||||
// 跳转到详情页，传入当前产品对象
|
||||
goToDetail(product) {
|
||||
if (product && product.name === '灵医智能体') {
|
||||
this.$router.push({
|
||||
path: '/h5HomePage/useDetail',
|
||||
})
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: '/h5HomePage/service',
|
||||
})
|
||||
}
|
||||
|
||||
this.showConsultDialog = true
|
||||
},
|
||||
|
||||
// 提交咨询API
|
||||
async submitConsultApi(data) {
|
||||
// 如果有额外的产品信息，可以添加到提交数据中
|
||||
const submitData = {
|
||||
...data,
|
||||
product_name: this.currentProduct?.name || '',
|
||||
product_category: this.currentCategory?.thrTitle || '',
|
||||
product_label: 'AI应用',
|
||||
supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
|
||||
page_type: 'product_list'
|
||||
}
|
||||
|
||||
return await reqProductConsult(submitData)
|
||||
},
|
||||
|
||||
// 咨询成功回调
|
||||
handleConsultSuccess(response) {
|
||||
console.log('咨询提交成功:', response)
|
||||
// 显示成功提示
|
||||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||||
},
|
||||
|
||||
// 弹窗关闭回调
|
||||
handleDialogClose() {
|
||||
this.currentProduct = null
|
||||
this.currentCategory = null
|
||||
// 重置表单数据
|
||||
this.consultFormData = {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
525
f/web-kboss/src/views/H5/useDetails/index.vue
Normal file
525
f/web-kboss/src/views/H5/useDetails/index.vue
Normal file
@ -0,0 +1,525 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<div class="banner">
|
||||
<div class="title-box">
|
||||
<div class="top-title">
|
||||
灵医<span class="color">智能体</span>
|
||||
</div>
|
||||
<div class="details">
|
||||
持续丰富能⼒ ｜ 赋能合作伙伴⽣产⼒升级
|
||||
</div>
|
||||
<div class="btn" @click="openConsultDialog('banner', '秒接DeepSeek，立即咨询', null)">
|
||||
秒接DeepSeek，立即咨询
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能体医疗行业综合解决方案 -->
|
||||
<div class="solution">
|
||||
<div class="title">
|
||||
智能体医疗行业综合解决方案
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div v-for="(item, index) in tabList" :key="index" class="menu-box"
|
||||
:class="{ active: activeTab === index }" @click="activeTab = index">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content">
|
||||
<!-- 内容区域 -->
|
||||
<div class="tab-content">
|
||||
<h2>{{ currentTab.title }}</h2>
|
||||
<p>{{ currentTab.description }}</p>
|
||||
|
||||
<div class="tab">
|
||||
<div v-for="(feature, idx) in currentTab.features" :key="idx" class="item">
|
||||
{{ feature }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-btn" @click="openConsultDialog('solution_tab', currentTab.title, currentTab)">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能体 -->
|
||||
<div class="intelligent">
|
||||
<div class="title">
|
||||
智能体
|
||||
</div>
|
||||
|
||||
<!-- 智能体列表 -->
|
||||
<div class="intelligent-content">
|
||||
<div v-for="(agent, index) in agentList" :key="index" class="intelligent-item">
|
||||
<div class="item-tit">
|
||||
{{ agent.title }}
|
||||
</div>
|
||||
<div class="item-content">
|
||||
{{ agent.description }}
|
||||
</div>
|
||||
<div class="item-function">
|
||||
{{ agent.tag }}
|
||||
</div>
|
||||
<div class="item-btn" @click="openConsultDialog('agent_item', agent.title, agent)">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品咨询弹窗 -->
|
||||
<ProductConsultDialog
|
||||
v-if="showConsultDialog"
|
||||
:visible.sync="showConsultDialog"
|
||||
:platform-name="platformName"
|
||||
:qr-code="qrCode"
|
||||
:default-form-data="consultFormData"
|
||||
:submit-api="submitConsultApi"
|
||||
@success="handleConsultSuccess"
|
||||
@close="handleDialogClose"
|
||||
/>
|
||||
|
||||
<!-- 底部 -->
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from '../components/footer/footer.vue';
|
||||
import ProductConsultDialog from '../components/H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Footer,
|
||||
ProductConsultDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
tabList: [
|
||||
{
|
||||
title: '诊前就医助手',
|
||||
description: '患者就诊前，可随时发起咨询。既能描述症状，获取专业回答，又能了解挂号、候诊等就医流程。系统通过多轮深入问诊，掌握病情信息、过往病史、生活习惯等细节，进而精准推荐适配的医院科室，可支持推荐对应医生，问诊结束后，可自动生成门诊病历，助力患者高效就医。',
|
||||
features: [
|
||||
'增强医患沟通效果',
|
||||
'优化报告生成流程',
|
||||
'提高工作效率'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '健康管家',
|
||||
description: '在互联网医院、健康管理、患者管理等场景下，为患者提供一站式健康管家服务。通过 APP、小程序或 H5 页面，患者只需在一个对话框，就能发现健康咨询、药品咨询、检查检验报告解读、皮肤病图片咨询、症状咨询等各类健康问题。大模型结合专业知识库，迅速给出专业解答，让健康关怀触手可及。',
|
||||
features: [
|
||||
'一站式健康咨询服务',
|
||||
'快速专业解答'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '报告解读与生成',
|
||||
description: '面向基层医院或体检机构，能够为医生提供检查检验、体检报告的专业解读服务，助力基层医生迅速、精准地向患者阐释异常指标，科学评估疾病风险，高效开展健康管理工作。面向医院体检科与体检机构，辅助医生快速生成体检报告，优化工作流程，极大提升体检报告输出效率。',
|
||||
features: [
|
||||
'增强医患沟通效果',
|
||||
'优化报告生成流程',
|
||||
'提高工作效率'
|
||||
]
|
||||
}
|
||||
],
|
||||
agentList: [
|
||||
{
|
||||
title: '医学视觉溯源',
|
||||
description: '识别各类医学影像图片，自动圈出病灶清晰边际',
|
||||
tag: '精准识别各类医学影像/可视化边界参考/辅助诊断'
|
||||
},
|
||||
{
|
||||
title: '中医舌诊/面诊',
|
||||
description: 'AI中医助手支持舌象面部分析',
|
||||
tag: '拓展中医新场景 / 提供日常调理建议 / 提供药物调理建议'
|
||||
},
|
||||
{
|
||||
title: '健康科普',
|
||||
description: '权威医学知识，有问必答',
|
||||
tag: '深入理解内容 / 检索权威医学知识 / 大模型生成答案 / 结果证据溯源'
|
||||
},
|
||||
{
|
||||
title: '医学报告解读',
|
||||
description: '多类型多格式，高精准解读',
|
||||
tag: '解读准确度高 / 解读范围覆盖多类型报告'
|
||||
},
|
||||
{
|
||||
title: '药品咨询',
|
||||
description: '海量药品说明书，答疑解难',
|
||||
tag: '海量药品说明书 / 药品维度覆盖全面 / 大模型一对一问答'
|
||||
},
|
||||
{
|
||||
title: '皮肤病咨询',
|
||||
description: '覆盖百余种皮肤病，大模型生成诊断建议',
|
||||
tag: '全身皮肤拍照检测 / 皮肤类疾病可涵盖95%以上 / 皮肤图片医学解读'
|
||||
},
|
||||
{
|
||||
title: '分导诊',
|
||||
description: '精准推荐就诊科室，科室百分百覆盖',
|
||||
tag: '多轮对话收集患者主诉 / 科室推荐准确率超95% / 大模型人机对话'
|
||||
},
|
||||
{
|
||||
title: '预问诊',
|
||||
description: '多轮问诊生成病历，病历生成可用率超95%',
|
||||
tag: '多轮对话收集患者主诉 / 病历生成可用率超95% / 大模型人机对话'
|
||||
},
|
||||
{
|
||||
title: '医疗知识库问答',
|
||||
description: '海量数据资源，问答准确率业内领先',
|
||||
tag: '检索文档数量上限超1万 / 医学问答准确率业内领先 / 兼容不同格式'
|
||||
},
|
||||
{
|
||||
title: '临床辅助决策',
|
||||
description: '根据病情推荐诊断，诊断准确率超90%',
|
||||
tag: '推荐内容有据可循 / 诊断覆盖全面 / 对话模式一问一答'
|
||||
},
|
||||
{
|
||||
title: '症状自诊',
|
||||
description: '病情自查自测，实时就医指导',
|
||||
tag: '遵循医学诊疗规范 / 病情自查自测 / 实时就医指导 / 健康问题覆盖全面'
|
||||
}
|
||||
],
|
||||
|
||||
// 咨询弹窗相关
|
||||
showConsultDialog: false,
|
||||
platformName: '灵医智能体',
|
||||
qrCode: '',
|
||||
consultFormData: {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
},
|
||||
currentConsultData: null,
|
||||
consultSource: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentTab() {
|
||||
return this.tabList[this.activeTab];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开咨询弹窗
|
||||
openConsultDialog(source, title, data) {
|
||||
this.currentConsultData = data
|
||||
this.consultSource = source
|
||||
|
||||
// 根据来源设置不同的咨询内容
|
||||
let content = ''
|
||||
let extraInfo = ''
|
||||
|
||||
if (source === 'banner') {
|
||||
// 从banner咨询
|
||||
content = `我想咨询关于【${title}】的详细信息`
|
||||
extraInfo = '产品：灵医智能体'
|
||||
} else if (source === 'solution_tab') {
|
||||
// 从解决方案标签咨询
|
||||
content = `我想咨询关于【${title}】的解决方案`
|
||||
if (data && data.description) {
|
||||
extraInfo = `方案描述：${data.description.substring(0, 100)}${data.description.length > 100 ? '...' : ''}`
|
||||
}
|
||||
if (data && data.features) {
|
||||
extraInfo += `\n核心功能：${data.features.join('、')}`
|
||||
}
|
||||
} else if (source === 'agent_item') {
|
||||
// 从智能体项目咨询
|
||||
content = `我想咨询关于【${title}】的智能体功能`
|
||||
if (data && data.description) {
|
||||
extraInfo = `功能描述：${data.description}`
|
||||
}
|
||||
if (data && data.tag) {
|
||||
extraInfo += `\n功能标签：${data.tag}`
|
||||
}
|
||||
}
|
||||
|
||||
// 设置咨询表单的预填内容
|
||||
this.consultFormData = {
|
||||
...this.consultFormData,
|
||||
content: `${content}${extraInfo ? `\n\n${extraInfo}` : ''}`
|
||||
}
|
||||
|
||||
this.showConsultDialog = true
|
||||
},
|
||||
|
||||
// 提交咨询API
|
||||
async submitConsultApi(data) {
|
||||
// 构建提交数据
|
||||
const submitData = {
|
||||
...data,
|
||||
consult_source: this.consultSource || '',
|
||||
consult_title: this.currentConsultData?.title || '灵医智能体',
|
||||
consult_type: this.getConsultType(),
|
||||
agent_count: this.agentList.length,
|
||||
solution_count: this.tabList.length,
|
||||
page_type: 'medical_agent_h5',
|
||||
page_url: window.location.href
|
||||
}
|
||||
|
||||
// 根据咨询来源添加额外信息
|
||||
if (this.consultSource === 'solution_tab' && this.currentConsultData) {
|
||||
submitData.solution_title = this.currentConsultData.title
|
||||
submitData.solution_features = this.currentConsultData.features?.join(',') || ''
|
||||
} else if (this.consultSource === 'agent_item' && this.currentConsultData) {
|
||||
submitData.agent_title = this.currentConsultData.title
|
||||
submitData.agent_description = this.currentConsultData.description
|
||||
submitData.agent_tag = this.currentConsultData.tag
|
||||
}
|
||||
|
||||
return await reqProductConsult(submitData)
|
||||
},
|
||||
|
||||
// 获取咨询类型
|
||||
getConsultType() {
|
||||
switch (this.consultSource) {
|
||||
case 'banner':
|
||||
return '灵医智能体产品咨询'
|
||||
case 'solution_tab':
|
||||
return '医疗解决方案咨询'
|
||||
case 'agent_item':
|
||||
return '智能体功能咨询'
|
||||
default:
|
||||
return '产品咨询'
|
||||
}
|
||||
},
|
||||
|
||||
// 咨询成功回调
|
||||
handleConsultSuccess(response) {
|
||||
console.log('咨询提交成功:', response)
|
||||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||||
},
|
||||
|
||||
// 弹窗关闭回调
|
||||
handleDialogClose() {
|
||||
this.currentConsultData = null
|
||||
this.consultSource = ''
|
||||
// 重置表单数据
|
||||
this.consultFormData = {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
background-color: #F6F8FD;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 4.2rem;
|
||||
background: url('../images/use.jpg');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title-box {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: .5rem;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
font-size: 0.4rem;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: 0.18rem;
|
||||
color: #8890ab;
|
||||
line-height: 2 !important;
|
||||
margin-top: .1rem;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
width: 2.8rem;
|
||||
font-size: .2rem;
|
||||
padding: .1rem .2rem;
|
||||
border-radius: .2rem;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-size: .34rem;
|
||||
font-weight: 500;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
.color {
|
||||
color: rgb(0, 188, 188);
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: .2rem;
|
||||
|
||||
.menu-box {
|
||||
padding: 0.1rem 0.2rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.3rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.2rem;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgb(0, 188, 188);
|
||||
color: #fff;
|
||||
border-color: rgb(0, 188, 188);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
padding: .2rem .4rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
h2 {
|
||||
color: #333;
|
||||
font-size: 0.28rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 0.18rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: .04rem;
|
||||
padding: .04rem .08rem;
|
||||
font-size: .14rem;
|
||||
color: #525252;
|
||||
margin-right: .08rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
margin-top: .2rem;
|
||||
border-radius: .75rem;
|
||||
border: .02rem solid #000;
|
||||
font-size: .16rem;
|
||||
color: #1f1f1f;
|
||||
padding: .1rem .26rem;
|
||||
cursor: pointer;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.intelligent-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 .2rem;;
|
||||
margin: 0;
|
||||
|
||||
.intelligent-item {
|
||||
width: 48%;
|
||||
background-color: #fff;
|
||||
border: .01rem solid #e9e9e9;
|
||||
border-radius: .16rem;
|
||||
margin-bottom: .2rem;
|
||||
padding: .2rem;
|
||||
padding-bottom: .7rem;
|
||||
position: relative;
|
||||
.item-tit {
|
||||
font-weight: 500;
|
||||
font-size: .3rem;
|
||||
color: #00bcbc;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
font-weight: 600;
|
||||
font-size: .2rem;
|
||||
color: #1f1f1f;
|
||||
margin-top: .1rem;
|
||||
}
|
||||
|
||||
.item-function {
|
||||
margin: .1rem 0;
|
||||
font-size: .18rem;
|
||||
color: #1f1f1f;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
position: absolute;
|
||||
bottom: .2rem;
|
||||
margin-top: .1rem;
|
||||
border-radius: .08rem;
|
||||
background-color: #1f1f1f;
|
||||
font-size: .2rem;
|
||||
color: #fff;
|
||||
padding: .1rem .14rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
454
f/web-kboss/src/views/H5/useDetails/service.vue
Normal file
454
f/web-kboss/src/views/H5/useDetails/service.vue
Normal file
@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- banner -->
|
||||
<div class="banner">
|
||||
<div class="top">
|
||||
<div class="top-tit">
|
||||
客悦ONE·智能客服
|
||||
</div>
|
||||
<div class="top-desc">
|
||||
智能整合全域沟通路径，精准响应用户需求，实现全旅程服务效能提升。
|
||||
</div>
|
||||
<div class="top-btn" @click="openConsultDialog('banner', '客悦ONE·智能客服')">
|
||||
立即咨询
|
||||
</div>
|
||||
<div class="top-data">
|
||||
<div class="top-data-item">
|
||||
<div class="top-data-item-tit">
|
||||
93%
|
||||
</div>
|
||||
<div class="top-data-item-desc">
|
||||
自助解决率
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-data-item">
|
||||
<div class="top-data-item-tit">
|
||||
1.1s
|
||||
</div>
|
||||
<div class="top-data-item-desc">
|
||||
首字时延
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-data-item">
|
||||
<div class="top-data-item-tit">
|
||||
7*24h
|
||||
</div>
|
||||
<div class="top-data-item-desc">
|
||||
时刻在线
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 全链路用户服务接待 -->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
全链路用户服务接待
|
||||
</div>
|
||||
<!-- 智能服务 -->
|
||||
<div class="service-box">
|
||||
|
||||
<div class="service-item">
|
||||
<div class="item-tit">
|
||||
在线机器人
|
||||
</div>
|
||||
<div class="item-desc">
|
||||
任务对话：拖拽式画布搭建，对话流程清晰，听说想做四步分类，操作顺畅。 多模态问答：融合文字图片，精准识别需求，提供丰富准确答案，提升互动体验。 知识问答：上传知识即问即答，支持自定义风格，兼容多种格式，回答友好多样
|
||||
</div>
|
||||
<div class="item-btn" @click="openConsultDialog('service_robot', '在线机器人')">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<div class="item-tit">
|
||||
在线客服
|
||||
</div>
|
||||
<div class="item-desc">
|
||||
多渠道集成：支持Web/H5、App、第三方渠道一键集成，服务更高效精准。 会话智能分配：支持会话智能分配、管理，实现访客分流和VIP客服专属服务。 服务监控：实时监控数据，掌握服务全流程，优化调配，确保高效精准。
|
||||
免费体验
|
||||
</div>
|
||||
<div class="item-btn" @click="openConsultDialog('service_online', '在线客服')">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<div class="item-tit">
|
||||
联络中心
|
||||
</div>
|
||||
<div class="item-desc">
|
||||
智能路由排队：支持按排队时长、客户等级、技能等级等多种路由排队策略。 呼叫服务数据实时管理：提供坐席、技能组实时监控数据和多维度统计报表。 稳定安全：按需付费，资源弹性扩容；安全稳定，保护用户通信隐私。
|
||||
</div>
|
||||
<div class="item-btn" @click="openConsultDialog('service_contact', '联络中心')">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<div class="item-tit">
|
||||
坐席辅助
|
||||
</div>
|
||||
<div class="item-desc">
|
||||
上下游集成：对接CRM，实时查看客户信息，精准提供个性化服务。 实时智能提示：根据用户咨询的问题和历史沟通信息，自动推送相关知识，助力快速应答。
|
||||
</div>
|
||||
<div class="item-btn" @click="openConsultDialog('service_assist', '坐席辅助')">
|
||||
立即咨询
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 多样化产品方案满足个性化需求 -->
|
||||
<div class="product">
|
||||
<div class="title">
|
||||
多样化产品方案满足个性化需求
|
||||
</div>
|
||||
|
||||
<div class="product-box ">
|
||||
<div class="product-item">
|
||||
<div class="item-img">
|
||||
<img src="https://ky-front-online.cdn.bcebos.com/portal/_next/static/media/saas.0498c023.svg" alt="">
|
||||
</div>
|
||||
<div class="item-tit">
|
||||
SaaS部署
|
||||
</div>
|
||||
<div class="item-desc">
|
||||
<span>按需购买、开箱即用的公有云软件</span>
|
||||
<span>满足不同规模企业的营销、服务需求</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="item-img">
|
||||
<img src="https://ky-front-online.cdn.bcebos.com/portal/_next/static/media/local.02279b8e.svg" alt="">
|
||||
</div>
|
||||
<div class="item-tit">
|
||||
本地部署
|
||||
</div>
|
||||
<div class="item-desc">
|
||||
<span>支持不上云、不出域，可实现局域网极速传输</span>
|
||||
<span>全栈国产化信创适配，支持软硬一体机，合规无忧</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<div class="item-img">
|
||||
<img src="https://ky-front-online.cdn.bcebos.com/portal/_next/static/media/open.a1ee956b.svg" alt="">
|
||||
</div>
|
||||
<div class="item-tit">
|
||||
开放平台
|
||||
</div>
|
||||
<div class="item-desc">
|
||||
<span>开放的API接口，满足复杂业务场景</span>
|
||||
<span>与企业官网、APP、CRM、OA等多种系统对接</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品咨询弹窗 -->
|
||||
<ProductConsultDialog
|
||||
v-if="showConsultDialog"
|
||||
:visible.sync="showConsultDialog"
|
||||
:platform-name="platformName"
|
||||
:qr-code="qrCode"
|
||||
:default-form-data="consultFormData"
|
||||
:submit-api="submitConsultApi"
|
||||
@success="handleConsultSuccess"
|
||||
@close="handleDialogClose"
|
||||
/>
|
||||
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from '../components/footer/footer.vue';
|
||||
import ProductConsultDialog from '../components/H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Footer,
|
||||
ProductConsultDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 咨询弹窗相关
|
||||
showConsultDialog: false,
|
||||
platformName: '客悦ONE·智能客服',
|
||||
qrCode: '',
|
||||
consultFormData: {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
},
|
||||
currentConsultTitle: '',
|
||||
consultSource: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 打开咨询弹窗
|
||||
openConsultDialog(source, title) {
|
||||
this.currentConsultTitle = title
|
||||
this.consultSource = source
|
||||
|
||||
// 根据来源设置不同的咨询内容
|
||||
let content = ''
|
||||
let extraInfo = ''
|
||||
|
||||
if (source === 'banner') {
|
||||
// 从banner咨询
|
||||
content = `我想咨询关于【${title}】的详细信息`
|
||||
extraInfo = '产品介绍：智能整合全域沟通路径，精准响应用户需求，实现全旅程服务效能提升。'
|
||||
extraInfo += '\n产品优势：自助解决率93%、首字时延1.1s、7*24小时时刻在线'
|
||||
} else if (source.startsWith('service_')) {
|
||||
// 从服务项目咨询
|
||||
content = `我想咨询关于【${title}】的功能详情`
|
||||
// 根据具体的服务类型设置额外信息
|
||||
const serviceInfo = {
|
||||
'service_robot': '在线机器人：任务对话、多模态问答、知识问答等功能',
|
||||
'service_online': '在线客服：多渠道集成、会话智能分配、服务监控等功能',
|
||||
'service_contact': '联络中心：智能路由排队、呼叫服务数据实时管理、稳定安全等功能',
|
||||
'service_assist': '坐席辅助：上下游集成、实时智能提示等功能'
|
||||
}
|
||||
extraInfo = serviceInfo[source] || ''
|
||||
}
|
||||
|
||||
// 设置咨询表单的预填内容
|
||||
this.consultFormData = {
|
||||
...this.consultFormData,
|
||||
content: `${content}${extraInfo ? `\n\n${extraInfo}` : ''}`
|
||||
}
|
||||
|
||||
this.showConsultDialog = true
|
||||
},
|
||||
|
||||
// 提交咨询API
|
||||
async submitConsultApi(data) {
|
||||
// 构建提交数据
|
||||
const submitData = {
|
||||
...data,
|
||||
consult_source: this.consultSource || '',
|
||||
consult_title: this.currentConsultTitle || '客悦ONE·智能客服',
|
||||
consult_type: this.getConsultType(),
|
||||
page_type: 'customer_service_h5',
|
||||
page_url: window.location.href,
|
||||
product_key_features: '自助解决率93%,首字时延1.1s,7*24小时在线'
|
||||
}
|
||||
|
||||
return await reqProductConsult(submitData)
|
||||
},
|
||||
|
||||
// 获取咨询类型
|
||||
getConsultType() {
|
||||
switch (this.consultSource) {
|
||||
case 'banner':
|
||||
return '客悦ONE·智能客服产品咨询'
|
||||
case 'service_robot':
|
||||
return '在线机器人咨询'
|
||||
case 'service_online':
|
||||
return '在线客服咨询'
|
||||
case 'service_contact':
|
||||
return '联络中心咨询'
|
||||
case 'service_assist':
|
||||
return '坐席辅助咨询'
|
||||
default:
|
||||
return '智能客服产品咨询'
|
||||
}
|
||||
},
|
||||
|
||||
// 咨询成功回调
|
||||
handleConsultSuccess(response) {
|
||||
console.log('咨询提交成功:', response)
|
||||
this.$message.success('咨询提交成功，我们将尽快联系您！')
|
||||
},
|
||||
|
||||
// 弹窗关闭回调
|
||||
handleDialogClose() {
|
||||
this.currentConsultTitle = ''
|
||||
this.consultSource = ''
|
||||
// 重置表单数据
|
||||
this.consultFormData = {
|
||||
content: '',
|
||||
custom_type: '1',
|
||||
name: '',
|
||||
phone: '',
|
||||
company: '',
|
||||
email: '',
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.banner {
|
||||
background: url('../images/keyueBanner.png');
|
||||
background-size: 100% 100%;
|
||||
height: 4.3rem;
|
||||
position: relative;
|
||||
|
||||
.top {
|
||||
position: absolute;
|
||||
left: 6%;
|
||||
top: 10%;
|
||||
|
||||
.top-tit {
|
||||
color: #091221;
|
||||
font-weight: 600;
|
||||
font-size: .4rem;
|
||||
margin: .2rem 0;
|
||||
}
|
||||
|
||||
.top-desc {
|
||||
color: rgba(9, 18, 33, 0.7);
|
||||
font-size: .2rem;
|
||||
}
|
||||
|
||||
.top-btn {
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
background: #091221;
|
||||
color: #fff;
|
||||
font-size: .16rem;
|
||||
border-radius: .1rem;
|
||||
padding: .15rem 0;
|
||||
margin-top: .2rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.top-data {
|
||||
margin-top: .2rem;
|
||||
display: flex;
|
||||
|
||||
.top-data-item {
|
||||
padding-right: .2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.top-data-item-tit {
|
||||
font-size: .28rem;
|
||||
color: #091221;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top-data-item-desc {
|
||||
font-size: .16rem;
|
||||
color: rgba(9, 18, 33, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #091221;
|
||||
font-weight: 600;
|
||||
font-size: .4rem;
|
||||
text-align: center;
|
||||
margin: .2rem 0;
|
||||
}
|
||||
|
||||
.service-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
.service-item {
|
||||
background: #f1f6fd;
|
||||
width: 48%;
|
||||
margin-bottom: .2rem;
|
||||
border-radius: .2rem;
|
||||
padding: .2rem;
|
||||
position: relative;
|
||||
padding-bottom: .7rem;
|
||||
|
||||
.item-tit {
|
||||
color: #091221;
|
||||
font-size: .28rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: .18rem;
|
||||
color: rgba(9, 18, 33, 0.7);
|
||||
line-height: 1.6;
|
||||
margin: .2rem 0;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
background: #091221;
|
||||
color: #fff;
|
||||
font-size: .2rem;
|
||||
border-radius: .1rem;
|
||||
padding: .15rem 0;
|
||||
position: absolute;
|
||||
bottom: .1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product {
|
||||
.product-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
.product-item {
|
||||
width: 46%;
|
||||
background: #f1f6fd;
|
||||
padding: .1rem .2rem;
|
||||
margin-bottom: .2rem;
|
||||
border-radius: .2rem;
|
||||
.item-img {
|
||||
width: .36rem;
|
||||
height: .36rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-tit {
|
||||
color: #091221;
|
||||
font-size: .28rem;
|
||||
font-weight: bold;
|
||||
margin: .1rem 0;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: .18rem;
|
||||
color: rgba(9, 18, 33, 0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -44,9 +44,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-lcfzjc.62ee97da.png&w=3840&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -57,9 +57,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-zyszmz.47a26b39.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -70,9 +70,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-jkkp.bb333447.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -83,9 +83,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-yxbgjd.1545a7db.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -96,9 +96,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-ypzx.b15e3a64.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -109,9 +109,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-lcfzjc.62ee97da.png&w=3840&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -122,9 +122,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-fdz.2c69db08.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -136,9 +136,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-ywz.9440eb4a.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -149,9 +149,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-zskwd.53def0fb.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -162,9 +162,9 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-lcfzjc.62ee97da.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -175,15 +175,15 @@
|
||||
<span class="btn" @click="openTalk">立即体验</span>
|
||||
</div>
|
||||
<div class="bottonBox">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-zzzz.fe15b749.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
</div>
|
||||
</li>
|
||||
<li class="lastImg">
|
||||
<img
|
||||
<!-- <img
|
||||
src="https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fagent-img-jqqd.a151e54f.png&w=1200&q=75"
|
||||
alt="">
|
||||
alt=""> -->
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
@ -204,26 +204,26 @@ export default Vue.extend({
|
||||
title: "诊前就医助手",
|
||||
description: "患者就诊前，可随时发起咨询。既能描述症状，获取专业回答，又能了解挂号、候诊等就医流程。系统通过多轮深入问诊，掌握病情信息、过往病史、生活习惯等细节，进而精准推荐适配的医院科室，可支持推荐对应医生。问诊结束后，可自动生成门诊病历，助力患者高效就医。",
|
||||
tags: ["提升医患双边体验", "助力医院智慧服务建设"],
|
||||
image: "https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsolution-zqjyzs.a7b4d6b2.png&w=3840&q=75"
|
||||
image: "https://bce.bdstatic.com/p3m/common-service/uploads/jiuyi_8c82c42.png"
|
||||
},
|
||||
menuData: {
|
||||
"诊前就医助手": {
|
||||
title: "诊前就医助手",
|
||||
description: "患者就诊前，可随时发起咨询。既能描述症状，获取专业回答，又能了解挂号、候诊等就医流程。系统通过多轮深入问诊，掌握病情信息、过往病史、生活习惯等细节，进而精准推荐适配的医院科室，可支持推荐对应医生。问诊结束后，可自动生成门诊病历，助力患者高效就医。",
|
||||
tags: ["提升医患双边体验", "助力医院智慧服务建设"],
|
||||
image: "https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsolution-zqjyzs.a7b4d6b2.png&w=3840&q=75"
|
||||
image: "https://bce.bdstatic.com/p3m/common-service/uploads/jiuyi_8c82c42.png"
|
||||
},
|
||||
"健康管家": {
|
||||
title: "健康管家",
|
||||
description: "在互联网医院、健康管理、患者管理等场景下，为患者提供一站式健康管家服务。通过 APP、小程序或 H5 页面，患者只需在一个对话框，就能发起健康咨询、药品咨询、检查检验报告解读、皮肤病图片咨询、症状咨询等各类健康问题。大模型结合专业知识库，迅速给出专业解答，让健康关怀触手可及。",
|
||||
tags: ["一站式健康咨询服务", "快速专业解答"],
|
||||
image: "https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsolution-jkgj.8a22e2b8.png&w=3840&q=75"
|
||||
image: "https://bce.bdstatic.com/p3m/common-service/uploads/jiankang_cb6b412.png"
|
||||
},
|
||||
"报告解读与生成": {
|
||||
title: "报告解读与生成",
|
||||
description: "面向基层医院或体检机构，能够为医生提供检查检验、体检报告的专业解读服务，助力基层医生迅速、精准地向患者阐释异常指标，科学评估疾病风险，高效开展健康管理工作。面向医院体检科与体检机构，辅助医生快速生成体检报告，优化工作流程，极大提升体检报告输出效率",
|
||||
tags: ["增强医患沟通效果", "优化报告生成流程", "提高工作效率"],
|
||||
image: "https://01.baidu.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsolution-bgjdsc.f1ea78a4.png&w=3840&q=75"
|
||||
image: "https://bce.bdstatic.com/p3m/common-service/uploads/baogaojiedu_51ec1c7.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,11 +11,11 @@
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="tree-container">
|
||||
<el-tree :data="menuData" node-key="id" default-expand-all :expand-on-click-node="false"
|
||||
<el-tree :data="sortedMenuData" node-key="id" default-expand-all :expand-on-click-node="false"
|
||||
:highlight-current="true" @node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>
|
||||
{{ data.title || data.label }}
|
||||
{{ data.firTitle || data.secTitle || data.thrTitle }}
|
||||
</span>
|
||||
<span>
|
||||
<el-button type="text" size="mini" @click="handleAddMenu(data)">
|
||||
@ -528,9 +528,9 @@
|
||||
<el-input v-model="menuDialog.form.title" placeholder="请输入菜单标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort_order">
|
||||
<el-input-number v-model="menuDialog.form.sort_order" :min="0" :max="100"></el-input-number>
|
||||
<el-input-number v-model="menuDialog.form.sort_order" :min="1" :max="100"></el-input-number>
|
||||
<span class="sort-order-hint" style="margin-left: 8px; color: #909399; font-size: 12px;">
|
||||
(值为{{ menuDialog.form.sort_order }}将排在第{{ menuDialog.form.sort_order+1 }}位)
|
||||
(值为{{ menuDialog.form.sort_order }}将排在第{{ menuDialog.form.sort_order }}位)
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -778,6 +778,53 @@ export default {
|
||||
return [...this.productSpecList].sort((a, b) => {
|
||||
return (a.sort_order || 999) - (b.sort_order || 999)
|
||||
})
|
||||
},
|
||||
// 排序后的菜单数据
|
||||
sortedMenuData() {
|
||||
// 对一级菜单按sort_order排序
|
||||
const sortedLevel1 = [...(this.menuData || [])].sort((a, b) => {
|
||||
return (a.sort_order || 999) - (b.sort_order || 999)
|
||||
})
|
||||
|
||||
// 返回转换后的数据结构
|
||||
return sortedLevel1.map(level1 => {
|
||||
// 对二级菜单按sort_order排序
|
||||
const sortedLevel2 = [...(level1.secMenu || [])].sort((a, b) => {
|
||||
return (a.sort_order || 999) - (b.sort_order || 999)
|
||||
})
|
||||
|
||||
return {
|
||||
id: level1.id,
|
||||
firTitle: level1.firTitle,
|
||||
title: level1.firTitle,
|
||||
sort_order: level1.sort_order || 1,
|
||||
menu_level: 1,
|
||||
children: sortedLevel2.map(level2 => {
|
||||
// 对三级菜单按sort_order排序
|
||||
const sortedLevel3 = [...(level2.thrMenu || [])].sort((a, b) => {
|
||||
return (a.sort_order || 999) - (b.sort_order || 999)
|
||||
})
|
||||
|
||||
return {
|
||||
id: level2.id,
|
||||
secTitle: level2.secTitle,
|
||||
title: level2.secTitle,
|
||||
sort_order: level2.sort_order || 1,
|
||||
menu_level: 2,
|
||||
parent_id: level1.id,
|
||||
children: sortedLevel3.map(level3 => ({
|
||||
id: level3.id,
|
||||
thrTitle: level3.thrTitle,
|
||||
title: level3.thrTitle,
|
||||
sort_order: level3.sort_order || 1,
|
||||
menu_level: 3,
|
||||
parent_id: level2.id,
|
||||
value: level3.value || []
|
||||
}))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -1698,57 +1745,13 @@ export default {
|
||||
// 加载菜单树
|
||||
async loadMenuTree() {
|
||||
const res = await findProductMenuAPI()
|
||||
console.log('树形', res);
|
||||
|
||||
if (res.status == true) {
|
||||
this.menuData = this.buildMenuTree(res.data || [])
|
||||
this.menuData = res.data
|
||||
}
|
||||
},
|
||||
|
||||
// 构建菜单树 - 适配新的数据结构，并按照sort_order排序
|
||||
buildMenuTree(menus) {
|
||||
// 首先对一级菜单排序
|
||||
const sortedLevel1 = [...menus].sort((a, b) => {
|
||||
return (a.sort_order || 999) - (b.sort_order || 999)
|
||||
})
|
||||
|
||||
const transformedData = sortedLevel1.map(level1 => {
|
||||
// 对二级菜单排序
|
||||
const sortedLevel2 = [...(level1.secMenu || [])].sort((a, b) => {
|
||||
return (a.sort_order || 999) - (b.sort_order || 999)
|
||||
})
|
||||
|
||||
return {
|
||||
id: level1.id,
|
||||
title: level1.firTitle,
|
||||
menu_level: 1,
|
||||
sort_order: level1.sort_order || 1,
|
||||
children: sortedLevel2.map(level2 => {
|
||||
// 对三级菜单排序
|
||||
const sortedLevel3 = [...(level2.thrMenu || [])].sort((a, b) => {
|
||||
return (a.sort_order || 999) - (b.sort_order || 999)
|
||||
})
|
||||
|
||||
return {
|
||||
id: level2.id,
|
||||
title: level2.secTitle,
|
||||
menu_level: 2,
|
||||
parent_id: level1.id,
|
||||
sort_order: level2.sort_order || 1,
|
||||
children: sortedLevel3.map(level3 => ({
|
||||
id: level3.id,
|
||||
title: level3.thrTitle,
|
||||
menu_level: 3,
|
||||
parent_id: level2.id,
|
||||
sort_order: level3.sort_order || 1
|
||||
}))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return transformedData
|
||||
},
|
||||
|
||||
// 搜索菜单
|
||||
handleSearchMenu() {
|
||||
this.loadMenuTree()
|
||||
@ -1756,18 +1759,41 @@ export default {
|
||||
|
||||
// 节点点击
|
||||
async handleNodeClick(data) {
|
||||
console.log('点击菜单节点:', data)
|
||||
|
||||
this.currentMenu = data;
|
||||
this.currentMenuLevel = data.menu_level;
|
||||
this.currentMenuTitle = data.title;
|
||||
|
||||
// 判断菜单级别
|
||||
if (data.firTitle) {
|
||||
// 一级菜单
|
||||
this.currentMenuLevel = 1;
|
||||
this.currentMenuTitle = data.firTitle;
|
||||
this.breadcrumbPath = [{
|
||||
id: data.id,
|
||||
title: data.firTitle
|
||||
}];
|
||||
} else if (data.secTitle) {
|
||||
// 二级菜单
|
||||
this.currentMenuLevel = 2;
|
||||
this.currentMenuTitle = data.secTitle;
|
||||
// 构建面包屑路径
|
||||
const parent = this.findParentMenu(data.parent_id);
|
||||
this.buildBreadcrumb(parent, data);
|
||||
} else if (data.thrTitle) {
|
||||
// 三级菜单
|
||||
this.currentMenuLevel = 3;
|
||||
this.currentMenuTitle = data.thrTitle;
|
||||
// 构建面包屑路径
|
||||
const parent = this.findParentMenu(data.parent_id);
|
||||
const grandParent = parent ? this.findParentMenu(parent.parent_id) : null;
|
||||
this.buildBreadcrumb(grandParent, parent, data);
|
||||
}
|
||||
|
||||
// 详情：清空选中的产品
|
||||
this.selectedProduct = null;
|
||||
|
||||
// 构建面包屑路径
|
||||
this.buildBreadcrumb(data);
|
||||
|
||||
// 如果是三级菜单，显示产品列表
|
||||
if (data.menu_level === 3) {
|
||||
if (data.menu_level === 3 || data.thrTitle) {
|
||||
// 重置分页到第一页
|
||||
this.pagination.current_page = 1;
|
||||
// 加载产品列表
|
||||
@ -1779,18 +1805,26 @@ export default {
|
||||
},
|
||||
|
||||
// 构建面包屑路径
|
||||
buildBreadcrumb(node) {
|
||||
buildBreadcrumb(...nodes) {
|
||||
this.breadcrumbPath = []
|
||||
let current = node
|
||||
|
||||
while (current) {
|
||||
this.breadcrumbPath.unshift({
|
||||
id: current.id,
|
||||
title: current.title
|
||||
})
|
||||
// 这里需要根据实际情况查找父节点
|
||||
current = this.findParentMenu(current.parent_id)
|
||||
}
|
||||
nodes.filter(node => node).forEach(node => {
|
||||
if (node.firTitle) {
|
||||
this.breadcrumbPath.push({
|
||||
id: node.id,
|
||||
title: node.firTitle
|
||||
})
|
||||
} else if (node.secTitle) {
|
||||
this.breadcrumbPath.push({
|
||||
id: node.id,
|
||||
title: node.secTitle
|
||||
})
|
||||
} else if (node.thrTitle) {
|
||||
this.breadcrumbPath.push({
|
||||
id: node.id,
|
||||
title: node.thrTitle
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 查找父菜单
|
||||
@ -1800,15 +1834,21 @@ export default {
|
||||
const findInTree = (nodes) => {
|
||||
for (let node of nodes) {
|
||||
if (node.id === parentId) return node
|
||||
if (node.children) {
|
||||
const found = findInTree(node.children)
|
||||
if (found) return found
|
||||
if (node.secMenu) {
|
||||
for (let secNode of node.secMenu) {
|
||||
if (secNode.id === parentId) return secNode
|
||||
if (secNode.thrMenu) {
|
||||
for (let thrNode of secNode.thrMenu) {
|
||||
if (thrNode.id === parentId) return thrNode
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
return findInTree(this.menuData)
|
||||
return findInTree(this.menuData || [])
|
||||
},
|
||||
|
||||
// 分页大小变化
|
||||
@ -1816,7 +1856,7 @@ export default {
|
||||
this.pagination.page_size = val;
|
||||
this.pagination.current_page = 1; // 重置到第一页
|
||||
// 确保有当前菜单且为三级菜单时才加载产品
|
||||
if (this.currentMenu && this.currentMenu.menu_level === 3) {
|
||||
if (this.currentMenu && (this.currentMenu.menu_level === 3 || this.currentMenu.thrTitle)) {
|
||||
this.loadProducts(this.currentMenu.id);
|
||||
}
|
||||
},
|
||||
@ -1825,7 +1865,7 @@ export default {
|
||||
handleCurrentChange(val) {
|
||||
this.pagination.current_page = val;
|
||||
// 确保有当前菜单且为三级菜单时才加载产品
|
||||
if (this.currentMenu && this.currentMenu.menu_level === 3) {
|
||||
if (this.currentMenu && (this.currentMenu.menu_level === 3 || this.currentMenu.thrTitle)) {
|
||||
this.loadProducts(this.currentMenu.id);
|
||||
}
|
||||
},
|
||||
@ -1868,7 +1908,17 @@ export default {
|
||||
return
|
||||
}
|
||||
|
||||
const res = await deleteProductMenuAPI({ id: id })
|
||||
// 判断菜单级别
|
||||
let menu_level = 1;
|
||||
if (data.firTitle) {
|
||||
menu_level = 1;
|
||||
} else if (data.secTitle) {
|
||||
menu_level = 2;
|
||||
} else if (data.thrTitle) {
|
||||
menu_level = 3;
|
||||
}
|
||||
|
||||
const res = await deleteProductMenuAPI({ id: id, menu_level: menu_level })
|
||||
console.log(res);
|
||||
if (res.status == true) {
|
||||
this.$message.success('删除成功!')
|
||||
@ -1901,13 +1951,24 @@ export default {
|
||||
|
||||
// 添加menu子菜单
|
||||
handleAddMenu(data) {
|
||||
this.menuDialog.title = `添加${data.menu_level === 1 ? '二级' : '三级'}菜单`
|
||||
// 判断菜单级别
|
||||
let menu_level = 1;
|
||||
let title = '';
|
||||
if (data.firTitle) {
|
||||
menu_level = 1;
|
||||
title = '二级';
|
||||
} else if (data.secTitle) {
|
||||
menu_level = 2;
|
||||
title = '三级';
|
||||
}
|
||||
|
||||
this.menuDialog.title = `添加${title}菜单`
|
||||
this.menuDialog.type = 'add'
|
||||
this.menuDialog.form = {
|
||||
id: '',
|
||||
title: '',
|
||||
sort_order: 0,
|
||||
menu_level: data.menu_level + 1,
|
||||
sort_order: 1,
|
||||
menu_level: menu_level + 1,
|
||||
parent_id: data.id
|
||||
}
|
||||
this.menuDialog.visible = true
|
||||
@ -1922,13 +1983,27 @@ export default {
|
||||
|
||||
// 编辑menu菜单
|
||||
handleEditMenu(data) {
|
||||
this.menuDialog.title = `编辑${data.menu_level === 1 ? '一级' : data.menu_level === 2 ? '二级' : '三级'}菜单`
|
||||
// 判断菜单级别
|
||||
let menu_level = 1;
|
||||
let title = '';
|
||||
if (data.firTitle) {
|
||||
menu_level = 1;
|
||||
title = '一级';
|
||||
} else if (data.secTitle) {
|
||||
menu_level = 2;
|
||||
title = '二级';
|
||||
} else if (data.thrTitle) {
|
||||
menu_level = 3;
|
||||
title = '三级';
|
||||
}
|
||||
|
||||
this.menuDialog.title = `编辑${title}菜单`
|
||||
this.menuDialog.type = 'edit'
|
||||
this.menuDialog.form = {
|
||||
id: data.id,
|
||||
title: data.title || '',
|
||||
title: data.firTitle || data.secTitle || data.thrTitle || '',
|
||||
sort_order: data.sort_order || 1,
|
||||
menu_level: data.menu_level,
|
||||
menu_level: menu_level,
|
||||
parent_id: data.parent_id || ''
|
||||
}
|
||||
this.menuDialog.visible = true
|
||||
@ -1981,7 +2056,7 @@ export default {
|
||||
}
|
||||
|
||||
console.log('编辑菜单参数:', editData)
|
||||
const res = await updateProductMenuAPI({ id: editData.id, title: editData.title })
|
||||
const res = await updateProductMenuAPI({ id: editData.id, title: editData.title, sort_order: editData.sort_order })
|
||||
console.log('编辑菜单返回:', res)
|
||||
if (res.status == true) {
|
||||
this.$message.success('更新成功!')
|
||||
@ -1995,7 +2070,7 @@ export default {
|
||||
|
||||
// 添加产品
|
||||
async handleAddProduct() {
|
||||
if (!this.currentMenu || this.currentMenu.menu_level !== 3) {
|
||||
if (!this.currentMenu || (!this.currentMenu.menu_level === 3 && !this.currentMenu.thrTitle)) {
|
||||
this.$message.warning('请先选择三级菜单!')
|
||||
return
|
||||
}
|
||||
@ -2069,7 +2144,7 @@ export default {
|
||||
this.selectedProduct = null
|
||||
}
|
||||
// 重新加载产品列表
|
||||
if (this.currentMenu && this.currentMenu.menu_level === 3) {
|
||||
if (this.currentMenu && (this.currentMenu.menu_level === 3 || this.currentMenu.thrTitle)) {
|
||||
await this.loadProducts(this.currentMenu.id)
|
||||
}
|
||||
} else {
|
||||
@ -2116,7 +2191,7 @@ export default {
|
||||
this.productDialog.visible = false
|
||||
|
||||
// 重新加载产品列表
|
||||
if (this.currentMenu && this.currentMenu.menu_level === 3) {
|
||||
if (this.currentMenu && (this.currentMenu.menu_level === 3 || this.currentMenu.thrTitle)) {
|
||||
await this.loadProducts(this.currentMenu.id)
|
||||
}
|
||||
} else {
|
||||
@ -2146,7 +2221,7 @@ export default {
|
||||
this.productDialog.visible = false
|
||||
|
||||
// 重新加载产品列表
|
||||
if (this.currentMenu && this.currentMenu.menu_level === 3) {
|
||||
if (this.currentMenu && (this.currentMenu.menu_level === 3 || this.currentMenu.thrTitle)) {
|
||||
await this.loadProducts(this.currentMenu.id)
|
||||
}
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user