310 lines
8.0 KiB
Vue
310 lines
8.0 KiB
Vue
<template>
|
|
<view class="search_warp">
|
|
<!-- 头部搜索 -->
|
|
<view class="header_comm">
|
|
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
|
<view>
|
|
<up-input
|
|
placeholder="搜索关键字（商品、店铺、品牌）"
|
|
:customStyle="{
|
|
'border-color':'#7934F6 !important',
|
|
'padding': '0 0 0 20rpx !important',
|
|
'border-radius': '20rpx !important',
|
|
'width': '590rpx',
|
|
}"
|
|
v-model="form.keyword"
|
|
clearable
|
|
>
|
|
<template #prefix>
|
|
<up-image src="/static/common/search.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
|
</template>
|
|
<template #suffix>
|
|
<view class="search_but_warp" @click="searchGYLMall">搜索</view>
|
|
</template>
|
|
</up-input>
|
|
</view>
|
|
</view>
|
|
<!-- 历史搜索 -->
|
|
<!-- <view class="search_history" v-if="!poductList || poductList.length === 0">
|
|
<view class="search_history_title">
|
|
<view>猜你喜欢</view>
|
|
<up-image src="/static/common/delete.png" width="20" height="20" bgColor="#f1f6ff00" @click="isShowSearch = true;"></up-image>
|
|
</view>
|
|
<view class="search_history_cotent" v-if="searchList && searchList.length !==0">
|
|
<view v-for="item in searchList" :key="item.id" style="margin: 0 10rpx 10rpx 0;">
|
|
<up-tag plain :text="item.name" type="warning" :show="true" :closable="isShowSearch" borderColor="#7934F6" color="#7934F6" @close="searchHistoryDelete(item)" @click="searchClick(item)"></up-tag>
|
|
</view>
|
|
</view>
|
|
<view v-else class="not_order_warp">
|
|
<view class="not_order_warp_img"><up-image src="/pages/other_package/static/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
|
<view class="not_order_msg_warp">暂无搜索记录</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- 搜索出内容 -->
|
|
<view class="poduct_list">
|
|
<view class="poduct_search_warp">
|
|
<view>综合</view>
|
|
<view>销量</view>
|
|
<view>优惠卷</view>
|
|
<view>
|
|
<up-image :src="imgSize === 'big' ? '/static/search/dt.png':'/static/search/xt.png'" width="20" height="20" bgColor="#f1f6ff00" @click="toggleImg"></up-image>
|
|
</view>
|
|
</view>
|
|
<view class="poduct_content_warp" >
|
|
<view v-if="poductList && poductList.length !==0">
|
|
<!-- 大图 -->
|
|
<view v-if="imgSize === 'big'" class="big_warp">
|
|
<view v-for="item in poductList" class="big_item_warp" :key="item.id" @click="jumpInfo(item)">
|
|
<up-image :src="item.url " width="100%" height="150px" bgColor="#f1f6ff00" radius="10"></up-image>
|
|
<view class="big_item_content_warp">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="total_or_quantity">
|
|
<view class="total_">
|
|
<text>￥</text>
|
|
<text style="font-size: 36rpx;">{{item.adPrice}}</text>
|
|
</view>
|
|
<view>已售{{item.sales}}件</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 小图 -->
|
|
<view v-if="imgSize === 'min'" class="min_warp">
|
|
<view v-for="item in poductList" class="min_item_warp" :key="item.id" @click="jumpInfo(item)">
|
|
<up-image :src="item.url " width="100" height="100" bgColor="#f1f6ff00" radius="10"></up-image>
|
|
<view class="min_item_content_warp">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="total_or_quantity">
|
|
<view class="total_">
|
|
<text>￥</text>
|
|
<text style="font-size: 36rpx;">{{item.adPrice}}</text>
|
|
</view>
|
|
<view>已售{{item.sales}}件</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="not_order_warp">
|
|
<view class="not_order_warp_img"><up-image src="/pages/other_package/static/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
|
<view class="not_order_msg_warp">抱歉没有搜索此类商品~</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<qiaobao-assistant page-key="pages/other_package/search/search" title="商品搜索" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { searchList } from '@/api/product.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchList:[
|
|
{
|
|
id:1,
|
|
name:'酒',
|
|
},{
|
|
id:2,
|
|
name:'鸿星尔克',
|
|
},{
|
|
id:3,
|
|
name:'361',
|
|
},{
|
|
id:4,
|
|
name:'国美',
|
|
},{
|
|
id:5,
|
|
name:'刘丹',
|
|
},{
|
|
id:6,
|
|
name:'榴莲',
|
|
},{
|
|
id:7,
|
|
name:'会心一笑',
|
|
},
|
|
],// 搜索历史记录
|
|
form:{
|
|
keyword:null,
|
|
type:null,
|
|
categoryId:null,//
|
|
page:1,
|
|
pageSize:20,
|
|
},
|
|
isShowSearch:false,
|
|
poductList:[],// 产品列表
|
|
imgSize:"min",// big:大，min:笑
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
const keyword = option.keyword;
|
|
if(keyword && keyword !==0 && keyword !== "undefined"){
|
|
this.form.keyword = keyword;
|
|
this.searchClickFun();
|
|
}
|
|
},
|
|
methods: {
|
|
jumpHome(){
|
|
uni.switchTab({
|
|
url: '/pages/home/home',
|
|
})
|
|
},
|
|
|
|
// 删除历史
|
|
searchHistoryDelete(item){
|
|
this.isShowSearch = false;
|
|
},
|
|
/**
|
|
* 查询产品
|
|
*/
|
|
async searchClick(item){
|
|
this.form.keyword = item.name;
|
|
this.searchGYLMall();
|
|
},
|
|
/**
|
|
* 查询产品
|
|
*/
|
|
async searchClickFun(){
|
|
const form = this.form;
|
|
|
|
const params = {
|
|
page:form.page,
|
|
pageSize:form.pageSize,
|
|
}
|
|
if(form.categoryId){
|
|
params.categoryId = form.categoryId;
|
|
}
|
|
if(form.keyword){
|
|
params.keyword = form.keyword;
|
|
}
|
|
if(form.type){
|
|
params.type = form.type;
|
|
}
|
|
const resp = await searchList(params);
|
|
if(resp && resp.bizcode === 100){
|
|
this.poductList = resp.data;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 切换图大小
|
|
*/
|
|
toggleImg(){
|
|
this.imgSize = this.imgSize === 'big'?'min':'big';
|
|
},
|
|
jumpInfo(item){
|
|
uni.navigateTo({
|
|
url: '/pages/other_package/productInfo/productInfo?id='+item.id,
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search_warp{
|
|
background-color: $app-bj;
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
.search_but_warp{
|
|
background: $app-bt-bj;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx 40rpx;
|
|
text-align: center;
|
|
color: #FFF;
|
|
}
|
|
|
|
.search_history{
|
|
padding: 60rpx 40rpx;
|
|
.search_history_title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.search_history_cotent{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.poduct_list{
|
|
.poduct_search_warp{
|
|
background: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10rpx 60rpx;
|
|
}
|
|
.poduct_content_warp{
|
|
padding: 30rpx;
|
|
height: calc(100vh - 340rpx);
|
|
overflow-y: auto;
|
|
.big_warp{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.big_item_warp{
|
|
width: 48%;
|
|
margin-bottom: 20rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
}
|
|
.big_item_content_warp{
|
|
padding: 20rpx;
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.min_warp{
|
|
.min_item_warp{
|
|
padding: 30rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.min_item_content_warp{
|
|
margin-left: 10rpx;
|
|
display: grid;
|
|
width: 100%;
|
|
}
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.total_or_quantity{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 10rpx 0 6rpx;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
}
|
|
.total_{
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
color: #F52D1D;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|