Merge remote-tracking branch 'origin/master'

components/common/page/pageComponent.vue

@@ -0,0 +1,74 @@
+<template>
+  <page :total="total" :page-size="pageSize" :current="current"
+        show-elevator v-on:on-change="listenPage"></page>
+</template>
+
+<script>
+  import Page from 'iview/src/components/page'
+  import 'iview/dist/styles/iview.css'
+  export default {
+    props: {
+      current: {
+        default: 1
+      },
+      total: {
+        default: 100
+      },
+      pageSize: {
+        default: 10
+      },
+      showType: {
+        default: 'show-elevator'
+      }
+    },
+    methods: {
+      listenPage: function (changedPage) {
+        this.$emit('childEvent', changedPage)
+      }
+    },
+    components: {
+      Page
+    }
+  }
+</script>
+
+<style>
+  .ivu-page{
+    display: inline-block;
+    padding-left: 0;
+    margin: 20px 0;
+    border-radius: 4px;
+    float: right;
+  }
+  .ivu-page >li{
+    margin: 0!important;
+  }
+  .ivu-page-item-jump-next, .ivu-page-item, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev {
+    width: 33.64px;
+    height: 30.8px!important;
+    font-family: normal!important;
+    border: 1px solid #ddd!important;
+    border-radius: 0px!important;
+  }
+  .ivu-page >li >a{
+    color: #337ab7;
+    font-size: 12px;
+  }
+
+  .ivu-page-item-active{
+    background-color: #5078cb!important;
+    border-color: #5078cb!important;
+    cursor: default!important;
+  }
+  .ivu-page-item-active >a{
+    color: #fff!important;
+    cursor: default!important;
+  }
+  .ivu-page-options-elevator input {
+    width: 33.64px!important;
+    height: 30.8px!important;
+    text-align: center;
+
+  }
+
+</style>

