<template>
|
<div class="searchContent">
|
<div class="headerBox">
|
<div class="contentBox container">
|
<div class="headerTitle">中药饮片在线学习与机器视觉识别平台</div>
|
<div class="headerNav">
|
<div
|
class="navItem"
|
v-for="(item, index) in navigatorList"
|
:class="{ active: index === 1 }"
|
:key="index"
|
@click="navigatorTo(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="searchBox contentBox">
|
<div class="searchInput">
|
<el-input
|
style="border: none"
|
v-model="searchValue"
|
placeholder="请输入内容"
|
></el-input>
|
</div>
|
<div class="searchBtn" @click="getDataList">
|
<i class="el-icon-search"></i>
|
<span>检索</span>
|
</div>
|
</div>
|
<div class="filterBox contentBox">
|
<div style="margin-top: 20px; color: #01644c">
|
来源：《藏药饮片机器视觉识别手册》
|
</div>
|
<div style="margin-top: 20px; color: #01644c">
|
<span>字母：</span>
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">A</el-radio>
|
<el-radio :label="6">B</el-radio>
|
<el-radio :label="9">C</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="cmsBox contentBox" v-loading="loading">
|
<div
|
class="cmsItem"
|
v-for="item in dataList"
|
:key="item"
|
@click="goDetail(item)"
|
>
|
<div class="imgBox">
|
<img class="autoImg" :src="item.icon" alt="" />
|
</div>
|
<div class="cmsInfoBox">
|
<div class="cmsTitle">{{ item.name + " " + item.Tibetan }}</div>
|
<div class="cmsContent">
|
{{ item.base }}
|
</div>
|
<div class="cmsSource">
|
来源：《{{ productInfo.name }}》 {{ " " + productInfo.editor }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
:hide-on-single-page="true"
|
layout=" pager,total"
|
page-count="6"
|
:total="totalCount"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "search",
|
|
data() {
|
return {
|
loading: false,
|
radio: 3,
|
searchValue: "",
|
totalCount: 0,
|
navigatorList: [
|
{
|
name: "首页",
|
path: "/home",
|
},
|
{
|
name: "中药饮片数据库",
|
path: "/home",
|
},
|
{
|
name: "中药饮片学习系统",
|
path: "/home",
|
},
|
{
|
name: "饮片视觉识别系统",
|
path: "/home",
|
},
|
{
|
name: "关于我们",
|
path: "/home",
|
},
|
],
|
dataList: [],
|
productInfo: {},
|
};
|
},
|
|
created() {
|
this.getDataList();
|
},
|
|
methods: {
|
getDataList() {
|
let query = {
|
path: "DecoctionPiece",
|
queryType: "*",
|
paging: {
|
start: 0,
|
size: 99,
|
},
|
fields: {
|
editor: [],
|
},
|
filterList: {},
|
coverSize: {
|
height: 200,
|
},
|
};
|
this.loading = true;
|
this.MG.store.getProductList(query).then((res) => {
|
console.log(res);
|
this.productInfo = res.datas[0];
|
this.MG.store
|
.getProductDetail({
|
path: "*",
|
queryType: "*",
|
productId: res.datas[0].id,
|
cmsPath: res.datas[0].rootCmsItemId,
|
itemFields: {},
|
})
|
.then((resp) => {
|
console.log(resp, "resp");
|
(this.productLinkPath =
|
resp.datas.cmsDatas[0].datas[0].productLinkPath),
|
console.log(res);
|
this.MG.store
|
.getProductDetail({
|
path: "*",
|
queryType: "*",
|
productId: res.datas[0].id,
|
cmsPath: resp.datas.cmsDatas[0].datas[0].productLinkPath,
|
itemFields: {
|
DrugPropertiesAndMainIndications: [],
|
Tibetan: [],
|
TibetanMedicineApplication: [],
|
trait: [],
|
base: [],
|
origin: [],
|
},
|
})
|
.then((resp1) => {
|
console.log(resp1, "resp1");
|
this.dataList = resp1.datas.cmsDatas[0].datas;
|
this.totalCount = this.dataList.length;
|
this.loading = false;
|
});
|
});
|
});
|
},
|
navigatorTo(item) {
|
console.log(item);
|
if (item.name == "首页") {
|
this.$router.push("/home");
|
} else {
|
this.$message({
|
message: "建设中...",
|
type: "warning",
|
});
|
}
|
},
|
goDetail(item) {
|
console.log(item);
|
|
this.$router.push(
|
"/home/detail?id=" +
|
this.productLinkPath +
|
"&name=" +
|
this.productInfo.id
|
);
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.searchContent {
|
min-height: calc(100vh - 232px);
|
background-color: #f1f0da;
|
background-image: url("@/assets/images/yinpian/home/home_bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding-bottom: 100px;
|
}
|
.headerBox {
|
height: 76px;
|
border: 1px solid rgba(56, 91, 83, 0.22);
|
line-height: 76px;
|
}
|
|
.container {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.headerTitle {
|
font-size: 24px;
|
font-weight: 600;
|
color: #01644c;
|
}
|
.headerNav {
|
display: flex;
|
.navItem {
|
margin-left: 40px;
|
font-size: 16px;
|
cursor: pointer;
|
font-weight: 700;
|
}
|
}
|
}
|
.active {
|
color: #01644c;
|
}
|
.searchBox {
|
margin-top: 50px;
|
display: flex;
|
justify-content: center;
|
|
.searchInput {
|
width: 700px;
|
height: 60px;
|
background: url("@/assets/images/yinpian/home/search_fill.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.searchBtn {
|
font-size: 18px;
|
color: #fff;
|
background: url("@/assets/images/yinpian/home/search.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
width: 180px;
|
height: 60px;
|
text-align: center;
|
line-height: 60px;
|
margin-left: 20px;
|
}
|
}
|
.filterBox {
|
margin-top: 50px;
|
font-size: 20px;
|
}
|
|
.cmsBox {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
|
.cmsItem {
|
display: flex;
|
margin-top: 20px;
|
width: 46%;
|
background-color: #fff;
|
padding: 10px;
|
}
|
.imgBox {
|
width: 152px;
|
height: 120px;
|
position: relative;
|
}
|
.cmsInfoBox {
|
margin-left: 20px;
|
|
.cmsTitle {
|
font-size: 18px;
|
font-weight: 600;
|
color: #01644c;
|
padding: 10px 0;
|
border-bottom: 1px solid #d9d9d9;
|
}
|
.cmsContent {
|
margin-top: 10px;
|
font-size: 14px;
|
font-weight: 400;
|
}
|
.cmsSource {
|
margin-top: 20px;
|
font-size: 14px;
|
font-weight: 400;
|
color: #6b6b6b;
|
}
|
}
|
.pagination {
|
margin-top: 50px;
|
text-align: center;
|
}
|
</style>
|
<style>
|
.el-pager li {
|
background-color: none;
|
}
|
</style>
|
