digital_park_static/digital-park-web/digital-park/src/views/my-related/business/Business.vue

<template>
    <div
        class="business"
        data-1664518006392
        v-loading="pageLoading"
        element-loading-text="数据加载中..."
    >
        <div class="business-header" :class="{'is-claimed':isClaimed}">
            <Nav />
            <div class="header-container">
                <div class="company-name">
                    <div
                        class="company-span fl"
                    >用户名：{{ currentAccount ? currentAccount.accountName : ''}}</div>
                    <span class="logout fl" @click="logout">退出登录</span>
                    <!-- 未认领，未入驻园区 -->
                    <div class="company-btn fr" v-if="!isClaimed">
                        我是企业，
                        <span class="btn-span" @click="openApplyForAdmission">我要入驻园区</span>
                        <img src="~@assets/image/myRelated/companyBtnIcon.png" alt="icon" />
                    </div>
                    <!-- 未认领 -->
                    <!-- <div class="company-btn fr" v-if="!isClaimed">
                        <span class="btn-span" @click="showClaimDialog = true">认领企业</span>
                        <img src="~@assets/image/myRelated/companyBtnIcon.png" alt="icon">
                    </div>-->
                </div>
                <div
                    class="comany-info-box"
                    v-if="isClaimed"
                    @click="goDetail(companyDetail.companyId)"
                >
                    <div class="main-img-box fl">
                        <img :src="formatImg(mainImg)" alt="main-img" />
                    </div>
                    <div class="main-info fl">
                        <div class="main-title-box">
                            <div
                                class="main-title fl"
                                :title="companyDetail.companyName"
                            >{{ companyDetail.companyName }}</div>
                            <div class="main-icon fl">
                                <img src="~@assets/image/myRelated/isClaimedIcon.png" alt />
                                已认领
                            </div>
                        </div>
                        <div class="main-tag-box">
                            <span
                                v-for="(tag,inx) of comanyTags"
                                :key="inx"
                                class="tag-span fl"
                            >{{ tag }}</span>
                        </div>
                        <div class="main-other-info">
                            <el-row :gutter="20">
                                <el-col
                                    :span="info.span"
                                    v-for="(info,inx) of mainOtherInfo"
                                    :key="inx"
                                    class="info-col"
                                >
                                    <span class="label-span">{{ info.label }}：</span>
                                    <span
                                        class="value-span"
                                        v-if="info.value == 'establishOn'"
                                    >{{ companyDetail[info.value] | formatDate("YYYY-MM-DD") }}</span>
                                    <span
                                        class="value-span"
                                        v-else
                                        :title="companyDetail[info.value]"
                                    >{{ companyDetail[info.value] | formatNull}}</span>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-container">
            <div class="my-message-box" v-if="myMsgList.length > 0">
                <div class="title">
                    <span class="title-span">我的消息</span>
                    <span class="num-msg" v-if="notRead > 0">（您有{{ notRead }}条未读通知）</span>
                    <div class="more-icon fr" @click="goPath('/my-message')">
                        <img src="~@assets/image/index/icon_more.png" alt="more" />
                    </div>
                </div>
                <div class="msg-list">
                    <div
                        class="msg-list-item"
                        v-for="(item,inx) of myMsgList"
                        :key="inx"
                        @click="openDetail(item)"
                    >
                        <div class="icon fl"></div>
                        <div class="msg-text fl">{{ item.title }}</div>
                        <div
                            class="msg-time fr"
                        >{{ item.modifiedOn | formatDate("YYYY-MM-DD HH:mm") }}</div>
                    </div>
                </div>
            </div>
            <div class="tax-query-box my-message-box">
                <div class="title">
                    <span class="title-span">税收查询</span>
                    <div class="more-icon fr" @click="goPath('/tax-inquiry')">
                        <img src="~@assets/image/index/icon_more.png" alt="more" />
                    </div>
                </div>
                <!-- 没授权 -->
                <div class="tax-content" v-if="!isAuthorize">
                    <div class="tax-btn">
                        <el-button type="primary">企业授权</el-button>
                    </div>
                    <div class="tax-info">企业授权后即可进行税收查询</div>
                </div>
                <!-- 已授权 -->
                <div class="tax-content" v-else>
                    <div class="tax-content-title">
                        <div
                            class="fl tax-item"
                            v-for="(item,inx) of taxComanyInfo"
                            :key="inx"
                            :style="{'width': item.width + '%'}"
                        >
                            <div class="tax-info-box">
                                <div class="fl tax-icon-box">
                                    <img
                                        :src="require('@assets/image/myRelated/' + item.icon + '.png')"
                                        alt="icon"
                                    />
                                </div>
                                <div class="fl tax-right-content">
                                    <div
                                        class="tax-right-title"
                                        :title="item.label"
                                    >{{ item.label }}</div>
                                    <div
                                        class="tax-right-value"
                                        :title="item.value"
                                    >{{ item.value }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-table class="tax-tabel" :border="true" :data="taxTableData">
                        <el-table-column prop="v1" label="申报类型" />
                        <el-table-column prop="v2" label="申报日期" />
                        <el-table-column prop="v3" label="开始日期" />
                        <el-table-column prop="v4" label="结束日期" />
                        <el-table-column prop="v5" label="金额" />
                    </el-table>
                </div>
            </div>
        </div>
        <Footer />
        <!-- 入驻园区 -->
        <ApplyForAdmission ref="ApplyForAdmission" />
        <!-- 消息详情 -->
        <MessageDetailDialog ref="MessageDetailDialog" @close="initData" />
    </div>
</template>

<script>
import "./Business.scss";
import Nav from "@components/Header.vue";
import Footer from "@components/Footer.vue";
import { logout } from "@api/login";
import { getCompanyList } from "@api/company";
import { routerOpenInNewWindow, formatImg } from "@/utils/common.js";
import { mapGetters } from "vuex";
import ApplyForAdmission from "@/views/index/ApplyForAdmission.vue";
import MessageDetailDialog from "../mseeage/components/MessageDetailDialog/index.vue";
import { getMessageNoticeList, markReadMessage } from "@api/my-related";
export default {
    components: { Nav, Footer, ApplyForAdmission, MessageDetailDialog },
    computed: {
        ...mapGetters({
            currentAccount: "currentAccount",
        }),
    },
    data() {
        return {
            pageLoading: false,
            companyDetail: {},
            // 是否认领企业
            isClaimed: false,
            // 认领企业弹框
            showClaimDialog: false,
            // 是否入驻园区
            isSettleParl: false,
            // 公司标签
            comanyTags: [],
            // 公司信息
            mainOtherInfo: [
                {
                    label: "法人代表",
                    value: "legalPerson",
                    span: 7,
                },
                {
                    label: "统一社会信用代码",
                    value: "creditCode",
                    span: 10,
                },
                {
                    label: "电话",
                    value: "companyMobilePhone",
                    span: 7,
                },
                {
                    label: "网站",
                    value: "url",
                    span: 7,
                },
                {
                    label: "成立日期",
                    value: "establishOn",
                    span: 10,
                },
                {
                    label: "邮箱",
                    value: "email",
                    span: 7,
                },
            ],
            // 我的消息
            myMsgList: [],
            // 未读条数
            notRead: 0,
            // 是否授权
            isAuthorize: true,
            // 税收查询公司信息
            taxComanyInfo: [
                {
                    label: "公司名称",
                    value: "上海禾获仁网络科技有限公司",
                    icon: "tax-1",
                    width: 29,
                },
                {
                    label: "纳税人识别号",
                    value: "91310115MA1H71QG17",
                    icon: "tax-2",
                    width: 29,
                },
                {
                    label: "税务征信等级",
                    value: "SSS",
                    icon: "tax-3",
                    width: 20,
                },
                {
                    label: "评价得分(大查柜)",
                    value: "98（2015）",
                    icon: "tax-4",
                    width: 22,
                },
            ],
            taxTableData: [
                {
                    v1: "企业所得税",
                    v2: "2022-12-23",
                    v3: "2022-12-23",
                    v4: "2022-12-23",
                    v5: "50066.25",
                },
                {
                    v1: "企业所得税",
                    v2: "2022-12-23",
                    v3: "2022-12-23",
                    v4: "2022-12-23",
                    v5: "50066.25",
                },
            ],
            // 主图
            mainImg: "",
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        // 初始化加载数据
        initData() {
            console.log(this.$cloneDeep(this.currentAccount), "登录信息");
            this.pageLoading = true;
            Promise.all([
                // 获取企业信息
                this.getCompanyList(),
                // 获取我的消息
                this.getMessageNoticeList(),
            ]).then(() => {
                this.pageLoading = false;
            });
        },
        // 获取企业信息
        getCompanyList() {
            return new Promise((resolve, reject) => {
                getCompanyList({ claim: true })
                    .then((res) => {
                        if (res.data.status == 0) {
                            // console.log(res.data.data);
                            this.companyDetail = res.data.data.list[0];
                            let { enterpriseLabel, logo, claimState } =
                                this.companyDetail;
                            // 是否认领
                            this.isClaimed = claimState.total > 0 && claimState && claimState.text == '已认领';
                            
                            // 主图
                            this.mainImg = logo ? JSON.parse(logo)[0] : "";
                            // 标签
                            this.comanyTags = enterpriseLabel
                                ? enterpriseLabel.text
                                : [];
                        } else if (res.data.status == 102) {
                            this.$router.push("/login");
                        } else {
                            this.$message.error(res.data.msg);
                        }
                        resolve();
                    })
                    .catch((err) => {
                        console.log(err);
                        resolve();
                    });
            });
        },
        goDetail(companyId) {
            this.$router.push({
                path: "/company-detail",
                query: {
                    companyId,
                    canEdit: 1,
                },
            });
        },
        formatImg(url) {
            return formatImg(url);
        },
        // 我的消息
        getMessageNoticeList() {
            let param = {
                page: 1,
                pageSize: 10,
            };
            getMessageNoticeList(param)
                .then((res) => {
                    if (res.data.status == 0) {
                        const data = res.data.data;
                        let { resultData } = data;
                        this.myMsgList = resultData.list;
                        this.notRead = resultData.total - data.readCount;
                        this.notRead = this.notRead < 0 ? 0 : this.notRead;
                    } else if (res.data.status == 102) {
                        this.$router.push("/login");
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                    resolve();
                });
        },
        markReadMessage(list) {
            markReadMessage(list)
                .then(() => {})
                .catch((err) => {});
        },
        // 跳转路由
        goPath(path) {
            console.log(1);
            routerOpenInNewWindow({
                path,
            });
        },
        // 获取公司名称
        getCompanyName() {
            let companyName = "未认领企业";
            // 如果已认领但是未入驻园区
            if (this.isClaimed) {
                companyName = "上海禾获仁网络科技有限公司";
            }
            return companyName;
        },
        // 打开详情
        openDetail(row) {
            this.$refs.MessageDetailDialog.openDialog(row);
            if (!row.isRead) {
                row.isRead = true;
                this.markReadMessage([row.messageNoticeId]);
            }
        },
        // 入驻园区
        openApplyForAdmission() {
            this.$refs.ApplyForAdmission.showDialog();
        },
        // 退出登录
        logout() {
            this.$confirm("确认是否退出登录", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    logout().then(() => {
                        this.$store.dispatch("getUserInfo").then(() => {
                            this.$router.push("/login");
                            this.$message.info("已退出登录");
                        });
                    });
                })
                .catch(() => {});
        },
    },
};
</script>

<style>
</style>