添加首页从接口获取数据

.env

 VUE_APP_NODE_ENV="development"
 VUE_APP_VERSION="0.0.1"
-VUE_APP_API="http://www.baidu.com"
\ No newline at end of file
+VUE_APP_API="http://10.10.81.190:31004/"
\ No newline at end of file

src/api/ServerApi.js

+export const HomeApi = {
+    getIndex: (param) => {
+        return handlePromise($http.post('/api/app/index/getIndex', param))
+    }
+}
+
+
+const handlePromise = (promise, errorMsg = '数据获取失败！') => {
+    return promise.then(res => {
+        const { status, statusText, data } = res || {}
+        if (status == 0) {
+            return Promise.resolve({ data })
+        }
+        return Promise.resolve({ error: statusText || errorMsg })
+    }).catch(e => {
+        if (typeof e === 'object') {
+            const statusText = e && e.statusText
+            return Promise.resolve({ error: statusText || errorMsg })
+        }
+        return Promise.resolve({ error: e || errorMsg })
+    })
+}
+
+

src/assets/css/sprite.less

 .icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 2060px 1529px; }
+.icon-all { width: 8px; height: 8px; background-position: -1403px -670px; }
 .icon-bg-common { width: 828px; height: 360px; background-position: 0px -1169px; }
 .icon-bg-login-2 { width: 828px; height: 506px; background-position: -1232px 0px; }
 .icon-bg-login { width: 828px; height: 412px; background-position: 0px -737px; }
@@ -39,11 +40,8 @@
 .icon-tel { width: 36px; height: 36px; background-position: -1752px -1225px; }
 .icon-time-update { width: 45px; height: 45px; background-position: -1232px -670px; }
 .icon-trash { width: 50px; height: 50px; background-position: -1840px -981px; }
+.icon-up-arrow { width: 20px; height: 14px; background-position: -1363px -670px; }
 .icon-user-question { width: 32px; height: 36px; background-position: -1920px -1225px; }
 .icon-user { width: 36px; height: 36px; background-position: -1808px -1225px; }
 .icon-verification { width: 36px; height: 36px; background-position: -1864px -1225px; }
-.icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; }
-.icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; }
-.icon-all { width: 8px; height: 8px; background-position: -1403px -670px; }
-.icon-pdf-icon { width: 46px; height: 28px; background-position: -1297px -670px; }
-.icon-up-arrow { width: 20px; height: 14px; background-position: -1363px -670px; }
+.icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; }
\ No newline at end of file

src/store/modules/home.js

+import { HomeApi } from "@/api/ServerApi"
+
+const HomeData = {
+  carouseTime: 2, // 轮播图滚动间隔时间 单位秒
+  carouseVOList: [ // 轮播图
+    {
+      picUrl: null, //轮播图地址
+      linkUrl: null, // 轮播图链接地址
+      linkType: null // 1-内链 2-外链
+    }
+  ],
+  iconVOS: [ // 金刚区图标
+    {
+      iconName: null, // 图标名称
+      iconEnName: null, // 图标英文名称
+      iconUrl: null, // 图标地址
+      linkUrlType: null, // 图标类型
+      jumpLink: null // 图标跳转地址
+    }
+  ],
+  scrollBarVOS: [ // 滚动热点
+    {
+      id: null, // 数据ID
+      scrollTitle: null, // 热点标题
+      scrollTag: null, // 热点标签
+      backgroundColor: null // 热点标签背景颜色
+
+    }
+  ],
+  newsQueryVOS: { // 新闻动态
+    total: 0, // 数据条数合计
+    list: [
+      {
+        id: null, // 数据ID
+        newsTitle: null, // 数据标题
+        newsType: null, // 数据类型
+        newsTypeName: null, // 类型名称
+        releaseTime: null, // 发布时间
+        isRecommend: null // 是否推荐， 1-推荐
+      }
+    ]
+  }
+}
 export default {
   namespaced: true,
   state: {
+    HomeData: { ...HomeData }
   },
   mutations: {
+    MSetHomeData (state, data) {
+      state.HomeData = data
+    }
   },
   actions: {
-  },
-  modules: {
+
+    AGetHomeData ({ state, commit }, param = {}) {
+      return HomeApi.getIndex(param).then(res => {
+        if (res.data) {
+          commit('MSetHomeData', res.data)
+        }
+        return Promise.resolve(res)
+      })
+    }
+
   }
 }

