kangfu/src/views/home/searchContent/index.vue

<template>
    <div class="hospital-overview-warp">
        <div class="hospital-overview-header">
            <el-image
                v-if="imgSrc"
                class="header-image"
                fit="fill"
                :src="imgSrc"
            ></el-image>    
            <el-image
                v-else
                class="header-image"
                fit="fill"
                :src="require('@/assets/images/home/otherHeader.png')"
            ></el-image>   
        </div>
        <div class="hospital-overview-content-warp">
            <div class="hospital-overview-content">
              <div class="content-right">
                <component 
                    :is="componentName" 
                    :title="currentTabsLabel"
                    :searchTitle="contentTitle"
                    :content="currentContent"
                    :contentTitle="currentContentTitle"
                    :dutyContent="currentDutyContent"
                    @clickOverview="clickOverview"
                    @backHome="backHome"
                    :backBtn="true"
                    :overviewFlag="true"
                    :moreFlag="false"
                    :limitNum="60"
                    :total="currentTotal"
                    :paginationFlag="false"
                    @sizeCurrentChange="sizeCurrentChange"
                    >
                </component>
              </div>
            </div>
        </div>
    <div class="home-container-bottom-warp">
        <div class="home-container-bottom">
            <div class="bottom-links">
                <a href="#">网站地图</a> | <a href="#">版权申请</a> | <a href="#">交通路线</a> | <a href="#">联系我们</a>
            </div>
            <div class="bottom-info">
                <div class="info-item">
                    <i class="el-icon-location"></i>
                    <span>医院地址：江苏省宿迁沭阳县沭城镇苏州东路3号</span>
                </div>
                <div class="info-item">
                    <i class="el-icon-time"></i>
                    <span>门诊时间：08:00 —— 18:00</span>
                </div>
                <div class="info-item">
                    <i class="el-icon-phone"></i>
                    <span>免费热线：(0527) 8832 3979</span>
                </div>
            </div>
            <div class="qrcode-container">
                <div class="qrcode-box">
                    <img src="@/assets/images/home/qrcode.png" alt="微信公众号" class="qrcode-img">
                    <div class="qrcode-text">微信公众号</div>
                    <div class="triangle"></div>
                </div>
            </div>
            <div class="copyright">
                <span>苏ICP  备10101461号-5 版权所有@沭阳铭和医院</span>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    import introductionOne from '@/components/searchMoreDisplayColumn/index';
    import overview from '@/components/overview/index';
    import contentManagementAPI from "@/api/contentManagement";
    import advertisementAPI from "@/api/advertisement";
    import {getUploadFilePath} from '@/config/index';
    export default {
        name: "hospital-overview",
        components: {
            introductionOne,
            overview
        },
        watch: {
            '$route.query.contentTitle': {
                handler(newVal) {
                    if (newVal) {
                        this.contentTitle = newVal;
                        this.currentPageSize = 10;
                        this.currentCurrentPage = 1;
                        this.backHome();
                        this.getContentManagementList(this.contentTitle);
                    }
                },
                immediate: true
            }
        },
        data() {
            return {
                imgSrc: '',
                currentTabs:"0",
                currentTotal: 0,
                currentPageSize: 10,
                currentCurrentPage: 1,
                currentTabsLabel:"搜索结果",
                originCurrentTabsLabel:"搜索结果",
                currentContent:[],
                currentContentTitle: "",
                currentDutyContent: "",
                leftTabs: [
                    {
                        label:"搜索结果",
                        value:"0",
                        componentName: "introductionOne"
                    },
                ],
                componentName: "introductionOne",
                currentComponentName: "introductionOne",
                contentTitle: this.$route.query.contentTitle ?? "",
            }
        },
        methods: {
            clickOverview(value) {
                this.componentName = 'overview'
                this.getContentManagementById(value)
            },
            backHome() {
                this.componentName = this.currentComponentName
                this.currentTabsLabel = this.originCurrentTabsLabel
            },
            sizeCurrentChange(pageSize,currentPage) {
                this.currentPageSize = pageSize
                this.currentCurrentPage = currentPage
                this.getContentManagementList(this.contentTitle)
            },
            getContentManagementList(contentTitle) {
                // let param = { status: "1" , pageSize:this.currentPageSize, currentPage:this.currentCurrentPage, contentTitle:contentTitle }
                let param = { status: "1" , contentTitle:contentTitle }
                contentManagementAPI.getContentManagementList(param).then(res => {
                    if (res.code === 1000) {
                        // let tableData = res.data.list
                        // this.currentTotal = res.data.total
                        // this.currentContent = JSON.parse(JSON.stringify(tableData))
                        let tableData = res.data
                        this.currentTotal = res.data.length
                        this.currentContent = JSON.parse(JSON.stringify(tableData))
                    } else {
                        this.$message.error("获取数据失败，请重试")
                    }
                }).catch(err => {
                    this.$message.error("网络异常，请重试")
                })                
            },
            getContentManagementById(id) {
                let param = { id }
                contentManagementAPI.getContentManagementById(param).then(res => {
                    if (res.code === 1000) {
                         if(res.data.contentText) {
                            this.currentContentTitle = res.data.contentTitle;
                            this.currentDutyContent = res.data.contentText;
                        }
                    } else {
                        this.$message.error("获取数据失败，请重试")
                    }
                }).catch(err => {
                    this.$message.error("网络异常，请重试")
                })                
            },
            getFileList() {
                advertisementAPI
                    .getAdvertisementList({imageType:"1"})
                    .then((res) => {
                        if (res.code === 1000 && res.data.length > 0) {
                            let arrUp = [];
                            res.data.forEach((item) => {
                               arrUp.push(getUploadFilePath(item.imageFile));
                            });
                            this.imgSrc = arrUp[0]
                        }
                    })
                    .catch((err) => {});
            },            
        },
        mounted(){
            if(this.$route.query && (JSON.stringify(this.$route.query) !== '{}')) {
                let type = '0'
                this.currentContentTitle = ''
                this.currentDutyContent = ''
                this.currentTabs = this.leftTabs[type].value
                this.componentName = this.leftTabs[type].componentName
                this.currentComponentName = this.leftTabs[type].componentName
                this.currentTabsLabel = this.leftTabs[type].label
                this.originCurrentTabsLabel = this.leftTabs[type].label
                this.currentPageSize = 10
                this.currentCurrentPage = 1
                this.currentTotal = 0
                this.currentContent = []
                //类型（0：医保服务指南，1：医保政策解读，2、医院医保动态，3、医院动态，4、通知公告，5、健康园地，6、名医有约，7、人才招聘，8、就医指南）
                if(type === '0') {
                    this.getContentManagementList(this.contentTitle)
                }
                if(this.$route.query.id) {
                    this.componentName = 'overview'
                    this.getContentManagementById(this.$route.query.id)   
                }                
            }else {
                this.getContentManagementList(this.contentTitle)
            }
            this.getFileList()
        }
    }
