<template> <view class="content"> <view class="search-box"> <!-- mSearch组件 如果使用原样式,删除组件元素--> <mSearch class="mSearch-input-box" :mode="2" button="inside" :placeholder="defaultKeyword" @search="doSearch(false)" @confirm="doSearch(false)" v-model="keyword"></mSearch> <!-- 原样式 如果使用原样式,恢复下方注销代码 --> <!-- <view class="input-box"> <input type="text" :adjust-position="true" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)" placeholder-class="placeholder-class" confirm-type="search"> </view> <view class="search-btn" @tap="doSearch(false)">搜索</view> --> <!-- 原样式 end --> </view> <!-- <view class="search-keyword"> <view class="keyword-list-box" > <view v-for="(row,index) in keywordList" :key="index"> <view class="keyword-entry" hover-class="keyword-entry-tap"> <view class="keyword-text" @tap.stop="doSearch(keywordList[index].keyword)"> <rich-text :nodes="row.htmlStr"></rich-text> </view> <view class="keyword-img" @tap.stop="setKeyword(keywordList[index].keyword)"> <image src="/static/HM-search/back.png"></image> </view> </view> </view> </view> --> <!-- <view class="keyword-box" > --> <view class="product-list mart10"> <view class="product" v-for="product in productList" :key="product.id" @tap="toGoods(product)"> <image mode="widthFix" :src="imageUrl+product.highMerchant.merchantLogo"></image> <view class="name">{{ product.storeName }}</view> </view> </view> </view> </view> </template> <script> import { getCouponList, getStoreList } from "../../../Utils/Api.js"; let app = getApp() //引用mSearch组件,如不需要删除即可 import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue'; export default { data() { return { defaultKeyword: "", keyword: "", oldKeywordList: [], hotKeywordList: [], keywordList: [], forbid: '', isShowKeywordList: false, imageUrl: app.globalData.imgUrl, productList: [], pageNum: 1, pageSize: 10, isNoMoreData: false, loadingText: '' } }, onLoad() { this.init(); }, components: { //引用mSearch组件,如不需要删除即可 mSearch }, onReachBottom() { this.getStoreList(); }, methods: { toGoods(e) { uni.navigateTo({ url: '../../goods/store-list/store-details?id=' + e.id + '&juli=' + e.distance }) }, getStoreList() { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { uni.hideLoading() this.loadingText = '到底了'; return false; } let pagenum = this.pageNum; let params = { pageNum: pagenum, storeName: this.keyword, pageSize: this.pageSize } getStoreList(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; this.productList = this.productList.concat(res.return_data.list); if (res.return_data.total == (this.pageNum * this.pageSize)) { this.isNoMoreData = true; } this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; } else { this.productList = []; uni.hideLoading() } }) }, init() { this.loadDefaultKeyword(); }, blur() { uni.hideKeyboard() }, //加载默认搜索关键字 loadDefaultKeyword() { //定义默认搜索关键字,可以自己实现ajax请求数据再赋值,用户未输入时,以水印方式显示在输入框,直接不输入内容搜索会搜索默认关键字 this.defaultKeyword = "搜索门店"; }, //加载历史搜索,自动读取本地Storage loadOldKeyword() { uni.getStorage({ key: 'OldKeys', success: (res) => { var OldKeys = JSON.parse(res.data); this.oldKeywordList = OldKeys; } }); }, //监听输入 inputChange(event) { //兼容引入组件时传入参数情况 var keyword = event.detail ? event.detail.value : event; if (!keyword) { this.keywordList = []; this.isShowKeywordList = false; return; } this.isShowKeywordList = true; //以下示例截取淘宝的关键字,请替换成你的接口 this.getCouponList(); }, //高亮关键字 drawCorrelativeKeyword(keywords, keyword) { var len = keywords.length, keywordArr = []; for (var i = 0; i < len; i++) { var row = keywords[i]; //定义高亮#9f9f9f var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>"); html = '<div>' + html + '</div>'; var tmpObj = { keyword: row[0], htmlStr: html }; keywordArr.push(tmpObj) } return keywordArr; }, //顶置关键字 setKeyword(index) { this.keyword = this.keywordList[index].keyword; }, //清除历史搜索 oldDelete() { uni.showModal({ content: '确定清除历史搜索记录?', success: (res) => { if (res.confirm) { console.log('用户点击确定'); this.oldKeywordList = []; uni.removeStorage({ key: 'OldKeys' }); } else if (res.cancel) { console.log('用户点击取消'); } } }); }, //热门搜索开关 hotToggle() { this.forbid = this.forbid ? '' : '_forbid'; }, //执行搜索 doSearch(keyword) { keyword = keyword === false ? this.keyword : keyword; this.keyword = keyword; this.pageNum = 1; this.isNoMoreData = false; this.productList = []; this.getStoreList(); }, //保存关键字到历史记录 saveKeyword(keyword) { uni.getStorage({ key: 'OldKeys', success: (res) => { var OldKeys = JSON.parse(res.data); var 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: (e) => { var OldKeys = [keyword]; uni.setStorage({ key: 'OldKeys', data: JSON.stringify(OldKeys) }); this.oldKeywordList = OldKeys; //更新历史搜索 } }); } } } </script> <style lang="scss"> view { display: block; } .loading-text { width: 100%; display: flex; justify-content: center; align-items: center; height: 60upx; color: #979797; font-size: 24upx; } .product-list { width: 92%; padding: 0 4% 3vw 4%; display: flex; justify-content: space-between; flex-wrap: wrap; .product { width: 48%; border-radius: 20upx; background-color: #fff; margin: 0 0 15upx 0; box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1); image { width: 100%; border-radius: 20upx 20upx 0 0; } .name { width: 92%; padding: 8upx 4%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: justify; overflow: hidden; font-size: 30upx; } .info { display: flex; justify-content: space-between; align-items: flex-end; width: 92%; padding: 10upx 4% 10upx 4%; .price { color: #e65339; font-size: 30upx; font-weight: 600; } .slogan { color: #807c87; font-size: 24upx; text-decoration: line-through; } } } } .search-box { width: 95%; background-color: rgb(242, 242, 242); padding: 15upx 2.5%; display: flex; justify-content: space-between; position: sticky; top: 0; } .search-box .mSearch-input-box { width: 100%; } .search-box .input-box { width: 85%; flex-shrink: 1; display: flex; justify-content: center; align-items: center; } .search-box .search-btn { width: 15%; margin: 0 0 0 2%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; font-size: 28upx; color: #fff; background: linear-gradient(to right, #ff9801, #ff570a); border-radius: 60upx; } .search-box .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; } .placeholder-class { color: #9e9e9e; } .search-keyword { width: 100%; } .keyword-list-box { height: calc(100vh - 110upx); padding-top: 10upx; border-radius: 20upx 20upx 0 0; background-color: #fff; } .keyword-entry-tap { background-color: #eee; } .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; } .keyword-entry image { width: 60upx; height: 60upx; } .keyword-entry .keyword-text, .keyword-entry .keyword-img { height: 80upx; display: flex; align-items: center; } .keyword-entry .keyword-text { width: 90%; } .keyword-entry .keyword-img { width: 10%; justify-content: center; } .keyword-box { height: calc(100vh - 150upx); border-radius: 20upx 20upx 0 0; background-color: #fff; } .keyword-box .keyword-block { padding: 10upx 0; } .keyword-box .keyword-block .keyword-list-header { width: 94%; padding: 10upx 3%; font-size: 27upx; color: #333; display: flex; justify-content: space-between; } .keyword-box .keyword-block .keyword-list-header image { width: 40upx; height: 40upx; } .keyword-box .keyword-block .keyword { width: 94%; padding: 3px 3%; display: flex; flex-flow: wrap; justify-content: flex-start; } .keyword-box .keyword-block .hide-hot-tis { display: flex; justify-content: center; font-size: 28upx; color: #6b6b6b; } .keyword-box .keyword-block .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; } </style>