bi-element-ui 0.2.1 → 0.2.3

package/src/main.js

@@ -10,8 +10,9 @@ Vue.use(ElementUI)
 Vue.use(BiUi, {
   dev: process.env.NODE_ENV !== 'production',
   env: process.env.NODE_ENV,
-  system: 'compass'
-})
+  system: 'pigeon'
+}
+)
 
 Vue.config.productionTip = false
 

package/src/views/Home.vue

@@ -8,7 +8,7 @@
 
     <div class="example-table-box">
       <p>基础表格</p>
-      <BiCustomColumn
+      <!-- <BiCustomColumn
         column-name="test"
         :table-column="basicColumn"
         :default-list="defaultColumnList"
@@ -18,7 +18,7 @@
           right:['other']
         }"
         @handleTableColumn="setTableColumn"
-      />
+      /> -->
       <bi-table
         :loading="tableLoading"
         border
@@ -197,7 +197,7 @@
             stripe
             fixed="sticky"
             :data="data"
-            :column="renderColumn"
+            :column="fullscreenColumn"
             :summary-method="getSummaries"
             show-summary
           ></bi-table>

package/src/views/Layout.vue

@@ -5,6 +5,8 @@
       <BiNavbarTool
         :token="token"
         :avatar="avatar"
+        task-center
+        user-id="67"
       />
     </header>
   </div>