src/utils/Request.js

@@ -35,9 +35,8 @@ class Request {
     console.log(2)
     const responseData = response.data
     const errorText = response && (codeMessage[response.status] || response.statusText)
-
-    if (response && (response.stutus === 200 || response.stutus === 304 || response.status === 400)) {
-      if (responseData.stutus == 0) {
+    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
+      if (responseData.status == 0) {
         return responseData
       }
       if (responseData.status === 401 || responseData.status === 402) {
@@ -46,7 +45,7 @@ class Request {
       return Promise.reject(responseData)
     }
 
-    Promise.reject(response)
+    return Promise.reject(response)
 
   }
 
@@ -54,7 +53,7 @@ class Request {
   interceptors(instance, scope) {
     //  请求拦截器
     instance.interceptors.request.use(config => {
-      config.url = baseURL
+      this.baseURL && (config.url = this.baseURL)
       config.scope = scope
       return config
     }, error => {

src/views/home/components/HomeBanner.vue

 <template>
   <section class="home-banner">
-    <van-swipe class="banner-swiper" :autoplay="autoplay" lazy-render @change="handleChange">
-      <van-swipe-item class="swiper-item" v-for="(item, idx) in banners" :key="idx">
-        <img v-if="item.imgUrl" class="banner-img" :src="item.imgUrl" @click="handleItem(item)" />
+    <van-swipe
+      class="banner-swiper"
+      :autoplay="autoplay"
+      lazy-render
+      @change="handleChange"
+    >
+      <van-swipe-item
+        class="swiper-item"
+        v-for="(item, idx) in banners"
+        :key="idx"
+      >
+        <img
+          v-if="item.picUrl"
+          class="banner-img"
+          :src="item.picUrl"
+          @click="handleItem(item)"
+        />
         <div v-else class="banner-img white">
           <div class="banner-img skeleton"></div>
         </div>
@@ -10,7 +24,12 @@
 
       <template #indicator>
         <div class="nafmii-indicator">
-          <span class="indicator-item" :class="{'indicator-active': active == idx}" v-for="(item, idx) in banners" :key="idx" />
+          <span
+            class="indicator-item"
+            :class="{ 'indicator-active': active == idx }"
+            v-for="(item, idx) in banners"
+            :key="idx"
+          />
         </div>
       </template>
     </van-swipe>
@@ -21,20 +40,30 @@
 export default {
   name: 'HomeBanner',
   props: {
+    data: {
+      type: Object,
+      default: () => { return {} }
+    }
   },
   data () {
     return {
-      autoplay: 5000,
       active: 0,
-      banners: [
-        {},
-        {}
-      ]
+    }
+  },
+  computed: {
+    autoplay () {
+      const { carouseTime } = this.data || {}
+      // 默认5秒
+      return carouseTime && (carouseTime * 1000) || 5000
+    },
+    banners () {
+      const { carouseVOList } = this.data || {}
+      return carouseVOList || [{}, {}]
     }
   },
   methods: {
     handleItem (banner) {
-
+      const { linkUrl, linkType } = banner
     },
     handleChange (index) {
       this.active = index

src/views/home/components/MenuModule.vue

 <template>
   <section class="menu-module">
-    <div class="menu-module-item" v-for="(item, idx) in datas" :key="idx" @click="handleClickItem(item)">
-      <img v-if="item.icon" class="menu-icon" :src="item.icon">
+    <div
+      class="menu-module-item"
+      v-for="(item, idx) in data.iconVOS"
+      :key="idx"
+      @click="handleClickItem(item)"
+    >
+      <img v-if="item.iconUrl" class="menu-icon" :src="item.iconUrl" />
       <div v-else class="menu-icon"></div>
-      <span v-if="item.name" class="menu-name">{{item.name}}</span>
+      <span v-if="item.iconName" class="menu-name">{{ item.iconName }}</span>
       <div v-else class="menu-name white"></div>
     </div>
   </section>
@@ -13,21 +18,13 @@
 export default {
   name: 'MenuModule',
   props: {
-
+    data: {
+      type: Object,
+      default: () => { return {} }
+    }
   },
   data () {
-    return {
-      datas: [
-        { id: 1, name: '', icon: '', type: '' },
-        { id: 2, name: '', icon: '', type: '' },
-        { id: 3, name: '', icon: '', type: '' },
-        { id: 4, name: '', icon: '', type: '' },
-        { id: 5, name: '', icon: '', type: '' },
-        { id: 6, name: '', icon: '', type: '' },
-        { id: 7, name: '', icon: '', type: '' },
-        { id: 8, name: '', icon: '', type: '' },
-      ]
-    }
+    return {}
   },
   methods: {
     handleClickItem (item) {
@@ -38,6 +35,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import '~@/assets/css/mixins.less';
 .white {
   width: 90%;
   background: #eee;
@@ -55,6 +53,7 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 0 2px;
 
     @IconSize: 50px;
     .menu-icon {
@@ -71,6 +70,8 @@ export default {
       font-size: 14px;
       text-align: center;
       color: #444444;
+      width: 100%;
+      .line-clamp(1);
     }
   }
 }

src/views/home/index.vue

@@ -2,21 +2,34 @@
   <div class="home nafmii-head-bg1">
     <nafm-header :leftArrow="false" navClass="nafmii-head-bg1">
       <div class="head-custom-container">
-        <SearchInput :placeholder="$t('home.searchPlaceholder')" :readonly="true" @click="handleSearch" />
+        <SearchInput
+          :placeholder="$t('home.searchPlaceholder')"
+          :readonly="true"
+          @click="handleSearch"
+        />
 
         <div class="head-message-box">
-          <img src="@/assets/icon/message.png" alt="">
+          <img src="@/assets/icon/message.png" alt="" />
         </div>
       </div>
     </nafm-header>
     <main>
-      <HomeBanner />
-      <MenuModule />
-      <DataModule v-for="(item,idx) in modules" :key="idx" v-bind="item" :datas="item.datas" @clickMore="handleMore(item)" @clickItem="handleItem" @clickTop="handleTop(item)" />
+      <HomeBanner :data="HomeData" />
+      <MenuModule :data="HomeData" />
+      <DataModule
+        v-for="(item, idx) in modules"
+        :key="idx"
+        v-bind="item"
+        :datas="item.datas"
+        @clickMore="handleMore(item)"
+        @clickItem="handleItem"
+        @clickTop="handleTop(item)"
+      />
     </main>
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 import SearchInput from '@/components/SearchInput'
 import HomeBanner from './components/HomeBanner'
 import MenuModule from './components/MenuModule'
@@ -53,13 +66,15 @@ export default {
       ]
     };
   },
+  computed: {
+    ...mapState('home', {
+      HomeData: state => state.HomeData,
+      // Banner: state => {
+      //   const { carouseTime, carouseVOList } = state.HomeData || {}
+      // }
+    })
+  },
   methods: {
-    jumpLogin () {
-      this.$router.push({
-        name: "Login",
-      });
-    },
-
     handleSearch () {
       this.$router.push({ name: 'GlobalSearch' })
     },
@@ -76,10 +91,13 @@ export default {
     handleMore (module) {
 
     },
-    
+
     handleItem (item) {
 
     }
+  },
+  mounted () {
+    this.$store.dispatch('home/AGetHomeData')
   }
 };
 </script>