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

<!-- 园区企业详情 -->
<template>
    <div class="" v-loading="pageLoading">
        <section class="nav_box">
            <Nav></Nav>
            <div class="second_nv">
                <div>
                    <div class="position">
                        <img src="@assets/image/company/icon_address.png" alt="地址" />
                        <span>
                            当前位置：
                            <span class="pointer" @click="$router.push('/company-list')">
                                园区企业
                            </span>
                            <span style="margin:0 4px;">></span>
                            <span class="current pointer">详情</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="detail_box" v-if="companyInfo">
                <section class="top_box">
                    <div class="company_img_box">
                        <img class="company_img" src="" alt="" />
                        <div class="tip_img">
                            <span
                                :class="[
                                    'claim_state',
                                    companyInfo.claimState.text === '已认领'
                                        ? 'claimed'
                                        : 'not_claim',
                                ]"
                            >
                                {{ companyInfo.claimState.text }}
                            </span>
                        </div>
                    </div>
                    <div class="right_box">
                        <div class="top_row">
                            <span>{{ companyInfo.companyName }}</span>
                            <div>
                                <template v-if="canEdit == 1">
                                    <template v-if="isEditing">
                                        <span class="pointer" @click="updateCompany">
                                            <img
                                                src="@assets/image/company/icon_save.png"
                                                alt="保存"
                                            />
                                            保存
                                        </span>
                                        <span class="pointer" @click="cancelEdit">
                                            <img
                                                src="@assets/image/company/icon_cancel.png"
                                                alt="取消"
                                            />
                                            取消
                                        </span>
                                    </template>

                                    <span v-else class="pointer" @click="isEditing = true">
                                        <img src="@assets/image/company/icon_edit.png" alt="编辑" />
                                        编辑
                                    </span>
                                </template>
                                <span
                                    class="pointer"
                                    v-if="!canEdit && companyInfo.claimState.text !== '已认领'"
                                    @click="setClaimDialog"
                                >
                                    <img src="@assets/image/company/icon_claim.png" alt="认领" />
                                    认领
                                </span>
                            </div>
                        </div>
                        <div class="middle_row">
                            <div class="company_type">
                                <template v-if="enterpriseLabel.length > 0">
                                    <span v-for="item in enterpriseLabel" :key="item">
                                        {{ item }}
                                    </span>
                                </template>
                            </div>
                            <div class="time">
                                <img src="@assets/image/company/icon_update.png" 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, index) in tabs"
                        :key="item.value"
                        @click="changeTab(item, index)"
                    >
                        {{ item.name }}
                    </span>
                </div>
            </div>
        </section>
        <section class="content_box" v-if="companyInfo">
            <basic-info class="content_item" ref="content1" :companyInfo="companyInfo"></basic-info>
            <company-dev
                class="content_item"
                ref="content2"
                :companyInfo="companyInfo"
            ></company-dev>
            <!-- <intellectual-property :companyInfo="companyInfo"></intellectual-property> -->
            <other-info
                class="content_item"
                ref="content4"
                :companyInfo="companyInfo"
                :isEditing="isEditing"
            ></other-info>
        </section>
        <Footer></Footer>
        <claim-dialog v-if="showClaimDialog" :claimDialog="claimDialog"></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, updateCompany } from "@api/company";
import { mapGetters } from "vuex";

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,
            showClaimDialog: false,
            claimDialog: false,
            canEdit: 0,
            isEditing: false,
        };
    },
    //监听属性 类似于data概念
    computed: {
        enterpriseLabel() {
            return this.companyInfo?.enterpriseLabel?.text ?? [];
        },
        ...mapGetters({
            currentAccount: "currentAccount",
        }),
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 锚点点击事件
        changeTab(item, index) {
            this.activeTab = item.value;

            let jumpDom = document.querySelectorAll(".content_item")[index];
            let scrollTop = jumpDom.offsetTop; // 获取需要滚动的距离
            window.scrollTo({
                top: scrollTop,
                behavior: "smooth", // 平滑滚动
            });
            // location.href = `#content${this.activeTab}`;
        },

        getData() {
            let params = {
                companyId: this.companyId,
            };
            this.pageLoading = true;
            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},请刷新重试！`);
                });
        },
        setClaimDialog() {
            // 是否登录
            console.log(this.currentAccount, "this.currentAccount");
            if (!this.currentAccount) {
                this.$router.push("/login");
            }

            this.showClaimDialog = true;
            this.claimDialog = true;
        },
        cancelEdit() {
            this.isEditing = false;
        },
        updateCompany() {
            this.companyInfo.enterpriseFeatures = this.$refs.content4.$data.uploadFileList.join(
                ","
            );
            updateCompany(this.companyInfo)
                .then(res => {
                    console.log(res.data);
                    if (res.data.status == 0) {
                        this.isEditing = false;
                        this.$message.success(`保存成功！`);
                        this.getData();
                    } else {
                        this.$message.error(`保存失败,请刷新重试！`);
                    }
                })
                .catch(err => {
                    this.$message.error(`保存失败,失败原因${err},请刷新重试！`);
                });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.canEdit = this.$route.query.canEdit;
        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;
    overflow: visible;
    // position: sticky;
    // top: 0;
    // z-index: 2;
    .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);
                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;
        position: sticky;
        top: 0;
        z-index: 2;
        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);
                position: absolute;
                top: 20px;
                left: 0;
                .claim_state {
                    @include size(100%, 100%);
                    @include flex(row, flex-start, center, null);
                    @include font(14px, #fff);
                    padding-left: 6px;
                    @include border-box;
                }
                .claimed {
                    background: url("~@assets/image/company/bg_claimed.png") no-repeat;
                }
                .not_claim {
                    background: url("~@assets/image/company/bg_not_claim.png") no-repeat;
                }
            }
        }
        .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);
                            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 {
                    flex: 1;
                    @include text-ellipsis;
                    > span {
                        display: inline-block;
                        @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);
                        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>