1. 我的企业消息列表集成 0-100%

2. 消息列表勾选已读、全部已读集成 0-100%
3 登录页效验调整

digital-park-web/digital-park/src/api/my-related/index.js

 /**
  * api-我的 相关接口
  */
- import { get, post } from "@/utils/http";
+import { get, post } from "@/utils/http";
 
 
 // 我的消息
-export const getMessageNoticeList = p => get("/messageNotice/getMessageNoticeList", p);
+export const getMessageNoticeList = p => get("/messageNotice/getMessageNoticeList", p);
+
+// 设置已读
+export const markReadMessage = p => post('/messageNotice/updateIsRead', p);

digital-park-web/digital-park/src/utils/common.js

     } else {
         Message.error(msg);
     }
-};
+};
+
+/**
+ * markdown格式文本转成HTML文本
+ * @param {*} markdownText 
+ * @returns 
+ */
+
+export const parseMarkdown = (markdownText) => {
+    const htmlText = markdownText
+        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+        .replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
+        .replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
+        .replace(/\*(.*)\*/gim, '<i>$1</i>')
+        .replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />")
+        .replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>")
+        .replace(/\n$/gim, '<br />')
+        .replace(/[\r\n]/g, "<br />")
+    return htmlText.trim()
+}

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

                     line-height: 35px;
                     height: 35px;
                     cursor: pointer;