components/news/Detail.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="col-md-9">
+      <div class="news-detail" v-bind="item">
+        <h1 >{{item.title}}</h1>
+        <div class="hot-time">
+          <span class="text-num">时间：<span >{{item.created | date}}</span></span>
+          <span class="pull-right text-num ng-binding" style="font-size: 12px;"><i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}</span>
+        </div>
+        <div class="news-detail-content" v-html=item.content>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+  export default {
+    name: 'Detail',
+    computed: {
+      news () {
+        return this.$store.state.detailNews.detailNews
+      },
+      item () {
+        return this.news.data
+      }
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const month = d.getMonth() + 1
+        const hour = d.getHours()
+        const minutes = d.getMinutes()
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' ' + hour + ':' + minutes
+        return year + '-' + month + '-' + day
+      }
+    }
+  }
+</script>
+<style scoped>
+  .col-md-9{
+    padding-left: 0;
+    float: right;
+    margin-top: 10px;
+  }
+  @media (min-width: 992px) {
+    .col-md-9 {
+      width: 75%;
+    }
+  }
+  .news-detail {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .news-detail h1 {
+    font-size: 24px;
+    line-height: 40px;
+    margin: 0;
+  }
+  .news-detail .hot-time {
+    margin-bottom: 20px;
+  }
+  .hot-time span {
+    font-size: 14px;
+    color: #999;
+  }
+  .news-detail-content {
+    width: 100%;
+    margin: 0 auto;
+    font-size: 14px;
+    border-top: #e8e8e8 1px solid;
+    padding-top: 20px;
+    line-height: 28px;
+    color: #666;
+  }
+</style>

components/news/Left.vue

@@ -0,0 +1,152 @@
+<template>
+
+  <div class="hot-news col-md-3">
+    <h4>
+      <span>hot</span>热门文章
+    </h4>
+
+    <div>
+      <ol class="list-unstyled">
+        <li v-for="item in news_show" v-bind="item">
+          <h5>
+            <nuxt-link :to="'/news/'+item.id" :title=item.title
+                       v-text=item.title></nuxt-link>
+          </h5>
+          <div class="hot-time">
+            <span class="text-num">{{item.created | date}}</span>
+            <span class="pull-right text-num" style="font-size: 12px">
+          <i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}
+          </span>
+          </div>
+          <p class="text-muted summary" v-text=item.summary></p>
+        </li>
+      </ol>
+    </div>
+
+  </div>
+
+</template>
+<script>
+  export default {
+    computed: {
+      news () {
+        return this.$store.state.hotNews.hotNews
+      },
+      news_show () {
+        return this.news.data
+      }
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const month = d.getMonth() + 1
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+        return year + '-' + month + '-' + day
+      }
+    }
+  }
+</script>
+<style scoped>
+
+  .hot-news{
+    border: 1px solid #e8e8e8;
+    width:260px;
+    padding: 0;
+    margin-top: 15px
+  }
+  .hot-news h4{
+    background: #ecf2fd;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    margin: 0;
+  }
+  .hot-news h4 span{
+    background: #feb900;
+    width: 30px;
+    height: 40px;
+    display: inline-block;
+    position: relative;
+    text-align: right;
+    color: #fff;
+    margin-right: 40px;
+    font-size: 12px;
+    line-height: 40px;
+    float: left;
+  }
+
+  .hot-news h4 span:before{
+    content: '';
+    position: absolute;
+    right: -20px;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-width: 20px 0 20px 20px;
+    border-style: solid;
+    border-color: transparent transparent transparent #feb900;
+  }
+
+  .hot-news ol{
+    padding-top: 0px;
+    padding-right: 15px;
+    padding-bottom: 0px;
+    padding-left: 15px;
+  }
+
+  .hot-news ol li{
+    border-bottom: #e8e8e8 1px dotted;
+  }
+
+  .hot-news li h5 {
+    margin-top: 20px;
+    margin-bottom: 0;
+    padding: 5px 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 16px;
+    color: #666666;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+  .hot-news li h5 a {
+    font-weight: normal;
+    color: #323232;
+  }
+
+  .hot-time{
+    line-height: 30px;
+  }
+
+  .hot-time span{
+    font-size: 14px;
+    color: #999;
+  }
+  li{
+    display: list-item;
+    text-align: -webkit-match-parent;
+  }
+
+  .list-unstyled{
+    list-style: none;
+  }
+
+  .hot-news li p{
+    font-size: 12px;
+    line-height: 20px;
+    height: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .fa {
+    margin-right: 5px;
+  }
+
+
+
+</style>

components/news/Right.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="news-content col-md-9">
+    <h4><span class="label label-primary">News</span>新闻资讯</h4>
+    <div class="news" v-for="item in news_show">
+      <div class="new">
+        <div style="width: 120px;">
+          <div class="thumbnail-news">
+            <nuxt-link :to="'/news/'+item.id" :title=item.title>
+              <img class="content-thumbnail"  alt="新闻缩略图" :src=item.thumbnail></nuxt-link>
+          </div>
+        </div>
+        <div class="news-list">
+          <h5> <nuxt-link :to="'/news/'+item.id" :title=item.title>{{item.title}}</nuxt-link></h5>
+          <p v-text=item.summary></p>
+          <div class="text-muted">
+            <span class="pull-left " >{{item.created | date}}</span>
+            <span class="pull-right text-num" >
+             <i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <page :total="totalCount" :page-size="pageSize"
+          :current="nowPage" v-on:childEvent="listenPage"></page>
+  </div>
+</template>
+
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      news () {
+        return this.$store.state.newsPage.allNews
+      },
+      news_show () {
+        return this.news.data.content
+      },
+      totalCount () {
+        return this.news.data.count
+      }
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const month = d.getMonth() + 1
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+        const hour = d.getHours()
+        const minutes = d.getMinutes()
+        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes
+      }
+    },
+    methods: {
+      listenPage: function (changedPage) {
+        this.nowPage = changedPage
+        this.$emit('childEvent', this.nowPage)
+      }
+    }
+  }
+
+</script>
+
+<style>
+  .news-content{
+    padding-left: 0;
+    float: right;
+    width: 75%;
+    margin-top: 10px;
+  }
+  .news-content h4{
+    border-bottom: #e8e8e8 1px solid;
+    line-height: 40px;
+    margin: 0;
+  }
+  .news-content h4 span.label{
+    font-size: 12px;
+    padding: 5px 2px;
+    margin-right: 8px;
+  }
+  .news-content h4 span.label-primary{
+    background: #5078cb;
+  }
+
+  .news {
+    display: table;
+  }
+
+  .new {
+    display: table-row;
+  }
+
+  .new >div{
+    display: table-cell;
+    vertical-align: middle;
+    border-bottom: 1px dashed #ccc;
+  }
+  .thumbnail-news {
+    width: 160px;
+    height: 100px;
+    overflow: hidden;
+    margin: 20px 0 20px;
+  }
+
+  .thumbnail-news img {
+    width: 160px;
+    height: 100px;
+    vertical-align: middle;
+    border: 0;
+  }
+
+  .news-list {
+    padding: 10px 10px 10px 20px;
+  }
+  .new h5 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .news .new h5 a {
+    color: #323232;
+    font-weight: normal;
+  }
+  .news-list >p{
+    line-height: 25px;
+  }
+  .news-list .pull-right i {
+    margin-right: 10px;
+  }
+
+  .news-content a{
+    cursor: pointer;
+  }
+
+</style>

