顶部导航条：复用head组件

<v-head title="搜索" goBack=true></v-head>

搜索栏：复用search组件

searchRestaurant会带着输入框的参数调用后端searchRestaurant接口后端searchRestaurant中会带着参数查询数据库若查询到了返回状态码200和查询结果给前端若没有查询到则返回状态码-1和“搜索餐馆失败”给前端

<search placeholder="请输入商品 店铺名" title="选择收货地址" :fun_click="fun_click"></search>
<script>fun_click(val) {if (!val) return;// 若啥也没输入 直接返回this.keyword = val;searchRestaurant({keyword: val}).then((response) => {let res = response.data;if (res.status === 200) {if (res.data.length) {this.searchList = res.data;} else {this.alertText = '找不到该餐馆，输入汉堡试试';this.showTip = true;}} else {this.alertText = res.message;this.showTip = true;}})
},
</script>

搜索结果展示

遍历查询结果并展示点击查询结果后跳转到相应店铺使用to跳转

<router-linkv-for="(item,index) in searchList":to="{path:'store',query:{id:item.id}}":key="index" tag="li"><!--商店图片--><span class="avatar"><img :src="item.pic_url"></span><!--商店名称 但你查询的那个字高亮--><span class="name" v-html="high_light(item.name)"></span><!--送达时间--><span class="delivery-time">{{item.delivery_time_tip}}送达</span><!--展示>这个iconfont--><span class="icon"><i class="iconfont"></i></span>
</router-link>
<script>high_light: function (value) {// 用高亮的关键字取代商店名称中的关键字return value.replace(this.keyword, `<span style="color:#ffd161;">${this.keyword}</span>`);}
</script>

复用alertTip

<alert-tip :text="alertText" :showTip.sync="showTip"></alert-tip>

search搜索页面相关推荐

央视网上线独立搜索页面索引站内信息:Search.cctv.com
这几天互联网大事不断,百度被黑,Google退出中国... 今天,央视网近日低调推出名为"央视搜索"的独立搜索页面(search.cctv.com). 该搜索仅索引央视网站内信息, ...
如何开发一个用户脚本系列(3)——脚本一:百度首页和搜索页面添加 Google 搜索框...
2019独角兽企业重金招聘Python工程师标准>>> 在本系列的前两篇文章中,我们对用户脚本以及开发脚本前应该掌握的基础知识进行了介绍.从这篇文章开始,将以已发布可用的脚本为基础, ...
Vue实现仿音乐播放器14-实现搜索页面以及功能
效果实现百度音乐搜索API说明例:method=baidu.ting.search.catalogSug&query=海阔天空参数:query = " //搜索关键字搜索页 ...
dede搜索php在哪,dede搜索页面怎么调用及相关搜索调用
dede搜索页面怎么调用,那几天有事情,所以导致博客几天都一直没有更新,之前我们讲过dede内容页面和dede列表模板的调用,今天我们一起来学习下搜索页面的调用,很多做企业站朋友们都不知道dede的搜 ...
转：MSDN Visual系列：MOSS企业级搜索之一——在搜索中心里创建自定义搜索页面和标签选项卡...
MSDN Visual系列:MOSS企业级搜索之一--在搜索中心里创建自定义搜索页面和标签选项卡原文:http://msdn2.microsoft.com/en-us/library/bb42885 ...
【愚公系列】2022年11月 uniapp专题-优购电商-搜索页面
文章目录前言一.搜索页面 1.自定义搜索栏 2.自定义搜索页面前言搜索功能在电商领域是非常常见的一个功能具体表现在两个方面: 对用户来说,生鲜电商类的搜索功能通常是用来解决"快速找到 ...
淘淘商城第51讲——从商城首页跳转到搜索页面
通过上文的学习,我们已经学会了如何把商品数据导入到索引库中,本文我将会教大家如何从淘淘商城首页跳转到搜索页面. 我们要访问淘淘商城首页就得先启动Redis服务,大家根据自己使用的情况来启动,使用的是单 ...
09-搜索前端开发-搜索页面
3 搜索前端开发 3.1 搜索页面 3.1.1 需求分析上图是课程搜索前端的界面,用户通过前端向服务端发起搜索请求,搜索功能包括: 1.界面默认查询所有课程,并分页显示 2.通过一级分类和二分类搜索 ...
AI技术内参021-SIGIR2018论文精读：如何对搜索页面上的点击行为进行序列建模？
021 | SIGIR 2018论文精读:如何对搜索页面上的点击行为进行序列建模? 今天我们将继续来精读SIGIR 2018的论文. 我们已经分享了SIGIR 2018的最佳论文,介绍了如何对推荐系统 ...

search搜索页面

这里写目录标题

顶部导航条：复用head组件

搜索栏：复用search组件

搜索结果展示

复用alertTip

search搜索页面相关推荐

最新文章

热门文章