new index + news

src/api/webApi/career-news.js

@@ -9,6 +9,15 @@ export function types(params) {
     })
 }
 
+export function typesNoToken(params) {
+  return request({
+    url: '/front/news/typesNoToken',
+    method: 'get',
+    params: params,
+    withoutToken: true
+  })
+}
+
 // 01 生涯课程列表
 export function list(params) {
     return request({
@@ -18,6 +27,15 @@ export function list(params) {
     })
 }
 
+export function listNoToken(params) {
+  return request({
+    url: '/front/news/listNoToken',
+    method: 'get',
+    params: params,
+    withoutToken: true
+  })
+}
+
 // 02 生涯课程详情
 export function info(params) {
     return request({

src/views/index/components/index-card-news.vue

@@ -0,0 +1,75 @@
+<template>
+  <index-card title="高考资讯" sub-title="最新、最全的高考资讯" more-text="更多" @more="handleMore">
+    <el-tabs v-model="activeName" type="card" @tab-click="handleTabChanged">
+      <el-tab-pane v-for="type in newsTypes" :key="type" :name="type" :label="type">
+        <el-row>
+          <el-col v-for="news in getSafeNews(type)" :key="news.id" :span="12">
+            <div class="fx-row fx-sta-cen pr30 pf f-333" style="line-height: 35px">
+              <i class="el-icon-alarm-clock"></i>
+              <span class="ml10">{{ news.sendDate }}</span>
+              <span class="ml10 fx-1 text-ellipsis" :title="news.title">{{ news.title }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from '@/views/index/components/index-card'
+import loginCheckMixin from '@/views/components/blocks/index-login-interceptor-mixin'
+import transferMixin from '@/components/mx-transfer-mixin'
+import * as career from '@/api/webApi/career-news'
+
+export default {
+  mixins: [transferMixin, loginCheckMixin],
+  name: 'index-card-news',
+  components: { IndexCard },
+  data() {
+    return {
+      morePath: '/fuzhu/newGaokaoNews',
+      newsTypes: [],
+      activeName: '',
+      newsCache: {}
+    }
+  },
+  mounted() {
+    this.getTypes()
+  },
+  methods: {
+    getTypes() {
+      career.typesNoToken().then(res => {
+        this.newsTypes = res.rows.map(i => i.label)
+        this.activeName = this.newsTypes.first()
+        this.getList(this.activeName)
+      })
+    },
+    handleTabChanged() {
+      this.getList(this.activeName)
+    },
+    getList(type) {
+      if (!type) return
+      if (this.newsCache.hasOwnProperty(type)) return
+      career.listNoToken({
+        pageNum: 1,
+        pageSize: 10,
+        type: type
+      }).then(res => {
+        this.$set(this.newsCache, type, res.rows)
+      })
+    },
+    getSafeNews(type) {
+      return this.newsCache[type] || []
+    },
+    async handleMore() {
+      await this.loginCheck()
+      this.transferTo(this.morePath)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/components/index-card-top.vue

@@ -0,0 +1,47 @@
+<template>
+  <index-card title="热门资讯">
+    <!-- 空白与左边tabs对齐 -->
+    <div style="height: 55px"></div>
+    <div v-for="news in topNews" :key="news.id" class="fx-row fx-sta-cen pr30 pf f-333" style="line-height: 35px">
+      <i class="el-icon-alarm-clock"></i>
+      <span class="ml10">{{ news.sendDate }}</span>
+      <span class="ml10 fx-1 text-ellipsis" :title="news.title">{{ news.title }}</span>
+    </div>
+  </index-card>
+</template>
+
+<script>
+import IndexCard from '@/views/index/components/index-card'
+import loginCheckMixin from '@/views/components/blocks/index-login-interceptor-mixin'
+import transferMixin from '@/components/mx-transfer-mixin'
+import * as career from '@/api/webApi/career-news'
+
+export default {
+  mixins: [loginCheckMixin, transferMixin],
+  name: 'index-card-top',
+  components: { IndexCard },
+  data() {
+    return {
+      topNews: []
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      career.listNoToken({
+        pageNum: 1,
+        pageSize: 5,
+        tag: 'hot'
+      }).then(res => {
+        this.topNews = res.rows
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index/components/index-news-top-wrapper.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="fx-row">
+    <index-card-news class="mr20" style="width: 65%"/>
+    <index-card-top class="fx-1"/>
+  </div>
+</template>
+
+<script>
+import IndexCardNews from '@/views/index/components/index-card-news'
+import IndexCardTop from '@/views/index/components/index-card-top'
+
+export default {
+  name: 'index-news-top-wrapper',
+  components: { IndexCardTop, IndexCardNews }
+}
+</script>
+
+<style scoped>
+</style>

src/views/index/login.vue

@@ -13,6 +13,7 @@
         <index-card-career class="mt20 index-block"/>
         <index-preference-simulate class="mt20 index-block"/>
         <index-preference class="mt20 index-block"/>
+        <index-news-top-wrapper class="mt20 index-block"/>
       </div>
       <bottom-p class="mt20"></bottom-p>
       <el-dialog v-if="dialogVisible" title :visible.sync="dialogVisible" width="850px">
@@ -46,10 +47,12 @@ import IndexCardElectiveTest from '@/views/index/components/index-card-elective-
 import IndexPreferenceSimulate from '@/views/index/components/index-preference-simulate'
 import IndexPreference from '@/views/index/components/index-preference'
 import IndexCardCareer from '@/views/index/components/index-card-career'
+import IndexNewsTopWrapper from '@/views/index/components/index-news-top-wrapper'
 
 export default {
   mixins: [RouterHelpMixin, loginCheckMixin],
   components: {
+    IndexNewsTopWrapper,
     IndexCardCareer,
     IndexPreference,
     IndexPreferenceSimulate,