Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 514c6962 by amateur
Options

添加首页从接口获取数据

1 parent f4e27691
Inline Side-by-side
Showing 8 changed files with 173 additions and 49 deletions
.env
VUE_APP_NODE_ENV="development" VUE_APP_NODE_ENV="development"
VUE_APP_VERSION="0.0.1" VUE_APP_VERSION="0.0.1"
VUE_APP_API="http://www.baidu.com"
\ No newline at end of file \ No newline at end of file
VUE_APP_API="http://10.10.81.190:31004/"
\ No newline at end of file \ No newline at end of file
src/api/ServerApi.js 0 → 100644
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-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-common { width: 828px; height: 360px; background-position: 0px -1169px; }
.icon-bg-login-2 { width: 828px; height: 506px; background-position: -1232px 0px; } .icon-bg-login-2 { width: 828px; height: 506px; background-position: -1232px 0px; }
.icon-bg-login { width: 828px; height: 412px; background-position: 0px -737px; } .icon-bg-login { width: 828px; height: 412px; background-position: 0px -737px; }
...@@ -39,11 +40,8 @@ ...@@ -39,11 +40,8 @@
.icon-tel { width: 36px; height: 36px; background-position: -1752px -1225px; } .icon-tel { width: 36px; height: 36px; background-position: -1752px -1225px; }
.icon-time-update { width: 45px; height: 45px; background-position: -1232px -670px; } .icon-time-update { width: 45px; height: 45px; background-position: -1232px -670px; }
.icon-trash { width: 50px; height: 50px; background-position: -1840px -981px; } .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-question { width: 32px; height: 36px; background-position: -1920px -1225px; }
.icon-user { width: 36px; height: 36px; background-position: -1808px -1225px; } .icon-user { width: 36px; height: 36px; background-position: -1808px -1225px; }
.icon-verification { width: 36px; height: 36px; background-position: -1864px -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; }
\ No newline at end of file \ No newline at end of file
.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; }
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 { export default {
namespaced: true, namespaced: true,
state: { state: {
HomeData: { ...HomeData }
}, },
mutations: { mutations: {
MSetHomeData (state, data) {
state.HomeData = data
}
}, },
actions: { 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 { ...@@ -35,9 +35,8 @@ class Request {
console.log(2) console.log(2)
const responseData = response.data const responseData = response.data
const errorText = response && (codeMessage[response.status] || response.statusText) const errorText = response && (codeMessage[response.status] || response.statusText)
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
if (response && (response.stutus === 200 || response.stutus === 304 || response.status === 400)) { if (responseData.status == 0) {
if (responseData.stutus == 0) {
return responseData return responseData
} }
if (responseData.status === 401 || responseData.status === 402) { if (responseData.status === 401 || responseData.status === 402) {
...@@ -46,7 +45,7 @@ class Request { ...@@ -46,7 +45,7 @@ class Request {
return Promise.reject(responseData) return Promise.reject(responseData)
} }
Promise.reject(response) return Promise.reject(response)
} }
...@@ -54,7 +53,7 @@ class Request { ...@@ -54,7 +53,7 @@ class Request {
interceptors(instance, scope) { interceptors(instance, scope) {
// 请求拦截器 // 请求拦截器
instance.interceptors.request.use(config => { instance.interceptors.request.use(config => {
config.url = baseURL this.baseURL && (config.url = this.baseURL)
config.scope = scope config.scope = scope
return config return config
}, error => { }, error => {
......
src/views/home/components/HomeBanner.vue
<template> <template>
<section class="home-banner"> <section class="home-banner">
<van-swipe class="banner-swiper" :autoplay="autoplay" lazy-render @change="handleChange"> <van-swipe
<van-swipe-item class="swiper-item" v-for="(item, idx) in banners" :key="idx"> class="banner-swiper"
<img v-if="item.imgUrl" class="banner-img" :src="item.imgUrl" @click="handleItem(item)" /> :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 v-else class="banner-img white">
<div class="banner-img skeleton"></div> <div class="banner-img skeleton"></div>
</div> </div>
...@@ -10,7 +24,12 @@ ...@@ -10,7 +24,12 @@
<template #indicator> <template #indicator>
<div class="nafmii-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> </div>
</template> </template>
</van-swipe> </van-swipe>
...@@ -21,20 +40,30 @@ ...@@ -21,20 +40,30 @@
export default { export default {
name: 'HomeBanner', name: 'HomeBanner',
props: { props: {
data: {
type: Object,
default: () => { return {} }
}
}, },
data () { data () {
return { return {
autoplay: 5000,
active: 0, active: 0,
banners: [ }
{}, },
{} computed: {
] autoplay () {
const { carouseTime } = this.data || {}
// 默认5秒
return carouseTime && (carouseTime * 1000) || 5000
},
banners () {
const { carouseVOList } = this.data || {}
return carouseVOList || [{}, {}]
} }
}, },
methods: { methods: {
handleItem (banner) { handleItem (banner) {
const { linkUrl, linkType } = banner
}, },
handleChange (index) { handleChange (index) {
this.active = index this.active = index
......
src/views/home/components/MenuModule.vue
<template> <template>
<section class="menu-module"> <section class="menu-module">
<div class="menu-module-item" v-for="(item, idx) in datas" :key="idx" @click="handleClickItem(item)"> <div
<img v-if="item.icon" class="menu-icon" :src="item.icon"> 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> <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 v-else class="menu-name white"></div>
</div> </div>
</section> </section>
...@@ -13,21 +18,13 @@ ...@@ -13,21 +18,13 @@
export default { export default {
name: 'MenuModule', name: 'MenuModule',
props: { props: {
data: {
type: Object,
default: () => { return {} }
}
}, },
data () { data () {
return { 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: '' },
]
}
}, },
methods: { methods: {
handleClickItem (item) { handleClickItem (item) {
...@@ -38,6 +35,7 @@ export default { ...@@ -38,6 +35,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '~@/assets/css/mixins.less';
.white { .white {
width: 90%; width: 90%;
background: #eee; background: #eee;
...@@ -55,6 +53,7 @@ export default { ...@@ -55,6 +53,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 2px;
@IconSize: 50px; @IconSize: 50px;
.menu-icon { .menu-icon {
...@@ -71,6 +70,8 @@ export default { ...@@ -71,6 +70,8 @@ export default {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
color: #444444; color: #444444;
width: 100%;
.line-clamp(1);
} }
} }
} }
......
src/views/home/index.vue
...@@ -2,21 +2,34 @@ ...@@ -2,21 +2,34 @@
<div class="home nafmii-head-bg1"> <div class="home nafmii-head-bg1">
<nafm-header :leftArrow="false" navClass="nafmii-head-bg1"> <nafm-header :leftArrow="false" navClass="nafmii-head-bg1">
<div class="head-custom-container"> <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"> <div class="head-message-box">
<img src="@/assets/icon/message.png" alt=""> <img src="@/assets/icon/message.png" alt="" />
</div> </div>
</div> </div>
</nafm-header> </nafm-header>
<main> <main>
<HomeBanner /> <HomeBanner :data="HomeData" />
<MenuModule /> <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)" /> <DataModule
v-for="(item, idx) in modules"
:key="idx"
v-bind="item"
:datas="item.datas"
@clickMore="handleMore(item)"
@clickItem="handleItem"
@clickTop="handleTop(item)"
/>
</main> </main>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from "vuex";
import SearchInput from '@/components/SearchInput' import SearchInput from '@/components/SearchInput'
import HomeBanner from './components/HomeBanner' import HomeBanner from './components/HomeBanner'
import MenuModule from './components/MenuModule' import MenuModule from './components/MenuModule'
...@@ -53,13 +66,15 @@ export default { ...@@ -53,13 +66,15 @@ export default {
] ]
}; };
}, },
methods: { computed: {
jumpLogin () { ...mapState('home', {
this.$router.push({ HomeData: state => state.HomeData,
name: "Login", // Banner: state => {
}); // const { carouseTime, carouseVOList } = state.HomeData || {}
// }
})
}, },
methods: {
handleSearch () { handleSearch () {
this.$router.push({ name: 'GlobalSearch' }) this.$router.push({ name: 'GlobalSearch' })
}, },
...@@ -80,6 +95,9 @@ export default { ...@@ -80,6 +95,9 @@ export default {
handleItem (item) { handleItem (item) {
} }
},
mounted () {
this.$store.dispatch('home/AGetHomeData')
} }
}; };
</script> </script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!