@@ -14,7 +16,7 @@
 export default {
   data() {
     return {
-      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIxNTc1NzE4NTMyMiIsImxvZ2luX2VudiI6IiIsImlhdCI6MTY5NzExNTUzMCwiZXhwIjoxNjk3NzIwMzMwLCJuYmYiOjE2OTcxMTU1MzAsInN1YiI6InRva2Vu6K6k6K-BIiwianRpIjoiYzMzYTMzZDQyMTcyMWRmNzVhNWUzYjIwYzY3NGRlMGMifQ.Oc14XCMuGjQLVPzxp3QNnlzty28f_TmQhbjMEvV6GNE',
+      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIxNTc1NzE4NTMyMiIsImxvZ2luX2VudiI6IiIsImlhdCI6MTcwNTA1ODgwOSwiZXhwIjoxNzA1NjYzNjA5LCJuYmYiOjE3MDUwNTg4MDksInN1YiI6InRva2Vu6K6k6K-BIiwianRpIjoiNmM3ODMzNjlhNDcyODg1YTRhNTFjNGIzYmQ3ZjNmMmQifQ.I6CB6nKNoibs-yVqmclcybApNy1e0WU4tRcy3_7l-WA',
       avatar: 'https://static-legacy.dingtalk.com/media/lADPBbCc1SE7SD7NAuzNAug_744_748.jpg?imageView2/1/w/80/h/80'
     }
   },

package/src/views/Table.vue

@@ -1,82 +1,9 @@
 <template>
   <div>
-
-    <div
-      class="example-table-box"
-      style="padding-top: 20px"
-    >
-      <p>测试表格</p>
-      <div class="test">
-        <el-table
-          v-sticky-header="{offsetTop:0}"
-          v-sticky-footer
-          :data="data"
-          show-summary
-        >
-          <el-table-column
-            label="日期"
-            prop="date"
-            width="160"
-          ></el-table-column>
-          <el-table-column
-            label="姓名"
-            prop="name"
-          ></el-table-column>
-          <el-table-column
-            label="省份"
-            prop="province"
-          ></el-table-column>
-          <el-table-column
-            label="市区"
-            prop="city"
-          ></el-table-column>
-          <el-table-column
-            label="地址"
-            prop="address"
-            min-width="200"
-          ></el-table-column>
-          <el-table-column
-            label="地址"
-            prop="address2"
-            min-width="200"
-          ></el-table-column>
-          <el-table-column
-            label="邮编"
-            prop="zip"
-            fixed="right"
-          ></el-table-column>
-        </el-table>
-      </div>
-
-      <bi-table
-        border
-        stripe
-        :data="data"
-        :column="basicColumn"
-        show-summary
-        :summary-method="getSummaries"
-      ></bi-table>
-    </div>
-    <el-button
-      type=""
-      @click="search"
-    >搜索</el-button>
-
-    <div
-      class="example-table-box"
-      style="padding-top: 20px"
-    >
+    <el-button type="" @click="search">搜索</el-button>
+    <div class="example-table-box" style="padding-top: 20px">
       <p>sticky表格</p>
-      <bi-table
-        ref="table"
-        border
-        stripe
-        fixed="sticky"
-        :data="data"
-        :column="basicColumn"
-        show-summary
-        :summary-method="getSummaries"
-      ></bi-table>
+      <bi-table ref="table" border stripe fixed="sticky" :data="data" :column="basicColumn" show-summary :summary-method="getSummaries"></bi-table>
     </div>
 
     <!-- <div style="padding-bottom:600px"></div>
@@ -154,7 +81,7 @@
 </template>
 
 <script>
-// import CryptoJS from 'crypto-js/md5'
+// import BiTable from '@/components/BiTable'
 import TableData from '@/table.js'
 // import BiTableColumn from '@/components/BiTableColumn'
 // import BiTooltipIcon from '@/components/BiTooltipIcon'
@@ -269,7 +196,6 @@ export default {
 <style lang="scss" scoped>
 .example-table-box {
   margin: 25px 50px;
-  position: relative;
 
   p {
     text-align: left;

package/src/views/showData.vue

@@ -1,3 +1,455 @@
 <template>
-  <bi-home-data />
-</template>
+  <div class="bi_home_data">
+    <el-scrollbar>
+      <div class="content">
+        <div class="swiper">
+          <el-carousel class="swiper_data" height="19.5vw" :autoplay="true">
+            <el-carousel-item v-for="(item, index) in swiperData" :key="index">
+              <div class="swiper_content" :style="'background: url(' + item.image_path + ') no-repeat;background-size: 100% 100%;'" @click="swiperClick(item)"></div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="data">
+          <div class="data_search">
+            <el-input v-model="searchData.combination" placeholder="输入标题/关键字" size="small" style="width: 14vw">
+              <el-button slot="append" icon="el-icon-search" style="width: 3vw; height: 32px" @click="clickSearch"></el-button>
+            </el-input>
+            <div>
+              <el-button v-for="(item, index) in options.buttonList" :key="index" size="small" style="width: 84px; height: 32px" @click="buttonClick(item.value)">{{ item.label }}</el-button>
+            </div>
+          </div>
+          <div class="data_content">
+            <div v-for="(item, index) in messageData" :key="index" class="message_item" @click="getDataDetail(item)">
+              <div class="item_title">
+                <img :src="returnCategoryImg(item.category_id)" alt="" />
+                <p>{{ returnCategory(item.category_id) }}</p>
+              </div>
+              <div class="item_content">
+                <img :src="item.cover_image" alt="" />
+                <div class="content_content">
+                  <div class="content_title">{{ item.title }}</div>
+                  <div class="content_desc">{{ item.short_desc }}</div>
+                  <div class="content_time">{{ item.create_time }}</div>
+                </div>
+              </div>
+              <img v-if="!item.is_read" class="is_read" src="./img/new.png" alt="" />
+            </div>
+            <div class="left_page" @click="pageClick('left')">
+              <img src="./img/left_page.png" :style="canLeftClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
+            </div>
+            <div class="right_page" @click="pageClick('right')">
+              <img src="./img/right_page.png" :style="canRightClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
+            </div>
+          </div>
+        </div>
+        <el-drawer title="消息详情" :visible.sync="dataDetail.isShow" direction="rtl" size="560" :before-close="handleClose">
+          <el-scrollbar>
+            <div class="detail">
+              <div class="detail_title">{{ dataDetail.data.title }}</div>
+              <div class="detail_time">{{ dataDetail.data.create_time }}</div>
+              <div class="detail_desc">{{ dataDetail.data.short_desc }}</div>
+              <div class="detail_content">
+                <div class="content_content" v-html="dataDetail.data.content"></div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-drawer>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import axios from 'axios'
+export default {
+  name: 'BiHomeData',
+  props: {
+    userId: {
+      type: String,
+      default: '1919'
+    }
+  },
+  data() {
+    return {
+      uid: '',
+      searchData: {
+        uid: '1919',
+        combination: '',
+        category_id: '',
+        page: 1,
+        page_size: 4,
+        total: 0
+      },
+      url: 'http://applause.zwwlkj03.top/api',
+      options: {
+        buttonList: []
+      },
+      swiperData: [],
+      messageData: [],
+      dataDetail: {
+        isShow: false,
+        data: {}
+      }
+    }
+  },
+  computed: {
+    canLeftClick() {
+      if (this.searchData.page <= 1) {
+        return false
+      } else {
+        return true
+      }
+    },
+    canRightClick() {
+      const allPage = Math.ceil(this.searchData.total / this.searchData.page_size)
+      if (this.searchData.page >= allPage) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  mounted() {
+    this.uid = this.userId
+    this.searchData.uid = this.userId
+    this.init()
+  },
+  methods: {
+    init() {
+      this.Searchcondition()
+      this.getSwiper()
+      this.getMessage()
+    },
+    swiperClick(item) {
+      if (item.type === '1') {
+        window.open(item.jump_url, '_blank')
+      }
+      if (item.type === '2') {
+        this.getDetail(this.uid, item.notify_id)
+      }
+    },
+    clickSearch() {
+      this.searchData.page = 1
+      this.searchData.category_id = ''
+      this.getMessage()
+    },
+    buttonClick(id) {
+      this.searchData.page = 1
+      this.searchData.category_id = id
+      this.getMessage()
+    },
+    pageClick(type) {
+      if (type === 'left' && this.canLeftClick) {
+        this.searchData.page--
+        this.getMessage()
+      }
+      if (type === 'right' && this.canRightClick) {
+        this.searchData.page++
+        this.getMessage()
+      }
+    },
+
+    async getMessage() {
+      const res = await axios.post(this.url + '/home/notify/list', this.searchData)
+      if (res.data.status_code === 1) {
+        this.messageData = res.data.data.data
+        this.searchData.page = res.data.data.page_info.page
+        this.searchData.total = res.data.data.page_info.total
+      }
+    },
+    async getSwiper() {
+      const res = await axios.post(this.url + '/home/carousel/list', { uid: this.uid })
+      if (res.data.status_code === 1) {
+        this.swiperData = res.data.data.data
+      }
+    },
+    async Searchcondition() {
+      const res = await axios.post(this.url + '/home/Searchcondition/index', { uid: this.uid, notify_category: 1 })
+      if (res.data.status_code === 1) {
+        this.options.buttonList = res.data.data.notify_category
+      }
+    },
+    returnCategory(id) {
+      const list = this.options.buttonList.filter((data) => {
+        return data.value === id
+      })
+      if (list.length) {
+        return list[0].label
+      } else {
+        return '掌资讯'
+      }
+    },
+    returnCategoryImg(id) {
+      switch (id) {
+        case '1':
+          return require('./img/1.png')
+          break
+        case '2':
+          return require('./img/2.png')
+          break
+        case '3':
+          return require('./img/3.png')
+          break
+        case '4':
+          return require('./img/4.png')
+          break
+        default:
+          return require('./img/1.png')
+      }
+    },
+    getDataDetail(data) {
+      this.sendRaed(data)
+      this.getDetail(this.uid, data.id)
+    },
+    // 数据已读
+    async sendRaed(data) {
+      const res = await axios.post(this.url + '/home/notify/read', { uid: this.uid, notify_id: data.id })
+      if (res.data.status_code === 1) {
+        data.is_read = true
+      }
+    },
+    // 数据详情
+    async getDetail(uid, notify_id) {
+      const res = await axios.post(this.url + '/home/notify/detail', { uid, notify_id })
+      if (res.data.status_code === 1) {
+        this.dataDetail.data = res.data.data.data
+        this.dataDetail.isShow = true
+      }
+    },
+    handleClose() {
+      this.dataDetail.isShow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bi_home_data {
+  .content {
+    width: 100%;
+    height: calc(100vh - 115px);
+    background: #ffffff;
+    border-radius: 2px;
+    .swiper {
+      width: 100%;
+      height: 19.5vw;
+      .swiper_data {
+        .swiper_content {
+          width: 100%;
+          height: 19.5vw;
+          background: url(./img/swiperBg.png) no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          box-sizing: border-box;
+          padding: 1.5vw 6vw;
+          .swiper_message {
+            .title {
+              width: 31.5vw;
+              height: 3vw;
+              font-size: 2.1vw;
+              font-weight: 500;
+              color: #333333;
+              line-height: 3vw;
+            }
+            .desc {
+              width: 31.5vw;
+              height: 1.1vw;
+              font-size: 0.8vw;
+              font-weight: 400;
+              color: #333333;
+              line-height: 1.1vw;
+              margin-top: 1.5vw;
+            }
+          }
+        }
+      }
+    }
+    .data {
+      .data_search {
+        margin: 1vw 3.5vw;
+        display: flex;
+        justify-content: space-between;
+      }
+      .data_content {
+        margin: 0 3.5vw;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        position: relative;
+        left: 0;
+        top: 0;
+        height: 19.5vw;
+        .left_page {
+          position: absolute;
+          left: -2.8vw;
+          top: 45%;
+          width: 2.25vw;
+          height: 2.25vw;
+          cursor: pointer;
+          img {
+            width: 2.25vw;
+            height: 2.25vw;
+          }
+        }
+        .right_page {
+          position: absolute;
+          right: -2.8vw;
+          top: 45%;
+          width: 2.25vw;
+          height: 2.25vw;
+          cursor: pointer;
+          img {
+            width: 2.25vw;
+            height: 2.25vw;
+          }
+        }
+        .message_item {
+          width: 37vw;
+          height: 9vw;
+          background: #f8f8fa;
+          box-shadow: 0px 0.1vw 0.45vw 0px rgba(168, 203, 255, 0.36);
+          border-radius: 0.2vw;
+          border: 0.1vw solid #ffffff;
+          margin-bottom: 1.5vw;
+          box-sizing: border-box;
+          padding: 1vw;
+          position: relative;
+          left: 0;
+          top: 0;
+          cursor: pointer;
+          &:nth-child(3) {
+            margin-bottom: 0;
+          }
+          &:nth-child(4) {
+            margin-bottom: 0;
+          }
+          .item_title {
+            display: flex;
+            height: 1vw;
+            img {
+              width: 1vw;
+              height: 1vw;
+            }
+            p {
+              height: 1vw;
+              line-height: 1vw;
+              margin: 0 0 0 0.5vw;
+            }
+          }
+          .item_content {
+            margin-top: 1.6vw;
+            display: flex;
+            img {
+              width: 4vw;
+              height: 4vw;
+              margin-right: 1.2vw;
+            }
+            .content_content {
+              width: 31vw;
+              position: relative;
+              top: 0;
+              left: 0;
+              .content_title {
+                max-width: 20vw;
+                height: 1.1vw;
+                font-size: 0.8vw;
+                font-weight: 500;
+                color: #333333;
+                line-height: 1.1vw;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .content_desc {
+                max-width: 26vw;
+                height: 1vw;
+                margin-top: 0.8vw;
+                font-size: 0.7vw;
+                font-weight: 400;
+                color: #333333;
+                line-height: 1vw;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .content_time {
+                position: absolute;
+                left: 22vw;
+                top: 0.05vw;
+                width: 8vw;
+                height: 1vw;
+                font-size: 0.7vw;
+                font-weight: 400;
+                color: #333333;
+                line-height: 1vw;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+          .is_read {
+            position: absolute;
+            right: 0.1vw;
+            top: 0.3vw;
+            width: 1.5vw;
+            height: 0.8vw;
+          }
+        }
+      }
+    }
+    .detail {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 20px;
+      height: calc(100vh - 80px);
+      .detail_title {
+        width: 440px;
+        height: 22px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .detail_time {
+        width: 320px;
+        height: 16px;
+        margin-top: 12px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 16px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .detail_desc {
+        margin-top: 24px;
+        width: 500px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 20px;
+      }
+      .detail_content {
+        width: 520px;
+        margin-top: 24px;
+        overflow-y: auto;
+        .content_content {
+          width: 500px;
+        }
+      }
+    }
+  }
+}
+</style>
+<style>
+.el-carousel__indicator.is-active button {
+  opacity: 1;
+  background-color: #38ce81;
+}
+</style>

package/.eslintignore

@@ -1,2 +0,0 @@
-
-packages/TableSticky/*

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "editor.inlineSuggest.showToolbar": "onHover"
-}