123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330 |
- <template>
- <view class="rf-search">
- <u-navbar :back-text="i18n('Back')" :back-text-style="backStyle"
- back-icon-color="#fff" title-color="#fff"
- :title="i18n('Search')"
- :background="background">
- </u-navbar>
- <view class="search-box">
- <mSearch
- class="mSearch-input-box"
- :mode="1"
- button="inside"
- :placeholder="hotSearchDefault || ''"
- @search="doSearch(false)"
- @confirm="doSearch(false)"
- v-model="keyword"
- ></mSearch>
- </view>
- <view class="search-keyword" @tap="blur">
- <scroll-view class="keyword-list-box" v-if="isShowKeywordList" scroll-y>
- <view
- class="keyword-entry"
- hover-class="keyword-entry-tap"
- v-for="row in keywordList"
- :key="row.keyword"
- >
- <view class="keyword-text" @tap="doSearch(row.keyword)">
- <rf-parser lazy-load :html="row.htmlStr"></rf-parser>
- </view>
- <view class="keyword-img" @tap="setkeyword(row)">
- <!--<image src="/static/HM-search/back.png"></image>-->
- </view>
- </view>
- </scroll-view>
- <scroll-view class="keyword-box" v-if="!isShowKeywordList" scroll-y>
- <view class="keyword-block">
- <view class="keyword-list-header">
- <view>{{i18n('HistorySearch')}}</view>
- <view>
- <text
- class="iconfont iconiconfontshanchu1"
- @tap="oldDelete"
- ></text>
- </view>
- </view>
- <view class="keyword">
- <view
- v-for="(keyword, index) in oldKeywordList"
- @tap="doSearch(keyword)"
- :key="index"
- >{{ keyword }}</view
- >
- </view>
- <view class="hide-hot-tis" v-if="oldKeywordList.length === 0">
- <view>{{i18n('Norecord')}}</view>
- </view>
- </view>
- <view class="keyword-block" v-if="hotKeywordList">
- <view class="keyword-list-header">
- <view>{{i18n('Hotsearch')}}</view>
- <view>
- <text class="iconfont" :class="forbid" @tap="hotToggle"></text>
- </view>
- </view>
- <view class="keyword" v-if="forbid == 'iconai47'">
- <view
- v-for="(keyword, index) in hotKeywordList"
- @tap.stop="doSearch(keyword,'hot')"
- :key="index"
- >{{ i18n(keyword) }}</view
- >
- </view>
- <view class="hide-hot-tis" v-else>
- <view>{{$i18n.locale=='zh'?'当前搜热门搜索已隐藏':'Current popular search is hidden'}}</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- </template>
- <script>
- import mSearch from '@/components/rf-search/rf-search';
- export default {
- data() {
- return {
- keyword: '',
- oldKeywordList: [],
- hotKeywordList: [],
- keywordList: [],
- background: {
- backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
- },
- backStyle: {
- color: '#fff'
- },
- forbid: 'iconai47',
- isShowKeywordList: false,
- hotSearchDefault: '',
- type: null ,// 搜索类型
- hotSerch:['cleanenergy','Smartgrid','Energystorage','UHV','GEI']
- };
- },
- onLoad(options) {
- this.initData(options);
- },
- components: {
- mSearch
- },
- methods: {
- i18n (data) {
- return this.$t('common.'+data);
- },
- async initData(options) {
- if(options.data !=='undefined'){
- this.type = options.type;
- const search = JSON.parse(options.data || '{}');
- this.hotSearchDefault = search.hot_search_default || options.keyword;
- this.hotKeywordList = search.hot_search_list;
- this.loadOldKeyword();
- }else {
- this.hotKeywordList = this.hotSerch;
- this.loadOldKeyword();
- }
-
- },
- blur() {
- uni.hideKeyboard();
- },
- // 加载历史搜索,自动读取本地Storage
- loadOldKeyword() {
- uni.getStorage({
- key: 'OldKeys',
- success: res => {
- let OldKeys = JSON.parse(res.data);
- this.oldKeywordList = OldKeys;
- }
- });
- },
- // 顶置关键字
- setkeyword(data) {
- this.keyword = data.keyword;
- },
- // 清除历史搜索
- oldDelete() {
- uni.showModal({
- content: this.$i18n.locale=='zh'?'确定清除历史搜索记录?':'Are you sure you want to clear the history search',
- cancelText: this.$t('common.Cancel'), // 取消按钮的文字
- confirmText: this.$t('common.submit'), // 确认按钮文字
- success: res => {
- if (res.confirm) {
- this.oldKeywordList = [];
- uni.removeStorage({ key: 'OldKeys' });
- }
- }
- });
- },
- // 热门搜索开关
- hotToggle() {
- this.forbid = this.forbid === 'iconai47' ? 'iconyanjing' : 'iconai47';
- },
- // 执行搜索
- doSearch(key,hot) {
- key = key || this.keyword || this.defaultKeyword;
- if(hot) {
- key = this.i18n(key);
- }
- this.keyword = key;
- uni.navigateTo({
- url: '/pages/order/search/search?keyword=' + key,
- });
- this.saveKeyword(key);// 保存为历史
-
-
- },
- // 保存关键字到历史记录
- saveKeyword(keyword) {
- uni.getStorage({
- key: 'OldKeys',
- success: res => {
- let OldKeys = JSON.parse(res.data);
- let findIndex = OldKeys.indexOf(keyword);
- if (findIndex === -1) {
- OldKeys.unshift(keyword);
- } else {
- OldKeys.splice(findIndex, 1);
- OldKeys.unshift(keyword);
- }
- // 最多10个纪录
- OldKeys.length > 10 && OldKeys.pop();
- uni.setStorage({
- key: 'OldKeys',
- data: JSON.stringify(OldKeys)
- });
- this.oldKeywordList = OldKeys; // 更新历史搜索
- },
- fail: () => {
- let OldKeys = [keyword];
- uni.setStorage({
- key: 'OldKeys',
- data: JSON.stringify(OldKeys)
- });
- this.oldKeywordList = OldKeys; // 更新历史搜索
- }
- });
- }
- }
- };
- </script>
- <style lang="scss">
- .rf-search {
- .search-box {
- width: 100%;
- background-color: rgb(242, 242, 242);
- padding: 15upx 2.5%;
- display: flex;
- justify-content: space-between;
- .mSearch-input-box {
- width: 100%;
- }
- .input-box > input {
- width: 100%;
- height: 60upx;
- font-size: 32upx;
- border: 0;
- border-radius: 60upx;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- padding: 0 3%;
- margin: 0;
- background-color: #ffffff;
- }
- }
- .search-keyword {
- width:100%;
- background-color: rgb(242, 242, 242);
- margin: 0 auto;
- .keyword-list-box {
- height: calc(100vh - 110upx);
- padding-top: 10upx;
- border-radius: 20upx 20upx 0 0;
- background-color: #fff;
- }
- .keyword-entry {
- width: 94%;
- height: 80upx;
- margin: 0 3%;
- font-size: 30upx;
- color: #333;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: solid 1upx #e7e7e7;
- image {
- width: 60upx;
- height: 60upx;
- }
- .keyword-text {
- width: 90%;
- }
- .keyword-img {
- width: 10%;
- justify-content: center;
- }
- }
- .keyword-box {
- border-radius: 20upx 20upx 0 0;
- background-color: #fff;
- .keyword-block {
- padding: 10upx;
- margin:10upx;
- .keyword-list-header {
- width: 100vw;
- padding: 10upx 3%;
- font-size: 27upx;
- color: #333;
- display: flex;
- justify-content: space-between;
- image {
- width: 40upx;
- height: 40upx;
- }
- }
- .keyword {
- width: 100vw;
- padding: 3px 3%;
- display: flex;
- flex-flow: wrap;
- justify-content: flex-start;
- }
- .hide-hot-tis {
- display: flex;
- justify-content: center;
- font-size: 28upx;
- color: #6b6b6b;
- }
- .keyword > view {
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 60upx;
- padding: 0 20upx;
- margin: 10upx 20upx 10upx 0;
- height: 60upx;
- font-size: 28upx;
- background-color: rgb(242, 242, 242);
- color: #6b6b6b;
- }
- }
- }
- }
- .iconfont {
- font-size: $font-lg + 12upx;
- }
- }
- </style>
|