odjbin/pupil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

分类页、搜索页

Browse Source
This commit is contained in:
”chenxuelian“
2022-12-18 13:08:32 +08:00
parent 8057d75a52
commit 9d1526a28e
20 changed files with 2138 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
components/uni-searchbar.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<!-- 顶部导航栏 -->
<view class="search-bar-container">
<view class="search-box" :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
<view class="top-left">
<view class="back-button" hover-class="back-button-active" @click="goBack">
<u-icon name="arrow-left" color="#fff;" />
</view>
<view class="search-input">
<u-input v-if="!readOnly"
v-model="queryParamF"
:focus="true"
placeholder="搜索优质产品"
prefixIcon="search"
:border="false" style="background-color: #fff;border: none;"/>
<view v-else style="width: 360rpx;padding: 10rpx 20rpx;display: flex;align-items: center;" @click="goSearch">
<u-icon name="search" color="#969696" size="22"></u-icon>
<text style="margin-left:10rpx;font-size: 30rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #969696;line-height: 37rpx;">搜索优质商品</text>
</view>
<view class="search-btn" @click="goSearch">搜索</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "searchBar",
props: {
searchBarTop: {
//搜索栏的外边框高度，单位px
type: Number,
default: 30
},
searchBarHeight: {
//搜索栏的高度，单位px
type: Number,
default: 30
},
queryParam: {
type: String,
default: null
},
readOnly: {
type: Boolean,
default: false
}
},
data() {
return {
queryParamF: null
}
},
watch: {
queryParam: {
handler(val) {
this.queryParamF = this.queryParam
},
immediate: true
}
},
methods: {
goSearch() {
if(this.readOnly) {
this.$emit('navigate')
return
}
this.$emit('search', this.queryParamF)
},
goBack() {
this.$emit('back')
}
}
}
</script>
<style lang="less">
.search-bar-container {
position: fixed;
top: 0;
left: 0;
// z-index: 999;
width: 100%;
background-color: #12CA64;
.search-box {
margin: 10rpx 10rpx;
display: flex;
align-items: center;
.top-left {
width: calc(100% - 200rpx);
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
.search-input {
display: flex;
border: 2rpx solid #fff;
background-color: #fff;
border-radius: 50rpx;
height: 100%;
margin-left: 10rpx;
.search-btn {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3E3E3E;
line-height: 64rpx;
margin-right: 18rpx;
}
}
}
}
}
</style>

144
manifest.json
View File

@@ -1,74 +1,74 @@
{
"name": "shitong-app",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* 5+App特有相关 */
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
/* 模块配置 */
"modules": {},
/* 应用发布信息 */
"distribute": {
/* android打包配置 */
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios": {},
/* SDK配置 */
"sdkConfigs": {}
}
},
/* 快应用特有相关 */
"quickapp": {},
/* 小程序特有相关 */
"mp-weixin": {
"appid": "wx4c2099a19c69664f",
"setting": {
"urlCheck": false,
"es6": false,
"postcss": false
},
"usingComponents": true
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics": {
"enable": false
},
"vueVersion": "2"
"name" : "shitong-app",
"appid" : "__UNI__CB00746",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx4c2099a19c69664f",
"setting" : {
"urlCheck" : false,
"es6" : false,
"postcss" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2"
}

18
package-lock.json generated
View File