components/news/index.js

@@ -0,0 +1,4 @@
+import Left from './Left.vue'
+import Right from './Right.vue'
+
+export { Left, Right }

components/provider/Carousel.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="carousel">
+    <div v-swiper:mySwiper="swiperOption">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="banner in banners">
+          <img :src="banner.pictureUrl">
+        </div>
+      </div>
+      <div class="swiper-pagination swiper-pagination-bullets"></div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'carousel',
+    data () {
+      return {
+        activeSlide: 0,
+        swiperOption: {
+          autoplay: 5000,
+          initialSlide: 1,
+          loop: true,
+          effect: 'fade',
+          lazyLoading: true,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          paginationElement: 'li',
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next'
+        }
+      }
+    },
+    computed: {
+      banners () {
+        return this.$store.state.carousel.banners.data
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  $carousel_width: 668px;
+  $carousel_height: 358px;
+
+  .carousel {
+    width: $carousel_width;
+    height: $carousel_height;
+    transition: background-color .3s;
+    position: relative;
+
+    .swiper-wrapper {
+      .swiper-slide {
+        img {
+          display: block;
+          width: $carousel_width;
+          height: $carousel_height;
+        }
+      }
+    }
+  }
+</style>

components/provider/RecommendStore.vue

@@ -4,6 +4,7 @@
       <sales-rank />
     </div>
     <div class="carousel">
+      <carousel />
     </div>
     <div class="new-store">
       <new-store />
@@ -11,14 +12,16 @@
   </div>
 </template>
 <script>
-import SalesRank from './SalesRank'
-import NewStore from './NewStore'
+import SalesRank from './SalesRank.vue'
+import NewStore from './NewStore.vue'
+import Carousel from './Carousel.vue'
 
 export default {
   name: 'recommend-store',
   components: {
     SalesRank,
-    NewStore
+    NewStore,
+    Carousel
   }
 }
 </script>

components/provider/Suppliers.vue

@@ -9,7 +9,7 @@
           <div class="input-group">
             <input class="form-control" type="search" v-model="keyword" placeholder="请输入商家名称" @search="search()" />
             <span class="input-group-btn">
-							<button type="button" class="btn btn-default" @click="search()"><i class="fa fa-search" aria-hidden="true"></i></button>
+							<button type="button" class="btn btn-default" @click="search()"><i class="iconfont">&#xe6fc;</i></button>
 						</span>
           </div>
         </td>
@@ -151,5 +151,14 @@ export default {
 	#store-list table>tbody tr td{
 		padding: 15px;
 	}
+
+	@font-face {
+    font-family: 'iconfont';  /* project id 357960 */
+    src: url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.eot');
+    src: url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.woff') format('woff'),
+    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.svg#iconfont') format('svg');
+  }
 </style>
 

package.json

@@ -14,6 +14,7 @@
     "http-proxy-middleware": "^0.17.4",
     "jquery": "^3.2.1",
     "nuxt": "0.10.6",
+    "iview": "^2.0.0-rc.19",
     "vue-awesome-swiper": "^2.5.4"
   },
   "scripts": {

pages/index.vue

@@ -20,7 +20,7 @@
         store.dispatch('loadFloors'),
         store.dispatch('loadBanners'),
         store.dispatch('loadProductKinds', { id: 0 }),
-        store.dispatch('loadNewsSnapshot', { page: 1 })
+        store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 })
       ])
     },
     components: {

pages/news/_id.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="container">
+    <div class="menu-title col-md-12"><nuxt-link to="/news">优软快讯</nuxt-link> &gt; <span>资讯详情</span></div>
+    <left></left>
+    <detail></detail>
+  </div>
+</template>
+<script>
+  import Left from '~components/news/Left.vue'
+  import Detail from '~components/news/Detail.vue'
+  import NuxtLink from '../../.nuxt/components/nuxt-link'
+  export default {
+    layout: 'main',
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('loadHotNews'),
+        store.dispatch('loadDetailNews', {id: route.params.id})
+      ])
+    },
+    components: {
+      NuxtLink,
+      Left,
+      Detail
+    }
+  }
+</script>
+<style >
+.menu-title{
+  margin-top: 20px;
+}
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+</style>

