feat(component): add news list; !#zh: 新闻列表组件

ly525 · 小小鲁班
1 parent 1804eea1
Showing 9 changed files with 129 additions and 14 deletions
front-end/h5/src/components/core/editor/edit-panel/props/global-work.vue
front-end/h5/src/components/core/support/excel.js
front-end/h5/src/components/plugins/lbp-news-list.js
front-end/h5/src/components/plugins/styles/news-list.scss
front-end/h5/src/constants/work.js
front-end/h5/src/engine-entry.js
front-end/h5/src/mixins/load-plugins.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/utils/excel-parser.js
@@ -41,15 +41,15 @@ export default {
       get () {
         return this.work.page_mode || PAGE_MODE.SWIPPER_PAGE
       },
-      set (page_mode) {
-        this.updateWork({ page_mode })
+      set (pageMode) {
+        this.updateWork({ page_mode: pageMode })
       }
     }
   },
   methods: {
     ...mapActions('editor', [
       'updateWork'
-    ]),
+    ])
   }
 }
 </script>
@@ -68,7 +68,6 @@ export default {
     this.sheet.loadData({
       rows: this.innerItems
     }).change(excelData => {
-      debugger
       // console.log('----------')
       // console.log(excelData)
       // console.log(this.formatter(excelData))
+import PropTypes from '@luban-h5/plugin-common-props'
+import Parser from '../../utils/excel-parser'
+import './styles/news-list.scss'
+
+export default {
+  extra: {
+    defaultStyle: {
+      width: 320,
+      height: 256
+    }
+  },
+  name: 'lbp-news-list',
+  props: {
+    dataset: PropTypes.excel({
+      defaultValue: () => [
+        ['新闻标题', '摘要', '链接', '日期', '来源'],
+        [
+          '1 . 鲁班H5 可视化搭建平台！',
+          '鲁班H5-是一款基于常见业务组件，通过拖拽的形式，生成页面的可视化搭建系统；我们的初心也是希望能通过工程化的手段，提高简单H5页面的制作效率',
+          'https://luban-h5.com/',
+          '2020-01-01',
+          '鲁班H5'
+        ],
+        [
+          '2 . 鲁班H5-开源的可视化搭建平台！',
+          'en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.',
+          'https://github.com/ly525/luban-h5',
+          '2020-01-01',
+          '鲁班H5(github)'
+        ]
+      ]
+    })
+  },
+  data () {
+    return {
+      option: {}
+    }
+  },
+  render () {
+    /**
+     * rows[0] {
+        '新闻标题': '',
+        '摘要': '',
+        '链接': '',
+        '日期': '',
+        '来源': '',
+      }
+     */
+    const { rows } = Parser.csv2VChartJson(this.dataset)
+    return <div class="newslist" style="border-color: transparent;">
+      {
+        rows.map((item, i) =>
+          <div class="news-item">
+            <a href={item['链接']} target="_blank" class="link">
+              <div class="title">{item['新闻标题']}</div>
+            </a>
+            <div class="content">{item['摘要']}</div>
+            <div class="source">{item['来源']}</div>
+            <div class="time">{item['日期']}</div>
+          </div>
+        )
+      }
+    </div>
+  },
+  mounted () {
+    // this.renderChart()
+  }
+}
+.news-item {
+  border-color: rgba(33, 181, 244, 0.2);
+  border-bottom: 1px solid #bbddff;
+  text-align: left;
+  padding: 16px 12px 4px;
+  overflow: auto;
+  color: #333;
+  font-size: 12px;
+
+  .link {
+    color: #333;
+    text-decoration: underline;
+  }
+}
+
+.news-item .title {
+  font-weight: 700;
+  text-align: left;
+  font-size: 14px;
+}
+
+.news-item .content {
+  // text-indent: 24px!important;
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+ .news-item .source {
+  float: left;
+  text-align: left;
+}
+
+.news-item .time {
+  float: right;
+  margin-right: 4px;
+}
 \ No newline at end of file
@@ -5,10 +5,10 @@
  */
 export const PAGE_MODE = {
   SWIPPER_PAGE: 'h5_swipper',
-  LONG_PAGE: 'h5_long_page',
+  LONG_PAGE: 'h5_long_page'
 }
  
 export const PAGE_MODE_LABEL = {
   SWIPPER_PAGE: '翻页H5',
-  LONG_PAGE: '长页面',
-}
 \ No newline at end of file
+  LONG_PAGE: '长页面'
+}
@@ -62,7 +62,7 @@ const Engine = {
     },
     renderPreview (pageElements = []) {
       const pageWrapperStyle = this.isLongPage ? {
-        height:  window.__work.height + 'px'
+        height: window.__work.height + 'px'
       } : {}
  
       const elements = pageElements.map(element => new Element(element))
@@ -78,10 +78,10 @@ const Engine = {
         </div>
       )
     },
-    getContainerStyle(work) {
+    getContainerStyle (work) {
       const containerStyle = {
         position: 'relative',
-        height: '100%',
+        height: '100%'
       }
  
       if (this.isLongPage) {
@@ -89,9 +89,9 @@ const Engine = {
       }
       return containerStyle
     },
-    renderUnPublishTip() {
+    renderUnPublishTip () {
       return <div style="box-sizing: border-box;min-height: 568px;line-height: 568px;text-align: center;">页面可能暂未发布</div>
-    },
+    }
   },
   render (h) {
     const work = window.__work
@@ -16,6 +16,7 @@ import LbpRate from &#39;../components/plugins/lbp-rate&#39;
 import LbpQQMap from '../components/plugins/lbp-qq-map/src'
 import LbpLineChart from '../components/plugins/charts/line'
 import LbpTable from '../components/plugins/lbp-table'
+import LbpNewsList from '../components/plugins/lbp-news-list'
 // import LbpTabs from '../components/plugins/lbp-tabs'
  
 export const pluginsList = [
@@ -277,6 +278,17 @@ export const pluginsList = [
     shortcutProps: {
       theme: 'lbp-table-theme-light-blue'
     }
+  },
+  {
+    i18nTitle: {
+      'en-US': 'NewsList',
+      'zh-CN': '新闻列表'
+    },
+    title: '新闻列表',
+    icon: 'list',
+    component: LbpNewsList,
+    visible: true,
+    name: LbpNewsList.name
   }
 ]
  
@@ -39,7 +39,7 @@ export const actions = {
    * 预览作品之前需要先保存，但希望 用户点击保存按钮 和 点击预览按钮 loading_name 能够不同（虽然都调用了 saveWork）
    * 因为 loading 效果要放在不同的按钮上
    */
-  saveWork ({ commit, dispatch, state }, { isSaveCover = false, loadingName = 'saveWork_loading', successMsg="保存作品成功" } = {}) {
+  saveWork ({ commit, dispatch, state }, { isSaveCover = false, loadingName = 'saveWork_loading', successMsg = '保存作品成功' } = {}) {
     const fn = (callback) => {
       new AxiosWrapper({
         dispatch,
@@ -139,7 +139,7 @@ export default class Parser {
       rows: rows.map((row, index) => {
         const obj = {}
         columns.forEach((col, colIndex) => {
-          obj[col] = row[colIndex]
+          obj[col.trim()] = row[colIndex]
         })
         return obj
       })