bi-element-ui 0.1.42 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-element-ui",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "private": false,
   "description": "基于element-ui编写的ui组件库",
   "main": "lib/bi-element-ui.common.js",

package/src/App.vue

@@ -7,6 +7,7 @@
           <router-link to="/date">date</router-link>
           <router-link to="/scene">场景使用</router-link>
           <router-link to="/table">Table</router-link>
+          <router-link to="/showData">Data</router-link>
         </div>
       </el-aside>
       <el-main>

package/src/router/index.js

@@ -24,6 +24,11 @@ const routes = [
     path: '/table',
     name: 'Table',
     component: () => import(/* webpackChunkName: "about" */ '../views/Table.vue')
+  },
+  {
+    path: '/showData',
+    name: 'showData',
+    component: () => import(/* webpackChunkName: "about" */ '../views/showData.vue')
   }
 ]
 

package/src/views/showData.vue

@@ -0,0 +1,369 @@
+<template>
+  <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 placeholder="输入标题/关键字" v-model="searchData.combination" size="small" style="width:14vw;">
+          <el-button icon="el-icon-search" slot="append" 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>
+    </div>
+    <el-drawer title="消息详情" :visible.sync="dataDetail.isShow" direction="rtl" :size="560" :before-close="handleClose">
+      <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-drawer>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import axios from 'axios'
+export default {
+  name: 'HomeData',
+  props: {
+    userId: {
+      type: String,
+      default: '1919'
+    }
+  },
+  data() {
+    return {
+      uid: '',
+      searchData: {
+        uid: '1919',
+        combination: '',
+        category_id: ''
+      },
+      url: 'http://applause.zwwlkj03.top/api',
+      options: {
+        buttonList: []
+      },
+      swiperData: [],
+      messageData: [],
+      dataDetail: {
+        isShow: false,
+        data: {}
+      }
+    }
+  },
+  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.category_id = ''
+      this.getMessage()
+    },
+    buttonClick(id) {
+      this.searchData.category_id = id
+      this.getMessage()
+    },
+    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
+      }
+    },
+    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
+      }
+    },
+    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
+      }
+    },
+    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>
+.content {
+  width: 100%;
+  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;
+      .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;
+        &: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;
+    .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>

package/dist/css/about.e70f66ed.css

@@ -1 +0,0 @@
-.example-table-box[data-v-a1daa0cc]{margin:25px 50px}.example-table-box p[data-v-a1daa0cc]{text-align:left;font-weight:700}.example-table-box[data-v-553b4a77]{margin:25px 50px}.example-table-box p[data-v-553b4a77]{text-align:left;font-weight:700}