search搜索页面

顶部导航条：复用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-link
	v-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">&#xe63f;</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>