digital_park_static/digital-park-web/digital-park/src/views/park-enterprises/components/CompanyItem.vue

<!-- 园区企业单个item      -->
<template>
    <div class="item_box" @click="goDetail(companyInfo.companyId)">
        <img class="company_img" :src="formatImg(JSON.parse(companyInfo.logo)[0])" alt="企业图片" />
        <div class="info_box pointer">
            <div class="title_box">
                <span class="company_title" :title="companyInfo.companyName">
                    {{ companyInfo.companyName }}
                </span>
                <span
                    :class="[
                        'claim_state',
                        companyInfo &&
                        companyInfo.claimState &&
                        companyInfo.claimState.text === '已认领'
                            ? 'claimed'
                            : 'not_claim',
                    ]"
                >
                    {{ companyInfo.claimState.text }}
                </span>
            </div>
            <div
                class="company_info"
                :title="
                    `法人：${companyInfo.legalPerson};状态：${companyInfo.enterpriseState};注册资本：${companyInfo.registeredCapital};信用代码：${companyInfo.creditCode}`
                "
            >
                <span>法人：{{ companyInfo.legalPerson }}</span>
                <span>状态：{{ companyInfo.enterpriseState }}</span>
                <span>注册资本：{{ companyInfo.registeredCapital }}</span>
                <span>信用代码：{{ companyInfo.creditCode }}</span>
            </div>
            <div
                class="company_info"
                :title="
                    `成立日期：${formatDateFun(companyInfo.establishOn, 'YYYY-MM-DD')};行业：${
                        companyInfo.ownerIndustry
                    };地址：${companyInfo.businessAddress}`
                "
            >
                <span>成立日期：{{ companyInfo.establishOn | formatDate("YYYY-MM-DD") }}</span>
                <span v-if="companyInfo.ownerIndustry">行业：{{ companyInfo.ownerIndustry }}</span>
                <span>地址：{{ companyInfo.businessAddress }}</span>
            </div>
            <div class="advantage_box" v-if="enterpriseLabel.length > 0" :title="enterpriseLabel">
                <span v-for="item in enterpriseLabel" :key="item">
                    {{ item }}
                </span>
            </div>
            <div
                :class="[
                    'business',
                    !enterpriseLabel || enterpriseLabel.length === 0 ? 'two_rows' : 'one_rows',
                ]"
                :title="companyInfo && companyInfo.businessScope ? companyInfo.businessScope : ''"
            >
                <template v-if="companyInfo.businessScope">
                    <span>主营业务：</span>
                    {{ companyInfo.businessScope }}
                </template>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { formatImg, formatDateFun } from "@/utils/common.js";
export default {
    //import引入的组件需要注入到对象中才能使用
    props: {
        companyInfo: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    data() {
        //这里存放数据
        return {};
    },
    //监听属性 类似于data概念
    computed: {
        enterpriseLabel() {
            return this.companyInfo?.enterpriseLabel?.text ?? [];
        },
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        formatImg,
        formatDateFun,
        goDetail(companyId) {
            this.$router.push({
                path: "/company-detail",
                query: {
                    companyId,
                },
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.item_box {
    @include size(100%, auto);
    border: solid 1px #bcd8e9;
    padding: 30px;
    @include border-box;
    @include flex(row, flex-start, center, null);
    margin-bottom: 30px;
    .company_img {
        @include size(280px, 180px);
    }
    .info_box {
        flex: 1;
        height: 180px;
        padding-left: 30px;
        @include border-box;
        @include flex(column, flex-start, flex-start, null);
        overflow: hidden;
        .title_box {
            @include flex(row, flex-start, center, null);
            margin-bottom: 15px;
            width: 100%;
            .company_title {
                max-width: calc(100% - 80px);
                @include font(18px, #334a5f);
                font-weight: 600;
                margin-right: 10px;
                @include text-ellipsis;
            }
            .claim_state {
                @include size(68px, 22px);
                @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;
            }
        }
        .company_info {
            width: 100%;
            margin-bottom: 10px;
            @include font(16px, #637485);
            @include text-ellipsis;
            span {
                padding-right: 8px;
                @include border-box;
            }

            > span + span {
                border-left: solid 1px #637485;
                padding-left: 8px;
            }
        }
        .advantage_box {
            margin-bottom: 15px;
            margin-top: 10px;
            span {
                @include font(14px, #0086e7);
                padding: 2px 8px;
                border: solid 1px #0086e7;
                @include border-box;
                margin-right: 10px;
            }
        }
        .business {
            width: 100%;
            min-height: 20px;
            @include font(16px, #637485);
            margin-top: 8px;
            span {
                @include font(16px, #334a5f);
                font-weight: 600;
            }
        }
        .one_rows {
            @include text-ellipsis;
        }
        .two_rows {
            @include text-ellipsis-multiple(2);
        }
    }
}
</style>