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"></img>
                    </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">
                    <div class="main-img-box fl">
                        主图
                    </div>
                    <div class="main-info fl">
                        <div class="main-title-box">
                            <div class="main-title fl">
                                上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司上海禾获仁网络科技有限公司
                            </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">{{ companyDetail[info.value] }}</span>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-container">
            <div class="my-message-box">
                <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.createdOn | 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 { getCompanyById } from '@api/company';
import { routerOpenInNewWindow } 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:["科技型中小企业1","科技型中小企业2","科技型中小企业3","科技型中小企业4","科技型中小企业5","科技型中小企业科技型中小企业科技型中小企业科技型中小企业科技型中小企业6","科技型中小企业7","科技型中小企业","科技型中小企业科技型中小企业",],
            // 公司信息
            mainOtherInfo:[
                {
                    label:"法人代表",
                    value:"legalPerson",
                    span:7
                },
                {
                    label:"统一社会信用代码",
                    value:"creditCode",
                    span:10
                },
                {
                    label:"电话",
                    value:"companyMobilePhone",
                    span:7
                },
                {
                    label:"网站",
                    value:"www.hhrchina.com",
                    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",
                },
            ],
        }; 
    },
    mounted(){
        this.initData();
    },
    methods: {
        // 初始化加载数据
        initData(){
            console.log(this.$cloneDeep(this.currentAccount),'登录信息');
            this.pageLoading = true;
            Promise.all([
                // 获取企业信息
                this.getCompanyById(),
                // 获取我的消息
                this.getMessageNoticeList()
            ]).then(()=>{
                this.pageLoading = false;
            })
        },
        // 获取企业信息
        getCompanyById(){
            return new Promise( (resolve, reject) => {
                getCompanyById({companyId:this.currentAccount.accountId}).then(res => {
                    if(res.data.status == 0){
                        this.companyDetail = res.data.data;
                        // 测试代码，让企业已认领
                        this.isClaimed = this.companyDetail.claimState;
                        console.log(this.$cloneDeep(this.companyDetail),'企业信息')
                    }else if(res.data.status == 102){
                        this.$router.push('/login')
                    }else {
                        this.$message.error(res.data.msg);
                    }
                    resolve();
                }).catch(err => {
                    console.log(err);
                    resolve();
                })
            })
        },
        // 我的消息
        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>