171 lines
3.7 KiB
Vue
171 lines
3.7 KiB
Vue
<script setup>
|
|
//
|
|
import {
|
|
ref,
|
|
computed,
|
|
} from 'vue'
|
|
import {
|
|
onReachBottom,
|
|
onPullDownRefresh,
|
|
onShow,
|
|
onLoad,
|
|
onPageScroll
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
useStore
|
|
} from 'vuex'
|
|
// 顶部状态栏
|
|
import statusBar from '@/components/header/statusBar'
|
|
// 顶部导航
|
|
import apex from '@/components/header/apex'
|
|
// 产品列表
|
|
import productList from '@/components/shop/productList/productList';
|
|
// 底部导航
|
|
import footerMneu from '@/components/footerMenu/footerMenu'
|
|
//
|
|
import util from '@/common/js/util';
|
|
// 当前方式 search搜索 result搜索结果
|
|
const mode = ref('result')
|
|
</script>
|
|
|
|
<template>
|
|
<view class="page">
|
|
<view class="apexBox pr">
|
|
<apex mode="flex" bgColor="#ffffff00">
|
|
<template #content>
|
|
<view class="searchBox rows f1 ml20 ptb10 plr20 bfff br20">
|
|
<uni-icons type="search" size="40rpx" color="#999" />
|
|
<input type="text" v-model="keyword" class="f1 mlr20" placeholder="请输入关键字"
|
|
@blur="handleSearch" />
|
|
<uni-icons type="camera" size="40rpx" color="#999" />
|
|
<view class="btn bar sm primary ml20 plr20">搜索</view>
|
|
</view>
|
|
</template>
|
|
</apex>
|
|
<view class="shopHeaderBg pfull"></view>
|
|
</view>
|
|
|
|
<view class="container f1 pr">
|
|
<scroll-view scroll-y="true" class="scroll">
|
|
<view class="main oh">
|
|
<template v-if="mode === 'search'">
|
|
<view class="searchList">
|
|
<view class="header rows">
|
|
<view class="title">历史搜索</view>
|
|
<uni-icons type="trash" size="30rpx" color="#999" />
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view class="item" v-for="(item,index) in 3" :key="index">袖子</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="searchList">
|
|
<view class="header rows">
|
|
<view class="title">搜索发现</view>
|
|
<view class="rows">
|
|
<uni-icons type="refreshempty" size="30rpx" color="#999" />
|
|
<view class="ml10 f24 c999">换一批</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view class="item" v-for="(item,index) in 4" :key="index">笔记本电脑</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="mode == 'result'">
|
|
<view class="product oh">
|
|
<view class="screen rows bfff">
|
|
<view class="item fmid f1">
|
|
<view>综合</view>
|
|
<uni-icons type="bottom" size="30rpx" color="#999" />
|
|
</view>
|
|
|
|
<view class="item fmid f1">
|
|
<view>销量</view>
|
|
<uni-icons type="bottom" size="30rpx" color="#999" />
|
|
</view>
|
|
|
|
<view class="item fmid f1">
|
|
<view>价格</view>
|
|
<uni-icons type="bottom" size="30rpx" color="#999" />
|
|
</view>
|
|
|
|
<view class="item fmid f1">
|
|
<view>筛选</view>
|
|
<uni-icons type="bars" size="30rpx" color="#999" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list mtb30 mlr30">
|
|
<productList />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
//
|
|
.apexBox {
|
|
overflow: hidden;
|
|
padding-bottom: 30rpx;
|
|
|
|
//
|
|
.shopHeaderBg {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// 内容
|
|
.container {
|
|
margin-top: -30rpx;
|
|
padding-top: 30rpx;
|
|
|
|
.scroll {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// 搜索列表
|
|
.searchList {
|
|
margin: 30rpx;
|
|
|
|
.title {
|
|
color: #333;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 30rpx;
|
|
|
|
.item {
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
padding: 5rpx 15rpx;
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
background-color: #fff;
|
|
border-radius: 100rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 产品
|
|
.product {
|
|
.screen {
|
|
font-size: 24rpx;
|
|
|
|
.item {
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |