digital_park_static/digital-park-web/digital-park/src/views/park-enterprises/Detail.vue

<!-- 园区企业详情 -->
<template>
    <div class="">
        <section class="nav_box">
            <Nav></Nav>
            <div class="second_nv">
                <div>
                    <div class="position">
                        <img src="" alt="" />
                        <span>
                            当前位置：
                            <span class="pointer">园区企业</span>
                            <span style="margin:0 4px;">></span>
                            <span class="current pointer">详情</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="detail_box">
                <section class="top_box">
                    <div class="company_img_box">
                        <img class="company_img" src="" alt="" />
                        <div class="tip_img"></div>
                    </div>
                    <div class="right_box">
                        <div class="top_row">
                            <span>{{ companyInfo.companyName }}</span>
                            <div>
                                <span class="pointer">
                                    <img src="@assets/image/company/icon_save.png" alt="保存" />
                                    保存
                                </span>
                                <span class="pointer">
                                    <img src="@assets/image/company/icon_cancel.png" alt="取消" />
                                    取消
                                </span>
                                <span class="pointer">
                                    <img src="@assets/image/company/icon_edit.png" alt="编辑" />
                                    编辑
                                </span>
                                <span class="pointer">
                                    <img src="@assets/image/company/icon_claim.png" alt="认领" />
                                    认领
                                </span>
                            </div>
                        </div>
                        <div class="middle_row">
                            <div class="company_type">
                                <span>{{ companyInfo.enterpriseLabel }}</span>
                                <span>科技型中小企业</span>
                                <span>科技型中小企业</span>
                                <span>科技型中小企业</span>
                            </div>
                            <div class="time">
                                <img src="" alt="" />
                                <span>
                                    更新时间：{{
                                        companyInfo.modifiedOn | formatDate("YYYY-MM-DD")
                                    }}
                                </span>
                            </div>
                        </div>
                        <div class="company_info">
                            <div>
                                法人代表：
                                <span>{{ companyInfo.legalPerson }}</span>
                            </div>
                            <div>
                                统一社会信用代码：
                                <span>{{ companyInfo.creditCode }}</span>
                            </div>
                            <div>
                                电话：
                                <span>{{ companyInfo.companyMobilePhone }}</span>
                            </div>
                            <div>
                                法人代表：
                                <span>www.hhrchina.com</span>
                            </div>
                            <div>
                                成立日期：
                                <span>
                                    {{ companyInfo.establishOn | formatDate("YYYY-MM-DD") }}
                                </span>
                            </div>
                            <div>
                                邮箱：
                                <span>{{ companyInfo.email }}</span>
                            </div>
                        </div>
                    </div>
                </section>

                <div class="tab_box">
                    <span
                        :class="['pointer', activeTab === item.value ? 'active' : '']"
                        v-for="item in tabs"
                        :key="item.value"
                        @click="changeTab(item)"
                    >
                        {{ item.name }}
                    </span>
                </div>
            </div>
        </section>
        <section class="content_box">
            <basic-info :companyInfo="companyInfo"></basic-info>
            <company-dev :companyInfo="companyInfo"></company-dev>
            <!-- <intellectual-property :companyInfo="companyInfo"></intellectual-property> -->
            <other-info :companyInfo="companyInfo"></other-info>
        </section>
        <Footer></Footer>
        <claim-dialog></claim-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Nav from "@components/Header.vue";
