Commit 7b102035 by yangchen

实现了首页导航栏里的行业应用网页,点击行业应用跳转页面,在该页面显示了各行业应用信息(全量显示)

parent e52005ab
<template>
<div class="app-container">
<div style="margin: 0 auto;padding: 0 84px;'">
<el-tabs v-model="tabActive" @tab-change="tabChange">
<el-tab-pane
v-for="i in assemblyTypes"
:key="i.value"
:label="i.name"
:name="i.value">
</el-tab-pane>
</el-tabs>
<!-- 内容过滤器-->
<!-- <el-tabs v-model="tabActive" @tab-change="tabChange">-->
<!-- <el-tab-pane-->
<!-- v-for="i in assemblyTypes"-->
<!-- :key="i.value"-->
<!-- :label="i.name"-->
<!-- :name="i.value">-->
<!-- </el-tab-pane>-->
<!-- </el-tabs>-->
<el-row :gutter="24">
<el-col v-for="(item,index) in assemblyData" :key="item.id" :span="6">
<div class="item flex">
<img :src="baseUrl + item.image" alt="">
<img :src="item.image" alt="">
<div>
<div class="title">{{ item.title }}</div>
<p>{{ item.description }}</p>
......@@ -65,22 +66,41 @@ const tabActive = ref("0")
onMounted(() => {
getAssemblyType()
// getAssemblyType()
getAassemblyList()
})
function getAassemblyList() {
assemblyList({type: Number(tabActive.value)}).then(res => {
assemblyData.value = res.data
})
}
// assemblyData.value = res.data
const validData = res.data.filter(item => item.showStatus === true);
function getAssemblyType() {
assemblyType().then(res => {
assemblyTypes.value = res.data
getAassemblyList()
validData.forEach(item => {
// 处理description字段,去除<p>标签
if (item.description) {
item.description = item.description.replace(/<p>/g, '').replace(/<\/p>/g, '')
}
// 处理images数组,只取第一张图片
if (Array.isArray(item.images) && item.images.length > 0) {
item.image = item.images[0];
} else {
item.image = ''; // 如果没有图片,设置为空字符串
}
});
assemblyData.value = validData.sort(function (a, b) {
return a.orderNum - b.orderNum
});
})
}
// function getAssemblyType() {
// assemblyType().then(res => {
// assemblyTypes.value = res.data
// getAassemblyList()
// })
// }
function tabChange() {
getAassemblyList()
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment