bi-element-ui 0.1.41 → 0.1.43

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/tests/e2e/.eslintrc.js

@@ -1,10 +1,10 @@
-module.exports = {
-  plugins: ['cypress'],
-  env: {
-    mocha: true,
-    'cypress/globals': true
-  },
-  rules: {
-    strict: 'off'
-  }
-}
+module.exports = {
+  plugins: ['cypress'],
+  env: {
+    mocha: true,
+    'cypress/globals': true
+  },
+  rules: {
+    strict: 'off'
+  }
+}

package/tests/e2e/plugins/index.js

@@ -1,25 +1,25 @@
-/* eslint-disable arrow-body-style */
-// https://docs.cypress.io/guides/guides/plugins-guide.html
-
-// if you need a custom webpack configuration you can uncomment the following import
-// and then use the `file:preprocessor` event
-// as explained in the cypress docs
-// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
-
-// /* eslint-disable import/no-extraneous-dependencies, global-require */
-// const webpack = require('@cypress/webpack-preprocessor')
-
-module.exports = (on, config) => {
-  // on('file:preprocessor', webpack({
-  //  webpackOptions: require('@vue/cli-service/webpack.config'),
-  //  watchOptions: {}
-  // }))
-
-  return Object.assign({}, config, {
-    fixturesFolder: 'tests/e2e/fixtures',
-    integrationFolder: 'tests/e2e/specs',
-    screenshotsFolder: 'tests/e2e/screenshots',
-    videosFolder: 'tests/e2e/videos',
-    supportFile: 'tests/e2e/support/index.js'
-  })
-}
+/* eslint-disable arrow-body-style */
+// https://docs.cypress.io/guides/guides/plugins-guide.html
+
+// if you need a custom webpack configuration you can uncomment the following import
+// and then use the `file:preprocessor` event
+// as explained in the cypress docs
+// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
+
+// /* eslint-disable import/no-extraneous-dependencies, global-require */
+// const webpack = require('@cypress/webpack-preprocessor')
+
+module.exports = (on, config) => {
+  // on('file:preprocessor', webpack({
+  //  webpackOptions: require('@vue/cli-service/webpack.config'),
+  //  watchOptions: {}
+  // }))
+
+  return Object.assign({}, config, {
+    fixturesFolder: 'tests/e2e/fixtures',
+    integrationFolder: 'tests/e2e/specs',
+    screenshotsFolder: 'tests/e2e/screenshots',
+    videosFolder: 'tests/e2e/videos',
+    supportFile: 'tests/e2e/support/index.js'
+  })
+}

package/tests/e2e/specs/test.js

@@ -1,8 +1,8 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'Welcome to Your Vue.js App')
-  })
-})
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+  it('Visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('h1', 'Welcome to Your Vue.js App')
+  })
+})

package/tests/e2e/support/commands.js

@@ -1,25 +1,25 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/tests/e2e/support/index.js

@@ -1,20 +1,20 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/tests/unit/example.spec.js

@@ -1,13 +1,13 @@
-import { expect } from 'chai'
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg }
-    })
-    expect(wrapper.text()).to.include(msg)
-  })
-})
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).to.include(msg)
+  })
+})