131 lines
2.1 KiB
Vue
131 lines
2.1 KiB
Vue
<template>
|
||
|
||
<view class="content">
|
||
|
||
<!-- <view style="margin-top: 16px;"> -->
|
||
|
||
<!-- keyStr: 设置存储key hisClick: 设置历史事件 searchClick:设置搜索事件 -->
|
||
|
||
<cc-SearchBarHisView keyStr="productHisArr" searchPlaceHolder="请输入搜索内容" @hisClick="selHisClick"
|
||
@searchClick="goSearchClick"></cc-SearchBarHisView>
|
||
|
||
<!-- </view> -->
|
||
<uni-list v-for="item in resultList" :key="item">
|
||
<uni-list-item v-if="item.icon.includes('icon')" :show-extra-icon="true"
|
||
:extraIcon="{customPrefix:'iconfont',type:item.icon,color:item.color}"
|
||
:title="item.style.navigationBarTitleText" link :to="item.path">
|
||
</uni-list-item>
|
||
<uni-list-item v-else :show-extra-icon="true" :extraIcon="{type:item.icon,color:item.color}"
|
||
:title="item.style.navigationBarTitleText" link :to="item.path">
|
||
</uni-list-item>
|
||
</uni-list>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
// import CCSearchHisView from '@/components/CCSearchHisView.vue';
|
||
import data from './data.json'
|
||
export default {
|
||
|
||
components: {
|
||
|
||
// CCSearchHisView
|
||
|
||
},
|
||
|
||
data() {
|
||
|
||
return {
|
||
resultList: [],
|
||
dataList: data,
|
||
focus: false
|
||
}
|
||
|
||
},
|
||
|
||
onLoad() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
searchByItem(item) {
|
||
this.resultList = [];
|
||
this.dataList.forEach(res => {
|
||
if (res.style.navigationBarTitleText.includes(item)) {
|
||
this.resultList.push(res);
|
||
}
|
||
})
|
||
console.log(this.resultList);
|
||
},
|
||
selHisClick(item) {
|
||
console.log('选择的值 = ' + item);
|
||
this.searchByItem(item)
|
||
},
|
||
goSearchClick(item) {
|
||
console.log(item);
|
||
this.searchByItem(item)
|
||
},
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
view {
|
||
font-size: 15px;
|
||
/* line-height: inherit; */
|
||
}
|
||
|
||
|
||
page {
|
||
|
||
background-color: '#F6F7FA' !important;
|
||
|
||
}
|
||
|
||
.content {
|
||
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
|
||
background-color: #F6F7FA;
|
||
|
||
height: 100vh;
|
||
|
||
}
|
||
|
||
.logo {
|
||
|
||
height: 200rpx;
|
||
|
||
width: 200rpx;
|
||
|
||
margin-top: 200rpx;
|
||
|
||
margin-left: auto;
|
||
|
||
margin-right: auto;
|
||
|
||
margin-bottom: 50rpx;
|
||
|
||
}
|
||
|
||
.text-area {
|
||
|
||
display: flex;
|
||
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.title {
|
||
|
||
font-size: 36rpx;
|
||
|
||
color: #8f8f94;
|
||
|
||
}
|
||
</style> |