pages/news/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="container news-container">
+    <left></left>
+    <right v-on:childEvent="listenChild"></right>
+  </div>
+</template>
+
+<script>
+  import { Left, Right } from '~components/news'
+  export default {
+    layout: 'main',
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1
+      }
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('loadAllNews', { page: this.nowPage, pageSize: this.pageSize }),
+        store.dispatch('loadHotNews')
+      ])
+    },
+    components: {
+      Left,
+      Right
+    },
+    methods: {
+      listenChild: function (nPage) {
+        this.nowPage = nPage
+        this.$store.dispatch('loadAllNews', { page: this.nowPage, pageSize: this.pageSize })
+      }
+    }
+
+  }
+</script>
+
+<style>
+  *{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .footer .item{
+    margin-top: 20px;
+  }
+  .navbar{
+    height: 36px!important;
+    min-height: 36px!important;
+  }
+
+  .news-container{
+    font: 100%/1.2 verdana, "Microsoft YaHei", '宋体', serif;
+  }
+  .hot-news a:hover{
+    text-decoration: underline;
+  }
+  .news-content a:hover{
+    text-decoration: underline;
+  }
+  div{
+    display: block;
+  }
+
+
+</style>

store/detailNews.js

@@ -0,0 +1,20 @@
+export const state = () => ({
+  detailNews: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_DETAILNEWS (state) {
+    state.detailNews.fetching = true
+  },
+  GET_DETAILNEWS_FAILURE (state) {
+    state.detailNews.fetching = false
+  },
+  GET_DETAILNEWS_SUCCESS (state, result) {
+    state.detailNews.fetching = false
+    state.detailNews.data = result
+  }
+}
+

store/hotNews.js

@@ -0,0 +1,23 @@
+export const state = () => ({
+  hotNews: {
+    fetching: false,
+    data: []
+  },
+  hotNewsDetail: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_HOTNEWS (state) {
+    state.hotNews.fetching = true
+  },
+  GET_HOTNEWS_FAILURE (state) {
+    state.hotNews.fetching = false
+  },
+  GET_HOTNEWS_SUCCESS (state, result) {
+    state.hotNews.fetching = false
+    state.hotNews.data = result.content
+  }
+}

store/index.js

@@ -82,6 +82,38 @@ export const actions = {
         commit('news/GET_SNAPSHOT_FAILURE', err)
       })
   },
+  // 获取快讯页新闻
+  loadAllNews ({ commit }, params = {}) {
+    commit('newsPage/REQUEST_ALLNEWS')
+    return axios.get('/api/news/created', {params})
+      .then(response => {
+        commit('newsPage/GET_ALLNEWS_SUCCESS', response.data)
+      }, err => {
+        commit('newsPage/GET_ALLNEWS_FAILURE', err)
+      })
+  },
+  // 获取详细新闻
+  loadDetailNews ({ commit }, params = {}) {
+    console.log(params.id)
+    let id = params.id
+    commit('detailNews/REQUEST_DETAILNEWS', params)
+    return axios.get(`/api/news/${id}`)
+      .then(response => {
+        commit('detailNews/GET_DETAILNEWS_SUCCESS', response.data)
+      }, err => {
+        commit('detailNews/GET_DETAILNEWS_FAILURE', err)
+      })
+  },
+  // 获取热点新闻
+  loadHotNews ({ commit }, params = {}) {
+    commit('hotNews/REQUEST_HOTNEWS')
+    return axios.get('/api/news/viewCount', {params})
+      .then(response => {
+        commit('hotNews/GET_HOTNEWS_SUCCESS', response.data)
+      }, err => {
+        commit('hotNews/GET_HOTNEWS_FAILURE', err)
+      })
+  },
   // 获取器件统计信息
   loadProductCounts ({ commit }, params = {}) {
     commit('product/common/REQUEST_COUNTS')

store/newsPage.js

@@ -0,0 +1,23 @@
+export const state = () => ({
+  allNews: {
+    fetching: false,
+    data: []
+  },
+  allNewsDetail: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_ALLNEWS (state) {
+    state.allNews.fetching = true
+  },
+  GET_ALLNEWS_FAILURE (state) {
+    state.allNews.fetching = false
+  },
+  GET_ALLNEWS_SUCCESS (state, result) {
+    state.allNews.fetching = false
+    state.allNews.data = result
+  }
+}