前言

搜索功能在电商领域是非常常见的一个功能具体表现在两个方面：

对用户来说，生鲜电商类的搜索功能通常是用来解决“快速找到满意的商品”的问题。“快速找到满意的商品”中的“快速”和“满意”是关键词，但二者其实在很大程度上是矛盾的。一方面“快速”意味着用户的搜索操作应尽量方便、快捷，也就是要求平台应当尽量少的让用户交互提供信息；但另一方面，“满意”通常又意味着平台需要尽量多的与用户交互。毕竟，平台上的商品数以万计，只有更多的获取用户信息才能更好的明白客户到底想买什么。

对平台来说，在产品设计过程中，还应当充分考虑平台“充分利用流量号召用户产生更多购买意向”的需求。

一、搜索页面

1.自定义搜索栏

<template><view class="my-search-container" :style="{ 'background-color': bgcolor }" @click="searchBoxHandler"><view class="my-search-box" :style="{ 'border-radius': radius + 'px' }"><!-- 使用 uni-ui 提供的图标组件 --><uni-icons type="search" size="17"></uni-icons><text class="placeholder">搜索</text></view></view>
</template><script>export default {props: {// 背景颜色bgcolor: {type: String,default: '#C00000'},// 圆角尺寸radius: {type: Number,default: 18 // px}},data() {return {}},methods: {searchBoxHandler() {this.$emit('click')}}}
</script><style lang="scss">.my-search-container {height: 50px;// background-color: #C00000;display: flex;align-items: center;padding: 0 10px;.my-search-box {height: 36px;background-color: #FFFFFF;// border-radius: 18px;width: 100%;display: flex;justify-content: center;align-items: center;.placeholder {font-size: 15px;margin-left: 5px;}}}
</style>

2.自定义搜索页面

<template><view><view class="search-box"><uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar></view><!-- 搜索建议列表 --><view class="sugg-list" v-if="searchResults.length !== 0"><view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item)"><view class="goods-name">{{item.goods_name}}</view><uni-icons type="arrowright" size="16"></uni-icons></view></view><!-- 搜索历史 --><view class="history-box" v-else><!-- 标题区域 --><view class="history-title"><text>搜索历史</text><uni-icons type="trash" size="17" @click="clean"></uni-icons></view><!-- 列表区域 --><view class="history-list"><uni-tag :text="item" v-for="(item, i) in histories" :key="i" @click="gotoGoodsList(item)"></uni-tag></view></view></view>
</template><script>export default {data() {return {timer: null,kw: '',// 搜索的结果列表searchResults: [],// 搜索历史的数组historyList: []};},onLoad() {this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')},methods: {// input 输入事件的处理函数input(e) {clearTimeout(this.timer)this.timer = setTimeout(() => {this.kw = e.valuethis.getSearchList()}, 500)},async getSearchList() {// 判断搜索关键词是否为空if (this.kw.length === 0) {this.searchResults = []return}const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw })if (res.meta.status !== 200) return uni.$showMsg()this.searchResults = res.messagethis.saveSearchHistory()},gotoDetail(item) {uni.navigateTo({url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id})},saveSearchHistory() {// this.historyList.push(this.kw)const set = new Set(this.historyList)set.delete(this.kw)set.add(this.kw)this.historyList = Array.from(set)// 对搜索历史数据，进行持久化的存储uni.setStorageSync('kw', JSON.stringify(this.historyList))},clean() {this.historyList = []uni.setStorageSync('kw', '[]')},gotoGoodsList(kw) {uni.navigateTo({url: '/subpkg/goods_list/goods_list?query=' + kw})}},computed: {histories() {return [...this.historyList].reverse()}}}
</script><style lang="scss">.search-box {position: sticky;top: 0;z-index: 999;}.sugg-list {padding: 0 5px;.sugg-item {display: flex;align-items: center;justify-content: space-between;font-size: 12px;padding: 13px 0;border-bottom: 1px solid #efefef;.goods-name {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-right: 3px;}}}.history-box {padding: 0 5px;.history-title {display: flex;justify-content: space-between;height: 40px;align-items: center;font-size: 13px;border-bottom: 1px solid #efefef;}.history-list {display: flex;flex-wrap: wrap;.uni-tag {margin-top: 5px;margin-right: 5px;}}}
</style>

【愚公系列】2022年11月 uniapp专题-优购电商-搜索页面相关推荐

【愚公系列】2022年11月 uniapp专题-优购电商-运行uniapp的多种方式
文章目录前言一.运行到web平台二.运行到安卓模拟器三.运行到微信开发者工具前言 uniapp本身就是一次开发多端部署,uniapp可以发布成各种应用包括以下几种 web版本一.运行到we ...
【愚公系列】2022年11月 uniapp专题-优购电商-商品列表
文章目录前言一.商品列表前言商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流量和订单的入口.京东商城目前有通用版.全球购.闪购.易车.惠买车.服装.拼购.今日抄底等许多套模板.各套 ...
【愚公系列】2022年11月 uniapp专题-优购电商-个人中心页面
文章目录前言一.个人中心页面前言个人中心的信息复杂度与产品本身有关.体系越庞大的产品,对应个人中心页面需要承载的内容越多,结构势必复杂. 一般平台型电商的个人中心页面必须涵盖:用户基础信息.全 ...
【愚公系列】2022年11月 uniapp专题-优购电商-商品详情页面
文章目录前言一.商品详情⻚⾯前言商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流量和订单的入口.京东商城目前有通用版.全球购.闪购.易车.惠买车.服装.拼购.今日抄底等许多套模板. ...
【愚公系列】2022年11月 uniapp专题-优购电商-商品购物车页面
文章目录前言 1. 购物车作用一.商品购物车页面前言网上购物车是顾客在进行网上购物时所必须使用的购物工具.它用来临时存储用户选择的商品,协助顾客从虚拟商场中选取商品.携带商品,并到虚拟的收银台 ...
【愚公系列】2022年11月 uniapp专题-优购电商首页-分类导航
文章目录前言一.分类导航 1.获取分类导航的数据 2.完整源码 3.效果前言商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部分需要,将管理范围内的商品集合总体,以所选择 ...
【愚公系列】2022年11月 uniapp专题-优购电商-商品分类
文章目录前言一.商品分类前言商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部分需要,将管理范围内的商品集合总体,以所选择的适当的商品基本特征作为分类标志,逐次归纳为若干 ...
【愚公系列】2022年11月微信小程序-优购电商项目-首页设计
文章目录前言一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果前言对于小程序电商首 ...
【愚公系列】2022年11月微信小程序-优购电商项目-授权页面
文章目录前言 1. 授权页面一.授权页面 1.业务逻辑 2.涉及的接口数据二.授权页面相关代码 1.页面代码 2.效果前言前言:由于微信官方修改了 getUserInfo 接口,所以现在无法 ...

【愚公系列】2022年11月 uniapp专题-优购电商-搜索页面

文章目录

前言

一、搜索页面

1.自定义搜索栏

2.自定义搜索页面

【愚公系列】2022年11月 uniapp专题-优购电商-搜索页面相关推荐

最新文章

热门文章