浪花 - 搜索结果展示页

1. 搜索页面

参考官方文档：Button 按钮 - Vant 3 (gitee.io)

• 引入搜索按钮，触发搜索
• 绑定单击事件，跳转到搜索结果页 /user/list

// 全局注册按钮组件
import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

// 在搜索页面引入所需的按钮组件
<van-button type="primary" @click="doSearch">搜索</van-button>

• 使用编程式导航
  • 传递参数：使用 vue-router 提供的 useRouter() 钩子函数

import { useRouter } from "vue-router";

const router = useRouter();

const doSearch =() => {
  router.push({
    path: 'user/list',
    query: {
      gender: '男',
    }
  })
}

2. 搜索结果展示页

• 创建新视图 SearchResultPage.vue，配置路由 /user/list

    {
      path: '/user/list',
      name: 'searchUserList',
      component: SearchResultPage
    },

3. 接收路由跳转传来的参数

• 接收参数：使用 vue-router提供的 useRoute() 钩子函数

<template>

</template>

<script setup lang="ts">
import { useRoute } from'vue-router'
const route = useRoute();

console.log(route.query);

</script>

<style scoped>

</style>

4. 模拟用户数据 userList

import { useRoute } from'vue-router'
import {ref} from "vue";
const route = useRoute();
console.log(route.query);

const { tags } = route.query;

const mockUser = {
  id: 1,
  username: "乐乐",
  userAccount: "Ghost",
  avatarUrl: "https://himg.bdimg.com/sys/portraitn/item/public.1.e137c1ac.yS1WqOXfSWEasOYJ2-0pvQ",
  gender: 0,
  phone: '18056743536',
  email: '20890470@qq.com',
  planetCode: '1234',
  tags: ['Java','大三','struggle','努力中','struggle','努力中'],
  createTime: new Date(),
}

const userList = ref([mockUser]);

5. 搜索结果展示页布局设计

 参考官方文档：Card 商品卡片 - Vant 3 (gitee.io)

• 引入 Card 商品卡片组件，展示根据标签搜索得到的用户
• v-for 取出用户列表 userList 中的数据进行展示

<van-card
  v-for="user in userList"
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>

6. 查看页面效果