feat: 新增列表项组件

src/components/article-item/ArticleItem.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="article-item">
+    <div class="a-i-left ellipsis">{{ index }}. {{ title }}</div>
+    <div class="a-i-right">
+      <div class="tags">
+        <span class="tag" v-if="area">{{ area }}</span>
+        <span class="tag orange" v-if="type">{{ type }}</span>
+        <span class="tag green" v-if="buyerclass">{{ buyerclass }}</span>
+        <span class="tag dpink" v-if="calcBudget">{{ calcBudget }}</span>
+      </div>
+      <div class="time-container">
+        <span class="el-icon-jy-time"></span>
+        <span class="time-text">{{ dateFromNow(publishtime) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tag } from 'element-ui'
+import { moneyUnit, dateFromNow } from '@/utils/'
+export default {
+  name: 'article-item',
+  components: {
+    [Tag.name]: Tag
+  },
+  props: {
+    index: {
+      type: [String, Number],
+      default: '1'
+    },
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 区域
+    area: {
+      type: String,
+      default: ''
+    },
+    // 类型
+    type: {
+      type: String,
+      default: ''
+    },
+    // 行业
+    buyerclass: {
+      type: String,
+      default: ''
+    },
+    // 金额
+    budget: {
+      type: Number,
+      default: 0
+    },
+    // 时间
+    publishtime: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    calcBudget () {
+      return moneyUnit(this.budget)
+    }
+  },
+  methods: {
+    dateFromNow
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  $border-color: #ECECEC;
+  @include diy-icon('time', 20, 20);
+
+  .article-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 22px 0;
+    border-bottom: 1px solid $border-color;
+    cursor: pointer;
+
+    &:first-of-type,
+    &:border-top {
+      border-top: 1px solid $border-color;
+    }
+
+    .a-i-left {
+      flex: 1;
+    }
+    .a-i-right,
+    .tags,
+    .time-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tag {
+      display: flex;
+      align-items: center;
+      padding: 1px 6px;
+      margin-right: 14px;
+      color: #fff;
+      font-size: 13px;
+      line-height: 20px;
+      background-color: #2CB7CA;
+      border-radius: 3px;
+      &:not(:last-of-type) {
+        margin-right: 4px;
+      }
+      
+      &.orange {
+        background-color: #FFBA00;
+      }
+      &.green {
+        background-color: #25C78C;
+      }
+      &.dpink {
+        background-color: #FF878D;
+      }
+    }
+
+    .time-text {
+      margin-left: 6px;
+      font-size: 14px;
+      color: #797a7e;
+      line-height: 24px;
+    }
+  }
+</style>

src/components/common/Empty.vue

@@ -74,14 +74,9 @@ export default {
       text-align: center;
     }
 
-    .image {
+    .el-image {
       width: 160px;
       height: 160px;
     }
-
-    .empty-image {
-      background: url(~@/assets/images/empty.png) no-repeat;
-      background-size: contain;
-    }
   }
 </style>

src/utils/globalFunctions.js

@@ -237,24 +237,51 @@ export function formatSize (size, pointLength, units) {
   return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + (unit || '')
 }
 
-// 文件类型转换
-export function docTypeConvert (docType = 'pdf') {
-  const typeMap = {
-    doc: 'word',
-    docx: 'word',
-    xls: 'excel',
-    xlsx: 'excel',
-    ppt: 'ppt',
-    pdf: 'pdf',
-    1: 'word', // doc
-    2: 'pdf',
-    3: 'excel', // xls
-    4: 'ppt',
-    5: 'txt',
-    6: '其他'
+// 金额类型转换
+export function moneyUnit (m, type = 'string', lv = 0) {
+  const mUnit = {
+    levelArr: ['元', '万元', '亿元', '万亿元'],
+    test (num, type, lv) {
+      if (num === 0) {
+        if (type === 'string') {
+          return '0元'
+        }
+        if (type === 'lv') {
+          return this.levelArr[lv]
+        }
+        if (type === 'number') {
+          return 0
+        }
+        if (type === 'index') {
+          return lv
+        }
+      }
+
+      var result = num / Math.pow(10000, lv);
+
+      if (result > 10000 && lv < 2) {
+        return this.test(num, type, lv + 1)
+      } else {
+        if (type === 'string') {
+          return String(Math.floor(result * 100) / 100).replace('.00', '') + this.levelArr[lv]
+        }
+        if (type === 'lv') {
+          return this.levelArr[lv]
+        }
+        if (type === 'number') {
+          return String(Math.floor(result * 100) / 100).replace('.00', '')
+        }
+        if (type === 'index') {
+          return lv
+        }
+      }
+    }
+  }
+  if (m === undefined || m === null) {
+    return ''
+  } else {
+    return mUnit.test(m, type, lv)
   }
-  const type = typeMap[docType]
-  return type || docType // map中不存在的，则返回原始类型
 }
 
 /**