import Footer from "@components/Footer.vue";
import BasicInfo from "./components/BasicInfo.vue";
import CompanyDev from "./components/CompanyDev.vue";
// import IntellectualProperty from "./components/IntellectualProperty.vue";
import OtherInfo from "./components/OtherInfo.vue";
import ClaimDialog from "./components/ClaimDialog.vue";
import { getCompanyById } from "@api/company";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        Nav,
        Footer,
        BasicInfo,
        CompanyDev,
        // IntellectualProperty,
        OtherInfo,
        ClaimDialog,
    },
    data() {
        //这里存放数据
        return {
            companyId: "",
            tabs: [
                {
                    name: "基本信息",
                    value: 1,
                },
                {
                    name: "企业发展",
                    value: 2,
                },
                // {
                //     name: "知识产权",
                //     value: 3,
                // },
                {
                    name: "其他信息（可编辑）",
                    value: 4,
                },
            ],
            activeTab: 1,
            companyInfo: null,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        changeTab(item) {
            this.activeTab = item.value;
        },
        getData() {
            let params = {
                companyId: this.companyId,
            };
            getCompanyById(params)
                .then(res => {
                    console.log(res.data);
                    if (res.data.status == 0) {
                        this.companyInfo = res.data.data;
                    } else {
                        this.$message.error(`获取数据失败,请刷新重试！`);
                    }
                    this.pageLoading = false;
                })
                .catch(err => {
                    this.$message.error(`获取数据失败,失败原因${err},请刷新重试！`);
                });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.companyId = this.$route.query.companyId;
        this.getData();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.nav_box {
    background: url("~@assets/image/company/bg_company.png") no-repeat;
    position: relative;
    .second_nv {
        @include size(100%, 250px);
        > div {
            @include size($wrapWidth, 100%);
            margin: 0 auto;
            @include flex(column, flex-start, flex-start, null);
            position: relative;
        }

        .position {
            @include flex(row, flex-start, center, null);
            img {
                @include size(16px, 16px);
                background: #ffffff;
                margin-right: 6px;
            }
            padding-top: 10px;
            @include border-box;
            @include font(16px, #ffffff);
            .current {
                font-weight: 600;
            }
        }
    }
}
.detail_box {
    @include size($wrapWidth, 320px);
    padding: 30px 30px 10px;
    @include border-box;
    background-image: linear-gradient(0deg, #ffffff 0%, #cce7fa 100%);
    position: absolute;
    left: 50%;
    bottom: -50%;
    transform: translateX(-50%);
    @include flex(column, space-between, flex-start, nowrap);
    .tab_box {
        width: 100%;
        @include flex(row, flex-start, flex-start, null);
        border: solid 1px #bcd8e9;
        @include border-box;
        background: #ffffff;
        span {
            @include size(200px, 50px);
            @include font(16px, #637485);
            @include flex(row, center, center, null);
            border-right: solid 1px #bcd8e9;
            @include border-box;
        }
        .active {
            background-image: linear-gradient(0deg, #ffffff 0%, #cce7fa 100%);
        }
    }
    .top_box {
        @include flex(row, space-between, center, nowrap);
        .company_img_box {
            @include size(220px, 200px);

            position: relative;
            .company_img {
                background: pink;
                @include size(200px, 100%);
            }
            .tip_img {
                @include size(68px, 22px);
                background-image: linear-gradient(135deg, #4bbe8e 0%, #22a76f 100%);
                position: absolute;
                top: 20px;
                left: 0;
            }
        }
        .right_box {
            height: 200px;
            flex: 1;

            @include flex(column, space-between, flex-start, nowrap);
            .top_row {
                width: 100%;
                @include flex(row, space-between, center, null);
                > span {
                    @include font(24px, #334a5f);
                    font-weight: 600;
                }
                > div {
                    @include flex(row, flex-start, center, null);
                    @include font(16px, #ffffff);
                    > span {
                        img {
                            @include size(20px, 20px);
                            background: #fff;
                            margin-right: 8px;
                        }
                        @include size(90px, 30px);
                        background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
                        border-radius: 15px;
                        margin-left: 10px;
                        @include flex(row, center, center, null);
                        @include border-box;
                    }
                }
            }
            .middle_row {
                width: 100%;
                @include flex(row, space-between, center, null);
                .company_type {
                    > span {
                        @include font(14px, #0086e7);
                        padding: 2px 8px;
                        border: solid 1px #0086e7;
                        @include border-box;
                        margin-right: 10px;
                    }
                }
                .time {
                    @include flex(row, center, center, null);
                    img {
                        @include size(20px, 20px);
                        background: #fff;
                        margin-right: 8px;
                    }
                    @include font(14px, #637485);
                }
            }
            .company_info {
                @include size(100%, 100px);
                @include font(14px, #637485);
                background-color: #f4fafe;
                @include flex(row, space-between, center, wrap);
                padding: 20px;
                @include border-box;
                > div {
                    width: 30%;
                    span {
                        color: #334a5f;
                        font-weight: 600;
                    }
                }
                > div:nth-child(3n + 2) {
                    width: 40%;
                }
            }
        }
    }
}
.content_box {
    width: $wrapWidth;
    margin: 0 auto;
    padding: 200px 0 30px 0;
    @include border-box;
}
</style>