<template> <view> <view class="search-content"> <uni-icons color="#212121" class="search-icon-arrowleft" size="24" type="arrowleft" @click="goBack" /> <view class="search-input_box" :class="{active: active}"> <uni-icons color="#999999" class="uni-searchbar__box-icon-search" @click="handleIconSearch" size="20" type="search" /> <input type="text" :focus="showSync" class="search-input" v-model="searchVal" confirm-type="search" @focus="handlefocus" @confirm="handleSearch"/> <uni-icons v-if="searchVal!==''" @click="clear" color="#AEAEAE" class="search-close" size="20" type="clear" /> </view> <text v-if="show" class="cancel-button" @click="cancel">取消</text> </view> <view class="search-container"> <view v-if="searchVal!=='' && goods_names.length > 0" class="search-list"> <view class="search-item" v-for="(item, index) in goods_names" :key="index" @click="jumpPage(item._source.goods_name)"> {{item._source.goods_name}} </view> </view> <view v-if="searchVal==='' || goods_names.length === 0" class="search-history"> <view class="search-record"> <text class="search-record_title">历史搜索</text> <view class="history-list"> <view v-for="(item,index) in search_list" :key="index" @click="jumpPage(item)" class="history-item"> {{item}} </view> </view> <uni-icons color="#6E6E6E" class="history-trash" @click="trash" size="20" type="trash" /> </view> <view class="search-hot"> <text class="search-hot_title">热门搜索</text> <view class="record-list"> <view class="record-item" v-for="(item, index) in hot_list" :key="index" @click="jumpPage(item.hot_word)" :class="{active: item.is_special === '1'}"> {{item.hot_word}} </view> </view> </view> </view> </view> </view> </template> <script> import uniIcons from "@/components/uni-icons/uni-icons.vue"; export default{ components: { uniIcons }, data() { return { searchVal: '', show: false, showSync: false, active: false, search_list: [], hot_list: [], goods_names: [ { _source: { goods_name: '' } } ] } }, onLoad(option){ this.searchVal = option.keyword || ''; this.$nextTick(() => { this.showSync = true; }); this.getLocalStorage(); this.loadData(); // #ifdef H5 //默认请求微信分享 if (this.$wechat && this.$wechat.isWechat()) { this.$wechat.share({titie: this.$getNavigationBarTitle()}); } // #endif }, watch: { searchVal() { // this.$emit("input", { // value: this.searchVal // }); const params = {keyword: this.searchVal}; uni.request({ url: '/uni/api/search_goods/search_goods_name', method: 'POST', data: params, dataType: 'json', success: (res) => { const {data} = res; if(data.code == 0){ this.goods_names = data.data || []; } } }); } }, methods: { goBack() { this.$backup(); }, handleIconSearch(){ // #ifndef APP-PLUS uni.hideKeyboard() // #endif // #ifdef APP-PLUS plus.key.hideSoftKeybord() // #endif const value = this.searchVal; this.setLocalStorage(value); // 跳转商品搜索页面 uni.navigateTo({ url: `/pages/search/search?keyword=${value}` }) }, jumpPage(goods_name) { this.setLocalStorage(goods_name); uni.navigateTo({ url: `/pages/search/search?keyword=${goods_name}` }) }, async loadData() { uni.request({ url: '/uni/api/search_goods/get_hot_word', method: 'GET', dataType: 'json', success: (res) => { const {data} = res; if(data.code == 0){ this.hot_list = data.data || []; } } }) }, clear() { this.searchVal = ''; // this.showSync = true; this.$nextTick(() => { this.showSync = true; }) }, handlefocus() { this.show = true; this.active = true; }, cancel(){ this.searchVal = ''; this.showSync = false; this.show = false; this.active = false; // #ifndef APP-PLUS uni.hideKeyboard() // #endif // #ifdef APP-PLUS plus.key.hideSoftKeybord() // #endif }, handleSearch(e) { // #ifndef APP-PLUS uni.hideKeyboard() // #endif // #ifdef APP-PLUS plus.key.hideSoftKeybord() // #endif const {value} = e.target; this.setLocalStorage(value); // 跳转商品搜索页面 uni.navigateTo({ url: `/pages/search/search?keyword=${value}` }) }, // 本地保存搜索历史 setLocalStorage(val) { if(!val){ return; } var list = this.search_list; if(list.length > 18){ this.search_list.pop(); } for(var i=0; i<list.length;i++){ if(list[i] === val){ this.search_list.splice(i, 1); } } this.search_list.unshift(val); try { uni.setStorageSync('history', JSON.stringify(this.search_list)); } catch (e) { // error } }, getLocalStorage(){ try { const value = uni.getStorageSync('history'); if (value) { this.search_list = JSON.parse(value); } } catch (e) { // error } }, trash(){ if(this.search_list.length < 1){ return; } var _this = this; uni.showModal({ content: '确认要删除搜索历史吗?', success: function (res) { if (res.confirm) { _this.search_list = []; uni.setStorageSync('history', JSON.stringify([])); } } }); } } } </script> <style lang="less" scoped> .search-content{ display: flex; justify-content: flex-start; align-items: center; height: 100rpx; padding: 0 20rpx; position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-sizing: border-box; z-index: 99999; .search-icon-arrowleft{ margin-right: 20rpx; width: 40rpx; } .search-input_box{ flex: 1; height: 60rpx; line-height: 60rpx; position: relative; border: 3rpx solid #D0D0D0; border-radius: 60rpx; display: flex; justify-content: flex-start; align-items: center; .uni-searchbar__box-icon-search{ width: 56rpx; height: 56rpx; position: absolute; top: 0rpx; left: 10rpx; } .search-input{ height: 60rpx; line-height: 60rpx; flex: 1; padding-left: 75rpx; padding-right: 25px; font-size: 26rpx; color: #212121; } .search-close{ position: absolute; right: 20rpx; top: 0rpx; } } .active{ border: 3rpx solid #FFCD00; } .cancel-button{ height: 40rpx; line-height: 40rpx; padding-left: 20rpx; font-size: 28rpx; color: #212121; } } .search-container{ background-color: #fff; padding: 0 24rpx; margin-top: 4rpx; margin-top: 100rpx; .search-item{ height: 96rpx; line-height: 96rpx; text-align: left; font-size: 28rpx; color: #212121; border-bottom: 2rpx solid #dcdcdc; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .search-history{ position: relative; padding: 36rpx 10rpx; .search-record{ position: relative; min-height: 100rpx; .history-trash{ position: absolute; top: 0rpx; right: 0rpx; } .history-list{ overflow: hidden; text-align: center; padding-top: 56rpx; .history-item{ height: 60rpx; line-height: 60rpx; padding: 0 20rpx; text-align: center; font-size: 26rpx; color: #464646; margin-bottom: 20rpx; margin-right: 16rpx; float: left; background-color: #F5F5F5; border-radius: 30rpx; font-family:PingFangSC-Light,PingFang SC; } } .search-record_title{ height: 24rpx; line-height: 26rpx; border-left: 6rpx solid #FFCD00; padding-left: 8rpx; font-size: 30rpx; color: #212121; font-weight: 500; position: absolute; top: 0rpx; left: 0; } } .search-hot{ position: relative; height: 300rpx; margin-top: 30rpx; .record-list{ overflow: hidden; text-align: center; padding-top: 56rpx; .record-item{ height: 60rpx; line-height: 60rpx; padding: 0 20rpx; text-align: center; font-size: 26rpx; color: #464646; margin-bottom: 20rpx; margin-right: 16rpx; float: left; background-color: #F5F5F5; border-radius: 30rpx; font-family:PingFangSC-Light,PingFang SC; } .active{ color: red; } } .search-hot_title{ height: 24rpx; line-height: 26rpx; border-left: 6rpx solid #FFCD00; padding-left: 8rpx; font-size: 30rpx; color: #212121; font-weight: 500; position: absolute; top: 0rpx; left: 0; } } } } </style>