Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit cbba3ff7 by amateur
Options

修改全局搜索模块

1 parent 922fda2b
Inline Side-by-side
Showing 7 changed files with 407 additions and 22 deletions
src/components/HomeDataListModule.vue 0 → 100644
<template>
<section class="data-module">
<div class="module-top-container">
<div class="module-top-left">
<span class="module-name">{{name}}</span>
<span v-if="showTop" class="module-top-btn" @click="$emit('clickTop')">{{$t('home.top')}}</span>
</div>
<div class="module-more" @click="emit('clickMore')">
<span>{{$t('home.more')}}</span>
<img src="@/assets/icon/more.png" alt="">
</div>
</div>
<div class="module-content-container">
<DataListItem v-for="(item, idx) in datas" :key="idx" :data="item" :dateText="dateText" @click="$emit('clickItem', item)">
<template v-if="item.isRecommend" v-slot:tag>
<span class="item-recommend">{{$t('home.recommend')}}</span>
</template>
</DataListItem>
</div>
</section>
</template>
<script>
import DataListItem from './DataListItem'
export default {
name: 'HomeDataListModule',
components: { DataListItem },
props: {
name: {
type: String,
},
showTop: {
type: Boolean,
},
dateText: {
type: String,
},
datas: {
type: Array,
default: () => []
}
},
data () {
return {
data: {
name: '协会动态',
isTop: true,
list: [
{
isRecommend: true,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
date: '2020-02-02',
dataType: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
date: '2020-02-02',
dataType: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标出',
date: '2020-02-02',
dataType: '产品创新'
},
]
}
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/css/mixins.less';
@ModuleTop: 30px;
.data-module {
padding-top: @ModuleTop;
.module-top-container {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #135faa;
.module-top-left {
display: flex;
align-items: center;
margin-bottom: -0.5px;
.module-name {
padding-bottom: 2px;
box-sizing: border-box;
font-size: 19px;
color: #222222;
line-height: 26px;
border-bottom: 2.5px solid #135faa;
}
.module-top-btn {
margin-left: 15px;
height: 17px;
line-height: 15px;
border-radius: 10px;
color: #135faa;
font-size: 12px;
padding: 0 5px;
text-align: center;
border: 0.5px solid #135faa;
}
}
.module-more {
display: flex;
align-items: center;
font-size: 12px;
color: #999999;
img {
margin-left: 5px;
margin-top: 2px;
width: auto;
height: 9px;
}
}
}
}
.module-content-container {
.item-recommend {
height: 18x;
line-height: 18px;
font-size: 10px;
color: white;
padding: 0 7px;
padding-bottom: 1px;
border-radius: 8px;
background: #ff4038;
text-align: center;
}
.content-item {
padding-top: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.item-title {
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 25px;
position: relative;
.item-recommend {
position: absolute;
left: 0;
top: 3.5px;
height: 18px;
line-height: 18px;
font-size: 10px;
color: white;
padding: 0 7px;
border-radius: 8px;
background: #ff4038;
text-align: center;
margin-right: 10px;
}
.item-title-content {
font-size: 16px;
color: #222222;
line-height: 25px;
.line-clamp(2);
}
&.item-recommend {
.item-title-content {
text-indent: 50px;
}
}
}
.item-content-bottom {
padding-top: 10px;
display: flex;
justify-content: space-between;
.item-bottom-item {
display: flex;
align-items: center;
@IconSize: 15px;
.item-bottom-icon {
width: @IconSize;
height: @IconSize;
}
.item-bottom-text {
line-height: 16px;
font-size: 12px;
color: #999999;
margin-left: 7px;
}
}
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/i18n/lang/home/index.js
...@@ -9,6 +9,9 @@ const En = { ...@@ -9,6 +9,9 @@ const En = {
disclosure: 'Information Disclosure', disclosure: 'Information Disclosure',
news: 'News', news: 'News',
registered: 'Registered Issue', registered: 'Registered Issue',
},
homeSearch: {
titleModule: 'Related Applications',
} }
} }
...@@ -23,7 +26,9 @@ const Zh = { ...@@ -23,7 +26,9 @@ const Zh = {
disclosure: '信息披露', disclosure: '信息披露',
news: '新闻动态', news: '新闻动态',
registered: '注册发行', registered: '注册发行',
},
homeSearch: {
titleModule: '相关应用'
} }
} }
......
src/views/home/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<main> <main>
<HomeBanner /> <HomeBanner />
<MenuModule /> <MenuModule />
<DataModule v-for="item in modules" :key="item.type" v-bind="item" @clickTop="handleTop(item)" /> <DataModule v-for="item in modules" :key="item.type" v-bind="item" :datas="item.datas" @clickTop="handleTop(item)" />
</main> </main>
</div> </div>
</template> </template>
...@@ -20,17 +20,36 @@ ...@@ -20,17 +20,36 @@
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'
import DataModule from './components/DataModule' import DataModule from '@/components/HomeDataListModule'
export default { export default {
name: "Home", name: "Home",
components: { HomeBanner, MenuModule, DataModule, SearchInput }, components: { HomeBanner, MenuModule, DataModule, SearchInput },
data () { data () {
console.log(); const datas = [
{
isRecommend: true,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
date: '2020-02-02',
dataType: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
date: '2020-02-02',
dataType: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标出',
date: '2020-02-02',
dataType: '产品创新'
}
]
return { return {
modules: [ modules: [
{ type: '1', name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate'), showTop: false }, { type: '1', name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate'), datas, showTop: false },
{ type: '2', name: this.$t('home.news'), dateText: this.$t('home.updateDate'), showTop: true }, { type: '2', name: this.$t('home.news'), dateText: this.$t('home.updateDate'), datas, showTop: true },
{ type: '3', name: this.$t('home.registered'), dateText: this.$t('home.updateDate'), showTop: true } { type: '3', name: this.$t('home.registered'), dateText: this.$t('home.updateDate'), datas, showTop: true }
] ]
}; };
}, },
......
src/views/homeSearch/components/MenuModuleLayout.vue 0 → 100644
<template>
<section class="menu-module-layout">
<span class="module-title">{{$t('homeSearch.titleModule')}}</span>
<div class="menu-modules-container">
<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 v-else class="menu-icon"></div>
<span v-if="item.name" class="menu-name">{{item.name}}</span>
<div v-else class="menu-name white"></div>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'MenuModuleLayout',
props: {
datas: {
type: Array,
default: () => []
}
},
methods: {
handleClickItem (item) {
}
}
}
</script>
<style lang="less" scoped>
.menu-module-layout {
.module-title {
color: #222222;
font-size: 19px;
}
.menu-modules-container {
display: flex;
flex-flow: wrap;
}
@ModulePaddingTop: 10px;
.menu-module-item {
padding-top: @ModulePaddingTop;
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@IconSize: 50px;
.menu-icon {
background: #eee;
height: @IconSize;
width: @IconSize;
border-radius: calc(@IconSize / 2);
}
.menu-name {
display: block;
margin-top: 8px;
line-height: 17px;
min-height: 17px;
font-size: 12px;
text-align: center;
color: #444444;
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/homeSearch/components/SearchDataLayout.vue
<template> <template>
<section></section> <section class="search-data-layout">
<MenuModuleLayout class="search-menus" v-if="menus" :datas="menus" />
<HomeDataListModule v-for="(item, idx) in moduleList" :key="idx" :datas="item.list" v-bind="item" @clickMore="handleMore(item)" @clickItem="handleItem" />
</section>
</template> </template>
<script> <script>
import MenuModuleLayout from './MenuModuleLayout'
import HomeDataListModule from '@/components/HomeDataListModule'
export default { export default {
name: 'SearchDataLayout', name: 'SearchDataLayout',
components: { MenuModuleLayout, HomeDataListModule },
props: { props: {
data: {
type: Object,
default: () => { return {} }
}
}, },
data () { data () {
return {} return {}
}, },
computed: {
menus () {
return this.data && this.data.apps
},
moduleList () {
const { modules } = this.data || {}
const result = []
modules && modules.forEach(item => {
if (item.type == 1) { // 注册发行
Object.assign(item, { name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate') })
} else if (item.type == 2) { // 新闻动态
Object.assign(item, { name: this.$t('home.news'), dateText: this.$t('home.updateDate') })
} else if (item.type == 3) { // 信息披露
Object.assign(item, { name: this.$t('home.registered'), dateText: this.$t('home.updateDate') })
}
result.push(item)
});
return result
}
},
methods: { methods: {
handleMore (item) {
},
handleItem (dataItem) {
}
}
}
</script>
<style lang="less" scoped>
@PaddingSize: 15px;
.search-data-layout {
height: 100%;
background: white;
padding: @PaddingSize;
.search-menus {
padding-bottom: 25px;
}
/deep/.data-module {
padding-top: initial;
.module-top-container {
border-bottom: initial;
.module-name {
border-bottom: initial !important;
}
}
} }
} }
</script>
\ No newline at end of file \ No newline at end of file
</style>
\ No newline at end of file \ No newline at end of file
src/views/homeSearch/components/SearchLayout.vue
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<nafm-header navClass="nafmii-head-bg3"> <nafm-header navClass="nafmii-head-bg3">
<SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" /> <SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" />
</nafm-header> </nafm-header>
<div class="history-container" v-if="history"> <div class="content-layout">
<SearchHistory stateKey="Home" @jumpPage="emitSearchValue" /> <SearchHistory v-if="history" stateKey="Home" @jumpPage="emitSearchValue" />
<SearchDataLayout v-else :data="searchData"/>
</div> </div>
<SearchDataLayout v-else />
</div> </div>
</template> </template>
<script> <script>
...@@ -18,7 +18,8 @@ export default { ...@@ -18,7 +18,8 @@ export default {
components: { SearchInput, SearchHistory, SearchDataLayout }, components: { SearchInput, SearchHistory, SearchDataLayout },
props: { props: {
history: Boolean, history: Boolean,
defKeyword: String defKeyword: String,
searchData: Object
}, },
data () { data () {
return { return {
...@@ -41,9 +42,6 @@ export default { ...@@ -41,9 +42,6 @@ export default {
emitSearchValue (val) { emitSearchValue (val) {
this.$emit('search', val) this.$emit('search', val)
} }
},
mounted () {
// this.keyword = this.defKeyword
} }
} }
</script> </script>
...@@ -57,7 +55,7 @@ export default { ...@@ -57,7 +55,7 @@ export default {
width: 100%; width: 100%;
padding-left: 40px; padding-left: 40px;
} }
.history-container { .content-layout {
flex: 1; flex: 1;
} }
} }
......
src/views/homeSearch/result.vue
<template> <template>
<div class="home-search"> <div class="home-search">
<SearchLayout :history="false" :defKeyword="keyword" /> <SearchLayout :history="false" :defKeyword="keyword" :searchData="data" @search="handleSearch" />
</div> </div>
</template> </template>
...@@ -11,12 +11,40 @@ export default { ...@@ -11,12 +11,40 @@ export default {
components: { SearchLayout }, components: { SearchLayout },
data () { data () {
return { return {
keyword: null keyword: null,
data: null
}
},
methods: {
handleSearch (val) {
this.data = {
apps: [{ icon: '', name: '新闻动态' }],
modules: [
{
type: 1 + parseInt(Math.random() * 3),
list: [
{
title: '创新推出碳中和债，助理实现30·60目标',
date: '2020-02-02',
dataType: '公告'
}
]
}
]
}
} }
}, },
mounted () { mounted () {
const { keyword } = this.$route.query const { keyword } = this.$route.query
this.keyword = keyword this.keyword = keyword
this.handleSearch(keyword)
} }
} }
</script>
\ No newline at end of file \ No newline at end of file
</script>
<style lang="less" scoped>
.home-search {
height: 100%;
}
</style>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!