+                    &:hover {
+                        color: #0070d2;
+                        font-weight: bold;
+                    }
                     .icon {
                         width: 15px;
                         height: 15px;
                         border-radius: 50%;
-                        // background: red;
                         box-sizing: border-box;
                         border: 2px solid #0070d2;
-                        margin-right: 5px;
-                        margin-top: 10px;
+                        margin-right: 10px;
+                        margin-top: 11px;
                     }
                     .msg-text {
                         width: calc(100% - 175px);

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

                         用户名：{{ currentAccount ? currentAccount.accountName  : ''}}   
                     </div>
                     <span class="logout fl" @click="logout">退出登录</span>
-                    <!-- 已认领，未入驻园区 -->
-                    <div class="company-btn fr" v-if="isClaimed && !isSettleParl">
-                        我是企业，<span class="btn-span">我要入驻园区</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">
+                    <!-- <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>
                 <div class="comany-info-box" v-if="isClaimed">
                     <div class="main-img-box fl">
                             <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">{{ info.value }}</span>
+                                    <span class="value-span">{{ companyDetail[info.value] }}</span>
                                 </el-col>
                             </el-row>
                         </div>
             <div class="my-message-box">
                 <div class="title">
                     <span class="title-span">我的消息</span>
-                    <span class="num-msg">（您有4条未读通知）</span>
+                    <span class="num-msg">（您有{{ 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">
+                    <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.msg }}</div>
-                        <div class="msg-time fr">{{ item.time }}</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>
         </div>
         <Footer />
-        <!-- 认领企业 -->
-        <ClaimDialog :claimDialog="showClaimDialog" @close="showClaimDialog = false" @updateData="initData"/>
+        <!-- 入驻园区 -->
+        <ApplyForAdmission ref="ApplyForAdmission"/>
+        <!-- 消息详情 -->
+        <MessageDetailDialog ref="MessageDetailDialog" />
     </div>
 </template>
 
 import { getCompanyById } from '@api/company';
 import { routerOpenInNewWindow } from "@/utils/common.js";
 import { mapGetters } from "vuex";
-import ClaimDialog from "@/views/park-enterprises/components/ClaimDialog.vue";
+import ApplyForAdmission from "@/views/index/ApplyForAdmission.vue";
+import MessageDetailDialog from "../mseeage/components/MessageDetailDialog/index.vue";
+import { getMessageNoticeList } from "@api/my-related";
 export default {
-    components: { Nav, Footer,ClaimDialog },
+    components: { Nav, Footer,ApplyForAdmission,MessageDetailDialog },
     computed: {
         ...mapGetters({
             currentAccount: "currentAccount",
             mainOtherInfo:[
                 {
                     label:"法人代表",
-                    value:"李瑾",
+                    value:"legalPerson",
                     span:7
                 },
                 {
                     label:"统一社会信用代码",
-                    value:"91310115MA1H71QG17",
+                    value:"creditCode",
                     span:10
                 },
                 {
                     label:"电话",
-                    value:"021-64643026",
+                    value:"companyMobilePhone",
                     span:7
                 },
                 {
                 },
                 {
                     label:"成立日期",
-                    value:"2015-10-22",
+                    value:"establishOn",
                     span:10
                 },
                 {
                     label:"邮箱",
-                    value:"3530451045@qq.com",
+                    value:"email",
                     span:7
                 },
             ],
             // 我的消息
-            myMsgList:[
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！把握住企业的选址动向，招商工作就赢了一半了！把握住企业的选址动向，招商工作就赢了一半了！把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-                {
-                    msg:"把握住企业的选址动向，招商工作就赢了一半了！",
-                    time:"2022-09-01 18:00"
-                },
-            ],
+            myMsgList:[],
+            // 未读条数
+            notRead:0,
             // 是否授权
             isAuthorize:true,
             // 税收查询公司信息
             this.pageLoading = true;
             Promise.all([
                 // 获取企业信息
-                this.getCompanyById()
+                this.getCompanyById(),
+                // 获取我的消息
+                this.getMessageNoticeList()
             ]).then(()=>{
                 this.pageLoading = false;
             })
         },
         // 获取企业信息
         getCompanyById(){
-            return new Promise(async (resolve, reject) => {
-                let companyRes = await getCompanyById({companyId:this.currentAccount.accountId});
-                this.companyDetail = companyRes.data.data;
-                this.isClaimed = this.companyDetail.claimState;
+            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;
+                    }else if(res.data.status == 102){
+                        this.$router.push('/login')
+                    }else {
+                        this.$message.error(res.data.msg);
+                    }
+            }).catch(err => {
+                console.log(err);
                 resolve();
             })
         },
             }
             return companyName;
         },
+        // 打开详情
+        openDetail(row){
+            this.$refs.MessageDetailDialog.openDialog(row)
+        },
+        // 入驻园区
+        openApplyForAdmission(){
+            this.$refs.ApplyForAdmission.showDialog();
+        },
         // 退出登录
         logout(){
             this.$confirm('确认是否退出登录', '提示', {

digital-park-web/digital-park/src/views/my-related/mseeage/Message.scss

                     @include font(18px, #0086e7);
                     cursor: pointer;
                     margin-left: 10px;
+                    user-select: none;
                 }
             }
             .table-container {
             margin-top: 10px;
         }
     }
-    .detail-dialog {
-        .el-dialog {
-            border-radius: 6px;
-        }
-        .el-dialog__header {
-            display: none;
-        }
-        .el-dialog__body {
-            border-radius: 6px;
-            padding-top: 20px;
-            position: relative;
-            background: linear-gradient(to bottom, #cde8fb, #fff);
-            .close-icon {
-                position: absolute;
-                right: 19px;
-                height: 21px;
-                cursor: pointer;
-            }
-            .dialog-title {
-                @include font(24px, #334a5f);
-                font-weight: bold;
-                line-height: 33px;
-            }
-            .detial-title {
-                margin-top: 30px;
-                @include font(24px, #0086e7);
-                text-align: center;
-            }
-            .detial-content {
-                margin-top: 18px;
-                @include font(16px, #334a5f);
-                line-height: 34px;
-            }
-            .detial-link {
-                margin-top: 16px;
-                @include font(16px, #0086e7);
-                font-family: Alibaba-PuHuiTi;
-                text-decoration: underline;
-                cursor: pointer;
-            }
-        }
-    }
+    
 }

digital-park-web/digital-park/src/views/my-related/mseeage/Message.vue

                 <img src="~@assets/image/myRelated/titleIcon.png" class="title-icon fl" alt="icon" />
                 <span class="title-span fl">我的消息</span>
             </div>
-            <div class="table-box" v-loading="pageLoading">
+            <div class="table-box" v-loading="pageLoading" element-loading-text="数据加载中...">
                 <div class="table-title">
                     <span class="title-span fl">我的消息</span>
                     <span class="unread-span">
                         （你有
-                        <span class="unread-num">1172</span>条未读通知）
+                        <span class="unread-num">{{ notRead }}</span>条未读通知）
                     </span>
                     <span class="mark-read fr" @click="markRead('all')">全部标记已读</span>
                     <span class="mark-read fr" @click="markRead('check')">勾选标记已读</span>
                             <template slot-scope="scope">
                                 <span
                                     class="check-span"
-                                    :class="{'is-read' : scope.row.v4 == '已读'}"
+                                    :class="{'is-read' : scope.row.isRead}"
                                     @click.stop="changeCheck(scope.row)"
                                 >
                                     <img
-                                        v-if="scope.row.v0"
+                                        v-if="scope.row.isSelected"
                                         src="~@assets/image/myRelated/checked.png"
                                         alt="checkOk"
                                     />
                             :width="item.width"
                             :show-overflow-tooltip="true"
                         >
-                            <template slot-scope="scope">{{ scope.row[item.prop] }}</template>
+                            <template slot-scope="scope">
+                                <div
+                                    v-if="item.prop == 'createdOn'"
+                                >{{ scope.row[item.prop] | formatDate("YYYY-MM-DD HH:mm") }}</div>
+                                <div v-else-if="item.prop == 'type'">{{ scope.row[item.prop].text }}</div>
+                                <div v-else-if="item.prop == 'isRead'">
+                                    <span v-if="scope.row.isRead">已读</span>
+                                    <img
+                                        v-else
+                                        src="~@assets/image/myRelated/notRead.png"
+                                        alt="notRead"
+                                    />
+                                </div>
+                                <div v-else>{{ scope.row[item.prop] }}</div>
+                            </template>
                         </el-table-column>
                     </el-table>
                 </div>
                 <div class="pagination_box">
-                    <Pagination :currentPage="queryParams.page" :total="queryParams.total" />
+                    <Pagination
+                        :currentPage="queryParams.page"
+                        :total="queryParams.total"
+                        @change-page-size="changePageSize"
+                        @change-page="changePage"
+                    />
                 </div>
             </div>
         </div>
-        <!-- 通知详情 -->
-        <el-dialog
-            :visible.sync="detailDialog.isShow"
-            :close-on-click-modal="false"
-            class="detail-dialog"
-            :show-close="false"
-        >
-            <span class="close-icon" @click="detailDialog.isShow = false">
-                <img src="~@assets/image/myRelated/closeIcon.png" alt="close" />
-            </span>
-            <div class="dialog-title">通知详情</div>
-            <div class="detial-title">个独企业重要消息告知</div>
-            <div class="detial-content">{{ detailDialog.row.v2 }}</div>
-            <div class="detial-link">http://www.hhrchina.com/customer/msgCenter.html?page=2</div>
-        </el-dialog>
+        <!-- 消息详情 -->
+        <MessageDetailDialog ref="MessageDetailDialog" />
         <Footer />
     </div>
 </template>
 import Nav from "@components/Header.vue";
 import Footer from "@components/Footer.vue";
 import Pagination from "@components/Pagination.vue";
-import { getMessageNoticeList } from "@api/my-related";
-import ret from "bluebird/js/release/util";
+import { getMessageNoticeList, markReadMessage } from "@api/my-related";
+import MessageDetailDialog from "./components/MessageDetailDialog/index.vue";
+
 export default {
-    components: { Nav, Footer, Pagination },
+    components: { Nav, Footer, Pagination, MessageDetailDialog },
     data() {
         return {
             pageLoading: false,
             tableColumn: [
                 {
                     label: "通知时间",
-                    prop: "v1",
+                    prop: "createdOn",
                     width: 160,
                 },
                 {
                     label: "标题",
-                    prop: "v2",
+                    prop: "title",
                 },
                 {
                     label: "类型",
-                    prop: "v3",
+                    prop: "type",
                     width: 120,
                 },
                 {
                     label: "是否已读",
-                    prop: "v4",
+                    prop: "isRead",
                     width: 100,
                 },
             ],
-            tableData: [
-                {
-                    v0: false,
-                    v1: "2021.02.09 14:07",
-                    v2: "入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）",
-                    v3: "政策宣传",
-                    v4: "未读",
-                    id: 1,
-                },
-                {
-                    v0: false,
-                    v1: "2021.02.09 14:07",
-                    v2: "入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）",
-                    v3: "政策宣传",
-                    v4: "已读",
-                    id: 2,
-                },
-                {
-                    v0: false,
-                    v1: "2021.02.09 14:07",
-                    v2: "入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）",
-                    v3: "政策宣传",
-                    v4: "未读",
-                    id: 3,
-                },
-                {
-                    v0: false,
-                    v1: "2021.02.09 14:07",
-                    v2: "入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）入驻产品审核通过收到入驻产品审核通过收到入驻产品审核通过收到（详情内含有链接）",
-                    v3: "政策宣传",
-                    v4: "未读",
-                    id: 4,
-                },
-            ],
-            detailDialog: {
-                isShow: false,
-                row: {
-                    msg: "位于市中心国家级高科技产业园~静安多媒体谷近日入驻禾获仁平台，园区是一个以发展新兴科技产业为主，集创意创新、企业孵化、创业服务，创新人才培育、科技成果转化等功能为一体的高科技园区。静安多媒体谷园区注册产品，若您在业务办理方面遇到任何问题，可直接与禾获仁平台在线客服咨询。",
-                },
-            },
+            tableData: [],
             queryParams: {
                 page: 1,
                 pageSize: 10,
                 total: 0,
             },
+            // 选中list
             checkedList: [],
+            // 未读数
+            notRead: 0,
         };
     },
     mounted() {
-        getMessageNoticeList();
+        this.getMessageNoticeList();
     },
     methods: {
+        // 分页切换
+        changePageSize(v){
+            this.queryParams.pageSize = v;
+            this.getMessageNoticeList();
+        },
+        changePage(v){
+            this.queryParams.page = v;
+            this.getMessageNoticeList();
+        },
         // 获取列表数据
-        async getMessageNoticeList() {
+        getMessageNoticeList() {
             this.pageLoading = true;
-            let listData = await getMessageNoticeList(this.queryParams());
-            this.pageLoading = false;
-            console.log(listData);
+            getMessageNoticeList(this.queryParams)
+                .then((res) => {
+                    // console.log(res);
+                    if (res.data.status == 0) {
+                        const data = res.data.data;
+                        let { resultData } = data;
+                        this.tableData = resultData.list.map((el) => {
+                            el.isSelected = false;
+                            return el;
+                        });
+                        console.log(
+                            this.$cloneDeep(this.tableData),
+                            "this.tableData"
+                        );
+                        this.queryParams.total = resultData.total;
+                        this.notRead = resultData.total - data.readCount;
+                    } else if (res.data.status == 102) {
+                        this.$router.push("/login");
+                    } else {
+                        this.$message.error(res.data.msg);
+                    }
+                    this.pageLoading = false;
+                })
+                .catch((err) => {
+                    console.log(err);
+                    this.pageLoading = false;
+                    this.$message.error(
+                        `获取数据失败,失败原因${err},请刷新重试！`
+                    );
+                });
         },
         /**
          * 标记已读
          * @param {*} target all 全部 check 勾选已读
          */
         markRead(target) {
-            let param = {};
-            if (target == "all") {
-            } else {
-                if(this.checkedList.length < 1){
+            let param = [];
+            if (target == "check") {
+                if (this.checkedList.length < 1) {
                     return this.$message.error("请至少勾选一条数据");
-                }else {
-                    param.idList = this.checkedList;
+                } else {
+                    param = this.checkedList;
                 }
             }
             // 设置已读
-            console.log(this.$cloneDeep(param),'已读传参')
+            console.log(this.$cloneDeep(param), "已读传参");
+            this.markReadMessage(param, true);
+        },
+        // 设置已读Api
+        markReadMessage(list, needRefresh) {
+            markReadMessage(list)
+                .then((res) => {
+                    console.log(res, "res");
+                    if (res.data.status == 0 && needRefresh) {
+                        this.getMessageNoticeList();
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
         },
         // 单元格点击
         changeCheck(row) {
-            if (row.v4 == "已读") {
+            if (row.isRead) {
                 return;
             }
-            // console.log(row.v0);
-            row.v0 = !row.v0;
-            // console.log(row.v0);
+            row.isSelected = !row.isSelected;
             // 如果已勾选的list里有这个ID，并且此数据为false 需要删除
-            if (this.checkedList.includes(row.id) && !row.v0) {
-                this.checkedList.splice(this.checkedList.indexOf(row.id), 1);
+            if (
+                this.checkedList.includes(row.messageNoticeId) &&
+                !row.isSelected
+            ) {
+                this.checkedList.splice(
+                    this.checkedList.indexOf(row.messageNoticeId),
+                    1
+                );
             }
             // 直接push
             else {
-                this.checkedList.push(row.id);
+                this.checkedList.push(row.messageNoticeId);
             }
-            // console.log(this.$cloneDeep(this.checkedList));
-            // if(row.v0 && this.checkedList[]){
-
-            // }
         },
         // 打开详情弹框
         openDetail(row) {
-            this.detailDialog.isShow = true;
-            this.detailDialog.row = this.$cloneDeep(row);
+            this.$refs.MessageDetailDialog.openDialog(row);
         },
     },
 };

digital-park-web/digital-park/src/views/my-related/mseeage/components/MessageDetailDialog/index.scss

+.detail-dialog[data-1664346848131] {
+    .el-dialog {
+        border-radius: 6px;
+    }
+    .el-dialog__header {
+        display: none;
+    }
+    .el-dialog__body {
+        border-radius: 6px;
+        padding-top: 20px;
+        position: relative;
+        background: linear-gradient(to bottom, #cde8fb, #fff);
+        .close-icon {
+            position: absolute;
+            right: 19px;
+            height: 21px;
+            cursor: pointer;
+        }
+        .dialog-title {
+            @include font(24px, #334a5f);
+            font-weight: bold;
+            line-height: 33px;
+        }
+        .detial-title {
+            margin-top: 30px;
+            @include font(24px, #0086e7);
+            text-align: center;
+        }
+        .detial-content {
+            margin-top: 18px;
+            @include font(16px, #334a5f);
+            line-height: 34px;
+        }
+        .detial-link {
+            margin-top: 16px;
+            @include font(16px, #0086e7);
+            font-family: Alibaba-PuHuiTi;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+    }
+}

digital-park-web/digital-park/src/views/my-related/mseeage/components/MessageDetailDialog/index.vue

+<template>
+    <!-- 通知详情 -->
+    <el-dialog
+        :visible.sync="detailDialog.isShow"
+        class="detail-dialog"
+        :show-close="false"
+        data-1664346848131
+    >
+        <span class="close-icon" @click="detailDialog.isShow = false">
+            <img src="~@assets/image/myRelated/closeIcon.png" alt="close" />
+        </span>
+        <div class="dialog-title">通知详情</div>
+        <div class="detial-title">{{ detailDialog.row.title }}</div>
+        <div class="detial-content" v-html="parseMarkdown(detailDialog.row.text)"></div>
+    </el-dialog>
+</template>
+
+<script>
+import "./index.scss";
+import { parseMarkdown } from "@/utils/common";
+export default {
+    data() {
+        return {
+            detailDialog: {
+                isShow: false,
+                row: {},
+            },
+        };
+    },
+    methods: {
+        openDialog(row) {
+            this.detailDialog.isShow = true;
+            this.detailDialog.row = row;
+        },
+        parseMarkdown(str) {
+            return str ? parseMarkdown(str) : "";
+        },
+    },
+};
+</script>