【类 型】：feat
【原 因】：搜索功能相关 页面组件 【过 程】：1.serarch.vue组页面 2把购物车按钮提取出来作为单独组件3.前端搜索 在前端做数据过滤进行 搜索结果的输出 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
air
parent
c6ac6c9292
commit
5925265e69
5
App.vue
5
App.vue
@ -75,6 +75,11 @@
|
|||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
background-color: $uni-color-error;
|
||||||
|
height: 176rpx;
|
||||||
|
}
|
||||||
|
|
||||||
//占位 空符
|
//占位 空符
|
||||||
.extra-space {
|
.extra-space {
|
||||||
height: 156rpx;
|
height: 156rpx;
|
||||||
|
|||||||
@ -28,16 +28,68 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
|
formatPrice,
|
||||||
|
totalPrice
|
||||||
|
} from '@/utils/index.js'
|
||||||
export default {
|
export default {
|
||||||
name: "cartBut",
|
name: "cartBut",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
};
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 购物车价格总和
|
||||||
|
totalPrice,
|
||||||
|
//"选好了"执行
|
||||||
|
handleSeled() {
|
||||||
|
const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
|
||||||
|
if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
|
||||||
|
if (Number(this.minimumOrderDifference) <= 0) { //起送价判断
|
||||||
|
uni.navigateTo({ //跳转到订单页面
|
||||||
|
url: '/pages/shop/confirm'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '未达到起送价',
|
||||||
|
icon: 'error'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else { //手机号不合法 获取为空
|
||||||
|
uni.navigateTo({ //跳转到获取手机号页面
|
||||||
|
url: '/pages/main/getTel'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
//购物车总价
|
||||||
|
total() {
|
||||||
|
return this.totalPrice(this.$store.state.cartList)
|
||||||
|
},
|
||||||
|
//起送差价
|
||||||
|
minimumOrderDifference() {
|
||||||
|
return Number(this.shopCon.price_min) - Number(this.total)
|
||||||
|
},
|
||||||
|
//商品信息
|
||||||
|
shopCon() {
|
||||||
|
return this.$store.state.shopCon
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
formatPrice //格式化价格
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
.cartBox {
|
||||||
|
z-index: 10071;
|
||||||
|
width: calc(100vw - 48rpx);
|
||||||
|
height: 156rpx;
|
||||||
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 1) 100%);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,10 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="vh100 flex column">
|
<view class="vh100 flex column">
|
||||||
<!-- topbar -->
|
<!-- topbar -->
|
||||||
<u-navbar title="开始点餐" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
|
<u-navbar bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
|
||||||
<view class="u-nav-slot" slot="left">
|
<view class="u-nav-slot" slot="left">
|
||||||
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="u-nav-slot ofh" slot="center" @click="handlerGoSearch">
|
||||||
|
<view class="searchBut flex mac fz28 fcb p-l-24 rad16">
|
||||||
|
<u-icon name="search" color="#e5e5e5" size="28"></u-icon>
|
||||||
|
搜一搜你想吃的餐品
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</u-navbar>
|
</u-navbar>
|
||||||
<!-- 地址框 -->
|
<!-- 地址框 -->
|
||||||
<view class="flex column p-24 borderB bg-w">
|
<view class="flex column p-24 borderB bg-w">
|
||||||
@ -61,33 +67,7 @@
|
|||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 购物车按钮 -->
|
<!-- 购物车按钮 -->
|
||||||
<view class="p-l-24 p-r-24 cartBox">
|
<cartBut></cartBut>
|
||||||
<view v-if="total === 0" class="rad16 bg-g flex ofh" style="height: 108rpx;">
|
|
||||||
<view class="bg-b" style="width: 152rpx;"></view>
|
|
||||||
<view class="flex1 flex mac p-l-24">
|
|
||||||
<u--image src="/static/icons/cafe-48.svg" width="96rpx" height="96rpx" />
|
|
||||||
<view class="m-l-12 fz36 fb">未选购餐品</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-else class="bg-m rad16 flex" style="height: 108rpx;">
|
|
||||||
<view class="flex md p-b-12">
|
|
||||||
<u--image src="/static/icons/planeBox-100.svg" width="136rpx" height="136rpx"
|
|
||||||
@click="$store.commit('setCartShow',!$store.state.cartShow)" />
|
|
||||||
</view>
|
|
||||||
<view class="fci fz36 flex1 flex msb">
|
|
||||||
<view class="flex1 p-l-12 flex column mc"
|
|
||||||
@click="$store.commit('setCartShow',!$store.state.cartShow)">
|
|
||||||
<view class="fz36 fb">¥{{total | formatPrice}}</view>
|
|
||||||
<view class="fz24" v-if="minimumOrderDifference>0">还差¥{{minimumOrderDifference | formatPrice}}起送
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="flex column mac mc" style="width: 180rpx;" @click="handleSeled">
|
|
||||||
<view class="fz36">选好了</view>
|
|
||||||
<view class="fz24">Order</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 购物车折叠层 -->
|
<!-- 购物车折叠层 -->
|
||||||
<cartFold></cartFold>
|
<cartFold></cartFold>
|
||||||
</view>
|
</view>
|
||||||
@ -95,9 +75,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
formatTime,
|
formatTime
|
||||||
formatPrice,
|
|
||||||
totalPrice
|
|
||||||
} from '@/utils/index.js'
|
} from '@/utils/index.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -136,10 +114,6 @@
|
|||||||
shopCon() {
|
shopCon() {
|
||||||
return this.$store.state.shopCon
|
return this.$store.state.shopCon
|
||||||
},
|
},
|
||||||
//起送差价
|
|
||||||
minimumOrderDifference() {
|
|
||||||
return Number(this.shopCon.price_min) - Number(this.total)
|
|
||||||
},
|
|
||||||
//分类列表
|
//分类列表
|
||||||
menuList() {
|
menuList() {
|
||||||
return this.$store.state.menuList
|
return this.$store.state.menuList
|
||||||
@ -148,14 +122,14 @@
|
|||||||
spuList() {
|
spuList() {
|
||||||
return this.$store.state.spuList
|
return this.$store.state.spuList
|
||||||
},
|
},
|
||||||
//购物车总价
|
|
||||||
total() {
|
|
||||||
return this.totalPrice(this.$store.state.cartList)
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 购物车价格总和
|
//跳转到搜索页
|
||||||
totalPrice,
|
handlerGoSearch() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shop/search'
|
||||||
|
})
|
||||||
|
},
|
||||||
// 点击左边的栏目切换
|
// 点击左边的栏目切换
|
||||||
async swichMenu(index) {
|
async swichMenu(index) {
|
||||||
clearTimeout(this.scrollingTiemout) //每次点击导航栏重置timeout延时
|
clearTimeout(this.scrollingTiemout) //每次点击导航栏重置timeout延时
|
||||||
@ -267,31 +241,20 @@
|
|||||||
}
|
}
|
||||||
}, 10)
|
}, 10)
|
||||||
},
|
},
|
||||||
//"选好了"执行
|
|
||||||
handleSeled() {
|
|
||||||
const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
|
|
||||||
if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
|
|
||||||
uni.navigateTo({ //跳转到订单页面
|
|
||||||
url: '/pages/shop/confirm'
|
|
||||||
})
|
|
||||||
} else { //手机号不合法 获取为空
|
|
||||||
uni.navigateTo({ //跳转到获取手机号页面
|
|
||||||
url: '/pages/main/getTel'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
formatTime, //格式化时间
|
formatTime, //格式化时间
|
||||||
formatPrice //格式化价格
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.topbar {
|
.searchBut {
|
||||||
background-color: $uni-color-error;
|
margin-right: 100rpx;
|
||||||
height: 176rpx;
|
color: #e5e5e5;
|
||||||
|
width: 360rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backBut {
|
.backBut {
|
||||||
@ -337,13 +300,4 @@
|
|||||||
.menuItemH {
|
.menuItemH {
|
||||||
background-color: $uni-color-error;
|
background-color: $uni-color-error;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cartBox {
|
|
||||||
z-index: 10071;
|
|
||||||
width: calc(100vw - 48rpx);
|
|
||||||
height: 156rpx;
|
|
||||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 1) 100%);
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0rpx;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
97
pages/shop/search.vue
Normal file
97
pages/shop/search.vue
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<view class="vh100 flex column">
|
||||||
|
<!-- topbar -->
|
||||||
|
<u-navbar title="搜索商品" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
|
||||||
|
<view class="u-nav-slot" slot="left">
|
||||||
|
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-navbar>
|
||||||
|
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<view class="search-container flex mac m-l-24 m-r-24">
|
||||||
|
<input class="borderno rad16 m-r-12 bg-w fz28 p-12 flex1" v-model="searchQuery" placeholder="请输入商品名称"
|
||||||
|
@input="handleSearch" />
|
||||||
|
<u-icon name="search" color="#d43030" size="32" @click="handleSearch"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 搜索结果展示 -->
|
||||||
|
<view class="m-l-24 m-r-24 flex1 ofa">
|
||||||
|
<view v-if="filteredSpuList.length > 0">
|
||||||
|
<listItem v-for="spuItem in filteredSpuList" :key="spuItem.id" :spu="spuItem" />
|
||||||
|
</view>
|
||||||
|
<template v-else>
|
||||||
|
<u-divider v-if="searchQuery" text="没有找到相关商品" :hairline="true"></u-divider>
|
||||||
|
</template>
|
||||||
|
<!-- 底部空白占位 -->
|
||||||
|
<view class="extra-space2"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 购物车按钮 -->
|
||||||
|
<cartBut></cartBut>
|
||||||
|
<!-- 购物车折叠层 -->
|
||||||
|
<cartFold></cartFold>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchQuery: '', // 绑定搜索框的输入内容
|
||||||
|
filteredSpuList: [], // 存储过滤后的spu列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// spuList 直接从 Vuex 获取
|
||||||
|
spuList() {
|
||||||
|
return this.$store.state.spuList
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听 spuList 的变化，初始化过滤
|
||||||
|
spuList(newSpuList) {
|
||||||
|
this.filteredSpuList = this.filterSpuList(this.searchQuery, newSpuList)
|
||||||
|
},
|
||||||
|
// 监听 searchQuery，实时更新过滤结果
|
||||||
|
searchQuery(newQuery) {
|
||||||
|
this.filteredSpuList = this.filterSpuList(newQuery, this.spuList)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 搜索处理方法
|
||||||
|
handleSearch() {
|
||||||
|
if (this.searchQuery.trim() === '') {
|
||||||
|
this.filteredSpuList = [] // 如果搜索框为空，清空结果
|
||||||
|
} else {
|
||||||
|
this.filteredSpuList = this.filterSpuList(this.searchQuery, this.spuList) // 执行过滤
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 过滤 spuList
|
||||||
|
filterSpuList(query, spuList) {
|
||||||
|
if (!query.trim()) return [] // 如果没有输入关键词，返回所有商品
|
||||||
|
|
||||||
|
const lowerQuery = query.toLowerCase()
|
||||||
|
|
||||||
|
return spuList.filter(spuItem => {
|
||||||
|
// 过滤 name 字段
|
||||||
|
const nameMatch = spuItem.name.toLowerCase().includes(lowerQuery)
|
||||||
|
|
||||||
|
// 过滤 pro_tag 数组
|
||||||
|
const tagMatch = spuItem.pro_tag.some(tag => tag.toLowerCase().includes(lowerQuery))
|
||||||
|
|
||||||
|
// 过滤 bind_sku 中的 name 字段
|
||||||
|
const skuMatch = spuItem.bind_sku.some(sku => sku.tit.toLowerCase().includes(lowerQuery))
|
||||||
|
|
||||||
|
// 如果 name、pro_tag 或 bind_sku 匹配，返回该 spu
|
||||||
|
return nameMatch || tagMatch || skuMatch
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.search-container {
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user