@@ -1,6 +1,22 @@
{
"name": "shitong-app",
"lockfileVersion": 2,
"requires": true,
"lockfileVersion": 1,
"packages": {
"": {
"dependencies": {
"uview-ui": "^2.0.35"
}
},
"node_modules/uview-ui": {
"version": "2.0.35",
"resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.35.tgz",
"integrity": "sha512-OfMttN3XkHvQosXfd8bjz8ASTvypPoGzBWmQZBJ871bYMCA7t2bDFPlzjbxUj/5ykAjKnZ8zMUapSwSisVt99g==",
"engines": {
"HBuilderX": "^3.1.0"
}
}
},
"dependencies": {
"uview-ui": {
"version": "2.0.35",

29
pages.json
View File

@@ -1,6 +1,11 @@
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
"autoscan": true, //是否自动扫描组件
"custom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
"^ua-(.*)": "@/components/uview-ui/components/u-$1/u-$1.vue",
"^customer-(.*)": "@/components/uni-$1.vue" // 匹配components目录内的vue文件
}
},
"pages": [{
"path": "pages/index/index",
@@ -40,6 +45,26 @@
"navigationBarBackgroundColor": "#12CA64",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/search/search",
"style": {
"navigationBarTitleText": "顶部搜索",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#12CA64",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/index/goods-category-search/category-index",
"style": {
"navigationBarTitleText": "分类详情",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#12CA64",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
],
"tabBar": {
@@ -77,7 +102,7 @@
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"navigationBarBackgroundColor": "#12CA64",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},

876
pages/index/goods-category-search/category-index - 副本.vue Normal file
View File

@@ -0,0 +1,876 @@
<template>
<view :style="{height: windowHeight + 'px', overflow:showMask? 'hidden':'auto'}">
<!-- 顶部导航栏 -->
<view class="top-search">
<customer-searchbar ref="search" :readOnly="true" :search-bar-top="searchBarTop"
:search-bar-height="searchBarHeight" @navigate="navigateToSearch" @back="goBack" />
</view>
<view :style="{marginTop: Number(searchBarTop + searchBarHeight + 2) + 'px',}">
<view>
<view class="category-view">
<view class="left">
<view v-for="(item,index) in categoryList" class="category-item"
@click="changeSelectedCategory(index)">
<view>
<view class="icon-box">
<image :src="item.icon" mode="aspectFit" class="icon"
:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
</view>
<view class="name">
<u-tag v-if="item.active" :text="item.name" bg-color="#14CA65" color="#fff"
borderColor="#14CA65" shape="circle" />
<text v-else class="no-active">{{item.name}}</text>
</view>
</view>
</view>
</view>
<view class="right" @click="exportView('showMask')">
<tex style="margin-bottom: 10rpx;">全部</tex>
<u-icon size="14" name="/static/category/fl_icon_qb.png"></u-icon>
</view>
</view>
<!-- 类别详情-->
<view id="category-detail" class="category-detail" :style="{height: listDataHeight + 'px'}">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
:scroll-top="scrollTop">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
:class="[menuCurrent==index ? 'u-tab-item-active' : '']" :data-current="index"
@tap.stop="swichMenu(index)">
<text class="title">{{item.name}}</text>
</view>
</scroll-view>
<view class="category-last">
<view class="category-tag-box">
<scroll-view :scroll-x="true" class="left">
<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)"
class="category-tag">
<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
<text>{{item.name}}</text>
</view>
<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
</view>
</scroll-view>
<view class="right" @click="exportView('featureMask')">
<u-icon size="10" name="/static/category/fl_icon_xl.png"></u-icon>
</view>
</view>
<view class="category-order">
<u-tabs :list="tabsList" :scrollable="false" lineWidth="30" lineColor="#0A994A"
color="#969696"
:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'14px'}"
lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
</view>
<scroll-view scroll-y class="goods-list">
<block v-for="(item,index) in tabbar" :key="index">
<block v-if="index === menuCurrent">
<block v-for="(item1,index1) in item.foods" :key="index1">
<view class="goods-item">
<view class="left">
<view class="image">
<image :src="item1.image" mode="scaleToFill"
style="width: 150rpx;height: 100%;"></image>
</view>
<view class="tag">
<view class="tag-content">
<text>{{item.name}}</text>
</view>
</view>
</view>
<view class="right">
<view class="name">
<text>{{item1.name}}</text>
</view>
<view class="describe">
<text>{{item1.describe}}</text>
</view>
<view class="publish-date">
<view class="publish-date-box">
<view
style="width: fit-content; display: inline-block;margin-right:6rpx;">
<u-icon size="16" name="clock" color="#A3A3A3" />
</view>
<text style="margin-right: 6rpx;">发布日期</text>
<text>{{item1.date}}</text>
</view>
</view>
<view class="tag">
<view class="tag-content">
<text>{{ item1.feature }}</text>
</view>
</view>
</view>
</view>
</block>
</block>
</block>
</scroll-view>
</view>
</view>
</view>
<view class="bg" bindtap='hideview'
:style="{display: showMask || featureMask ? 'block':'none', marginTop: Number(searchBarTop + searchBarHeight + 4) + 'px', height: Number(windowHeight - searchBarTop - searchBarHeight - 4) + 'px',}"
@click="showMask = false, featureMask = false"></view>
<uni-transition ref="ani" mode-class="slide-top" custom-class="transfromClass" :show="showMask||featureMask">
<view class="show" bindtap='hideview'
:style="{display: showMask || featureMask ? 'block':'none', top: Number(searchBarTop + searchBarHeight + 4) + 'px',}">
<view v-if="showMask" class="category-view-all">
<view v-for="(item,index) in categoryList" @click="changeSelectedCategory(index)"
style="width: 20%;margin-bottom: 20rpx;">
<view class="category-item">
<view class="icon-box">
<image :src="item.icon" mode="aspectFit" class="icon"
:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
</view>
<view class="name">
<view v-if="item.active" class="active">
<text>{{item.name}}</text>
</view>
<text v-else class="no-active">{{item.name}}</text>
</view>
</view>
</view>
</view>
<view v-if="featureMask" class="category-view-all" style="align-content: start;">
<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)" class="category-tag">
<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
<text>{{item.name}}</text>
</view>
<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
</view>
</view>
<view class="arrow-up" @click="showMask = false, featureMask = false">
<text style="margin-right: 4rpx;">点击收起</text>
<u-icon size="15" name="arrow-up-fill"></u-icon>
</view>
</view>
</uni-transition>
<!-- <uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup> -->
<!-- <u-popup v-model="showMask" mode="top" border-radius="14">
<view style="margin-top: 200rpx;">出淤泥而不染，濯清涟而不妖</view>
</u-popup> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchBarTop: 0, //搜索栏的外边框高度，单位px
searchBarHeight: 0, //搜索栏的高度，单位px
windowHeight: 1,
listDataHeight: 1, // 剩余高度
queryParam: '',
showMask: false,
featureMask: false,
categoryList: [{
name: '烘焙宝典',
icon: '/static/category/sy_icon_hp.png',
active: true
},
{
name: '零食铺子',
icon: '/static/category/sy_icon_ls.png',
active: false
},
{
name: '饮品大全',
icon: '/static/category/sy_icon_yp.png',
active: false
},
{
name: '调味菜单',
icon: '/static/category/sy_icon_tw.png',
active: false
},
{
name: '肉食荟萃',
icon: '/static/category/sy_icon_rs.png',
active: false
},
{
name: '乳品手册',
icon: '/static/category/sy_icon_np.png',
active: false
},
{
name: '果蔬地图',
icon: '/static/category/sy_icon_gs.png',
active: false
},
{
name: '食界新贵',
icon: '/static/category/sy_icon_sj.png',
active: false
},
{
name: '欢喜盒子',
icon: '/static/category/sy_icon_hz.png',
active: false
},
{
name: '创意工具',
icon: '/static/category/sy_icon_cy.png',
active: false
}
],
selectedCategory: 0,
tabbar: [{
"name": "蛋糕面包",
"foods": [{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "",
"date": '2022-12-04',
'feature': '无防腐剂'
}
]
},
{
"name": "糕点卷酥",
"foods": [{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
}
]
},
{
"name": "饼干曲奇",
"foods": [{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
}
]
},
],
tabsList: [{
name: '上架时间'
}, {
name: '点赞量'
}],
tagsList: [{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂无添加剂'
}
],
scrollTop: 0, //tab标题的滚动条位置
menuCurrent: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
tabCurrent: 0, //分类详情 上架时间, // 左边菜单item的高度
tagCurrent: 0, //分类详情 上架时间
}
},
onLoad() {
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
console.log(menuButtonInfo)
this.searchBarTop = menuButtonInfo.top;
this.searchBarHeight = menuButtonInfo.height;
},
onReady() {
let that = this;
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
success(res) { //成功回调函数
// windowHeight
that.windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
let titleH = uni.createSelectorQuery().select("#category-detail"); //想要获取高度的元素名（class/id）
titleH.boundingClientRect(data => {
let pH = that.windowHeight;
that.listDataHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
console.log(that.listDataHeight)
}).exec()
}
})
this.$refs.ani.init({
duration: 200,
timingFunction: 'linear',
transformOrigin: '-100% -100%',
translateY: Number(-this.searchBarTop - this.searchBarHeight - 4) + 'px',
delay: 0
})
},
methods: {
goSearch(param) {
this.queryParam = param
const index = this.recentRecordList.findIndex(item => {
return item === param
})
if (index > -1) {
this.recentRecordList.splice(index, 1)
}
this.recentRecordList.unshift(param)
},
changeSelectedCategory(index) {
this.$set(this.categoryList, this.selectedCategory, {
...this.categoryList[this.selectedCategory],
active: false
});
this.$set(this.categoryList, index, {
...this.categoryList[index],
active: true
});
this.selectedCategory = index
this.showMask = false
},
changeSelectedTag(index) {
this.tagCurrent = index
this.featureMask = false
},
toShowPop() {
console.log('---pop')
this.showMask = true
// this.$refs.popup.open('top')
},
getImg() {
return Math.floor(Math.random() * 35);
},
// 点击左边的栏目切换
async swichMenu(index) {
if (index == this.menuCurrent) return;
this.menuCurrent = index;
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
}).exec();
})
},
exportView(str) {
if (str === 'showMask') {
this.showMask = true
// 同时右平移到 100px,旋转 360 读
// this.$refs.ani.step({
// translateY: Number(-this.searchBarTop - this.searchBarHeight - 4) + 'px'
// })
// 开始执行动画
this.$refs.ani.run()
} else if (str === 'featureMask') {
this.featureMask = true
}
},
tabChange(selectTab) {
console.log(selectTab)
this.tabCurrent = selectTab.index;
},
navigateToSearch() {
uni.navigateTo({
url: '/pages/index/search/search'
})
},
goBack() {
uni.navigateBack()
},
}
}
</script>
<style lang="less" scoped>
.top-search {
position: relative;
}
.category-view {
height: 230rpx;
background-color: #F6F6F6;
display: flex;
justify-content: space-around;
.left {
width: calc(100% - 60rpx);
padding: 32rpx;
display: flex;
overflow: auto;
// flex-direction: row;
// flex-wrap: wrap;
// align-items: center;
.category-item {
margin-right: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
.icon-box {
text-align: center;
.icon {
width: 100rpx;
height: 100rpx;
padding: 4rpx;
border-radius: 50%;
}
}
.name {
width: 156rpx;
text-align: center;
.no-active {
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #616161;
line-height: 28rpx;
}
}
}
}
.right {
width: 60rpx;
padding: 20rpx;
background: #F6F6F6;
border-left: 2rpx #F6F6F6 solid;
box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #343434;
line-height: 34rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
}
.category-detail {
display: flex;
background-color: #F5F5F5;
.u-tab-view {
width: 210rpx;
height: 100%;
.u-tab-item {
height: 90rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
.title {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #14CA65;
line-height: 40rpx;
}
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
border: 2rpx solid #fff;
border-radius: 25% 0 0 0;
}
.u-tab-item-active::before {
content: "";
position: absolute;
border: 1rpx solid #14CA65;
background-color: #14CA65;
width: 1rpx;
height: 14rpx;
left: 27rpx;
top: 37srpx;
border-radius: 1rpx;
}
}
.category-last {
width: calc(100% - 206rpx);
height: 100%;
.category-tag-box {
background-color: #fff;
height: 110rpx;
display: flex;
border-bottom: 1rpx solid #EEEEEE;
.left {
width: calc(100% - 60rpx);
padding: 12rpx;
white-space: nowrap;
overflow: auto;
line-height: 90rpx;
;
.category-tag {
margin-right: 10rpx;
width: fit-content;
display: inline-flex;
}
}
.right {
width: 60rpx;
padding: 20rpx;
background: #F6F6F6;
border-left: 2rpx #F6F6F6 solid;
box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #343434;
line-height: 34rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
}
.category-order {
width: 100%;
background-color: #fff;
border-bottom: 1rpx solid #EEEEEE;
}
.goods-list {
background-color: #fff;
height: calc(100% - 210rpx);
.goods-item {
padding: 16rpx;
margin-bottom: 10rpx;
display: flex;
background: #FFFFFF;
box-shadow: 0px 2px 3px 0px rgba(169, 169, 169, 0.2);
border-bottom: 1px solid #EEEEEE;
.left {
width: 170rpx;
position: relative;
.image {
padding: 20rpx;
height: calc(100% - 40rpx)
}
.tag {
position: absolute;
top: 20rpx;
right: 0;
float: right;
.tag-content {
padding: 16rpx;
border-radius: 25rpx 0 0 25rpx;
line-height: 14rpx;
background-color: #0DB658;
color: #fff;
font-size: 24rpx;
width: fit-content;
}
}
}
.right {
padding: 20rpx;
height: calc(100% - 40rpx);
.name {
font-size: 33rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #E10707;
line-height: 56rpx;
white-space: nowrap;
}
.describe {
font-size: 33rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3E3E3E;
line-height: 37rpx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 这里是超出几行省略 */
-webkit-line-clamp: 2;
overflow: hidden;
}
.publish-date {
color: #A3A3A3;
font-size: 26rpx;
line-height: 64rpx;
.publish-date-box {
display: flex;
align-items: center;
}
}
.tag {
.tag-content {
padding: 16rpx;
border-radius: 25rpx;
line-height: 14rpx;
background-color: #FDD96A;
color: #fff;
font-size: 24rpx;
width: fit-content;
}
}
}
}
}
}
}
.bg {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
}
/deep/ .transfromClass {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1001;
}
.show {
display: none;
text-align: center;
position: absolute;
width: calc(100% - 20rpx);
height: fit-content;
padding: 20rpx 10rpx 0 10rpx;
border: 1rpx solid #fff;
background-color: #fff;
border-radius: 0 0 20rpx 20rpx;
z-index: 1002;
overflow: auto;
transition: all 3.4s;
.category-view-all {
width: calc(100% - 20rpx);
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid #EEEEEE;
height: 360rpx;
overflow: auto;
// transition: height 3.4s ease;
.category-item {
// display: flex;
// flex-direction: column;
// justify-content: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.icon-box {
text-align: center;
.icon {
width: 90rpx;
height: 90rpx;
padding: 4rpx;
border-radius: 50%;
}
}
.name {
text-align: center;
.active {
width: fit-content;
font-size: 26rpx;
text-align: center;
padding: 6rpx;
border-radius: 10rpx;
line-height: 32rpx;
color: #fff;
background-color: #14CA65;
}
.no-active {
font-size: 26rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #616161;
line-height: 28rpx;
}
}
}
.category-tag {
margin-right: 10rpx;
margin-bottom: 20rpx;
width: fit-content;
height: fit-content;
display: inline-flex;
}
}
.arrow-up {
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
padding: 24rpx;
line-height: 32rpx;
}
}
/deep/ .u-tag {
flex: none;
width: auto;
}
</style>

849
pages/index/goods-category-search/category-index.vue Normal file
View File

@@ -0,0 +1,849 @@
<template>
<view :style="{height: windowHeight + 'px', overflow:showMask? 'hidden':'auto'}">
<!-- 顶部导航栏 -->
<view class="top-search">
<customer-searchbar ref="search" :readOnly="true" :search-bar-top="searchBarTop"
:search-bar-height="searchBarHeight" @navigate="navigateToSearch" @back="goBack" />
</view>
<view :style="{marginTop: Number(searchBarTop + searchBarHeight + 2) + 'px',}">
<view>
<view class="category-view">
<view class="left">
<view v-for="(item,index) in categoryList" class="category-item"
@click="changeSelectedCategory(index)">
<view>
<view class="icon-box">
<image :src="item.icon" mode="aspectFit" class="icon"
:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
</view>
<view class="name">
<u-tag v-if="item.active" :text="item.name" bg-color="#14CA65" color="#fff"
borderColor="#14CA65" shape="circle" />
<text v-else class="no-active">{{item.name}}</text>
</view>
</view>
</view>
</view>
<view class="right" @click="exportView('showMask')">
<tex style="margin-bottom: 10rpx;">全部</tex>
<u-icon size="14" name="/static/category/fl_icon_qb.png"></u-icon>
</view>
</view>
<!-- 类别详情-->
<view id="category-detail" class="category-detail" :style="{height: listDataHeight + 'px'}">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
:scroll-top="scrollTop">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
:class="[menuCurrent==index ? 'u-tab-item-active' : '']" :data-current="index"
@tap.stop="swichMenu(index)">
<text class="title">{{item.name}}</text>
</view>
</scroll-view>
<view class="category-last">
<view class="category-tag-box">
<scroll-view :scroll-x="true" class="left">
<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)"
class="category-tag">
<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
<text>{{item.name}}</text>
</view>
<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
</view>
</scroll-view>
<view class="right" @click="exportView('featureMask')">
<u-icon size="10" name="/static/category/fl_icon_xl.png"></u-icon>
</view>
</view>
<view class="category-order">
<u-tabs :list="tabsList" :scrollable="false" lineWidth="30" lineColor="#0A994A"
color="#969696"
:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'14px'}"
lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
</view>
<scroll-view scroll-y class="goods-list">
<block v-for="(item,index) in tabbar" :key="index">
<block v-if="index === menuCurrent">
<block v-for="(item1,index1) in item.foods" :key="index1">
<view class="goods-item">
<view class="left">
<view class="image">
<image :src="item1.image" mode="scaleToFill"
style="width: 150rpx;height: 100%;"></image>
</view>
<view class="tag">
<view class="tag-content">
<text>{{item.name}}</text>
</view>
</view>
</view>
<view class="right">
<view class="name">
<text>{{item1.name}}</text>
</view>
<view class="describe">
<text>{{item1.describe}}</text>
</view>
<view class="publish-date">
<view class="publish-date-box">
<view
style="width: fit-content; display: inline-block;margin-right:6rpx;">
<u-icon size="16" name="clock" color="#A3A3A3" />
</view>
<text style="margin-right: 6rpx;">发布日期</text>
<text>{{item1.date}}</text>
</view>
</view>
<view class="tag">
<view class="tag-content">
<text>{{ item1.feature }}</text>
</view>
</view>
</view>
</view>
</block>
</block>
</block>
</scroll-view>
</view>
</view>
</view>
<view class="bg" bindtap='hideview'
:style="{display: showMask || featureMask ? 'block':'none', marginTop: Number(searchBarTop + searchBarHeight + 4) + 'px', height: Number(windowHeight - searchBarTop - searchBarHeight - 4) + 'px',}"
@click="showMask = false, featureMask = false"></view>
<view class="show" bindtap='hideview'
:style="{display: showMask || featureMask ? 'block':'none', top: Number(searchBarTop + searchBarHeight + 4) + 'px',}">
<view v-if="showMask" class="category-view-all">
<view v-for="(item,index) in categoryList" @click="changeSelectedCategory(index)"
style="width: 20%;margin-bottom: 20rpx;">
<view class="category-item">
<view class="icon-box">
<image :src="item.icon" mode="aspectFit" class="icon"
:style="{border: item.active?'2rpx #14CA65 solid':'0',}" />
</view>
<view class="name">
<view v-if="item.active" class="active">
<text>{{item.name}}</text>
</view>
<text v-else class="no-active">{{item.name}}</text>
</view>
</view>
</view>
</view>
<view v-if="featureMask" class="category-view-all" style="align-content: start;">
<view v-for="(item,index) in tagsList" @click="changeSelectedTag(index)" class="category-tag">
<view style="padding: 16rpx; border-radius: 10rpx;line-height: 32rpx;"
:style="{color: index === tagCurrent ?'#14CA65':'#666', background: index === tagCurrent ?'#DBFFEB':'#EEEEEE'}">
<text>{{item.name}}</text>
</view>
<!-- <u-tag v-if="index === tagCurrent" :text="item.name" bg-color="#DBFFEB" color="#14CA65" borderColor="#DBFFEB" shape="square" style="width: fit-content;"></u-tag> -->
<!-- <u-tag v-else :text="item.name" bg-color="#EEEEEE" color="#666666" borderColor="#EEEEEE" shape="square" style="width: fit-content;"></u-tag> -->
</view>
</view>
<view class="arrow-up" @click="showMask = false, featureMask = false">
<text style="margin-right: 4rpx;">点击收起</text>
<u-icon size="15" name="arrow-up-fill"></u-icon>
</view>
</view>
<!-- <uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup> -->
<!-- <u-popup v-model="showMask" mode="top" border-radius="14">
<view style="margin-top: 200rpx;">出淤泥而不染，濯清涟而不妖</view>
</u-popup> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchBarTop: 0, //搜索栏的外边框高度，单位px
searchBarHeight: 0, //搜索栏的高度，单位px
windowHeight: 1,
listDataHeight: 1, // 剩余高度
queryParam: '',
showMask: false,
featureMask: false,
categoryList: [{
name: '烘焙宝典',
icon: '/static/category/sy_icon_hp.png',
active: true
},
{
name: '零食铺子',
icon: '/static/category/sy_icon_ls.png',
active: false
},
{
name: '饮品大全',
icon: '/static/category/sy_icon_yp.png',
active: false
},
{
name: '调味菜单',
icon: '/static/category/sy_icon_tw.png',
active: false
},
{
name: '肉食荟萃',
icon: '/static/category/sy_icon_rs.png',
active: false
},
{
name: '乳品手册',
icon: '/static/category/sy_icon_np.png',
active: false
},
{
name: '果蔬地图',
icon: '/static/category/sy_icon_gs.png',
active: false
},
{
name: '食界新贵',
icon: '/static/category/sy_icon_sj.png',
active: false
},
{
name: '欢喜盒子',
icon: '/static/category/sy_icon_hz.png',
active: false
},
{
name: '创意工具',
icon: '/static/category/sy_icon_cy.png',
active: false
}
],
selectedCategory: 0,
tabbar: [{
"name": "蛋糕面包",
"foods": [{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "",
"date": '2022-12-04',
'feature': '无防腐剂'
}
]
},
{
"name": "糕点卷酥",
"foods": [{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
}
]
},
{
"name": "饼干曲奇",
"foods": [{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
},
{
"name": "牛角面包",
"describe": "法国风味糖皮饼干牛角面包早餐食品",
"image": "/static/category/fl_icon_qb.png",
"date": '2022-12-04',
'feature': '无防腐剂'
}
]
},
],
tabsList: [{
name: '上架时间'
}, {
name: '点赞量'
}],
tagsList: [{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂'
},
{
name: '无添加剂无添加剂'
}
],
scrollTop: 0, //tab标题的滚动条位置
menuCurrent: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
tabCurrent: 0, //分类详情 上架时间, // 左边菜单item的高度
tagCurrent: 0, //分类详情 上架时间
}
},
onLoad() {
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
console.log(menuButtonInfo)
this.searchBarTop = menuButtonInfo.top;
this.searchBarHeight = menuButtonInfo.height;
},
onReady() {
let that = this;
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
success(res) { //成功回调函数
// windowHeight
that.windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
let titleH = uni.createSelectorQuery().select("#category-detail"); //想要获取高度的元素名（class/id）
titleH.boundingClientRect(data => {
let pH = that.windowHeight;
that.listDataHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
console.log(that.listDataHeight)
}).exec()
}
})
},
methods: {
goSearch(param) {
this.queryParam = param
const index = this.recentRecordList.findIndex(item => {
return item === param
})
if (index > -1) {
this.recentRecordList.splice(index, 1)
}
this.recentRecordList.unshift(param)
},
changeSelectedCategory(index) {
this.$set(this.categoryList, this.selectedCategory, {
...this.categoryList[this.selectedCategory],
active: false
});
this.$set(this.categoryList, index, {
...this.categoryList[index],
active: true
});
this.selectedCategory = index
this.showMask = false
},
changeSelectedTag(index) {
this.tagCurrent = index
this.featureMask = false
},
toShowPop() {
console.log('---pop')
this.showMask = true
// this.$refs.popup.open('top')
},
getImg() {
return Math.floor(Math.random() * 35);
},
// 点击左边的栏目切换
async swichMenu(index) {
if (index == this.menuCurrent) return;
this.menuCurrent = index;
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
}).exec();
})
},
exportView(str) {
if(str === 'showMask') {
this.showMask = true
} else if(str === 'featureMask') {
this.featureMask = true
}
},
tabChange(selectTab) {
console.log(selectTab)
this.tabCurrent = selectTab.index;
},
navigateToSearch() {
uni.navigateTo({
url:'/pages/index/search/search'
})
},
goBack() {
uni.navigateBack()
},
}
}
</script>
<style lang="less" scoped>
.top-search {
position: relative;
}
.category-view {
height: 230rpx;
background-color: #F6F6F6;
display: flex;
justify-content: space-around;
.left {
width: calc(100% - 60rpx);
padding: 32rpx;
display: flex;
overflow: auto;
// flex-direction: row;
// flex-wrap: wrap;
// align-items: center;
.category-item {
margin-right: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
.icon-box {
text-align: center;
.icon {
width: 100rpx;
height: 100rpx;
padding: 4rpx;
border-radius: 50%;
}
}
.name {
width: 156rpx;
text-align: center;
.no-active {
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #616161;
line-height: 28rpx;
}
}
}
}
.right {
width: 60rpx;
padding: 20rpx;
background: #F6F6F6;
border-left: 2rpx #F6F6F6 solid;
box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #343434;
line-height: 34rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
}
.category-detail {
display: flex;
background-color: #F5F5F5;
.u-tab-view {
width: 210rpx;
height: 100%;
.u-tab-item {
height: 90rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
.title {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #14CA65;
line-height: 40rpx;
}
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
border: 2rpx solid #fff;
border-radius: 25% 0 0 0;
}
.u-tab-item-active::before {
content: "";
position: absolute;
border: 1rpx solid #14CA65;
background-color: #14CA65;
width: 1rpx;
height: 14rpx;
left: 27rpx;
top: 37srpx;
border-radius: 1rpx;
}
}
.category-last {
width: calc(100% - 206rpx);
height: 100%;
.category-tag-box {
background-color: #fff;
height: 110rpx;
display: flex;
border-bottom: 1rpx solid #EEEEEE;
.left {
width: calc(100% - 60rpx);
padding: 12rpx;
white-space: nowrap;
overflow: auto;
line-height: 90rpx;
;
.category-tag {
margin-right: 10rpx;
width: fit-content;
display: inline-flex;
}
}
.right {
width: 60rpx;
padding: 20rpx;
background: #F6F6F6;
border-left: 2rpx #F6F6F6 solid;
box-shadow: -2px 0px 4px 0px rgba(218, 218, 218, 0.5);
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #343434;
line-height: 34rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
}
.category-order {
width: 100%;
background-color: #fff;
border-bottom: 1rpx solid #EEEEEE;
}
.goods-list {
background-color: #fff;
height: calc(100% - 210rpx);
.goods-item {
padding: 16rpx;
margin-bottom: 10rpx;
display: flex;
background: #FFFFFF;
box-shadow: 0px 2px 3px 0px rgba(169, 169, 169, 0.2);
border-bottom: 1px solid #EEEEEE;
.left {
width: 170rpx;
position: relative;
.image {
padding: 20rpx;
height: calc(100% - 40rpx)
}
.tag {
position: absolute;
top: 20rpx;
right: 0;
float: right;
.tag-content {
padding: 16rpx;
border-radius: 25rpx 0 0 25rpx;
line-height: 14rpx;
background-color: #0DB658;
color: #fff;
font-size: 24rpx;
width: fit-content;
}
}
}
.right {
padding: 20rpx;
height: calc(100% - 40rpx);
.name {
font-size: 33rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #E10707;
line-height: 56rpx;
white-space: nowrap;
}
.describe {
font-size: 33rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3E3E3E;
line-height: 37rpx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 这里是超出几行省略 */
-webkit-line-clamp: 2;
overflow: hidden;
}
.publish-date {
color: #A3A3A3;
font-size: 26rpx;
line-height: 64rpx;
.publish-date-box {
display: flex;
align-items: center;
}
}
.tag {
.tag-content {
padding: 16rpx;
border-radius: 25rpx;
line-height: 14rpx;
background-color: #FDD96A;
color: #fff;
font-size: 24rpx;
width: fit-content;
}
}
}
}
}
}
}
.bg {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
}
.show {
display: none;
text-align: center;
position: absolute;
width: calc(100% - 20rpx);
height: fit-content;
padding: 20rpx 10rpx 0 10rpx;
border: 1rpx solid #fff;
background-color: #fff;
border-radius: 0 0 20rpx 20rpx;
z-index: 1002;
overflow: auto;
transition: all 2.4s;
.category-view-all {
width: calc(100% - 20rpx);
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid #EEEEEE;
height: 360rpx;
overflow: auto;
transition: height 1.3s ease;
.category-item {
// display: flex;
// flex-direction: column;
// justify-content: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.icon-box {
text-align: center;
.icon {
width: 90rpx;
height: 90rpx;
padding: 4rpx;
border-radius: 50%;
}
}
.name {
text-align: center;
.active {
width: fit-content;
font-size: 26rpx;
text-align: center;
padding: 6rpx;
border-radius: 10rpx;
line-height: 32rpx;
color: #fff;
background-color: #14CA65;
}
.no-active {
font-size: 26rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #616161;
line-height: 28rpx;
}
}
}
.category-tag {
margin-right: 10rpx;
margin-bottom: 20rpx;
width: fit-content;
height: fit-content;
display: inline-flex;
}
}
.arrow-up {
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
padding: 24rpx;
line-height: 32rpx;
}
}
/deep/ .u-tag {
flex: none;
width: auto;
}
</style>

12
pages/index/index.vue
View File

@@ -3,9 +3,12 @@
<view>
<view class="input_block">
<view class="input_block_border">
<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
<view @click="toSearch">
<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx">
</u-input>
</view>
</view>
</view>
</view>
@@ -18,7 +21,12 @@
}
},
methods: {
toSearch() {
console.log('--search')
uni.navigateTo({
url: '/pages/index/search/search'
})
}
}
}
</script>

