feat: (bigmember) 组件迁移对接数据模型

apps/bigmember_pc/package.json

@@ -10,6 +10,7 @@
     "format": "prettier --write \"./**/*.{,vue,ts,js,json,md}\""
   },
   "dependencies": {
+    "@jy/data-models": "workspace:^",
     "@jianyu/easy-fix-sub-app": "^0.0.2",
     "@jianyu/easy-inject-qiankun": "^0.1.11",
     "@jianyu/icon": "^0.1.7",

apps/bigmember_pc/src/views/content/components/ContentHeader.vue

@@ -1,33 +1,36 @@
 <script setup>
-import { ref } from 'vue'
-const info = ref({
-  headerType: '业主委托项目',
-  title:
-    '北京联合大学中央支持地方专项-科技创新服务能力建设-虚拟现实创新应用实验教学平台（中央资金）项目（第一~四包）中标公告',
-  tags: ['河南-郑州市-金水区', '出版广电', '招标', '2.6万元'],
-  time: '2022-06-15',
-  keepLabel: [
-    {
-      label: '采购',
-      link: ''
-    },
-    {
-      label: '政务',
-      link: ''
-    }
-  ]
-})
+import { contentModel } from '@jy/data-models'
+
+const headerType = '业主委托项目'
+
+const keepLabel = [
+  {
+    label: '采购',
+    link: ''
+  },
+  {
+    label: '政务',
+    link: ''
+  }
+]
 </script>
 
 <template>
   <div class="common-content-header">
-    <div class="before-type">{{ info.headerType }}</div>
-    <h1 class="title">{{ info.title }}</h1>
+    <div class="before-type" v-if="contentModel.isSelfSite">
+      {{ headerType }}
+    </div>
+    <h1 class="title">{{ contentModel.title }}</h1>
     <div class="tags">
-      <span v-for="(item, index) in info.tags" :key="index">{{ item }}</span>
+      <a
+        :href="item.link"
+        v-for="(item, index) in contentModel.tags"
+        :key="index"
+        >{{ item.label }}</a
+      >
     </div>
     <div class="actions-info">
-      <div class="time-label">{{ info.time }}</div>
+      <div class="time-label">{{ contentModel.time }}</div>
       <div class="actions">
         <div class="action-item">
           <span class="iconfont icon-fenxiang"></span>
@@ -51,11 +54,7 @@ const info = ref({
       </div>
       <div class="favorite-tags">
         个人标签：
-        <a
-          v-for="(item, index) in info.keepLabel"
-          :key="index"
-          :href="item.link"
-        >
+        <a v-for="(item, index) in keepLabel" :key="index" :href="item.link">
           {{ item.label }}
         </a>
       </div>
@@ -97,7 +96,7 @@ const info = ref({
   .tags {
     margin-top: 12px;
   }
-  .tags span {
+  .tags a {
     border-radius: 4px;
     border: 1px solid #ececec;
     background: #f5f5fb;
@@ -108,7 +107,11 @@ const info = ref({
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
-    & + span {
+    text-decoration: none;
+    &[href*='javascript'] {
+      cursor: unset;
+    }
+    & + a {
       margin-left: 8px;
     }
   }

apps/bigmember_pc/src/views/content/components/ContentSummary.vue

@@ -1,11 +1,202 @@
-<template>
-  <div class="common-content-summary"></div>
-</template>
+<script setup>
+import { computed, ref } from 'vue'
+import { summaryModel } from '@jy/data-models'
+import { chunk, fill, padEnd } from 'lodash'
+
+console.log(summaryModel.value)
+
+const tableConfig = ref({
+  column: [
+    {
+      width: '124px'
+    },
+    {},
+    {
+      width: '124px'
+    },
+    {}
+  ]
+})
+
+const contentSummaryTable = computed(() => {
+  const list = summaryModel.value.list || []
+  let result = []
+
+  if (!list.length) {
+    return []
+  }
+
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+    result = result.concat([
+      {
+        label: item.label
+      },
+      {
+        type: item.type,
+        label: item.data.value
+      }
+    ])
+  }
+  // 按 table column 数量分组
+  result = chunk(result, 4)
+
+  // 不足的数组需要补全
+  const lastArr = result[result.length - 1]
+  let fillArr = new Array(4 - lastArr.length)
+  fill(fillArr, { label: '' })
+  result[result.length - 1] = lastArr.concat(fillArr)
+
+  return result
+})
+
+const contentSummaryTable2 = [
+  [
+    {
+      label: '采购单位'
+    },
+    {
+      label: '大通回族土族自治县住房和城乡建设局',
+      type: 'unit'
+    },
+    {
+      label: '采购联系人/电话'
+    },
+    {
+      label: '0371-5454545',
+      type: 'phone'
+    }
+  ],
+  [
+    {
+      label: '招标代理机构'
+    },
+    {
+      label: '青海川泽工程咨询有限公司'
+    },
+    {
+      label: '采购联系人/电话'
+    },
+    {
+      label: '0371-5454545'
+    }
+  ]
+]
 
-<script>
-export default {
-  name: 'ContentSummary'
+function getCellClassName({ row, column, rowIndex, columnIndex }) {
+  if (columnIndex === 0 || columnIndex === 2) {
+    return 'label-col'
+  }
 }
 </script>
+<template>
+  <div class="common-content-summary">
+    <div class="flex flex-(row items-center justify-between)">
+      <div class="content-block-header">公告摘要</div>
+
+      <div class="summary-header-tip color-highlight">
+        最近5年招标采购数据均可导出下载，如需更多年份和行业字段您可申请数据定制
+        >
+      </div>
+    </div>
+
+    <el-table
+      class="summary-table"
+      :data="contentSummaryTable"
+      border
+      :show-header="false"
+      :cell-class-name="getCellClassName"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="(item, index) in tableConfig.column"
+        :key="index"
+        :width="item.width"
+      >
+        <template slot-scope="scope">
+          <div v-if="!scope.row[index]?.type">
+            {{ scope.row[index].label }}
+          </div>
+          <div v-else>
+            <div class="td-unit" v-if="scope.row[index].type === 'unit'">
+              {{ scope.row[index].label }}
+              <span v-if="scope.row[index].label">查看详情＞</span>
+            </div>
+            <div class="td-phone" v-if="scope.row[index].type === 'contact'">
+              {{ scope.row[index].label }}
+              <span v-if="scope.row[index].label">更多联系人＞</span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="table-footer-tip">
+      *以上摘要信息由剑鱼标讯智能提取，仅供参考。如有误差，请
+      <span class="highlight-label">联系客服</span>进行处理。
+    </div>
+  </div>
+</template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.common-content-summary {
+  .table-footer-tip {
+    margin-bottom: 8px;
+    color: #888;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    .highlight-label {
+      cursor: pointer;
+      color: #2abed1;
+      text-decoration-line: underline;
+    }
+  }
+
+  ::v-deep {
+    .el-table.summary-table {
+      margin: 16px 0;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+      color: #1d1d1d;
+      background-color: #fff;
+
+      tr:hover > td.el-table__cell {
+        background-color: unset;
+      }
+
+      tr:hover > td.el-table__cell.label-col,
+      .label-col {
+        width: 124px;
+        color: #5c5d61;
+        background: #f7f9fc;
+      }
+      .td-phone {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        span {
+          color: #2abed1;
+          cursor: pointer;
+        }
+      }
+      .td-unit {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        color: #2abed1;
+        span {
+          flex-shrink: 0;
+          margin-left: 34px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

apps/bigmember_pc/src/views/content/pages/Article.vue

@@ -10,6 +10,15 @@ import ContentLayout from '@/components/common/ContentLayout.vue'
 import { replaceKeyword } from '@/utils'
 import RecommendCustomersList from '@/views/content/components/RecommendCustomers.vue'
 import { throttle } from 'lodash'
+import { ajaxGetContentInfo } from '@/api/modules/detail'
+import { useContentInfo, summaryModel, contentModel } from '@jy/data-models'
+import ContentSummary from '@/views/content/components/ContentSummary.vue'
+
+ajaxGetContentInfo({}).then((res) => {
+  if (res.error_code === 0) {
+    useContentInfo(res.data)
+  }
+})
 
 const activeContentTab = ref('公告摘要')
 const contentTabs = [
@@ -51,58 +60,6 @@ function doSelectTab(item) {
   scrollToTop(goElement, 45)
 }
 
-const tableConfig = ref({
-  column: [
-    {
-      width: '124px'
-    },
-    {},
-    {
-      width: '124px'
-    },
-    {}
-  ]
-})
-
-const contentSummaryTable = [
-  [
-    {
-      label: '采购单位'
-    },
-    {
-      label: '大通回族土族自治县住房和城乡建设局',
-      type: 'unit'
-    },
-    {
-      label: '采购联系人/电话'
-    },
-    {
-      label: '0371-5454545',
-      type: 'phone'
-    }
-  ],
-  [
-    {
-      label: '招标代理机构'
-    },
-    {
-      label: '青海川泽工程咨询有限公司'
-    },
-    {
-      label: '采购联系人/电话'
-    },
-    {
-      label: '0371-5454545'
-    }
-  ]
-]
-
-function getCellClassName({ row, column, rowIndex, columnIndex }) {
-  if (columnIndex === 0 || columnIndex === 2) {
-    return 'label-col'
-  }
-}
-
 function addTableItem(item) {
   const TypeLabels = {
     buyerunit: '采购单位',
@@ -291,7 +248,7 @@ onBeforeMount(() => {
     <div class="article-container">
       <content-header></content-header>
 
-      <div class="content-header-tip">
+      <div class="content-header-tip" v-if="contentModel.isSelfSite">
         <span>
           该公告由业主方/采购单位直接发布，急寻供应商，立即报名直接联系业主方/采购单位参与投标采购。
         </span>
@@ -323,54 +280,11 @@ onBeforeMount(() => {
         </div>
       </div>
 
-      <div class="article-content-container watch-tab-content" name="公告摘要">
-        <div class="flex flex-(row items-center justify-between)">
-          <div class="content-block-header">公告摘要</div>
-
-          <div class="summary-header-tip color-highlight">
-            最近5年招标采购数据均可导出下载，如需更多年份和行业字段您可申请数据定制
-            >
-          </div>
-        </div>
-
-        <el-table
-          class="summary-table"
-          :data="contentSummaryTable"
-          border
-          :show-header="false"
-          :cell-class-name="getCellClassName"
-          style="width: 100%"
-        >
-          <el-table-column
-            v-for="(item, index) in tableConfig.column"
-            :key="index"
-            :width="item.width"
-          >
-            <template slot-scope="scope">
-              <div v-if="!scope.row[index]?.type">
-                {{ scope.row[index].label }}
-              </div>
-              <div v-else>
-                <div class="td-unit" v-if="scope.row[index].type === 'unit'">
-                  {{ scope.row[index].label }}
-                  <span>查看详情＞</span>
-                </div>
-                <div class="td-phone" v-if="scope.row[index].type === 'phone'">
-                  {{ scope.row[index].label }}
-                  <span>更多联系人＞</span>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <div class="table-footer-tip">
-          *以上摘要信息由剑鱼标讯智能提取，仅供参考。如有误差，请<span
-            class="highlight-label"
-            >联系客服</span
-          >进行处理。
-        </div>
+      <div class="content-card watch-tab-content" name="公告摘要">
+        <content-summary />
+      </div>
 
+      <div class="article-content-container watch-tab-content" name="公告摘要">
         <div class="recommend-info-card" v-for="i in 2" :key="i">
           <div class="type-info-header">
             <div class="type-infos">
@@ -788,6 +702,9 @@ onBeforeMount(() => {
   border-radius: 8px;
   padding: 32px 40px;
   background-color: #fff;
+  &.is-plain {
+    border-radius: 0;
+  }
 }
 
 .content-detail-container {
@@ -933,65 +850,6 @@ onBeforeMount(() => {
   }
 }
 
-.table-footer-tip {
-  margin-bottom: 8px;
-  color: #888;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  .highlight-label {
-    cursor: pointer;
-    color: #2abed1;
-    text-decoration-line: underline;
-  }
-}
-
-::v-deep {
-  .el-table.summary-table {
-    margin: 16px 0;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px;
-    color: #1d1d1d;
-    background-color: #fff;
-
-    tr:hover > td.el-table__cell {
-      background-color: unset;
-    }
-
-    tr:hover > td.el-table__cell.label-col,
-    .label-col {
-      width: 124px;
-      color: #5c5d61;
-      background: #f7f9fc;
-    }
-    .td-phone {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      span {
-        color: #2abed1;
-        cursor: pointer;
-      }
-    }
-    .td-unit {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      color: #2abed1;
-      span {
-        flex-shrink: 0;
-        margin-left: 34px;
-        cursor: pointer;
-      }
-    }
-  }
-}
-
 .article-container {
   width: 980px;
   margin: 20px;
@@ -1000,25 +858,31 @@ onBeforeMount(() => {
   padding: 33px 40px;
   background-color: #fff;
 }
-.content-block-header {
-  position: relative;
-  color: #1d1d1d;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 32px;
-  &::before {
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: -40px;
-    display: inline-block;
-    width: 3px;
-    height: 24px;
-    border-radius: 0px 2px 2px 0px;
-    background: #2abed1;
+::v-deep {
+  .content-block-header {
+    position: relative;
+    color: #1d1d1d;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 4px;
+      left: -40px;
+      display: inline-block;
+      width: 3px;
+      height: 24px;
+      border-radius: 0px 2px 2px 0px;
+      background: #2abed1;
+    }
   }
 }
+
+.watch-tab-header {
+  margin-top: 16px;
+}
 .content-tabs-fixed {
   display: flex;
   flex-direction: row;
@@ -1063,7 +927,7 @@ onBeforeMount(() => {
   }
 }
 .content-header-tip {
-  margin: 16px 0;
+  margin-top: 16px;
   display: flex;
   flex-direction: row;
   align-items: center;