</script>

<style scoped lang="scss">
    .hospital-overview-warp {
        width: 100%;
        background-color: #f5f5f5;
        cursor: default;
        .hospital-overview-header {
            width: 100%;
            height: 150px;
            .header-image {
                width: 100%;
                height: 150px;
            }
        }
        .hospital-overview-content-warp {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            .hospital-overview-content {
                width: 1168px;
                display: flex;
                justify-content: space-between;
                .content-right {
                    width: 100%;
                    min-height: 500px;
                    margin-bottom: 20px;
                }                
            }
        }
    .home-container-bottom-warp {
        width: 100%;
        height: 283px;
        background-color: #333;
        color: #fff;
        padding: 70px 0 20px;
        box-sizing: border-box;
        
        .home-container-bottom {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            
            .bottom-links {
                text-align: left;
                margin-bottom: 13px;
                
                a {
                    color: #fff;
                    text-decoration: none;
                    margin: 0 10px;
                    font-size: 12px;
                    line-height: 17px;
                    
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            
            .bottom-info {
                display: flex;
                flex-direction: column;
                // align-items: center;
                margin-bottom: 20px;
                
                .info-item {
                    margin-bottom: 15px;
                    font-size: 12px;
                    line-height: 17px;
                    display: flex;
                    align-items: center;
                    
                    i {
                        margin-right: 10px;
                        margin-left: 10px;
                        font-size: 16px;
                        line-height: 17px;
                    }
                }
            }
            
            .qrcode-container {
                position: absolute;
                right: 0;
                top: 0;
                
                .qrcode-box {
                    width: 120px;
                    position: relative;
                    text-align: center;
                    
                    .qrcode-img {
                        width: 94px;
                        height: 94px;
                        background-color: #fff;
                        padding: 6px;
                        border-radius: 6px;
                    }
                    
                    .qrcode-text {
                        color: #fff;
                        font-size: 12px;
                        margin-top: 20px;
                    }
                    
                    .triangle {
                        width: 0;
                        height: 0;
                        border-left: 10px solid transparent;
                        border-right: 10px solid transparent;
                        border-top: 10px solid #fff;
                        position: absolute;
                        bottom: 30px;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
            
            .copyright {
                text-align: center;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.7);
                margin-top: 50px;
                
                a {
                    color: rgba(255, 255, 255, 0.7);
                    text-decoration: none;
                    
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    }

</style>