<template>
|
<view class="bag">
|
<!-- 顶部导航 -->
|
<headNav idIndex="3" text="中医学术流派" />
|
<view class="Midde flex">
|
<!-- <view class="MiddeBack">返回</view> -->
|
<el-button class="MiddeBack flex flex-center" @click="goBack"
|
>返回</el-button
|
>
|
<view class="flex flex-center flex-column">
|
<view
|
|
style="
|
font-weight: 900;
|
margin-bottom: 0.2rem;
|
font-size: 0.26rem;
|
line-height: 1;
|
"
|
>{{ detailData.name }}
|
</view>
|
<ul class="flex Lists">
|
<li style="background-color: #597aa5; color: #fff;cursor: pointer;">学派介绍</li>
|
<li @click="ListClick" style="background-color: #fff; color: #597aa5;cursor: pointer;">
|
学派图谱
|
</li>
|
</ul>
|
</view>
|
<view ></view>
|
</view>
|
<view class="Bottom">
|
<view class="Bottom_top flex">
|
<view class="BBimage">
|
<view class="imgBox">
|
<img :src="detailData.icon" />
|
</view>
|
</view>
|
<view class="author">
|
<ul>
|
<li>代表性人物： {{ detailData.character || "-" }}</li>
|
<li>重要医家： {{ detailData.skilledDoctor || "-" }}</li>
|
<li>代表性著作： {{ detailData.works || "-" }}</li>
|
<li>学派思想： {{ detailData.thought || "-" }}</li>
|
<li>来源： {{ detailData.source || "-" }}</li>
|
</ul>
|
</view>
|
</view>
|
<view class="Bottom_Bot" style="color: #d1d1d1">
|
<view class="flex flex-center csrTab1">
|
<csr-tab
|
class="csrTab"
|
:value.sync="swiperIndex"
|
:tabList="tabSwiperList"
|
></csr-tab>
|
</view>
|
<view
|
v-if="swiperIndex == 0"
|
class="swiperList"
|
style="background-color: #ffffff; text-align: left; color: #000"
|
>
|
<view
|
v-for="(briefItem, briefIndex) in detailData.brief"
|
:key="briefIndex"
|
style="margin-bottom: 0.4rem"
|
>
|
<view style="color: #333">{{ briefItem.content }}</view>
|
<view
|
style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
|
>{{ briefItem.source }}</view
|
>
|
</view>
|
</view>
|
<view
|
v-if="swiperIndex == 1"
|
class="swiperList"
|
style="background-color: #ffffff; text-align: left; color: #000"
|
>
|
<view
|
v-for="(briefItem, briefIndex) in detailData.develop"
|
:key="briefIndex"
|
style="margin-bottom: 0.4rem"
|
>
|
<view style="color: #333">{{ briefItem.content }}</view>
|
<view
|
style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
|
>{{ briefItem.source }}</view
|
>
|
</view>
|
</view>
|
<view
|
v-if="swiperIndex == 2"
|
class="swiperList"
|
style="background-color: #ffffff; text-align: left; color: #000"
|
>
|
<view
|
v-for="(briefItem, briefIndex) in detailData.achievement"
|
:key="briefIndex"
|
style="margin-bottom: 0.4rem"
|
>
|
<view style="color: #333">{{ briefItem.content }}</view>
|
<view
|
style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
|
>{{ briefItem.source }}</view
|
>
|
</view>
|
</view>
|
<view
|
v-if="swiperIndex == 3"
|
class="swiperList"
|
style="background-color: #ffffff; text-align: left; color: #000"
|
>
|
<view
|
v-for="(briefItem, briefIndex) in detailData.literature"
|
:key="briefIndex"
|
style="margin-bottom: 0.4rem"
|
>
|
<view style="color: #333">{{ briefItem.content }}</view>
|
<view
|
style="text-align: right; color: #9c9c9c; margin-top: 0.1rem"
|
>{{ briefItem.source }}</view
|
>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { getIntroduction, getImg } from "@/api/index.js";
|
export default {
|
data() {
|
return {
|
// 标题顶部栏需要的东西
|
idIndex: 0,
|
swiperIndex: 0,
|
detailData: {},
|
tabSwiperList: [
|
{
|
TabControl: `学派概说`
|
},
|
{
|
TabControl: `学派发展`
|
},
|
{
|
TabControl: `成就影响`
|
},
|
{
|
TabControl: `相关文献`
|
}
|
],
|
secretary: [
|
{
|
id: 1,
|
name: "幅度萨芬",
|
istrue: false
|
},
|
{
|
id: 2,
|
name: "幅度s萨芬",
|
istrue: false
|
}
|
]
|
};
|
},
|
onLoad(options) {
|
this.idIndex = options.id;
|
this.getData();
|
},
|
methods: {
|
getData() {
|
getIntroduction(Number(this.idIndex)).then((res) => {
|
this.detailData = {
|
name: res.object.school_NAME[0].content,
|
icon:
|
res.object.pictureList && res.object.pictureList.length > 0
|
? getImg(res.object.pictureList[0].filePath)
|
: "",
|
character: res.object.important_PEOPLE
|
? res.object.important_PEOPLE
|
.map((item) => item.content2)
|
.join("、")
|
: "",
|
skilledDoctor: res.object.important_PHYSICIAN
|
? res.object.important_PHYSICIAN
|
.map((item) => item.content2)
|
.join("、")
|
: "",
|
works: res.object.important_WORK
|
? res.object.important_WORK.map((item) => item.content).join("、")
|
: "",
|
thought: res.object.school_THOUGHT
|
? res.object.school_THOUGHT.map((item) => item.content).join("、")
|
: "",
|
source: res.object.bookList
|
? res.object.bookList.map((item) => item.name).join("、")
|
: "",
|
brief: res.object.school_INTRODUCTION
|
? res.object.school_INTRODUCTION.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: [],
|
develop: res.object.school_DEVELOPMENT
|
? res.object.school_DEVELOPMENT.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: [],
|
achievement: res.object.achievement_INFLUENCE
|
? res.object.achievement_INFLUENCE.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: [],
|
literature: res.object.related_LITERATURE
|
? res.object.related_LITERATURE.map((item) => {
|
return {
|
content: item.content,
|
source:
|
"出处：《" +
|
res.object.bookList.find((citem) => citem.id == item.bookId)
|
.name +
|
"》 P" +
|
item.pageNo
|
};
|
})
|
: []
|
};
|
});
|
},
|
goBack() {
|
this.$router.go(-1);
|
},
|
ListClick(event) {
|
uni.navigateTo({
|
url: "/pages/academicGenres/chart?id=" + this.idIndex
|
});
|
this.secretary.forEach((item) => {
|
if (item.id === event) {
|
item.istrue = true;
|
} else {
|
item.istrue = false;
|
}
|
});
|
}
|
},
|
mounted() {}
|
};
|
</script>
|
|
<style scoped>
|
* {
|
box-sizing: border-box;
|
}
|
|
view {
|
color: #fff;
|
}
|
|
.bag {
|
width: 100%;
|
height: 100%;
|
background-color: #fff;
|
}
|
|
.NavTop {
|
background-color: #0c274c;
|
padding: 25rpx;
|
|
img {
|
width: 30rpx;
|
height: 30rpx;
|
vertical-align: middle;
|
}
|
|
.NavTopr {
|
img {
|
margin-right: 10rpx;
|
}
|
}
|
}
|
|
.Midde {
|
background-image: url("../../static/image/学派Bg.png");
|
background-size: 100% 100%;
|
color: #000;
|
padding: 0.18rem 0.23rem 0;
|
align-items: flex-start;
|
height: 1.43rem;
|
|
view {
|
color: #000;
|
}
|
|
.MiddeBack {
|
width: 0.6rem;
|
height: 0.24rem;
|
font-size: 0.12rem;
|
padding: 0;
|
border-radius: 0;
|
border: 1px solid #9e9e9e;
|
color: #000;
|
}
|
|
.Lists {
|
li {
|
width: 0.96rem;
|
height: 0.3rem;
|
border: 1px solid #597aa5;
|
line-height: 0.3rem;
|
text-align: center;
|
font-size: 0.14rem;
|
}
|
}
|
}
|
|
.Bottom {
|
overflow: hidden;
|
padding: 0.39rem 1.21rem !important;
|
|
.Bottom_top {
|
justify-content: flex-start;
|
align-items: flex-start;
|
padding: 0 1.59rem;
|
|
.BBimage {
|
width: 4rem;
|
height: 2rem;
|
margin-right: 0.49rem;
|
}
|
|
.author {
|
flex: 1;
|
overflow: hidden;
|
color: #000;
|
|
li {
|
line-height: 0.22rem;
|
font-size: 0.14rem;
|
margin-top: 0.18rem;
|
color: #2c2c2c;
|
}
|
}
|
}
|
|
.BBimage {
|
width: 50%;
|
height: 350rpx;
|
}
|
}
|
|
.Bottom_Bot {
|
margin-top: 0.39rem;
|
}
|
|
.csrTab1 {
|
border-bottom: 2px solid #9e9e9e;
|
margin-bottom: 0.3rem;
|
}
|
|
.csrTab {
|
width: 40%;
|
height: 0.4rem;
|
font-size: 0.14rem;
|
display: flex;
|
}
|
|
.Swiper {
|
flex: 1;
|
}
|
|
.csrTab ::v-deep .uni-tab-bar {
|
border: 0 !important;
|
height: 0.02rem;
|
background-color: #597aa5;
|
}
|
|
.csrTab ::v-deep .uni-tab-item {
|
color: #9e9e9e !important;
|
font-weight: 700;
|
height: 0.4rem;
|
}
|
|
.csrTab ::v-deep .uni-tab-active {
|
color: #597aa5 !important;
|
}
|
|
.swiperList {
|
line-height: 0.28rem;
|
font-size: 0.14rem;
|
color: #2c2c2c;
|
padding: 0.4rem;
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
overflow: auto;
|
}
|
|
.imgBox {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
.imgBox img {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
margin: auto;
|
}
|
</style>
|