171
pages/index/search/search.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<view>
<!-- 顶部导航栏 -->
<view class="top-search">
<customer-searchbar ref="search" :queryParam="queryParam" :search-bar-top="searchBarTop" :search-bar-height="searchBarHeight"
@search="goSearch" @back="goBack" />
</view>
<!-- 最近搜索 -->
<view class="recent-search" :style="{marginTop: Number(searchBarTop + searchBarHeight) + 'px',}">
<view class="title">
<text class="title-text">最近搜索</text>
<u-icon name="trash" color="#666666" size="24" @click="clearRecentSearch"/>
</view>
<view class="recent-record">
<view v-if="recentRecordList.length > 0" class="no-empty-record">
<view v-for="(item, index) in recentRecordList" :key="index" class="tag-item">
<u-tag bg-color="#eee"
borderColor="#eee"
color="#666"
:text="item"
@click="recentSearch(item)"/>
</view>
</view>
<view v-else>
<view class="empty-record">
<text>暂无搜索记录</text>
</view>
</view>
</view>
</view>
<!-- 搜索发现 -->
<view class="search-found">
<view class="title">
<text class="title-text">搜索发现</text>
</view>
<view class="found-record">
<view v-for="(item, index) in foundList" :key="index" class="tag-item">
<u-tag bg-color="#eee"
borderColor="#eee"
color="#666"
:text="item"
@click="recentSearch(item)"/>
</view>
</view>
</view>
</view>
</template>
<script>
import { toast } from 'service/request.js'
export default {
data() {
return {
searchBarTop: 0, //搜索栏的外边框高度，单位px
searchBarHeight: 0, //搜索栏的高度，单位px
queryParam: '',
recentRecordList: [
'烘焙宝典1',
'烘焙宝典2',
'烘焙宝典3',
'烘焙宝典4',
'无添加剂5',
'烘焙宝典&无添加剂',
'无添加剂6'
],
foundList: [
'烘焙宝典1',
'烘焙宝典2',
'烘焙宝典3',
'烘焙宝典4',
'烘焙宝典&无添加剂',
'无添加剂5'
]
}
},
onLoad() {
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.searchBarTop = menuButtonInfo.top;
this.searchBarHeight = menuButtonInfo.height;
},
methods: {
goSearch(param) {
if (!param) {
toast.warn('请输入搜索内容')
return
}
this.queryParam = param
const index = this.recentRecordList.findIndex(item => {
return item === param
})
if(index > -1) {
this.recentRecordList.splice(index, 1)
}
this.recentRecordList.unshift(param)
},
goBack() {
uni.navigateBack()
},
recentSearch(obj) {
this.queryParam = obj
console.log(obj)
},
clearRecentSearch() {
this.recentRecordList = []
}
}
}
</script>
<style lang="less">
.top-search {
position: relative;
}
.recent-search {
.title {
padding: 32rpx 10rpx;
display: flex;
justify-content: space-between;
.title-text {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3E3E3E;
line-height: 42rpx;
}
}
.recent-record {
.empty-record {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 28rpx;
text-align: center;
}
.no-empty-record {
display: flex;
flex-wrap: wrap;
padding: 0 10rpx;
.tag-item {
margin: 0 20rpx 20rpx 0;
}
}
}
}
.search-found {
.title {
padding: 32rpx 10rpx;
.title-text {
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3E3E3E;
line-height: 42rpx;
}
}
.found-record {
display: flex;
flex-wrap: wrap;
padding: 0 10rpx;
.tag-item {
margin: 0 20rpx 20rpx 0;
}
}
}
</style>

BIN
static/category/fl_icon_qb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 348 B

BIN
static/category/fl_icon_xl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 B

BIN
static/category/sy_icon_cy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
static/category/sy_icon_gs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
static/category/sy_icon_hp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/category/sy_icon_hz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/category/sy_icon_ls.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
static/category/sy_icon_np.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
static/category/sy_icon_rs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
static/category/sy_icon_sj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
static/category/sy_icon_tw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/category/sy_icon_yp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB