<template>
|
<div class="Content">
|
<div class="searchCard">
|
<div class="search">
|
<el-input v-model="inputText" placeholder="请输入产品名称"></el-input>
|
<div class="button" @click="getProductList(1)">搜索</div>
|
</div>
|
<div class="filterArea">
|
<div class="row">
|
<div class="label">产品类别</div>
|
<el-button
|
type="text"
|
size="mini"
|
v-for="(item, index) in types"
|
:key="index + 't'"
|
:class="productLabelId == item.id ? 'selected' : ''"
|
class="type-label"
|
@click="selectType(item.id)"
|
>{{ item.name }}</el-button
|
>
|
</div>
|
|
<div class="row">
|
<div class="label">架构类别</div>
|
<el-button-group>
|
<el-button
|
size="mini"
|
type="text"
|
class="type-label"
|
v-for="(item, index) in allTargetPlatforms"
|
:key="index + 't'"
|
:class="targetPlatformId == item.id ? 'selected' : ''"
|
@click="selectPlatform(item.id)"
|
>{{ item.name }}</el-button
|
>
|
</el-button-group>
|
</div>
|
|
<div class="row">
|
<div class="label">计算芯片</div>
|
<el-button-group>
|
<el-button
|
size="mini"
|
type="text"
|
v-for="(item, index) in allElvChip"
|
:key="index + 't'"
|
:class="elvChip == item.id ? 'selected' : ''"
|
class="type-label"
|
@click="selectElvChip(item.id)"
|
>{{ item.name }}</el-button
|
>
|
</el-button-group>
|
</div>
|
</div>
|
</div>
|
|
<div class="productArea">
|
<productCard
|
:data="item"
|
v-for="(item, index) in dataList"
|
:key="index"
|
:labels="getLabel(item.productLabelId)"
|
>
|
</productCard>
|
</div>
|
<el-pagination
|
@current-change="refresh"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
:page-sizes="[24, 36, 48, 60, 72]"
|
layout=" prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</template>
|
|
<script>
|
import {
|
findAllCenterProduct,
|
findDicByType,
|
// getReleaseProduct,
|
} from "@/api/product";
|
// import { activeByCode, showDetail } from "../api/code";
|
// import { findDevListByUser } from "../api/device";
|
// import { addShopcartProd, resumeOrder } from "../api/shopcart";
|
// import request from "../api/index";
|
import productCard from "@/views/product/components/productCard";
|
export default {
|
mounted() {
|
this.getDic();
|
this.getProductList();
|
},
|
data() {
|
return {
|
types: "",
|
inputText: "",
|
allTargetPlatforms: [
|
{ id: "all", name: "全部" },
|
{ id: "arm", name: "arm" },
|
{ id: "x86", name: "x86" },
|
],
|
allElvChip: [
|
{ id: "all", name: "全部" },
|
{ id: "nvidia", name: "nvidia" },
|
{ id: "bitmain", name: "bitmain" },
|
],
|
targetPlatformId: "all",
|
productLabelId: "",
|
elvChip: "all",
|
size: 12,
|
publishStatus: 1,
|
dataList: [],
|
total: 0,
|
labelDics: [],
|
page: 1,
|
};
|
},
|
components: {
|
productCard,
|
},
|
methods: {
|
getDic() {
|
findDicByType()
|
.then((res) => {
|
let dics = res.data.dics.filter(
|
(item) => item.type === "PRODUCTLABEL"
|
);
|
this.types = dics;
|
this.types.unshift({
|
id: "",
|
name: "全部",
|
});
|
this.labelDics = res.data.dics;
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$notify({
|
type: "error",
|
message: "标签获取失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
selectType(id) {
|
this.productLabelId = id;
|
this.getProductList(1);
|
},
|
selectPlatform(id) {
|
this.targetPlatformId = id;
|
this.getProductList();
|
},
|
selectElvChip(id) {
|
this.elvChip = id;
|
this.getProductList();
|
},
|
getProductList(v) {
|
console.log("--------------");
|
let param = {
|
page: v === 1 ? 1 : this.page,
|
size: this.size,
|
inputText: this.inputText,
|
archType: this.targetPlatformId == "all" ? "" : this.targetPlatformId,
|
gpuType: this.elvChip == "all" ? "" : this.elvChip,
|
publishStatus: this.publishStatus,
|
productLabelId: this.productLabelId,
|
};
|
findAllCenterProduct(param)
|
.then((res) => {
|
this.dataList = res.data.list;
|
this.total = res.data.total;
|
if (res.data.total <= this.size) {
|
this.page = 1;
|
}
|
res.data.list.forEach((item) => {
|
if (item.pics > 1) {
|
console.log(item);
|
}
|
});
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$notify({
|
type: "error",
|
message: "查询产品列表失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
getLabel(ids) {
|
let arr = [];
|
ids.forEach((id) => {
|
let obj = this.labelDics.filter((item) => item.id == id);
|
if (obj.length > 0) {
|
arr.push(obj[0].name);
|
}
|
});
|
return arr;
|
},
|
refresh(page) {
|
this.page = page;
|
this.getProductList();
|
},
|
handleSizeChange(size) {
|
this.size = size;
|
this.getProductList();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.Content {
|
position: relative;
|
width: 1280px;
|
margin: 0 auto;
|
|
.searchCard {
|
box-sizing: border-box;
|
padding: 30px;
|
margin-bottom: 30px;
|
width: 1280px;
|
height: 268px;
|
text-align: center;
|
font-size: 14px;
|
background: #ffffff;
|
box-shadow: 0px 4px 12px rgba(0, 43, 106, 0.12);
|
|
.search {
|
box-sizing: border-box;
|
display: flex;
|
height: 60px;
|
border-bottom: 1px solid #e9ebee;
|
|
.el-input {
|
width: 300px;
|
height: 40px;
|
|
::v-deep input {
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.button {
|
width: 80px;
|
height: 40px;
|
line-height: 40px;
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
}
|
|
.filterArea {
|
.row {
|
display: flex;
|
margin-top: 20px;
|
|
.label {
|
line-height: 30px;
|
color: #666666;
|
margin-right: 30px;
|
}
|
|
.el-button {
|
padding: 0 16px;
|
margin-right: 10px;
|
margin-left: 0;
|
height: 28px;
|
color: #3d3d3d;
|
font-size: 14px;
|
border-radius: 0;
|
border: 1px solid #fff;
|
|
&.selected {
|
border: 1px solid #0065ff;
|
|
::v-deep span {
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
}
|
|
.productArea {
|
display: flex;
|
flex-wrap: wrap;
|
|
.productCard {
|
margin-right: 24px;
|
|
&:nth-child(4n) {
|
margin-right: 0;
|
}
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 16px;
|
margin-bottom: 80px;
|
text-align: center;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: rgba(255, 255, 255, 0);
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: rgba(255, 255, 255, 0);
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
background-color: rgba(255, 255, 255, 0);
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
}
|
</style>
|
